Designing in React: Why and How

Designing in React: Why and How

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

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

March 05, 2016
Tweet

Transcript

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

  2. @amagitakayosi

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

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

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

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

  7. 3FBDUͷྺ࢙

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

  9. None
  10. 3FBDU "OHVMBS

  11. 3FBDUͷྑ͍ͱ͜Ζ

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

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

  14. ίϯϙʔωϯτࢦ޲ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ͸
 શͯͷৼΔ෣͍͕CBSͷ஋Ͱܾ·Δ w 7JSUVBM%0. w %0.Λ௚઀৮Εͳ͍ w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍

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

  16. ࢀߟ3FBDUGPS%FTJHOFST IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU FOPVHIKRVFSZUPHFUCZ

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

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

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

  20. 'VODUJPOBM 3FBDUJWF 1SPHSBNNJOH

  21. w ؔ਺ܕݴޠͷӨڹΛड͚ͨ
 ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ w *NNVUBCMF+4 0N ʜʜ

  22. 3FBDU/BUJWF

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

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

  25. ʢ◞‸◟ʣ

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

  27. BEM

  28. #&.͕ྲྀߦ w #MPDL &MFNFOU .PEJpFSʹ෼͚ͯ
 ελΠϧΛॻ͘ख๏ w 3FBDUͱ#&.͸૬ੑ͕͍͍ w ίϯϙʔωϯτ㲈#MPDL

  29. None
  30. Block Element Modifier

  31. CSS in JS

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

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

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

  35. None
  36. $44JO+4ొ৔ w 3FBDUίϯϙʔωϯτఆٛ಺Ͱ
 TUZMFଐੑʹελΠϧΛࢦఆ w ม਺ɺؔ਺ɺͳΜͰ΋࢖͑Δ

  37. CSS in JSͷίʔυྫ

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

  39. Animation

  40. 3FBDUඪ४ͷΞχϝʔγϣϯ w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ
 ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P? ʗʯ w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ
 ελΠϧΛ౰ͯΒΕΔ

  41. 3FBDU$445S SZͷ࢖͍ํ w 3FBDU$445SBOTJUJPO(SPVQͰ
 ର৅ͷίϯϙʔωϯτΛXSBQ w FOUFS MFBWF FOUFSBDUJWF౳ͷΫϥεʹ
 ελΠϧΛهड़

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

  43. SFBDUNPUJPO w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST  w FBTJOHؔ਺ΛબͿͷͰ͸ͳ͘ɺ
 όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ

  44. όωͷߗ͞

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

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

  47. 8FC"OJNBUJPOT"1* w $44 47(ʹͭͮ͘
 ৽͍͠Ξχϝʔγϣϯ"1* w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε
 ࠶ੜఀࢭר͖໭͠Մೳ w

    ࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ
  48. ·ͱΊ

  49. ΈΜͳ3FBDUͰ༡΅͏ʂʂ w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ͸
 ҰઢΛը͍ͯ͠Δ w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ w ΋ͷ͍͢͝εϐʔυͰ
 ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