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
960
LaravelにReactを部分導入して感じたこと
Takuya Katsusa
September 16, 2023
Tweet
Share
More Decks by Takuya Katsusa
See All by Takuya Katsusa
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
750
Featured
See All Featured
Being A Developer After 40
akosma
67
580k
What's new in Ruby 2.0
geeforr
337
31k
In The Pink: A Labor of Love
frogandcode
138
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
How GitHub (no longer) Works
holman
305
140k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
RailsConf 2023
tenderlove
9
570
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing for humans not robots
tammielis
247
25k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
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