Rails#Ajax#RIA#フレームワーク丹内優紀2015.07.23286333この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。最近ReactJSを触り始めました。掲題の通り、Railsをバックエンドにした場合のFluxを書いてみたのでまとめます。このエントリの参考URLにあるリポジトリを参考にしました。バックエンド普通のRailsアプリです。Scaffoldをベースに、フロントエンドを書いていきます。endendBooksController#index今回、ブラウザで/booksにアクセスした時に、最初に空っぽのHTMLを返し、ReactJSでAjaxリクエストによってデータを取得しDOMを構築する方法をとったため、indexアクションにJSONの場合を追加しています。newでアプリを生成したあと、Railsアプリ直下にclientという名前でディレクトリを作り、そこで適当にクライアントサイド開発環境を作ります。app/books/index.html.slimHTML(テンプレートエンジンはSlimです)は、これだけです。books#contentここからAjaxで取得したデータをDOMとしてくっつけます。client/assets/javascripts/App.jsxここがクライアントサイドのエントリポイントとなります。ブラウザでhttp://localhost:3000/booksにアクセスしてページを読み込んだ直後にここから処理が始まります。render();});このBookBoxは別のReactClassとして定義してあり、それをimportして呼び出すだけの処理です。client/assets/javascripts/components/BookBox.jsxReactJSの記述が本格的に始まります。諸々のライフサイクルを定義しています。BookBox;conponentDidMount()で呼び出したBookStore.fetchBooks()でAjaxリクエストを実行し、renderでその結果を参照しています。client/assets/javascripts/actions/BookActions.jsここからはReactJSではなくAltの領域になります。fetchBooksでAjaxリクエストを送り、コールバックでこのクラスのupdateBooksを呼んでいます。分かりにくいのですが、その中のthis.dispatchでStoreと連携させています。alt.createActions(BookActions);ここでimportしているFluxAltは、以下のようなユーティリティです。alt;client/assets/javascripts/stores/BookStore.jsここもAltです。Fluxで言うところのStoreです。ポイントはconstructor内のthis.bindListenersで、ここでActionからdispatchした関数とStore内の関数を結びつけています。'BookStore');その他コンポーネント以下、client/assets/javascripts/components/BookBox.jsxから読んでいるComponentです。Book;まとめRailsアプリにAjaxリクエストを送るFluxを、Altを使って実装してみました。クライアントサイドにはまだ入門したてなのですが、Node.JSを使ったフロントエンド環境構築だけで数日かかってしまいました。Pipelineにいい感じに載せられて開発効率を上げられるようにアセット管理をしつつ、もっとフロントエンド開発をして行きたいです。