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

Designing in React: Why and How

Designing in React: Why and How

FRONTEND CONFERENCE 2016
http://kfug.jp/frontconf2016/

fand/amagitakayosi

March 05, 2016
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

Transcript

  1. Designing in
    id:amagitakayosi
    WHY and HOW?
    React

    View Slide

  2. @amagitakayosi

    View Slide

  3. ۀ຿Ͱ3FBDU࢖ͬͯ·͢

    View Slide

  4. Έͳ͞Μ
    3FBDU
    ࢖ͬͯ·͔͢ʁ

    View Slide

  5. ࠓ೔͸
    3FBDUͱ͸ʁ
    ͱ͍͏࿩͸͠·ͤΜ

    View Slide

  6. ͔ΘΓʹ
    3FBDUք۾Ͱ
    Կ͕ى͖ͯΔͷʁ
    ͱ͍͏࿩Λ͠·͢

    View Slide

  7. 3FBDUͷྺ࢙

    View Slide

  8. ✨3FBDU஀ੜ✨
    w ެ։
    w େن໛ͳίʔυϕʔεͰ΋଱͑ΔΑ͏ʹ
    w ࠶ར༻Մೳͳίϯϙʔωϯτ
    w ୯ํ޲ͳσʔλϑϩʔ

    View Slide

  9. View Slide

  10. 3FBDU
    "OHVMBS

    View Slide

  11. 3FBDUͷྑ͍ͱ͜Ζ

    View Slide

  12. γϯϓϧ
    ଎͍
    ςετ͠΍͍͢
    ৘ใ͕๛෋
    ࣮੷͕͋Δ
    *NNVUBCMF
    *TPNPSQIJD
    'VUVSFPSJFOUFE

    View Slide

  13. ैདྷͷϑϨʔϜϫʔΫͱͷҧ͍
    w ίϯϙʔωϯτࢦ޲ʹͳΓ΍͍͢
    w ୯ํ޲ͳσʔλϑϩʔ

    View Slide

  14. ίϯϙʔωϯτࢦ޲
    w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸

    શͯͷৼΔ෣͍͕CBSͷ஋Ͱܾ·Δ
    w 7JSUVBM%0.
    w %0.Λ௚઀৮Εͳ͍
    w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍

    View Slide

  15. ୯ํ޲ͳσʔλϑϩʔ
    w ୤XBZCJOEJOH
    w ࢠ͕਌ͷ஋Λॻ͖׵͑Δ͜ͱ͕ͳ͍ʂ
    w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸

    CBSͷ஋ΛมߋͰ͖ͳ͍

    View Slide

  16. ࢀߟ3FBDUGPS%FTJHOFST
    IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU
    FOPVHIKRVFSZUPHFUCZ

    View Slide

  17. 3FBDUք۾ͷϒʔϜ
    w 'MVYϑϨʔϜϫʔΫઓ૪
    w *NNVUBCMF ؔ਺ܕ '31
    w 3FBDU/BUJWF

    View Slide

  18. 'MVYઓ૪
    QIPUPCZ+BTPO"4BNGJFME
    IUUQTXXXGMJDLSDPNQIPUPT!/

    View Slide

  19. w 3FBDU͸ͨͩͷ7JFXϥΠϒϥϦ
    w 'MVYͱ͍͏ઃܭख๏͕ྲྀߦ
    w ϑϨʔϜϫʔΫ͕ཚཱ

    View Slide

  20. 'VODUJPOBM
    3FBDUJWF
    1SPHSBNNJOH

    View Slide

  21. w ؔ਺ܕݴޠͷӨڹΛड͚ͨ

    ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ
    w *NNVUBCMF+4 0N ʜʜ

    View Slide

  22. 3FBDU/BUJWF

    View Slide

  23. w 3FBDUͰJ04"OESPJEΞϓϦΛ։ൃ
    w +4࣮ߦΤϯδϯ͕σόΠε্Ͱ૸Δ
    w Ϗϧυͳ͠Ͱ+4ΛϦϩʔυ

    View Slide

  24. Ͱ΋ɺ3FBDUͷσβΠϯͬͯʜʜ
    w σβΠφʔ͸৮ΓͮΒ͍ΜͰ͠ΐʁ
    w ςϯϓϨʔτ͍͡Γʹ͍͘
    w Ξχϝʔγϣϯ೉͍͠
    w +4ॻ͚ͳ͍ͱ͍͚ͳ͍ʁʁ

    View Slide

  25. ʢ◞‸◟ʣ

    View Slide

  26. σβΠϯपΓͰ΋ಈ͖͕ʂʂ
    w #&.
    w $44JO+4
    w ֤ΞχϝʔγϣϯϥΠϒϥϦ

    View Slide

  27. BEM

    View Slide

  28. #&.͕ྲྀߦ
    w #MPDL &MFNFOU .PEJpFSʹ෼͚ͯ

    ελΠϧΛॻ͘ख๏
    w 3FBDUͱ#&.͸૬ੑ͕͍͍
    w ίϯϙʔωϯτ㲈#MPDL

    View Slide

  29. View Slide

  30. Block
    Element
    Modifier

    View Slide

  31. CSS in JS

    View Slide

  32. $44͸᠘ͩΒ͚
    w શ෦άϩʔόϧ
    w ΧεέʔσΟϯάɺ༏ઌ౓
    w ม਺ɺؔ਺͔ͭ͑ͳ͍
    w ܧঝͰ͖ͳ͍ʜʜ

    View Slide

  33. ϓϦϓϩηοαͷ࣌୅
    w 4BTT -FTT 4UZMVT ʜʜ
    w ࠷ۙͩͱ1PTU$44ͱ͔

    View Slide

  34. ͦΕ+4Ͱྑ͘Ͷʁ
    3FBDU։ൃϝϯόʔ
    $ISJTUPQIFS$IFEFBV

    View Slide

  35. View Slide

  36. $44JO+4ొ৔
    w 3FBDUίϯϙʔωϯτఆٛ಺Ͱ

    TUZMFଐੑʹελΠϧΛࢦఆ
    w ม਺ɺؔ਺ɺͳΜͰ΋࢖͑Δ

    View Slide

  37. CSS in JSͷίʔυྫ

    View Slide

  38. ओͳ$44JO+4ϥΠϒϥϦ
    w 3BEJVN%FDPSBUPSͰίϯϙʔωϯτΛϥο
    ϓ
    w $4+45FNQMBUF4USJOHͰελΠϧΛهड़
    w $44.PEVMFT$44ϑΝΠϧΛಡΈࠐΉ

    View Slide

  39. Animation

    View Slide

  40. 3FBDUඪ४ͷΞχϝʔγϣϯ
    w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ

    ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P?
    ʗʯ
    w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ

    ελΠϧΛ౰ͯΒΕΔ

    View Slide

  41. 3FBDU$445S SZͷ࢖͍ํ
    w 3FBDU$445SBOTJUJPO(SPVQͰ

    ର৅ͷίϯϙʔωϯτΛXSBQ
    w FOUFS MFBWF FOUFSBDUJWF౳ͷΫϥεʹ

    ελΠϧΛهड़

    View Slide

  42. ओͳΞχϝʔγϣϯϥΠϒϥϦ
    w SFBDUNPUJPO
    w SFBDUXFCBOJNBUJPO
    w SFBDUWFMPDJUZ

    View Slide

  43. SFBDUNPUJPO
    w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST

    w FBTJOHؔ਺ΛબͿͷͰ͸ͳ͘ɺ

    όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ

    View Slide

  44. όωͷߗ͞

    View Slide

  45. SFBDUWFMPDJUZ
    w 7FMPDJUZKTͷϥούʔ
    w K2VFSZ࣌୅͔Β͓ੈ࿩ʹͳͬͯͨํ΋

    ଟ͍͸ͣ

    View Slide

  46. SFBDUXFCBOJNBUJPO
    w 8FC"OJNBUJPOT"1*ͷϥούʔ
    w ʹެ։͞Εͨ͹͔Γʂ

    View Slide

  47. 8FC"OJNBUJPOT"1*
    w $44 47(ʹͭͮ͘

    ৽͍͠Ξχϝʔγϣϯ"1*
    w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε

    ࠶ੜఀࢭר͖໭͠Մೳ
    w ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ

    View Slide

  48. ·ͱΊ

    View Slide

  49. ΈΜͳ3FBDUͰ༡΅͏ʂʂ
    w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ͸

    ҰઢΛը͍ͯ͠Δ
    w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ
    w ΋ͷ͍͢͝εϐʔυͰ

    ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ

    View Slide