Express

Express x React (初心者でもできる)環境構築入門

こんにちは、うすです。

ReactというJavaScriptのライブラリが流行っていますね。また、同じJavaScriptでサーバーサイドを書くことができるNode.jsのフレームワークExpressを使うと開発しやすいかも!!って思ったりもします。

そこでExpressとReactを繋げる「express-react-views」というライブラリを使った環境構築をして、そのメリットとデメリットについてまとめます。

Expressの環境構築

まず必要なライブラリをインストールしていきます。

$ mkdir express-site && cd express-site
$ npm i -g express-generator

次にexpressで環境を構築

$ express -e

オプションの-eは、テンプレートエンジンをEJSにするだけです(デフォルトはjade)
しかし今回はテンプレートエンジンを無理やりあとからReactにするのでオプションは指定しなくてもいいです。

Reactを使うためのライブラリを入れていきます。

$ yarn add nodemon express-react-views react react-dom

次にapp.jsの「テンプレートエンジンの設定」を変更していきます。
これは、公式のGithubをみれば大丈夫です。

// app.js

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

アプリケーションの起動は以下です。

$ npx nodemon start

あとは、Reactのファイルを作ってEJSなどを使うように値を渡せば、this.props以下で値を取得できます。
私のGithubにサンプルがあるのでよければどうぞ

サンプルみながら理解すればすぐに理解できると思います。

express-react-viewsのメリット・デメリット

メリット
  • Expressでも簡単にReactの環境が整います。
  • Component単位でファイルを分割できるので扱いやすい。
デメリット
  • (Node.js:サーバーサイドが動いているから)フロントエンド側で使えるライブラリが使えない(material-uiやstyled-component)
  • material-uiが使えないからリッチなSPAを作るのに時間がかかる。
  • styled-componentが使えないからstyleの管理がしにくい。

まとめ

express-react-viewsで作ったサイトは、reactで書いているけれど出力結果はreactで変換した後のものが出力されるのでSSRができていると思います。(しかも構築もめちゃ簡単)

正直デメリットがでかすぎて、そこまでexpress-react-viewsはよくないかもしれませんね。

他の方法としては、create-react-appでreactを静的なファイルにビルドする。Expressでルートの管理とREST API的な立ち位置にすることをしている人もいますがその方がフロントエンド系のライブラリ全て使えるので賢いかも。