TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

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

投稿日:

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

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

導入手順

Railsプロジェクト作成

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

ディレクトリ作成&移動

~/workspace $ mkdir myapp1
~/workspace $ cd myapp1/

bundle init

~/workspace/myapp1 $ bundle init

Gemfile編集

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

# frozen_string_literal: true
source "https://rubygems.org"
 
# gem "rails"
gem 'rails', '~> 5.1.4'

bundle install & 初期コマンド

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

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

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

~/workspace/myapp1 $ bundle install --path vendor/bundle
~/workspace/myapp1 $ bundle exec rails new . --webpack=react --database=mysql
~/workspace/myapp1 $ bundle exec rails db:create
~/workspace/myapp1 $ bundle exec rails db:migrate

Webpacker動作確認

コントローラー作成

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

~/workspace/myapp1 $ bundle exec rails g controller top index

ルーティング作成

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

Rails.application.routes.draw do
  root 'top#index'
end

javascript_pack_tagの追加

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

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

  • <%= javascript_pack_tag 'application' %>
  • <%= javascript_pack_tag 'hello_react' %>
<!DOCTYPE html>
<html>
  <head>
    <title>Nanieta</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
    <%= javascript_pack_tag 'hello_react' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

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

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

TypeScript導入

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

gemの指定バージョン変更

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

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

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

~/workspace/myapp1 $ bundle install

TypeScriptをwebpackerに追加

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

~/workspace/myapp1 $ bundle exec rails webpacker:install:typescript

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

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

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

interface HelloProps {
  name: string
}

const Hello: React.SFC<HelloProps> = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React with TypeScript" />,
    document.body.appendChild(document.createElement('div')),
  )
})

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

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

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .tsx
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

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

~/workspace/myapp1 $ bin/webpack
~/workspace/myapp1 $ bundle exec rails s

その他

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

tslintの導入

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

パッケージの追加

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

~/workspace/myapp1 $ yarn add -D tslint tslint-loader tslint-config-airbnb

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

~/workspace/myapp1 $ touch tslint.json

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

{
  "extends": "tslint-config-airbnb"
}

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

~/workspace/myapp1 $ touch config/webpack/loaders/tslint.js

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

module.exports = {
  enforce: 'pre',
  test: /\.tsx$/,
  exclude: /node_modules/,
  use: 'tslint-loader',
}

webpakerの設定

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

const { environment } = require('@rails/webpacker')
const typescript =  require('./loaders/typescript')
const tslint =  require('./loaders/tslint')

environment.loaders.append('typescript', typescript)
environment.loaders.append('tslint', tslint)
module.exports = environment

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

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

group :development do
  gem 'foreman'
end
~/workspace/myapp1 $ bundle install
~/workspace/myapp1 $ touch Procfile
rails: bundle exec rails s
frontend: ./bin/webpack-dev-server
~/workspace/myapp1 $ bundle exec foreman start

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

ローダーを変更する

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

~/workspace/myapp1 $ yarn add -D awesome-typescript-loader
module.exports = {
  test: /\.(ts|tsx)?(\.erb)?$/,
  use: [{
    loader: 'awesome-typescript-loader'
  }]
}

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

よく読まれている記事

エンジニア独立

2019/4/15

仕事を選べるITエンジニアになるための面談テクニック

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアとして働いていく上で、大部分の人が経験する面談。 その後の数ヶ月、正社員や長期プロジェクトであれば数年の待遇を左右する超重要イベントなのですが、多くのエンジニアがこの重要性に気づいていません。 とりあえずこれまでの経歴を箇条書きして どこかで調べてきたような自己PRを適当に書いて 面談で書いてあることをそのまま口にする といった投げやりな面談を続けていては、売り手市場ということもあり仕事に困る可能性は低いですが、待遇の良い仕事を気づかないうちに逃 ...

続きを読む

エンジニア独立

2019/5/30

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

エンジニア独立

2019/4/15

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

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

続きを読む

エンジニア入門

2019/4/25

絶対にエンジニアになりたい人にオススメするプログラミングスクール3選

こんにちは、フリーエンジニアのてぃすです。 最近はエンジニアの人手不足による給与向上や、自由度の高い働き方に魅力を感じてエンジニア・プログラマを目指す人が増えてきました。 僕の周囲にもプログラミングを始めたいという人が増えてきて、プログラミングスクールとかたくさんあるけどどれがいいの?という質問を受けることがあります。 せっかくなので実際に現場でWeb開発に携わる立場からプログラミングスクールについて比較しながら調べてみました。 そして実際にエンジニアとして働くために最も充実したサービスを提供しているプロ ...

続きを読む

エンジニア独立

2019/4/28

収入を上げたいWebエンジニアが学習するべき技術

どうも、フリーランスエンジニアのてぃすです。 エンジニアの収入は技術に比例して上がるわけではない。というのはこのブログでよく言っていることです。 しかし技術と収入の因果関係はもちろん0ではありません。 そこで今回はITエンジニアとして働いていく上で収入アップに繋がる可能性の高い技術をピックアップして紹介していきます。 今やっている仕事で収入に限界を感じている 新しい技術を学びたいけど何を学ぶのが効率がいいのか知りたい というエンジニアは要チェックです。 技術によって収入が上がる要因 まず収入が上がる技術と ...

続きを読む

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

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