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
LaravelにReactを部分導入して感じたこと
Search
Takuya Katsusa
September 16, 2023
5
1.6k
LaravelにReactを部分導入して感じたこと
Takuya Katsusa
September 16, 2023
Tweet
Share
More Decks by Takuya Katsusa
See All by Takuya Katsusa
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
660
Laravel11へアップグレード 15分で終わるのか!? / laravel 11 Upgrade
takuyakatsusa
2
1.9k
スプリントの新常識 〜1週間未満のアジャイル開発 で成果を最大化する方法〜 / new norm for sprints
takuyakatsusa
2
1.1k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
1.2k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Designing Experiences People Love
moore
142
24k
For a Future-Friendly Web
brad_frost
179
9.9k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Side Projects
sachag
455
43k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Speed Design
sergeychernyshev
32
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
Laravel に React を 部分導入して感じたこと BABY JOB 株式会社 勝佐拓也 PHP カンファレンス沖縄
2023.09.16
自己紹介 勝佐 拓也(かつさ たくや) BABY JOB 株式会社(2023 年 2 月入社)
保活 DX サービス 「えんさがそっ♪」 の 開発・保守 バックエンドエンジニア 3 年 PHP / VB.net が得意です 1
えんさがそっ♪ 施設を 探す 見学の 申込 園の魅力 を発信 見学の 受付 2
本日お話しする議題 • 部分的な導入という選択をした経緯 • Laravel に React を 部分導入する際の手順 •
Laravel に React を 部分導入して感じたこと 3
部分的な導入という選択をした経緯 1. Blade と jQueryで SPA っぽい動きを頑張って再現していた 2. React なら実装しやすそう!
3. でも全体を React で置き換えるのは改修工数が... 4. Blade の中に React を部分的に埋め込めばよいのでは? 5. やってみよう!! 4
Laravel に React を部分導入する際の手順 • React の開発に必要なライブラリをプロジェクトに追加 ◦ 既にLaravel Mix
を使用していたので、 package.json に React と TypeScript を追加するだけでした • React の実装を行う • ビルドされた JS を Blade で読み込む 5
コード例 6 Blade 側 ※ 細かい設定は省略しています React 側 Blade
内 でReact のコンポーネントをレンダリングする
これだけ? 7
「口コミ」タブの中身だけ React で実装してます!! 部分導入できましたっ ♪ 8
Laravel に React を 部分導入して感じたこと • 既存のページに影響を与えず、 React を導入することができた •
フロントエンド実装時の選択肢が増えた ◦ 必要な部分だけ React にすることができるようになった ◦ 逆にどこまでを React で実装するか迷うタイミングもあった • Laravel Mix のお陰で React を導入するのが簡単だった 9
ご清聴ありがとうございましたっ♪ 10
おまけ • React と 合わせて TypeScript を導入した話 • 静的解析ツールは ESlint、フォーマッターは
Prettier を導入した話 9