Rails + Webpacker + React + TypeScriptの開発環境構築

   

Rails5.1から導入されたWebpacker。

1回簡単に触ってみたことはあったのですが、開発する際は基本的にRailsとフロントエンド、それぞれ独立させていたのですが、そろそろちゃんといじってみようということで、WebpackerでReact + TypeScriptをRailsに導入してみましたので、その手順を紹介して行こうと思います。

導入手順

Railsプロジェクト作成

まずはいつも通りRailsのプロジェクトを作成していきます。極力システムを汚したくないので、ディレクトリを先に作り、作成したディレクトリにrails newを実行する手順で進めていきます。

ディレクトリ作成&移動

bundle init

Gemfile編集

Railsのバージョンを指定する形でGemfileを編集します。今回は5.1.4で進めていきます。

bundle install & 初期コマンド

あとはbundle installを行い、webpakerとmysqlの指定を追加した形でrails newを実行します。

DBに関してはお好みでどうぞ。

プロジェクトが作成されたらDB作成とマイグレーションも行っておきます。

Webpacker動作確認

コントローラー作成

Webpakcer及びReactの導入を確認するために新規コントローラーを作成します。

ルーティング作成

rootパスに先ほど作成したコントローラーのアクションを指定しておきます。

javascript_pack_tagの追加

webpackerをビューに反映されるためにjavascirpt_pack_tagをテンプレートファイルに記述します。

ひとまずは以下を追加しておけばOKです。

  • <%= javascript_pack_tag 'application' %>
  • <%= javascript_pack_tag 'hello_react' %>

ここまでで基本的なwebpack & react の構築は完了。

localhost:3000にアクセスすると、consoleにはHello World from Webpacker、画面にはHello React!が表示されます。

TypeScript導入

次にTypeScriptを導入していきます。

gemの指定バージョン変更

Gemfileのgem 'webpacker'の部分をリポジトリから取得するように書き換えます。

書き換えたら再度bundle installを実行。

TypeScriptをwebpackerに追加

上記の手順で以下のコマンドが使えるようになります。

サンプルソースの書き換え

app/javascript/packs/hello_react.jsxの拡張子をtsxに書き換え後、以下のように内容を修正しましょう。

webpakerの拡張子設定にtsxを追加

webpackerの拡張子を追加します。

その後webpackを実行すれば、すでにTypeScriptを導入したReactをwebpackerで使えるようになっています。

その他

ここまでの手順で基本的な開発はできるようになりましたので、以下の設定はお好みで。

tslintの導入

礼儀正しく開発していくためにtslintを導入します。

パッケージの追加

個人開発でルールをこねこねするのも億劫なのでairbnbのテンプレートを設定します。

tslint設定ファイルの作成&設定

とりあえず今回はairbnbのコンフィグを設定するだけです。

webpackのローダーを追加&設定

対象はひとまずtsxファイルのみに設定しておきます。

webpakerの設定

あとはビルド時にチェックが走るように設定を行います。tslintのconst宣言とloaderを追加してください。

foremanでRailsとwebpack-dev-serverを同時起動

rails sのログで確認できればよかったのですが、いい方法が見つからなかったので、webpack-dev-serverをforemanで起動して置くようにしました。

これでtslintに引っかかる部分があった時にコンソールに警告が表示されるようになります。

ローダーを変更する

TypeScriptのローダーはデフォルトだとts-loaderなのですが、awesome-typescript-loaderの方が速いとの噂を耳にしたので、変えてみます。速さはロマンです。

ts-loaderの部分をawesome-typescript-loaderに変更するだけでOKです。

 - プログラミング , , ,