Riot.js Redux Rails 1 / 8「環境構築」
はじめに
フロントにRiot.jsとReduxを使いサーバーサイドにRailsを使い、初めに環境構築し、次にReduxの使い方の流れをみて、最終的に簡単なTodoAppを作成する。
環境構築
- Riot.js Redux Rails 1 / 8 「環境構築」
簡単な例でReduxの流れをみる
- Riot.js Redux Rails 2 / 8 「Reduxを使ってtitleを表示させる」
- Riot.js Redux Rails 3 / 8 「formを追加しtitleの変更を可能にする」
- Riot.js Redux Rails 4 / 8 「3で作成したformを、title-formタグとして独立させる」
Todo Appの作成
- Riot.js Redux Rails 5 / 8 「Todoリストを表示する」
- Riot.js Redux Rails 6 / 8 「新たなTodoを追加出来るようにする」
- Riot.js Redux Rails 7 / 8 「完了したTodoをチェック出来るようにする」
- Riot.js Redux Rails 8 / 8 「チェックしてあるタスクを削除出来るようにする」
最終的に完成したTodo App
https://github.com/atfeo/Riot_Redux_Rails
参考
環境構築
Mac
Rails 5.0.0.1
ruby 2.3.1
riot 2.6.4
ターミナル
$ rails new riot_redux_rails $ cd riot_redux_rails $ mkdir client $ cd client
clientディレクトリ
Package.json
$ npm init -y
これによりpackage.jsonが作成されるので
{ "private": "true", "scripts": { "webpack-watch": "webpack -w" } }
のように書き換える。 再びターミナルで
$ npm install --save-dev webpack tag-loader babel-core babel-loader babel-preset-es2015
同じく
$ npm install --save riot redux redux-thunk
webpackの設定
webpack.config.jsを作成し
// ./client/webpack.config.js module.exports = { entry: './src/index.js', output: { path: '../app/assets/javascripts/webpack', filename: 'bundle.js', }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'], }, }, { test: /\.tag$/, loader: 'tag', exclude: /node_modules/, }, ], }, };
そして
$ cd ..
で、アプリケーションのルートに戻っておく
Gemfile
Gemfileに
# ./Gemfile gem 'foreman'
を追加し
$ bundle install
Procfile
アプリケーションのルートディレクトリにProcfileを作成
rails: rails s webpack: npm --prefix client run webpack-watch
これで下準備は終わり
動作確認
riotのtagファイルを作成
<!-- ./client/src/tags/sample-output.tag --> <sample-output> <h1>Hello Riot.js Redux Rails</h1> </sample-output>
sample-outputタグをマウントするトップページを作成
$ rails g controller Top index
routes.rbを書き換える
# ./config/routes.rb Rails.application.routes.draw do root 'top#index' end
次にindex.html.erbにタグを書く
<!-- ./app/views/top/index.html.erb --> <sample-output></sample-output>
Riotタグをマウントする為のindex.js
// ./client/src/index.js import riot from 'riot'; import './tags/sample-output.tag'; document.addEventListener('DOMContentLoaded', () => { riot.mount('sample-output'); });
マウントできているか確認
ターミナルで
$ foreman start
して、ブラウザでlocalhost:5000を確認
Hello Riot Redux Rails が表示されれば成功
環境構築は終わり。
次回から簡単な例で、Reduxの使い方の大まかな流れを見る。
Todoアプリの作成は、Riot.js Redux Rails 5 / 8から。