JavaScriptこんにちは。Web開発チームの島根です。今回のテーマはReactとCodeIgniterでのWebアプリケーション開発です。Laravel使った方が楽なのでしょうが、現在動いている他のシステムでCodeIgniterが使われているので今回やったことを他のシステムに流用できるようCodeIgniterを選択しました。やったことはと言えば、要はReactをビルドして作られたindex.htmlと同じことをCodeIginterのviewで行うということだけです。2点ほどつまづいてしまいました。1.create-react-appでreactプロジェクトを作ったのでビルドする度にファイル名が変わるこれは、create-react-appで作ったreacctプロジェクトでは、webpackの設定でビルド時にファイル名にハッシュ値を含むようにしてあります。ejectすればconfigファイルを設定できるようですが戻せなくなるため、今回はbuildした後にできるasset-manifest.jsonからファイル名を読み込むという方法をとりました。読み込みたいのは・main..chunk.js・.chunk.js・main..chunk.css・.chunk.cssの4つのファイルです。$filePaths);}}file_get_contentsでasset-manifest.jsonからファイル名のマッピング情報を取って正規表現で各ファイルを判断してます。main.jsとmain.cssはキーが固定なのでキーで判断し、残り2つは正規表現で判断。main.jsとmain.cssもchunk.jsやchunk.cssで終わるのでキーの名前ではじいています。(力技)こうしておけばビルドしたらCodeIgniter側から読み取れるフォルダにasset-manifest.jsonとjsファイルとcssファイルを移動すれば読み取れるようになります。ファイル移動の部分はshell書いてもいいですし、デプロイ時のフローに入れてもいいですし簡単に自動化できると思います。src="<?=$CHUNK_JS?>"></script></body></html>2.BrowserRouteを使うとページを読み込めない。これに関してはエラーが出なかったため困りました。jsやcssのファイルが読み込めていないわけでもなく、コンソールやサーバー側のログファイルにも気になるエラーは何もなし。Toolで調べたところ、Component自体が読み込めていない様子でした。rootの中が空なので一番トップのBrowserRouterがきちんとルーティングできていなかった。HashRouteに変えればちゃんと表示されました。簡単に書いておきます。codeigniter・reactやCodeIgniterでコードを書く。ReactのRouterにはHashRouterを使う。・buildしてCodeIgniter側にソースコードを移動。・CodeIgniterのトップページでbuildしたreactのソースコードを読み込めるようにする。index.html内に直接書かれているscriptをコピペする。おまけ最後におまけですが、Storybookというコンポーネントをカタログにして共有できるツールも入れました。コンポーネントごとにPropsやコンポーネント自体の説明を書けたり渡す値を変えたりできるaddonがあったりしてすごくいいです。Storybookはまだまだ活用しきれていないので熟した頃に投稿させてもらいます。はてなブログProWowTechエンジニアによる開発ブログです。社内チャットツールWowTalkの開発をしています。読者になるSERCHLINKはてなブログブログをはじめる週刊はてなブログはてなブログProNEW駆け出しエンジニア1年目で学んだ3つのことペアプログラミングを試してみた2020年もワウテックをよろしくお願いします大きなActivityは小さく分割したほうがいいお話1週間で作って社内リリースしたヘルプボットを性能改善した話ARCHIVEスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。