Designing in React: Why and How

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 ΋ͷ͍͢͝εϐʔυͰ
 ৽͍͠௅ઓ͕ߦΘΕ͍ͯΔ