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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    IUUQTLPUPCBOLKQXPSEϨΨγʔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. ͳΜͷͨΊʹ΍Δʁ

    View full-size slide

  12. ࠷ॳʹߟ͍͑ͨ͜ͱ

    View full-size slide

  13. ຊ౰ʹ΍Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. ཱͪ޲͔͏ίπ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide