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

Slide 1

Slide 1 text

ೖࣾ࣌ʹ࡞ͬͨࣾ಺γεςϜΛ Inertia.jsͰ࡞Γ௚ͨ͠࿩ 2023.08.30 ᴳݪ ཽ೭ี 1

Slide 2

Slide 2 text

ࣗݾ঺հ ᴳݪ ཽ೭ี Makihara Ryunosuke - From - ࠤլݝ - Work at - Fusic@෱Ԭ(2020~) - ๭ܯඋձࣾͷITࢠձࣾ@౦ژ(2018~2019) - Skill - લ৬Ͱ͸Linuxαʔό΍Ծ૝ج൫ͷӡ༻؅ཧ౳ - FusicͰ͸PHPͰͷγεςϜ։ൃ / AWSͷઃܭߏங - Like - ອըɺকعɺөը౳ - SNS - @ryu022304 2

Slide 3

Slide 3 text

01 ࡞ͬͨࣾ಺γεςϜ

Slide 4

Slide 4 text

Fusicͷࣾ಺γεςϜ 4 https://www.youtube.com/watch?v=zMf_Y8VeZsY https://fusic.co.jp/doings?c=8 • FusicͰ͸OJTͷҰ؀ͱͯࣾ͠಺γεςϜΛ࡞੒͢Δ   ※৽ଔ͚ͩͰͳ͘ɺWebະܦݧͷத్΋ؚΉ

Slide 5

Slide 5 text

࠾༻৘ใ؅ཧγεςϜʮTORNOʯϦϓϨʔε 5 ɾԠืऀ৘ใ؅ཧ ɾ໘઀৘ใ؅ཧ ɾ໘઀ϦϚΠϯμʔ ɾ౷ܭ৘ใग़ྗɹ౳

Slide 6

Slide 6 text

AWSߏ੒ 6

Slide 7

Slide 7 text

ٕज़ཁૉ(౰࣌) 7 Laravelબఆཧ༝ ɾ౰࣌LaravelͷҊ͕݅૿͖͑ͯͨ ɹλΠϛϯάͩͬͨ jQueryબఆཧ༝ ɾػೳ͸΄ͱΜͲجຊతͳCRUD ɾJSʹΑΔૢ࡞͕΄΅ෆཁ ɾۀ຿γεςϜͳͷͰɺ ɹϑϩϯτΤϯυ͸ڽΒͳͯ͘ྑ͍ Materializeબఆཧ༝ ɾ৭ຯ͕ϐϯΫ͔ͩͬͨΒ

Slide 8

Slide 8 text

࣮ࡍͷιʔείʔυҰ෦ 8 • JS͸DatePicker΍Ұ෦ϑΥʔϜͷಈతૢ࡞ʹͷΈ࢖༻

Slide 9

Slide 9 text

02 ϦϓϨʔεͷ͖͔͚ͬ

Slide 10

Slide 10 text

ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 10 ɹ2೥ؒӡ༻ͯ͠ಛʹେ͖ͳো֐ͳ͠ʂ ɹϤγʂ ɹͰ΋·ͩ௥Ճ͍ͨ͠ػೳ͸݁ߏ͋Δʂ

Slide 11

Slide 11 text

ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 11 ɹ͋Γ͕ͱ͏ʂ ɹϤγʂ ɹख఻͍·͢ʂ Πϯλʔϯੜ

Slide 12

Slide 12 text

ࣗ෼Ҏ֎ͷ։ൃϝϯόʔͷ௥Ճ 12 ɹͳΔ΄Ͳ…

Slide 13

Slide 13 text

ෆ۩߹ݪҼ 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^ʉ

Slide 14

Slide 14 text

௥Ճཁ๬ 14 ɹग़དྷΒ͋ͬʂ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొ࿥ͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲౰

Slide 15

Slide 15 text

௥Ճཁ๬ 15 ɹ͑ʂʂ ɹjQueryͰOutlookͷΧϨϯμʔػೳΛʂʁ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొ࿥ͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲౰

Slide 16

Slide 16 text

ϑϩϯτΤϯυվमͷػӡ 16 ɾjQuery͚ͩͰ͸ख͕͔͔ؒΓͦ͏ͳػೳͷ࣮૷͕ඞཁ ɾը໘දࣔͷमਖ਼ͷࡍʹ҆৺ײ͕ཉ͍͠ ɾ(ϑϩϯτΤϯυͷ࿅श͕͍ͨ͠) ϑϩϯτΤϯυΛ࡮৽ͯ͠ɺϢχοτςετΛॻ͜͏ʂ

Slide 17

Slide 17 text

03 Inertia.jsͰͷվम

Slide 18

Slide 18 text

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)Λఏএ

Slide 19

Slide 19 text

