Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
入社時に作った社内システムをInertia.jsで作り直した話 / Fusic Tech Li...
Search
Ryunosuke Makihara
August 31, 2023
0
180
入社時に作った社内システムをInertia.jsで作り直した話 / Fusic Tech Live Vol 15 Makihara
Fusic Events
Fusic Tech Live Vol.15~PHPカンファレンス福岡の余韻を楽しもう~
https://fusic.connpass.com/event/288258/
Ryunosuke Makihara
August 31, 2023
Tweet
Share
More Decks by Ryunosuke Makihara
See All by Ryunosuke Makihara
オンプレミスからAWSへのデータ移行手段を改めて検討してみた話 / 20250811 JAWS-UG Saga Makihara LT
ryu022304
0
94
terraform importと同じノリでcdk importしてはいけない件 / 2024 January JAWS-UG Saga Makihara LT
ryu022304
0
71
AWS re:Invent 2023 でのアップデートを話してと言われた / Fusic Tech Live Vol 17 Makihara
ryu022304
0
150
福岡市のお墨付き!エンジニアフレンドリー企業に選ばれたFusicの実態に迫る! / PHP Conference Japan 2020 Sponsor LT Fusic
ryu022304
0
170
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Building Applications with DynamoDB
mza
96
6.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Writing Fast Ruby
sferik
628
62k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
29
5.5k
Code Reviewing Like a Champion
maltzj
525
40k
Faster Mobile Websites
deanohume
309
31k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
ೖࣾ࣌ʹ࡞ͬͨࣾγεςϜΛ Inertia.jsͰ࡞Γͨ͠ 2023.08.30 ᴳݪ ཽ೭ี 1
ࣗݾհ ᴳݪ ཽ೭ี Makihara Ryunosuke - From - ࠤլݝ -
Work at - Fusic@Ԭ(2020~) - ܯඋձࣾͷITࢠձࣾ@౦ژ(2018~2019) - Skill - લ৬ͰLinuxαʔόԾج൫ͷӡ༻ཧ - FusicͰPHPͰͷγεςϜ։ൃ / AWSͷઃܭߏங - Like - ອըɺকعɺөը - SNS - @ryu022304 2
01 ࡞ͬͨࣾγεςϜ
FusicͷࣾγεςϜ 4 https://www.youtube.com/watch?v=zMf_Y8VeZsY https://fusic.co.jp/doings?c=8 • FusicͰOJTͷҰͱͯࣾ͠γεςϜΛ࡞͢Δ ※৽ଔ͚ͩͰͳ͘ɺWebະܦݧͷத్ؚΉ
࠾༻ใཧγεςϜʮTORNOʯϦϓϨʔε 5 ɾԠืऀใཧ ɾ໘ใཧ ɾ໘ϦϚΠϯμʔ ɾ౷ܭใग़ྗɹ
AWSߏ 6
ٕज़ཁૉ(࣌) 7 Laravelબఆཧ༝ ɾ࣌LaravelͷҊ͕݅૿͖͑ͯͨ ɹλΠϛϯάͩͬͨ jQueryબఆཧ༝ ɾػೳ΄ͱΜͲجຊతͳCRUD ɾJSʹΑΔૢ࡞͕΄΅ෆཁ ɾۀγεςϜͳͷͰɺ ɹϑϩϯτΤϯυڽΒͳͯ͘ྑ͍
Materializeબఆཧ༝ ɾ৭ຯ͕ϐϯΫ͔ͩͬͨΒ
࣮ࡍͷιʔείʔυҰ෦ 8 • JSDatePickerҰ෦ϑΥʔϜͷಈతૢ࡞ʹͷΈ༻
02 ϦϓϨʔεͷ͖͔͚ͬ
ࣗҎ֎ͷ։ൃϝϯόʔͷՃ 10 ɹ2ؒӡ༻ͯ͠ಛʹେ͖ͳোͳ͠ʂ ɹϤγʂ ɹͰ·ͩՃ͍ͨ͠ػೳ݁ߏ͋Δʂ
ࣗҎ֎ͷ։ൃϝϯόʔͷՃ 11 ɹ͋Γ͕ͱ͏ʂ ɹϤγʂ ɹख͍·͢ʂ Πϯλʔϯੜ
ࣗҎ֎ͷ։ൃϝϯόʔͷՃ 12 ɹͳΔ΄Ͳ…
ෆ۩߹ݪҼ 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 ɹग़དྷΒ͋ͬʂ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲
Ճཁ 15 ɹ͑ʂʂ ɹjQueryͰOutlookͷΧϨϯμʔػೳΛʂʁ ɹOutlookͷΧϨϯμʔΈ͍ͨʹɺ ɹγεςϜ͔Β༧ఆΛొͯ͠ཉ͍͠Ͱ͢ʂ ࠾༻୲
ϑϩϯτΤϯυվमͷػӡ 16 ɾjQuery͚ͩͰख͕͔͔ؒΓͦ͏ͳػೳͷ࣮͕ඞཁ ɾը໘දࣔͷमਖ਼ͷࡍʹ҆৺ײ͕ཉ͍͠ ɾ(ϑϩϯτΤϯυͷ࿅श͕͍ͨ͠) ϑϩϯτΤϯυΛ৽ͯ͠ɺϢχοτςετΛॻ͜͏ʂ
03 Inertia.jsͰͷվम
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)Λఏএ
Inertia.jsͷϝϦοτ 19 αʔόʔαΠυ ΫϥΠΞϯταΠυ ɾมΛͦͷ··ͤΔ ɾJSONΤϯίʔυෆཁ ɾBladeϑΝΠϧͷඳըͱ΄΅ಉ༷ͷॲཧ ɾGET /users ͷΑ͏ͳAPIΛୟ͘ॲཧ͕ෆཁ
ɾೝূॲཧΛؾʹ͠ͳͯ͘ྑ͍ ɾBladeϑΝΠϧΛ΄΅ͦͷ··JSϑΝΠϧʹ ɹஔ͖͑ΔܗͰॻ͚Δ
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
վम·Ͱͷεςοϓ 22 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
վम·Ͱͷεςοϓ 23 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
LaravelͷόʔδϣϯΛ্͛Δ 24 • (͔֬)ඞਢͰͳ͔͕ͬͨɺPHPͷαϙʔτظݶഭͬͯ ͍ͨͷͰɺ͜ͷػձʹશମΛόʔδϣϯΞοϓ • PHP: 7.3 → 8.1
• Laravel: 7 → 9 • factorymiddlewareͷҰ෦͕มߋ
վम·Ͱͷεςοϓ 25 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
Inertia.jsಋೖ 26 • جຊతʹInertia.jsެࣜͷҊ௨Γʹઃఆ͢ΕOK • ʮlaravel-corsʯͱ͍͏ύοέʔδ͚ͩՃͰඞཁͩͬͨ (Laravel9͔ΒσϑΥϧτͰೖ͍ͬͯΔͷͰॻ͔Ε͍ͯͳ͔ͬͨ)
Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(Laravelଆ) 27 ɾΞϓϦέʔγϣϯ֎ͷυϝΠϯͷϦμΠϨΫτ ɾϑϩϯτΤϯυͷඳը
Inertia.jsಋೖ ϩάΠϯϖʔδͷվम(ϑϩϯτΤϯυଆ) 28
Inertia.jsಋೖ ϩάΠϯϖʔδͷվमલޙ 29 • جຊతʹݩͷσβΠϯΛ౿ऻ͢ΔํͰϖʔδΛվम
վम·Ͱͷεςοϓ 30 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ 31 • Vitest • ViteڥͰಈ࡞͢ΔϢχοτςετϑϨʔϜϫʔΫ • ࣮ߦ͕͔ͳΓ͍ • ίϯϙʔωϯτ͝ͱʹςετΛهड़
• શ෦ʹॻ͘ͱେมͳͷͰཻௐ
֤ϖʔδमਖ਼ͭͭ͠VitestͰςετΛॻ͘ Vitest 32 • ෆ۩߹͕ൃੜ͍ͯͨ͠ϖʔδͷमਖ਼͕ɺ ͋Δఔ҆৺ग़དྷΔΑ͏ʹͳͬͨ • Linkίϯϙʔωϯτrouteؔ༻ͷmockΛ
ॻ͘ඞཁ͕͋ͬͨ
վम·Ͱͷεςοϓ 33 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
Outlook࿈ܞػೳΛՃ 34 • FullCalendar + Microsoft Graph APIͰ࡞ • Πϯλʔϯੜ͕΄ͱΜͲҰਓͰͬͯ͘Εͨ
վम·Ͱͷεςοϓ 35 Laravelͷ όʔδϣϯΛ ্͛Δ Inertia.jsΛ ಋೖ͢Δ ֤ϖʔδ मਖ਼ͭͭ͠ VitestͰςετ
Λॻ͘ Outlook࿈ܞ ػೳΛՃ શϖʔδ मਖ਼ରԠ
શϖʔδमਖ਼ରԠ 36 • ޙ2ϖʔδ...
04 ·ͱΊ
·ͱΊ 38 • Blade+jQueryͰॻ͍͍ͯͨϖʔδͷ΄΅શͯΛ Inertia.js+React.jsͰஔ͖͑ͨ(10ϲ݄) • ϑϩϯτΤϯυͷϢχοτςετͰ҆৺ΛಘΒΕͨ • ՃػೳϥΠϒϥϦΛͬͯͰ࣮
ग़དྷΔΑ͏ʹͳͬͨ
͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You We are Hiring ! https://recruit.fusic.co.jp/