脱レガシーフロントエンドのために知っておいたほうがいいこと

2020/1/19 Kanazawa.js meetup#01

Transcript

1. ୤ϨΨγʔϑϩϯτΤϯυͷͨΊʹ
   ஌͓͍ͬͯͨ΄͏͕͍͍͜ͱ
   ,BOB[BXBKT.FFUVQ
   

   View Slide

2. ࣗݾ঺հ
   !NVHJ@VOP
   ഴౡҰ
   )BKJNF.VHJTIJNB
   5PZBNBSC
   IUUQTUPZBNBSCHJUIVCJP
   

   View Slide

3. View Slide

4. ʮϨΨγʔϑϩϯτΤϯυʯ
   Ͱ͔͢ʁ
   ໰
   

   View Slide

5. ݴ༿͔Βඬ͏ࢮͷ߳Γ
   

   View Slide

6. ʮ͏ͪ͸ϞμϯͳͷͰؔ܎ͳ͍ͳʙʯ
   

   View Slide

7. ʮ͏ͪ͸ϞμϯͳͷͰؔ܎ͳ͍ͳʙʯ
   ຊ౰ʹʁ
   

   View Slide

8. ϨΨγʔMFHBDZ
   Ҩ࢈ɻઌਓͷҨ෺ɻ
   ࣌୅஗Εͷ΋ͷɻ
   ίτόϯΫ

   IUUQTLPUPCBOLKQXPSEϨΨγʔ
   

   View Slide

9. ʮ͏ͪ͸ϞμϯͳͷͰؔ܎ͳ͍ͳʙʯ
   ͍·͸
   

   View Slide

10. ϨΨγʔ͸ਓྨʹฏ౳
    

    View Slide

11. ޲͖߹͍ํΛ஌͓ͬͯ͜͏
    

    View Slide

12. ͳΜͷͨΊʹ΍Δʁ
    
    

    View Slide

13. ࠷ॳʹߟ͍͑ͨ͜ͱ
    

    View Slide

14. ຊ౰ʹ΍Δ
    

    View Slide

15. ʮίʔυ͕ࠅ͗ͯͭ͢Β͍ʯ
    ʮ΍ͬͯΒΕͳ͍ʯ
    ʮϞμϯͳίʔυΛॻ͖͍ͨʯ
    ʮશ෦௚ͧ͢ʂʂʯ
    

    View Slide

16. ྫྷ੩ʹͳΖ͏
    ؾ࣋ͪ͸Θ͔Δ͚Ͳ
    
    

    View Slide

17. ϨΨγʔʹѱͰ͸ͳ͍
    ʮಈ͍͍ͯΔʯ͸ແࢹͰ͖ͳ͍Ձ஋
    

    View Slide

18. վળ࡞ۀ͸૝૾ΑΓΩπ͍
    ɾӨڹൣғͷ޿͞
    ɾటष͍஍ಓͳ࡞ۀ
    ɾऴΘΓͷݟ͑ͳ͞
    ɾҙຯ͋Δͷʜ ͱ͍͏എಙײ
    

    View Slide

19. lԿΛ΍Δͷ͔ͱಉ͘͡Β͍ɺ
    ԿΛ΍Βͳ͍͔͕ॏཁͩz
    ʮΞδϟΠϧαϜϥΠୡਓ։ൃऀ΁ͷಓʯQ
    

    View Slide

20. ʮ΍Βͳ͍ʯ΋Ձ஋͋Δܾஅ
    

    View Slide

21. lվળͰಘ͍ͨ΋ͷzΛ໌จԽ͢Δ
    ɾ։ൃ଎౓Λ্͍͛ͨ
    ɾϞνϕʔγϣϯΛ্͍͛ͨ
    ɾ࠾༻ͷͨΊʹ؀ڥΛ੔͍͑ͨ
    ɾςετΛ੔උ͍ͨ͠
    ɾͳͲʜ
    

    View Slide

22. ࠷ޙ·Ͱࢧ͑Δͷ͸
    ࠷ॳͷϞνϕʔγϣϯ
    

    View Slide

23. ୭͕΍Δʁ
    
    

    View Slide

24. ୤ϨΨγʔ࡞ۀΛ୭͕΍Δ͔
    

    View Slide

25. Α͋͘Δରࡦྫ
    ʮڧ͍ਓΛޏ͓͏ʂʯ
    

    View Slide

26. Α͋͘Δରࡦྫ
    ʮڧ͍ਓΛޏ͓͏ʂʯ
    ݸਓతͳݟղˠݱ࣮తʹ͸Ή͔͍ͣ͠
    ͳΜͰʁ▶︎
    

    View Slide

27. ϨΨγʔଆͷ஌ࣝ
    Ϟμϯଆͷ஌ࣝ
    ୤ϨΨγʔʹඞཁͳ΋ͷ
    

    View Slide