Inertia.jsͷϝϦοτ 19 αʔόʔαΠυ ΫϥΠΞϯταΠυ ɾม਺Λͦͷ··౉ͤΔ ɾJSONΤϯίʔυෆཁ ɾBladeϑΝΠϧͷඳըͱ΄΅ಉ༷ͷॲཧ ɾGET /users ͷΑ͏ͳAPIΛୟ͘ॲཧ͕ෆཁ ɾೝূॲཧΛؾʹ͠ͳͯ͘ྑ͍ ɾBladeϑΝΠϧΛ΄΅ͦͷ··JSϑΝΠϧʹ ɹஔ͖׵͑ΔܗͰॻ͚Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

վम಺༰ 21

Slide 22

Slide 22 text

վम·Ͱͷεςοϓ 22 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 23

Slide 23 text

վम·Ͱͷεςοϓ 23 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 24

Slide 24 text

LaravelͷόʔδϣϯΛ্͛Δ 24 • (͔֬)ඞਢͰ͸ͳ͔͕ͬͨɺPHPͷαϙʔτظݶ΋ഭͬͯ ͍ͨͷͰɺ͜ͷػձʹશମΛόʔδϣϯΞοϓ • PHP: 7.3 → 8.1 • Laravel: 7 → 9 • factory΍middlewareͷҰ෦͕มߋ

Slide 25

Slide 25 text

վम·Ͱͷεςοϓ 25 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 26

Slide 26 text

Inertia.jsಋೖ 26 • جຊతʹInertia.jsެࣜͷҊ಺௨Γʹઃఆ͢Ε͹OK • ʮlaravel-corsʯͱ͍͏ύοέʔδ͚ͩ௥ՃͰඞཁͩͬͨ   (Laravel9͔Β͸σϑΥϧτͰೖ͍ͬͯΔͷͰॻ͔Ε͍ͯͳ͔ͬͨ)

Slide 27

Slide 27 text

Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(Laravelଆ) 27 ɾΞϓϦέʔγϣϯ֎ͷυϝΠϯ΁ͷϦμΠϨΫτ ɾϑϩϯτΤϯυͷඳը

Slide 28

Slide 28 text

Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(ϑϩϯτΤϯυଆ) 28

Slide 29

Slide 29 text

Inertia.jsಋೖ ϩάΠϯϖʔδͷվमલޙ 29 • جຊతʹݩͷσβΠϯΛ౿ऻ͢Δํ਑ͰϖʔδΛվम

Slide 30

Slide 30 text

վम·Ͱͷεςοϓ 30 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 31

Slide 31 text

֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ 31 • Vitest • Vite؀ڥͰಈ࡞͢ΔϢχοτςετϑϨʔϜϫʔΫ • ࣮ߦ଎౓͕͔ͳΓ଎͍ • ίϯϙʔωϯτ͝ͱʹςετΛهड़ • શ෦ʹॻ͘ͱେมͳͷͰཻ౓͸ௐ੔

Slide 32

Slide 32 text

֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ Vitest 32 • ෆ۩߹͕ൃੜ͍ͯͨ͠ϖʔδͷमਖ਼͕ɺ   ͋Δఔ౓҆৺ग़དྷΔΑ͏ʹͳͬͨ • Linkίϯϙʔωϯτ΍routeؔ਺༻ͷmockΛ   ॻ͘ඞཁ͕͋ͬͨ

Slide 33

Slide 33 text

վम·Ͱͷεςοϓ 33 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 34

Slide 34 text

Outlook࿈ܞػೳΛ௥Ճ 34 • FullCalendar + Microsoft Graph APIͰ࡞੒ • Πϯλʔϯੜ͕΄ͱΜͲҰਓͰ΍ͬͯ͘Εͨ

Slide 35

Slide 35 text

վम·Ͱͷεςοϓ 35 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ Λॻ͘ Outlook࿈ܞ ػೳΛ௥Ճ શϖʔδ मਖ਼ରԠ

Slide 36

Slide 36 text

શϖʔδमਖ਼ରԠ 36 • ޙ2ϖʔδ...

Slide 37

Slide 37 text

04 ·ͱΊ

Slide 38

Slide 38 text

·ͱΊ 38 • Blade+jQueryͰॻ͍͍ͯͨϖʔδͷ΄΅શͯΛ Inertia.js+React.jsͰஔ͖׵͑ͨ(໿10ϲ݄) • ϑϩϯτΤϯυͷϢχοτςετͰ҆৺ΛಘΒΕͨ • ௥Ճػೳ΋ϥΠϒϥϦΛ࢖ͬͯ୹޻਺Ͱ࣮૷   ग़དྷΔΑ͏ʹͳͬͨ

Slide 39

Slide 39 text

͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You We are Hiring ! https://recruit.fusic.co.jp/