$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-beautiful-dnd を使いたかった話
Search
kobayang
June 26, 2018
Programming
2
1.8k
react-beautiful-dnd を使いたかった話
kobayang
June 26, 2018
Tweet
Share
More Decks by kobayang
See All by kobayang
React Suspenseを使って遷移体験を向上させる
kobayang
4
1.8k
Apollo Client Cache
kobayang
0
1.1k
React Hooks を安全に使う
kobayang
2
1.3k
Puppeteerを導入してみた話
kobayang
2
150k
ゼロから学ぶWeb Authentication API
kobayang
0
1.1k
Other Decks in Programming
See All in Programming
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
2
580
Vue.js_好きに捧ぐ Nuxt Hub で簡単に始めるCloudflare
xiombatsg
1
120
カンファレンスでLTしました / kashiwarb5
nhayato
0
110
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
3.5k
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
2.8k
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
460
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
6.7k
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
730
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.7k
CSC305 Lecture 25
javiergs
PRO
0
110
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
350
Leverage LLMs in Java with LangChain4j and Quarkus
hollycummins
0
170
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
240
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
80
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Gamification - CAS2011
davidbonilla
80
5.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Adopting Sorbet at Scale
ufuk
73
9.1k
The Pragmatic Product Professional
lauravandoore
32
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
How STYLIGHT went responsive
nonsquared
95
5.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
©2018 Wantedly, Inc. react-beautiful-dnd Λ͍͔ͨͬͨ Roppongi.js #4 25.June.2018 - Naoki
Kobayashi
©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m
an Engineer @Wantedly ৽ଔ1 Ruby / Rails / JS / TS / React
©2018 Wantedly, Inc. Motivation - ձࣾϖʔδͷϦχϡʔΞϧ - ΠϯϥΠϯฤू - ϝϯόʔϖʔδͷDnDฤू
- ReactͰdndͷ࣮
©2018 Wantedly, Inc. What is react-beautiful-dnd?
©2018 Wantedly, Inc. react-beautiful-dnd Beautiful, accessible drag and drop for
lists with React.js - Data driven - Vertical ÷ and Horizontal lists 㲗 - Animation - Mouse , keyboard and touch - Multi drag - Render props pattern Beautiful
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. react-beautiful-dnd Λ͑ͳ͔ͬͨΘ͚
©2018 Wantedly, Inc. Do not support horizontal lists with multiple
rows https://github.com/atlassian/react-beautiful-dnd/issues/316
©2018 Wantedly, Inc. ғ·Εͨ෦ `flex-wrap: wrap` Ͱ ࣮͞Ε͍ͯΔ Do not
support horizontal lists with multiple rows
©2018 Wantedly, Inc. ͜Εʹؾ͔ͣPR͕1ͭແବʹ
©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏ 3. σβΠϯࣗମΛमਖ਼͢Δ
ͱΓ͑Δಓ
©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏ 3. σβΠϯࣗମΛमਖ਼͢Δ
ͱͬͨಓ
©2018 Wantedly, Inc. React DnD DnDࣗ༝͕ߴ͍໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷͷ ࣗྗͰ࣮͢Δඞཁ͕͋ͬͨ - Animation
- Mouse , keyboard and touch - Multi drag - Render props pattern
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. ReactͰDnDΛ͏͜ͱͰσʔλͱDnDϩδοΫΛΓ͢͜ͱ͕Ͱ͖Δ ༏ΕͨϥΠϒϥϦΛ͍ͨͯ͘ඞཁػೳΛຬ͍ͨͯ͠Δ͔ݕূ͢Δ͜ͱେ react-beautiful-dnd Λ͍͔ͨͬͨ ·ͱΊ
©2018 Wantedly, Inc. Thank you