はじめに Reduxを勉強して、ようやく大筋を理解し、Railsとの連携方法も分かったので、 Rails＋React+Redux＋Ajaxの組み合わせでちょっとした掲示板を作ってみました。 Rails＋React+Redux＋Ajaxの組み合わせで必要なノウハウはだいたい組み込まれていると思います。 ここで紹介するソースはGitHubのここで公開していますので自由に利用してください。 対象とする読者は Railsはそこそこ知っている。Reactも勉強した。Reduxも勉強した、もしくは勉強中である という方が対象です。 Rails + React + Reduxの環境を整える これに関しては書き出すと長くなるので、この記事を参照して準備してください。 Todoサンプルを動かす必要はないので、とりあえず RailsとReactとReduxのインストールと連携の部分の作業を行ってください。 Railsのインストールやnode.js npm のインストールなどは他に山ほど丁寧に書かれたサイトがあるので、それらを参照してください。 掲示板アプリ作成開始 さて、いよいよ掲示板アプリの作成開始です。 完成形の動作イメージはこんな感じです。 左に掲示板一覧がリストアップされていて、右に投稿を行う場所と投稿一覧が表示されている感じです。 Railsプロジェクト作成 [bash] $ cd ~/ $ mkdir workspace $ cd workspace $ rails new rails_redux_board $ cd rails_redux_board [/bash] これ以降の RailsとReact、Reduxの組み合わせの環境を構築する手順はこちらの記事（Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす）を参照にして頑張ってみてください。 とりあえず、Redux本家のTodoが動かせたらOKです。手間を省きたければTodoアプリのコピペはしなくて結構です。 components.js編集 app/assets/javascripts/components.js board.jsはアプリのエントリーポイントとなるJSファイルです。ここに定義したクラス名（const宣言）を windowの下にセット（変数として公開）してやる。 （意味はいまいち理解できていないのですが、必須みたいです） 全て消して以下の4行を追記。Todoアプリを移植していない場合は、Todosの行は不要 [bash] window.React = require(‘react’); window.ReactDOM = require(‘react-dom’); window.Todos = require(‘./todos.js’); window.Board = require(‘./board.js’); [/bash] React+Reduxの掲示板のエントリーポイントとなるJSファイルを作成 app/assets/javascripts/board.js [bash] import React, { Component } from ‘react’ import { render } from ‘react-dom’ import { Provider } from ‘react-redux’ import { createStore } from ‘redux’ import rootReducer from ‘./reducers/root’ import App from ‘./components/App’ const Board = ({}) => { return ( ) } export default Board [/bash] すべてのReducerをまとめる親Reducer作成 app/assets/javascripts/reducers/root.js [bash] import {combineReducers} from “redux” const rootReducer = combineReducers({}) export default rootReducer [/bash] アプリケーションのトップ階層となるApp.jsを作成 app/assets/javascripts/components/App.js [bash] import React from “react” const App = ({}) => { return ( This is Board Application with Rails,React,Redux ) } export default App [/bash] Railsでコントローラーとビューを作成 [bash] $ rails g controller board index [/bash] ビュー編集 ビューを編集して、掲示板のReactコンポーネントを作成します。 app/views/board/index.html.erb [bash] Board#index Find me in app/views/board/index.html.erb [/bash] ここまでで動作確認 これで最低限のところは出来たので、Railsサーバーを起動して、動作確認。 http://localhost:3000/board/index こんな感じのイメージが表示されれば成功。 モデル作成、サンプルデータ作成 Railsのモデルを作成し、サンプルデータをSeedファイル（CSV）として読み込める状態にしましょう。 モデルの作成 [bash] $ rails g model board title:string description:text $ rails g model user name:string sex:integer age:integer $ rails g model comment board_id:integer user_id:integer comment:text [/bash] マイグレート [bash] $ rake db:migrate [/bash] 出来上がったイメージはこんな感じ。 Seedデータの作成 何もないところからデータ投稿までつくり上げるのには時間がかかるので、シード(seed)データを 作っておいて、まずはそのデータを読んで、一覧表示することぐらいから始めましょう。 db/csv/boards.csv [bash] 1,ReactJSを学ぼう,あいうえお 2,ReactJS と Rails連携,かきくけこ 3,ReactJS 発展編,さしすせそ 4,jQuery入門,たちつてと 5,jQuery得意な人集まれ,なにぬねの 6,AngularJS入門,はひふへほ 7,vue.jsってなんぞ,まみむめも [/bash] db/csv/users.csv [bash] 1,花子,2,23 2,太郎,1,30 3,幸次郎,1,15 4,浩輝,1,40 5,大樹,1,35 6,すず,2,28 7,雅代,2,38 [/bash] db/csv/comments.csv [bash] “1”,”1″,”2″,”ReactはFacebookが開発しているUI(MV*フレームワークでいうViewのようなもの)に特化したJavaScriptライブラリです。 ” “2”,”1″,”3″,”大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレンダリング機構がそなわっており、Webページの表示を従来の .” “3”,”1″,”3″,”公式サイトに、「A JavaScript library for building user interfaces」とあるように、React.jsはUIを構築するためのライブラリです。” “4”,”1″,”3″,”フレームワークでなくあくまでUIを構築するだけのライブラリで、MVCでいうところのVのみの機能を提供します。” “5”,”1″,”7″,”最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。” “6”,”2″,”7″,”はじめにreact-railsという、ReactをAsset Pipelineに乗せて使えるようにしてくれるruby gemsがある。 この記事では、これを使用してReactの公式tutorialを進めていく。” “7”,”2″,”4″,”既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップでき” “8”,”2″,”5″,”RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装で ..” “9”,”2″,”2″,”react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsについて説明します。 次のような画面をReact.jsで実装し、Reactとサーバ(Rails)間でメッセージ一覧の取得や作成をできるようにします。 ソースコードはこちらです。” “10”,”3″,”2″,”最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高い .” “11”,”3″,”1″,”玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた” “12”,”3″,”6″,” React.jsとReduxを組み合わせた構成で、Webサイトを作ってみるチュートリアル（React+Redux入門）です。第一回目は、GitHub上のコードが読めるようになることを目標に解説しています。” “13”,”3″,”3″,”目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 ” “14”,”7″,”3″,”私たちはなぜReactではなくVue.jsを選んだのか Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。” “15”,”6″,”4″,”AngularJS（アンギュラージェイエス）、または Angular は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MIT Licenseでライセンスされた” “16”,”4″,”4″,”今後のWebデザイナーは、デザイン・htmlコーディング＋その他の強みを求められる世の中になっていきます。今回はその強みとなりうる「jQuery」についてご説明いたします。” “17”,”4″,”2″,”今回はjQueryの基本的な書き方として、これから「jQueryを覚えて、ブイブイ言わせてやるぜ！」と新しいスキルを身につけたいデザイナーさんには丁度いい内容かと思います。” “18”,”5″,”2″,”今年2016年6月9日、ついに正式版がリリースされた jQuery 3。メジャーバージョンアップしたjQuery 3では、従来のバージョンから、いったい何が変わったのかを2回に分けて解説します。” “19”,”5″,”1″,” jQueryはWeb業界の発展に大いに役立ってきました。しかし、ネイティブのJavaScriptが高度化し、かつマーケットシェアの縮小した古いブラウザをサポートする必要の薄れた現代において、jQueryを本当に使う必要があるでしょうか？必要性と” “20”,”4″,”1″,”Webデザイナーやマークアップエンジニアのための超コンパクトなjQuery講座ができました。JavaScriptの予備知識は不要。Web制作に必要な要点だけを解説します。 (1/6)”…