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

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

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

2020/1/19 Kanazawa.js meetup#01

Hajime Mugishima

January 19, 2020
Tweet

More Decks by Hajime Mugishima

Other Decks in Technology

Transcript

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

    View Slide

  2. ࣗݾ঺հ
    [email protected]
    ഴౡҰ
    )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