入社時に作った社内システムをInertia.jsで作り直した話 / Fusic Tech Live Vol 15 Makihara

Fusic Tech Live Vol.15～PHPカンファレンス福岡の余韻を楽しもう～

Transcript

1. ೖࣾ࣌ʹ࡞ͬͨࣾ಺γεςϜΛ Inertia.jsͰ࡞Γ௚ͨ͠࿩ 2023.08.30 ᴳݪ ཽ೭ี 1
2. ࣗݾ঺հ ᴳݪ ཽ೭ี Makihara Ryunosuke - From - ࠤլݝ - Work at - Fusic@෱Ԭ(2020~) - ๭ܯඋձࣾͷITࢠձࣾ@౦ژ(2018~2019) - Skill - લ৬Ͱ͸Linuxαʔό΍Ծ૝ج൫ͷӡ༻؅ཧ౳ - FusicͰ͸PHPͰͷγεςϜ։ൃ / AWSͷઃܭߏங - Like - ອըɺকعɺөը౳ - SNS - @ryu022304 2
3. 01 ࡞ͬͨࣾ಺γεςϜ
4. Fusicͷࣾ಺γεςϜ 4 https://www.youtube.com/watch?v=zMf_Y8VeZsY https://fusic.co.jp/doings?c=8 • FusicͰ͸OJTͷҰ؀ͱͯࣾ͠಺γεςϜΛ࡞੒͢Δ 
 ※৽ଔ͚ͩͰͳ͘ɺWebະܦݧͷத్΋ؚΉ
5. ࠾༻৘ใ؅ཧγεςϜʮTORNOʯϦϓϨʔε 5 ɾԠืऀ৘ใ؅ཧ ɾ໘઀৘ใ؅ཧ ɾ໘઀ϦϚΠϯμʔ ɾ౷ܭ৘ใग़ྗɹ౳
6. AWSߏ੒ 6
7. ٕज़ཁૉ(౰࣌) 7 Laravelબఆཧ༝ ɾ౰࣌LaravelͷҊ͕݅૿͖͑ͯͨ ɹλΠϛϯάͩͬͨ jQueryબఆཧ༝ ɾػೳ͸΄ͱΜͲجຊతͳCRUD ɾJSʹΑΔૢ࡞͕΄΅ෆཁ ɾۀ຿γεςϜͳͷͰɺ ɹϑϩϯτΤϯυ͸ڽΒͳͯ͘ྑ͍ Materializeબఆཧ༝ ɾ৭ຯ͕ϐϯΫ͔ͩͬͨΒ
8. ࣮ࡍͷιʔείʔυҰ෦ 8 • JS͸DatePicker΍Ұ෦ϑΥʔϜͷಈతૢ࡞ʹͷΈ࢖༻
9. 02 ϦϓϨʔεͷ͖͔͚ͬ
10. ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 10 ɹ2೥ؒӡ༻ͯ͠ಛʹେ͖ͳো֐ͳ͠ʂ ɹϤγʂ ɹͰ΋·ͩ௥Ճ͍ͨ͠ػೳ͸݁ߏ͋Δʂ
11. ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 11 ɹ͋Γ͕ͱ͏ʂ ɹϤγʂ ɹख఻͍·͢ʂ Πϯλʔϯੜ
12. ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 12 ɹͳΔ΄Ͳ…
13. ෆ۩߹ݪҼ 13 @if @foreach @if @foreach @endforeach @else @break @endif @endforeach <!-- ͜͜ʹॲཧΛ௥Ճ --> @endif @if @foreach @if @foreach @endforeach <!-- ͜͜ʹॲཧΛ௥Ճ --> @else @break @endif @endforeach @endif BladeϑΝΠϧ ɾBladeϑΝΠϧʹϩδοΫΛهड़͍ͯͯ͠ɺॲཧ͕෼͔Γʹ͔ͬͨ͘ ɾεςʔλε͕ଟ͘ɺͦΕʹΑͬͯදࣔΛ੾Γସ͑Δඞཁ͕͋Δ ɹ→ɹσϓϩΠલʹνΣοΫग़དྷΔΑ͏ʹ͍ͨ͠ ɹɹɹը໘ͷϩδοΫΛ෼͔Γ΍ͯࠜ͘͢͠ຊରࡦ΋͍ͨ͠ ʊਓਓਓਓਓʊ ʼɹΤϥʔɹʻ ʉY^Y^Y^Y^ʉ
14. ௥Ճཁ๬ 14 ɹग़དྷΒ͋ͬʂ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొ࿥ͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲౰
15. ௥Ճཁ๬ 15 ɹ͑ʂʂ ɹjQueryͰOutlookͷΧϨϯμʔػೳΛʂʁ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొ࿥ͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲౰
16. ϑϩϯτΤϯυվमͷػӡ 16 ɾjQuery͚ͩͰ͸ख͕͔͔ؒΓͦ͏ͳػೳͷ࣮૷͕ඞཁ ɾը໘දࣔͷमਖ਼ͷࡍʹ҆৺ײ͕ཉ͍͠ ɾ(ϑϩϯτΤϯυͷ࿅श͕͍ͨ͠) ϑϩϯτΤϯυΛ࡮৽ͯ͠ɺϢχοτςετΛॻ͜͏ʂ
17. 03 Inertia.jsͰͷվम
18. Inertia.js 18 • APIΛ࡞੒͢Δ͜ͱͳ͠ʹɺSPAΛߏங͢ΔͨΊͷ΋ͷ ϑϩϯτΤϯυ (Vue, React etc.) όοΫΤϯυ (Laravel, Rails etc.) GET /hoge JSON SPA ΫϥΠΞϯτ (Webϒϥ΢β etc.) όοΫΤϯυ (Laravel, Rails etc.) GET /hoge HTML ϞϊϦε • Inertia.js͸ݱ୅ͷϞϊϦε(The modern monolith)Λఏএ
19. Inertia.jsͷϝϦοτ 19 αʔόʔαΠυ ΫϥΠΞϯταΠυ ɾม਺Λͦͷ··౉ͤΔ ɾJSONΤϯίʔυෆཁ ɾBladeϑΝΠϧͷඳըͱ΄΅ಉ༷ͷॲཧ ɾGET /users ͷΑ͏ͳAPIΛୟ͘ॲཧ͕ෆཁ ɾೝূॲཧΛؾʹ͠ͳͯ͘ྑ͍ ɾBladeϑΝΠϧΛ΄΅ͦͷ··JSϑΝΠϧʹ ɹஔ͖׵͑ΔܗͰॻ͚Δ
20. FusicͷInertia.jsؔ࿈ొஃ 20 https://speakerdeck.com/tutida/laravel-x-inertia-dot-js-xian-dai-nomonorisu-niyoruoshou-qing-spa-kai-fa https://phpcon-fukuoka-2023.vercel.app/1
21. վम಺༰ 21
22. վम·Ͱͷεςοϓ 22 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
23. վम·Ͱͷεςοϓ 23 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
24. LaravelͷόʔδϣϯΛ্͛Δ 24 • (͔֬)ඞਢͰ͸ͳ͔͕ͬͨɺPHPͷαϙʔτظݶ΋ഭͬͯ ͍ͨͷͰɺ͜ͷػձʹશମΛόʔδϣϯΞοϓ • PHP: 7.3 → 8.1 • Laravel: 7 → 9 • factory΍middlewareͷҰ෦͕มߋ
25. վम·Ͱͷεςοϓ 25 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
26. Inertia.jsಋೖ 26 • جຊతʹInertia.jsެࣜͷҊ಺௨Γʹઃఆ͢Ε͹OK • ʮlaravel-corsʯͱ͍͏ύοέʔδ͚ͩ௥ՃͰඞཁͩͬͨ 
 (Laravel9͔Β͸σϑΥϧτͰೖ͍ͬͯΔͷͰॻ͔Ε͍ͯͳ͔ͬͨ)
27. Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(Laravelଆ) 27 ɾΞϓϦέʔγϣϯ֎ͷυϝΠϯ΁ͷϦμΠϨΫτ ɾϑϩϯτΤϯυͷඳը
28. Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(ϑϩϯτΤϯυଆ) 28
29. Inertia.jsಋೖ ϩάΠϯϖʔδͷվमલޙ 29 • جຊతʹݩͷσβΠϯΛ౿ऻ͢Δํ਑ͰϖʔδΛվम
30. վम·Ͱͷεςοϓ 30 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
31. ֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ 31 • Vitest • Vite؀ڥͰಈ࡞͢ΔϢχοτςετϑϨʔϜϫʔΫ • ࣮ߦ଎౓͕͔ͳΓ଎͍ • ίϯϙʔωϯτ͝ͱʹςετΛهड़ • શ෦ʹॻ͘ͱେมͳͷͰཻ౓͸ௐ੔
32. ֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ Vitest 32 • ෆ۩߹͕ൃੜ͍ͯͨ͠ϖʔδͷमਖ਼͕ɺ 
 ͋Δఔ౓҆৺ग़དྷΔΑ͏ʹͳͬͨ • Linkίϯϙʔωϯτ΍routeؔ਺༻ͷmockΛ 
 ॻ͘ඞཁ͕͋ͬͨ
33. վम·Ͱͷεςοϓ 33 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
34. Outlook࿈ܞػೳΛ௥Ճ 34 • FullCalendar + Microsoft Graph APIͰ࡞੒ • Πϯλʔϯੜ͕΄ͱΜͲҰਓͰ΍ͬͯ͘Εͨ
35. վम·Ͱͷεςοϓ 35 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ
36. શϖʔδमਖ਼ରԠ 36 • ޙ2ϖʔδ...
37. 04 ·ͱΊ
38. ·ͱΊ 38 • Blade+jQueryͰॻ͍͍ͯͨϖʔδͷ΄΅શͯΛ Inertia.js+React.jsͰஔ͖׵͑ͨ(໿10ϲ݄) • ϑϩϯτΤϯυͷϢχοτςετͰ҆৺ΛಘΒΕͨ • ௥Ճػೳ΋ϥΠϒϥϦΛ࢖ͬͯ୹޻਺Ͱ࣮૷ 
 ग़དྷΔΑ͏ʹͳͬͨ
39. ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You We are Hiring ! https://recruit.fusic.co.jp/