TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

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です。

よく読まれている記事

エンジニア独立

2018/1/17

自分の市場価値を把握しようとしないエンジニアは搾取される

こんにちは。フリーランスエンジニアのてぃすです。 エンジニア需要の高まり、待遇の向上からエンジニア・プログラマを目指す人が急増してきている昨今。 確かにエンジニアという職業はこれから高収入・柔軟な働き方を目指そうとした時に、最も適切な選択肢です。 そんな高収入かつ将来性のある職業であるエンジニアですが、自分のエンジニアとしての市場価値を知っておかないと、本来得られるはずの収入よりも少ない額で働くことになる可能性があります。それでも中小企業のサラリーマンよりは稼げますが。 今回は何故市場価値を把握しようとし ...

続きを読む

エンジニア独立

2018/1/2

エンジニアが会社員のままでいるのはヤバいなと感じた理由

現在会社員エンジニアからフリーランスエンジニアへの転身を目論んで活動中のてぃすです。 今回は僕が感じた会社に雇われた状態でエンジニアを続けることのデメリットについて語っていきます。 エンジニアは多くの現場で幅広い技術を習得するべきである 会社員としてエンジニアを続けることの最大のマイナスポイント。 それはキャリアの目標を自分で定めることができないという点です。 エンジニアが携わるITの世界というのは、技術の流行り廃りが他の業界に比べて断トツで早いんですよね。 そうなるとその技術で生計を立てていくエンジニア ...

続きを読む

エンジニア独立

2018/8/12

ITエンジニアがスーツ勤務を強要する現場を避けるべき理由

こんにちは、フリーエンジニアのてぃすです。 プラグラマやインフラ担当などと言ったITエンジニアとしての一般的な働き方として、客先に常駐して業務を行うというものがあります。 そんなとき、現場を選ぶ判断基準の一つとして服装が自由か否かというものが上げられます。 僕は決まって私服勤務可能な現場を選ぶようにしています。それはなぜか。エンジニアをスーツ勤務させる客先にロクなところがないから。 これまでスーツ勤務・私服勤務の現場を経験した上で、エンジニアがスーツを勤務を強要する現場を避けるべき理由を書いて行こうと思い ...

続きを読む

エンジニア独立

2018/8/19

エンジニアがリモートワークをして感動したお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はエンジニアとして活動する中で、メインで参加しているプロジェクト以外にもフルリモートでもう1つのプロジェクトにも参加しています。 今日は実際にリモートワークってどんなもんなのかについてお話していこうと思います。 前置き リモートワークの話題については各種メディア、ブログやSNSでも度々盛り上がっています。 通勤時間の短縮になる 通勤で使う体力を仕事にまわすことができる 家庭の事情などで外で働けない人も活躍することができる などのポジティブな捉え方もあれば ...

続きを読む

エンジニア独立

2018/1/2

プログラマーという働き方を見限る前に見ておくべき記事

プログラマーとかSEってちょっと前まで最先端の働き方って感じで世間でもてはやされていましたが、今ではブラック業界の代表格と言われるようになっていますよね。エリート社畜の巣窟とか。 実際SIer系の案件であったり、システム会社を名乗る悪徳派遣企業によって希望を持って入ってきた若者が食いつぶされてきたわけですから、当然の帰結ともいえます。 実際僕がこれまで正社員として働いてきた会社も、みなし残業という名の残業未払いであったり、都内にも関わらず勤続2年目で手取り17万円とかいう扱いを平気でやってきました。鬼畜の ...

続きを読む

-プログラミング
-, , ,

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.