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

フリーランスエンジニアの適正価格をぶっちゃけてみる

どうも、フリーランスエンジニアのてぃすです。 先日以下のツイートをしました。 実務経験2年以上のエンジニアが都内でフリーランスをやる場合、週5で月60万未満の案件は切り捨ててOKです。正社員的に考えると高めに見えますが、業務委託としてやるには60万円しか出さない案件は最底辺であると考えましょう — てぃす@フリーランスエンジニア (@tis_engineer) March 29, 2019 すると結構な反響があったので、今日はこのツイートで語っているフリーランスをやる場合の単価の基準について、 ...

続きを読む

エンジニア独立

2019/4/28

ITエンジニアが給与上げるために出来ることは限られている

どうも、フリーランスエンジニアのてぃすです。 今ITエンジニアってかなり稼げる職種として知られてきていますが、中にはその影響を感じられていない人もいるんじゃないかと思います。 ぼくは2年の間に正社員、派遣、フリーランスと渡り歩いて、月収は20万→40万→80万->100万と変動してきました。 その中でITエンジニアとして収入を上げるために出来ることがなんなのかが少しずつ見えてきました。 今回はその経験から感じたITエンジニアが収入を上げるために出来ることについて分析・解説していきます。 会社の中で給 ...

続きを読む

エンジニア入門

2019/4/15

プログラミングスクールって実際のところどうなの?

こんにちは、フリーエンジニアのてぃすです。 プログラミングスクール、今や広告やSNSでも頻繁に目にするこのワード。 初心者がプログラミングを始めるなら通うべき 独学でも十分だから必要ない プログラミングスクールに通ってもプログラマになれない などなど賛否両論飛び交っていますが、今日は現役エンジニアの視点からプログラミングスクールのメリット・デメリット、そしてエンジニアを目指す上での有力な選択肢となるかについてお話していきます。 プログラミングスクールとは何か その名前の通り、プログラミングを学ぶための学校 ...

続きを読む

エンジニア入門

2018/11/14

○ヶ月でプログラマーになれる vs そんな簡単になれない論争について

こんばんは。フリーエンジニアのてぃすです。 最近TwitterをはじめとするSNSやブログなどで度々繰り返されている 「○ヶ月でエンジニア/プログラマーになれる」という広告や意見に対する、 「エンジニア/プログラマーはそう簡単になれる職業ではない」 という意見から始まる論争。 今日は実際にプログラマーとしてご飯を食べていて、職業エンジニアになるためのノウハウについての記事も投稿している立場から、この一連のやりとりについて意見してみようと思います。 「○ヶ月でエンジニア/プログラマーになれる」という広告・意 ...

続きを読む

エンジニア入門

2018/1/2

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

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

続きを読む

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

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