怖くない!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モデルを作成として以下のコマンドを叩く

```sh
$ 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 

```html:app/views/todo_lists/index.html.slim 
<h1>アプリケーション</h1>
```

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

![スクリーンショット 2017-11-29 23.39.41.png](https://qiita-image-store.s3.amazonaws.com/0/114212/36420c9a-4c87-d752-54aa-f44650892d3b.png)

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

# WebPackの設定

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

WebPackを使うおもな理由は

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

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

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

```shell-session
$ 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

```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"],
        }
      },
    ]
  },
}
```

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

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

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

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

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

```sh
$ ./node_modules/.bin/webpack -w
```

下準備編は以上になります
次回は実際にTODOアプリを実装して行きたいと思います
[怖くない!React&Railsで作るTODOアプリ 実装編 - Qiita](https://qiita.com/MotohiroSiobara/items/8d1b895ddcfec771a583)