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/5/29

稼げるエンジニアになるには

最近SNSやブログなどで『優秀なエンジニアとは?』みたいな議論で盛り上がっているのを良く見ます。どのようなことができれば優秀なエンジニアと言えるのか、みたいな。 正直言って僕はエンジニアとして優秀であるか否かについてはさほど興味を持てません。優秀であればその優秀さに伴った報酬を得られる職業であったのなら、僕も素直に優秀さを追い求めていたことでしょう。 しかしプログラマーとして未経験の言語に転身したにも関わらず、収入が2倍以上になった経験からそんな単純な職業ではないことを思い知ってしまいました。 優秀なエン ...

続きを読む

エンジニア独立

2019/4/28

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

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

続きを読む

エンジニア独立

2019/4/15

ITエンジニアの働き方比較(正社員/派遣/フリーランス)

最近ではITエンジニアの需要が激増し、特にプログラマーを目指す人が増えてきました。 今の時代、プログラマーをはじめとするITエンジニアを仕事として選ぶことは賢明かつ的確な判断と言えるでしょう。 その一方で、世間ではプログラマーの不遇が叫ばれていたり、IT土方などの蔑称で呼ばれていたりします。 それは働き方の選択を誤っているプログラマーがあまりに多いことが原因となっています。 稼げる市場であるということは、依頼主と技術提供者の間に入って、不当に利益を得ようとする存在が増えることに繋がります。そういった存在に ...

続きを読む

エンジニア独立

2019/5/12

エンジニアにとってSESが最良の選択肢ではない3つの理由

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアが正社員として働く上での選択肢として、SES企業というものがあります。 非常に数が多く、特に未経験エンジニアに対して広く門を開けているのでSESを選ぶ人はかなり多い。 しかしこのブログでは度々言っていることですが、ITエンジニアにとっては不幸になる可能性が高い働き方なんですよね。 そこで今日はエンジニアにとってSES企業という選択肢がなぜオススメできないかについて解説していこうと思います。 SESとは? まずSES企業とはどのようなものなのかにつ ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

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

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