28. ϨΨγʔଆͷ஌ࣝ
    Ϟμϯଆͷ஌ࣝ
    υϝΠϯ஌ࣝ
    ୤ϨΨγʔ΁ͷؔ৺
    ΍Γ͖ΔϞνϕʔγϣϯ
    ୤ϨΨγʔʹඞཁͳ΋ͷ
    

    View Slide

29. ϨΨγʔଆͷ஌ࣝ
    Ϟμϯଆͷ஌ࣝ
    υϝΠϯ஌ࣝ
    ୤ϨΨγʔ΁ͷؔ৺
    ΍Γ͖ΔϞνϕʔγϣϯ
    ୤ϨΨγʔʹඞཁͳ΋ͷ
    ͍ͳ͍
    ۚͷ஄ؙΛܸͯͳ͍ݶΓ
    
    

    View Slide

30. ୤ϨΨγʔ࡞ۀΛ΍Γ͍͔ͨʁͱ͍͏࿩
    ˝
    

    View Slide

31. ୤ϨΨγʔ࡞ۀΛ΍Γ͍͔ͨʁͱ͍͏࿩
    Ͱ͖Ε͹΍Γͨ͘ͳ͍
    ʢ͓ͦΒ͘ଟ͘ͷͻͱ͸ʣ
    ˝
    

    View Slide

32. ҰఆͷϨϕϧ·Ͱ͸
    ࣗ෼ͨͪͰ΍Δ֮ޛ΋ඞཁ
    

    View Slide

33. ʮͦ͏͸ݴͬͯ΋࣌ؒͳ͍ʯ
    ʮཧ૝࿦Ͱ͸ʁʯ
    ʮऴΘΔؾ͕͠ͳ͍ʯ
    

    View Slide

34. ཱͪ޲͔͏ίπ
    
    

    View Slide

35. ʢ৭ʑ͋Δ͚Ͳʣࠓ೔఻͍͑ͨͷ͸ͻͱͭ
    ˝
    

    View Slide

36. ʮখ͘͢͞Δʯ
    ˠ
    ʢ৭ʑ͋Δ͚Ͳʣࠓ೔఻͍͑ͨͷ͸ͻͱͭ
    ˝
    

    View Slide

37. ʮখ͘͢͞Δʯʹ΋৭ʑ͋Δ
    

    View Slide

38. શ෦΍Γͨ͘ͳΔ
    ɾ3FBDUʹ͠·͢
    ɾςετॻ͍ͯ$*ճ͠·͢
    ɾ&4-JOUಋೖ͠·͢
    ɾ5ZQF4DSJQU΋ೖΕ·͢
    ɾঢ়ଶ؅ཧ΋ಋೖ͠·͢
    ʮείʔϓʯΛখ͘͢͞Δ
    

    View Slide

39. ɾֶशίετ
    ɾΰʔϧ͕ݟ͑ͳ͍
    ɾ׬਱Ͱ͖ͳ͍Մೳੑ
    ฒߦͨ͠ແܭըͳணख͸ϋΠϦεΫ
    ˝
    

    View Slide

40. ɾֶशίετ
    ɾΰʔϧ͕ݟ͑ͳ͍
    ɾ׬਱Ͱ͖ͳ͍Մೳੑ
    ฒߦͨ͠ແܭըͳணख͸ϋΠϦεΫ
    ࠷ѱͷέʔεͰ͸ϨΨγʔ͕૿͑Δ
    ˝
    

    View Slide

41. ·ͣ͸5ZQF4DSJQUͷಋೖͷΈ
    ͨͱ͑͹ʜ
    

    View Slide

42. ·ͣ͸5ZQF4DSJQUͷಋೖͷΈ
    ˝΋ͬͱখ͘͢͞Δ
    +4ͷ··54$Λ௨͚ͩ͢
    BOZڐ༰ͰίΞϩδοΫΛ54Խ
    શମΛ54Խ
    OP*NQMJDU"OZ༗ޮԽ
    ͨͱ͑͹ʜ
    

    View Slide

43. ʮظؒʯΛখ͘͢͞Δ
    ʮ13αΠζʯΛখ͘͢͞Δ
    ʮνʔϜن໛ʯΛখ͘͢͞Δ
    ɾվળͷαΠΫϧΛ୹͍ظؒʹ͢Δ
    ɾେ͖͍13ͷϨϏϡʔ͸ͭΒ͍
    ɾίϯϑϦΫτͷϦεΫΛԼ͛Δ
    ɾগਓ਺͔Β࢝Ίͯ؅ཧίετΛԼ͛Δ
    

    View Slide

44. ͞·͟·ͳ؍఺͔Βখ͘͢͞Δ
    ɾϦεΫܰݮʹͭͳ͕Δ
    ɾઓུతఫୀͷΧʔυΛ࢒͢
    ɾʮશ෦ऴΘΔͷʁʯͰ͸ͳ͘

    ɹʮ͜͜·ͰऴΘͬͨʯΛੵΉ
    

    View Slide

45. ҆શʹվળ͍ͯ͜͠͏ʂ
    

    View Slide