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