Wowgineer Notes

WowTechエンジニアの徒然開発日記

Wowgineer Notes

〜新たな"Wow"を生み出す〜

React+PHP (CodeIgniter) でWebアプリケーションを作る ~Storybookを添えて~

React CodeIgniter PHP JavaScript

こんにちは。Web開発チームの島根です。
今回のテーマはReactとCodeIgniterでのWebアプリケーション開発です。
Laravel使った方が楽なのでしょうが、現在動いている他のシステムでCodeIgniterが使われているので今回やったことを他のシステムに流用できるようCodeIgniterを選択しました。
やったことはと言えば、要はReactをビルドして作られたindex.htmlと同じことをCodeIginterのviewで行うということだけです。
ただし、2点ほどつまづいてしまいました。

１．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
の４つのファイルです。

f:id:wt-shimane:20190329121311p:plainf:id:wt-shimane:20190329120737p:plain
割と力技です。笑
・controller

public function index()
{
        $assetJson  = file_get_contents('./build/asset-manifest.json');
        $asset = json_decode($assetJson, true);
        $base = '<reactをビルドしてできたbuildディレクトリのパス>';
        $filePaths = array();
        foreach($asset as $key => $filename){
            if($key === 'main.css'){
                $filePaths['MAIN_CSS'] = $base . $filename;
            }
            if($key === 'main.js'){
                $filePaths['MAIN_JS'] = $base . $filename;
            }
            if($key !== 'main.css' && preg_match("/chunk\.css$/", $key)){
                $filePaths['CHUNK_CSS'] = $base . $filename;
            }
            if($key !== 'main.js' && preg_match("/chunk\.js$/", $key)){
                $filePaths['CHUNK_JS'] = $base . $filename;
            }
        }

		$this->load->view('welcome_message', $filePaths);
	}
}

file_get_contentsでasset-manifest.jsonからファイル名のマッピング情報を取って正規表現で各ファイルを判断してます。main.jsとmain.cssはキーが固定なのでキーで判断し、残り２つは正規表現で判断。ただしmain.jsとmain.cssもchunk.jsやchunk.cssで終わるのでキーの名前ではじいています。(力技)
こうしておけばビルドしたらCodeIgniter側から読み取れるフォルダにasset-manifest.jsonとjsファイルとcssファイルを移動すれば読み取れるようになります。
ファイル移動の部分はshell書いてもいいですし、デプロイ時のフローに入れてもいいですし簡単に自動化できると思います。
・view

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
    <link href="<?=$CHUNK_CSS?>" rel="stylesheet">
    <link href="<?=$MAIN_CSS?>" rel="stylesheet">
</head>
<body>

<div id="root">
</div>
        <script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script>
<script src="<?=$MAIN_JS?>"></script>
<script src="<?=$CHUNK_JS?>"></script>
</body>
</html>

２．BrowserRouteを使うとページを読み込めない。

これに関してはエラーが出なかったため困りました。
jsやcssのファイルが読み込めていないわけでもなく、コンソールやサーバー側のログファイルにも気になるエラーは何もなし。
ブラウザプラグインのReact Developer Toolで調べたところ、Component自体が読み込めていない様子でした。
f:id:wt-shimane:20190329112201p:plain

rootの中が空なので一番トップのBrowserRouterがきちんとルーティングできていなかった。HashRouteに変えればちゃんと表示されました。

ReactDOM.render(
  <HashRouter>
    <div>
      <Route path='/' exact component={App}/>
      <Route path='/page1'  component={Page1}/>
      <Route path='/page2'  component={Page2}/>
    </div>
  </HashRouter>


, document.getElementById('root'));
 

構築手順

構築手順を簡単に書いておきます。
・create-react-app

create-react-app ci-sample

・codeigniter install

composer create-project kenjis/codeigniter-composer-installer codeigniter

・reactやCodeIgniterでコードを書く。ReactのRouterにはHashRouterを使う。

・buildしてCodeIgniter側にソースコードを移動。

・CodeIgniterのトップページでbuildしたreactのソースコードを読み込めるようにする。index.html内に直接書かれているscriptをコピペする。

おまけ

最後におまけですが、Storybookというコンポーネントをカタログにして共有できるツールも入れました。

f:id:wt-shimane:20190329115346p:plainf:id:wt-shimane:20190329115350p:plain

コンポーネントごとにPropsやコンポーネント自体の説明を書けたり渡す値を変えたりできるaddonがあったりしてすごくいいです。
Storybookはまだまだ活用しきれていないので熟した頃に投稿させてもらいます。