RailsにTypescriptいれてReactもいれる

今回は次の環境で確認を行なっています。

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
$ rails -v
Rails 5.1.6

今回はwebpackerを前提にしているので次のコマンドでプロジェクトを作成しています。
rails new . --webpack

TypeScriptを追加する

まずはTypeScriptなどの準備を行います。
webpackerを今回は使用することを前提としているので、下記のRake Taskを実行することでTypeScriptのインストールやtsconfigのgenerate、サンプルプログラムの追加など一通り行なってくれる。

$ bundle exec rails webpacker:install:typescript

今回自動で生成されたものは次のようなプログラム
consoleにHello world from typescriptと出力するだけ。

// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.

console.log('Hello world from typescript');

あとは任意のviewに下記を追加する

<%= javascript_pack_tag "hello_typescript" %>

後はrails sでサーバーを立ち上げて確認する。

Reactを追加する

ReactについてもwebpackerからRakeタスクが提供されているので実行する。
これを実行することでreactがpackage.jsonに追加されたりwebpacker.ymlに.jsxが追加される。

$ bundle exec rails webpacker:install:react

サンプルは.jsxで生成されるので.tsxを用意する。

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>Hello, Welcome to the first page</h1>
  </div>,
  document.getElementById("root")
);

また今回TypeScriptのコンパイラを通すのでtsconfig.jsonのcompilerOptionsに"jsx": "react"を追加する。
これを追加しないと Cannot use JSX unless the '--jsx' flag is provided.とエラーになってしまう。

後は任意のviewに今追加したものを次のように指定するとブラウザで確認できる。

<div id="root"></div>
<%= javascript_pack_tag "hello" %>

最後に

webpackerにのるとものの数分でTypeScriptでReactを使う環境を整えることができる。