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

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