inertia.jsとは
LaravelやRailsなどのサーバーサイドのフレームワークの機能を活かしながら、SPAアプリを作成するためのJavaScriptのライブラリです。
ルーティングや認証といった機能はサーバーサイドの機能を使うので、それほどフロントエンドに強くない人でもReactやVueで手軽にSPAアプリを実装できるようになっています。
inertiaのHPでもRails + VueとかLaravel + React
といった組み合わせのデモアプリが紹介されています。
https://inertiajs.com/demo-application
今回の記事のモチベーション
デモアプリでLaravel + Reactの組み合わせはあったが、
- React使うならTypeScriptにしたい
- CSS in JS使いたい
- docker上で動かしたい
とか諸々、実案件で使うにはもう一声欲しかったので、そのサンプルを作成しました。
clone後
cd laravel-with-react-typescript-atomic-design
make init
make npm-watch
で動くはずです。 1
今回利用したライブラリ等は下記の通りです。
- Laravel8
- inertia.js
- React
- TypeScript
- React Hook Form
- Emotion
- Storybook
- Docker
セットアップ時に参考にしたドキュメント・記事
Docker
最強のLaravel開発環境をDockerを使って構築する
https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4
inertia.js
Laravel側セットアップ
https://inertiajs.com/server-side-setup
React側セットアップ
https://inertiajs.com/client-side-setup
TypeScript
Emotion
Reactでcssプロパティを利用するための設定
https://emotion.sh/docs/css-prop#jsx-pragma
TypeScriptの場合だと下記のプラグマを使用する必要がある...?
/** @jsxImportSource @emotion/react */
ちなみに、
CSS in JSをどれにするかは以下のページを参考にしました
https://github.com/andreipfeiffer/css-in-js#styled-components
Storybook
インストール後、下記のパッケージで脆弱性警告が出てたので手動でpackage-lock.jsonの修正を行いました。(2021年12月時点)
- immer
- glob-parent
- trim
-
Makefile を使用しています。Macの方は
brew install makeにてインストールできます。https://formulae.brew.sh/formula/make#default ↩