怖くない!ReactとRailsで作るTODOアプリ 下準備編

みなさんはじめまして。
株式会社BitStarでエンジニアインターン
をしている塩原です。

使っている技術

• Rails5.1
• React
• Webpack
• babel

完成したアプリはgithubに公開しています
https://github.com/MotohiroSiobara/ReactToDoApp

jsはes6とjsxを使って書いていきます

では先にRails側から準備をしていきましょう
メインはReactのためRailsは説明なしで進めていきます

Rails側

$ rails new ReactTodoApp
$ cd ReactTodoApp

• app/controllers/todo_lists_controller.rb

app/controllers/todo_lists_controller.rb

class TodoListsController < ApplicationController
  def index
  end

  def create
    redirect_to root_path
  end
end

• config/routes.rb

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :todo_lists, only: [:index, :create]
  root to: "todo_lists#index"
end

• TodoListモデルを作成として以下のコマンドを叩く

$ bundle exec rails g model todo_list
$ bundle exec rake db:migrate

• app/models/todo_list.rb

app/models/todo_list.rb

class TodoList < ApplicationRecort
end

• app/views/todo_lists/index.html.slim

app/views/todo_lists/index.html.slim

<h1>アプリケーション</h1>

ここまで進めたら$ rails sでサーバーを立ち上げてhttp://localhost:3000/ でブラウザを確認すると以下のように表示される

表示に成功したらRails側の下準備はとりあえず完了

WebPackの設定

さてReactのコードを早速書こうかなと考える前に今回はWebPackを使ってみたいと思います！

WebPackを使うおもな理由は

• 様々なライブラリを一括で管理できる(babelなど)

WebPackとは？？？

ざっくりと説明すると
複数のファイルをコンパイルして一つのファイルにする
詳しい解説が知りたい方などはこちらの記事などがおすすめ
https://qiita.com/yosisa/items/61cfd3ede598e194813b

ではまずはpackage.jsonで必要なライブラリを取得しよう
webpackに関連するものは全てfrontendというディレクトリを作成してそこで管理します

$ mkdir frontend
$ cd frontend
$ npm init -y # package.jsonを作成

上のnpm init -yというコマンドの実行で以下のファイルが作成されます

• frontend/package.json

frontend/package.json

 {
   "name": "frontend",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

では必要なライブラリをそれぞれインストールしていきます

$ npm install -D webpack babel-loader babel-preset-es2015 babel-preset-react
$ npm install -S react react-dom

package.jsonにインストールされたものが追加されます

• frontend/package.json

frontend/package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

インストールされたものは以下のライブラリです

• webpack
• babel-loader
• babel-preset-es2015
• babel-preset-react
• react
• react-dom

babel-XXXといったものが三つありますがそれぞれ役割が変わってきます
babel-loader: webpackからbabelを使ってトランスパイルするためのパッケージ。
babel-preset-xxxxx: es2015やJSXを変換するためのプリセットがbabel本体と分離しているため 個別にインストールする
babel-preset-react: ReactでJSXを使えるようにするためのもの

ざっくりとBabelはJSXとES6を使うために必要と考えればいいでしょう

ではいよいよWebpackの設定をしたいと思います

• frontend/webpack.config.js

module.exports = {
  entry: {
    app: './index.js',
  },

  output: {
    path: '../app/assets/javascripts/webpack',
    filename: 'react_components.js',
  },

  module: {
    loaders: [
      { test: /\.(js|jsx)$/,
        loader: "babel",
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react"],
        }
      },
    ]
  },
}

まずこの部分では読み込む対象のファイルを記しています

entry: {
  app: './index.js',
},

そしてentryの部分で読み込んだファイルがこちらにコンパイルされた状態で出力されるといった感じです

output: {
  path: '../app/assets/javascripts/webpack',
  filename: 'react_components.js',
},

設定後に以下のコマンドを叩くとapp/assets/javascripts/webpack/react_components.jsが作成される

$ ./node_modules/.bin/webpack -w

下準備編は以上になります
次回は実際にTODOアプリを実装して行きたいと思います
怖くない!React&Railsで作るTODOアプリ 実装編 - Qiita