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

Transcript

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

   View Slide

2. ©2018 Wantedly, Inc.
   Naoki Kobayashi
   GitHub: @kobayang
   Twitter: @kbys_02
   I’m an Engineer @Wantedly
   ৽ଔ1೥໨
   Ruby / Rails / JS / TS / React
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

6. ©2018 Wantedly, Inc.
   

   View Slide

7. ©2018 Wantedly, Inc.
   

   View Slide

8. ©2018 Wantedly, Inc.
   

   View Slide

9. ©2018 Wantedly, Inc.
   

   View Slide

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

    View Slide

11. ©2018 Wantedly, Inc.
    Do not support horizontal lists with multiple rows
    https://github.com/atlassian/react-beautiful-dnd/issues/316
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. ©2018 Wantedly, Inc.
    

    View Slide

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

    View Slide

19. ©2018 Wantedly, Inc.
    Thank you
    

    View Slide