Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-beautiful-dnd を使いたかった話

Eef36ddd9ee17bc2077ac2cf754e84e1?s=47 kobayang
June 26, 2018
Programming
2
1.4k

react-beautiful-dnd を使いたかった話

Eef36ddd9ee17bc2077ac2cf754e84e1?s=128

kobayang

June 26, 2018
Tweet

More Decks by kobayang

See All by kobayang
Apollo Client Cache
Eef36ddd9ee17bc2077ac2cf754e84e1?s=48 kobayang
0
630
React Hooks を安全に使う
Eef36ddd9ee17bc2077ac2cf754e84e1?s=48 kobayang
2
990
Puppeteerを導入してみた話
Eef36ddd9ee17bc2077ac2cf754e84e1?s=48 kobayang
2
81k
ゼロから学ぶWeb Authentication API
Eef36ddd9ee17bc2077ac2cf754e84e1?s=48 kobayang
0
810

Other Decks in Programming

See All in Programming
段階的な技術的負債の解消方法.pdf
41e5cd2b99a8e7c84f91a8137c8be3ed?s=48 ko2ic
2
950
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
920
FutureCon 2022 FlutterアプリのPerformance測定
4affdb6a9878e509da7ca41a87051352?s=48 harukafujita
0
140
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
2
150
SGGとは
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
440
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
C54e383f9597a63832fcc1c2547c7540?s=48 turamy
1
210
モデルの定義に基づくバリデーションを実現するためのpydantic入門
4b46b5f1acab7f5a64c0036c1fc39f31?s=48 daikikatsuragawa
0
120
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
250
2022年のモダンCSS改
Ffb0af5bf5cb5a0b728ed94418a096f5?s=48 tonkotsuboy_com
24
17k
Amazon Lookout for Visionで 筆跡鑑定してみた
B3cc0e7ba8e6c941f08a2e6f69d3e4c2?s=48 cmnakamurashogo
0
180
パスワードに関する最近の動向
8fd1ae6548d5ab14139c8d8032b76ee1?s=48 kenchan0130
1
330
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
150

Featured

See All Featured
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
29k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
13
1.4k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
47
4k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.6k

Transcript

  1. ©2018 Wantedly, Inc. react-beautiful-dnd Λ࢖͍͔ͨͬͨ࿩ Roppongi.js #4 25.June.2018 - Naoki

    Kobayashi

  2. ©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m

    an Engineer @Wantedly ৽ଔ1೥໨ Ruby / Rails / JS / TS / React

  3. ©2018 Wantedly, Inc. Motivation - ձࣾϖʔδͷϦχϡʔΞϧ - ΠϯϥΠϯฤू - ϝϯόʔϖʔδͷDnDฤू

    - ReactͰdndͷ࣮૷

  4. ©2018 Wantedly, Inc. What is react-beautiful-dnd?

  5. ©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

  6. ©2018 Wantedly, Inc.

  7. ©2018 Wantedly, Inc.

  8. ©2018 Wantedly, Inc.

  9. ©2018 Wantedly, Inc.

  10. ©2018 Wantedly, Inc. react-beautiful-dnd Λ࢖͑ͳ͔ͬͨΘ͚

  11. ©2018 Wantedly, Inc. Do not support horizontal lists with multiple

    rows https://github.com/atlassian/react-beautiful-dnd/issues/316

  12. ©2018 Wantedly, Inc. ғ·Εͨ෦෼͸ `flex-wrap: wrap` Ͱ ࣮૷͞Ε͍ͯΔ Do not

    support horizontal lists with multiple rows

  13. ©2018 Wantedly, Inc. ͜Εʹؾ෇͔ͣPR͕1ͭແବʹ

  14. ©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝౓ͷߴ͍React DnDΛ࢖͏ 3. σβΠϯࣗମΛमਖ਼͢Δ

    ͱΓ͑Δಓ

  15. ©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝౓ͷߴ͍React DnDΛ࢖͏ 3. σβΠϯࣗମΛमਖ਼͢Δ

    ͱͬͨಓ

  16. ©2018 Wantedly, Inc. React DnD DnD͸ࣗ༝౓͕ߴ͍൓໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷ΋ͷ͸ ࣗྗͰ࣮૷͢Δඞཁ͕͋ͬͨ - Animation

    - Mouse , keyboard and touch - Multi drag - Render props pattern

  17. ©2018 Wantedly, Inc.

  18. ©2018 Wantedly, Inc. ReactͰDnDΛ࢖͏͜ͱͰσʔλͱDnDϩδοΫΛ੾Γ཭͢͜ͱ͕Ͱ͖Δ ༏ΕͨϥΠϒϥϦΛ࢖͍ͨͯ͘΋ඞཁػೳΛຬ͍ͨͯ͠Δ͔ݕূ͢Δ͜ͱ͸େ੾ react-beautiful-dnd Λ࢖͍͔ͨͬͨ ·ͱΊ

  19. ©2018 Wantedly, Inc. Thank you