React on Railsの基本理念

9 min readJul 13, 2016

原文: The React on Rails Doctrine
ジャスティン・ゴードン(2016年1月24日)

このドキュメントはRailsの基本理念(訳注: 日本語版)に対する拡張と補足です。まだそのドキュメントを読んでいない場合、先にそちらを読むことをお勧めします。

React on RailsのREADMEの中で述べているように、このプロジェクトの目的は、Ruby on RailsとモダンなJavaScriptのツールやライブラリを統合するための、強固で最適なフレームワークを提供することです。react_on_railsに何をいれるべきかを考えるとき、その機能が RailsとモダンなJavaScriptとの共通部分と関連があるかどうかを自問します。RailsのビューとReactコンポーネントを統合するためのビューヘルパーがよい例です。答えがイエスである場合、その機能はここにあるべきです。そうでない場合は、別のnpmパッケージやRubyGemとしてリリースします。例えば、Twitter BootrapとWebpackを統合する簡単な方法が必要だったとき、bootstrap-loaderをnpmとしてリリースしました。

このプロジェクトの目的に加えて、「Railsの基本理念」を守りながら、下記を心に留めてください。

プログラマの幸福度を最適化

React on Rails一式は、フロントエンド開発者の幸福と関係するいくつかの主要な要素を提供します:

webpack開発サーバによるJavaScriptとCSS両方のホット・リローディングを提供します。Expressサーバーでスタブを読み込ませることでajaxのリクエストに応える事もできるし、実際のRailsサーバも両方使うことができるのです。そうなんです、Railsサーバでホット・リローディングができるんです！
CSSモジュールはCSSのグローバルなネームスペースの狂気を取り除きます。CSS(実際にはSass)をJavaScriptのReactコンポーネントファイルのすぐ近くにまとめます。これは、CSSで正しいスタイルを取得するために、もう長いクラス名を作らないですむことを意味します。
クライアント側のコーディングには、非同期な性質であるUIプログラミングに起因するので、ES6 JavaScriptはRubyよりはるかに素晴らしい言語です。
JavaScriptライブラリとツールは、SprocketsとRailsアセットパイプラインを経由するよりも、そのまま使うことでよりよく機能します。JavaScriptコミュニティでの最新の成果結果を得られるので、この方法が比較的フラストレーションが少ないことに気付きました。なぜ、JavaScriptの素晴らしいツールをRailsアセットパイプライの複雑さで面倒にするのでしょうか？
JavaScriptに関するものはnpmで取得したいです。JavaScriptをrubygems.orgから取得するのは比較的フラストレーションがあります。
積極的にオープン・ソースに参加することは、我々の幸福ですし、私たちはそうでありたいと思い、npmライブラリをgithub.com上においています。
我々のアプリケーション・ジェネレータを使用して、とても迅速にReact on Rails上にセットアップができます。
/clientディレクトリにクライアントサイドの開発に必要なすべてのものを置くことで、純粋なJavaScript開発者は、Railsとは切り離して生産的に開発を行うことができます。RailsでAPIを提供する代わりに、Expressサーバ上でAPIのスタブを返すシンプルなバックエンドを提供することで、UIプロトタイプのための迅速なイテレーションを可能とします。
ES6の変換にRailsアセットパイプラインを使用しないことで、Railsアプリをデプロイするのに何か特殊なやり方をするわけではありません。WebpackでコンパイルされたJavaScriptを含めるためにアセットパイプラインを使うようにしています。Herokuへのデプロイに関するドキュメントで述べるように、これをするためにちょっとだけ改良が必要になります。

設定より規約を重視する

React on Railsは、Railsと最適に機能するJavaScriptツールを見つけ出すときの重労働を取り払いました。異なるツールを研究することに多くの時間を費やしてしまうだけでなく、その後どうやってそれを全て結び合わせるか考え出さないといけません。多くの”JavaScript疲れ”はここから来ます。以下のものがコードをキレイに、一貫性のあるものに維持します:
スタイルガイド
静的検証ツール(linters)
推奨のプロジェクト構成

我々は、Railsの理念からのこの引用文を強く信じています:

何が必要になるかを全て理解している時でも同じことです。変化に対応するために、決まったやり方があるような場合、他のアプリケーションや今まで存在したものと同じか酷似しているアプリケーションを作って突進していくことも可能です。1つは全てのために、全ては1つのために存在します。この制限があることで高い知能は必要ではなくなるのです。

メニューは”おまかせ”で

以下がReact on Railsコミュニティーのシェフからのお勧めです:

ライブラリ

bootstrap-loaderからロードしたBootstrap。一般的なUIスタイル。
Lodash: スイスアーミーナイフのようなユーティリティ
React: UIコンポーネント
React-Router: クライアントサイドアプリケーション向けの深いリンクを提供
Redux: Flux実装(別名: ”状態コンテナ”)。

JavaScriptツール

Babel: ES6からES5へのトランスパイラなどの機能。
EsLintとJsrc: JavaScript静的検証ツール。
Webpack: デプロイ用アセットの生成とホットモジュールリローディングを提供。

ツールの共通セットを持つことによって、我々は何を使用するべきか、または使用すべきでないかを議論することができます。このようにして、JavaScriptの世界において不明確な多すぎる選択があるがための”JavaScript疲れ”を取り除きます。

ところで、私たちは標準のRailsの”おまかせ”がありません。それは、CoffeeScriptになります。しかし、Railsの基本理念で非標準のメニュー選択を歓迎していることを明確にしています！

パラダイムが1つではない

React on Railsは、Rubyで書かれたサーバーコードとは全く異なるものとはいえ、クライアント側のRailsを使用した開発のためになるという観点からも、Railsのエコシステムの「パラダイムが1つではない」という方針に合致するものです。

美しいコードを称える

ES5は醜かった。ES6は美しい。Reactは美しい。 Reactに加えてReduxで書かれ、ShakaCode静的検証ツールで充分に検証され、我々の推奨するプロジェクト構造によって構成されたクライアント側のコードは美しいものです。我々の言葉だけを信じないでください。 react-webpack-rails-tutorialサンプルコードの構成サンプルをぜひみてください。

統合システムを尊重する

あなたがRailsに適したタイプのアプリ (多くのビジネスルールに基づいたドキュメントやデータベース) を開発中なら、現行のJavascriptにReactを組み合わせてRuby on Railsに搭載するのが、一からクライアント側のアプリや独立したマイクロサービスを構築するよりも良いでしょう。こちらが理由です:

React on Railsにより、シームレスにReact UIコンポーネントとRailsを統合できます。
緊密な統合によって、Rails上でReactのサーバ・レンダリングを簡単にできる仕組みを提供することができます。これはサーバー上でレンダリングされたHTMLのフラグメントキャッシュへのサポート、そしてTurbolinksの統合も一緒にできます。
緊密な統合により、たとえ同じページであってもRailsのページと、Reactによるページを混在することが可能になります。 UIの全ての部分がReactによる高い堅牢性を要求している訳ではありません。既にある多くのアプリは数百もの標準的なRailsのフォームを持っているかもしれません。 ReactとRailsのフォームの混在と調和を支援することは、両方の世界で最高のものを提供します。

安定性より進歩を重視する

React on Railsはアクティブな開発のペースを維持し、これらについていきます:

コミュニティーからの提案
新しいクライアント側のツール、ライブラリや技術
Railsのアップデート

テントを押し上げる

React on Railsは間違いなく、Railsの大きなテントの一部です。加えて、React on Railsはそれ自身の大きなテントを提供します。React on Railsの大きなメリットは、WebpackとNPM、npmで利用可能なほとんど全てのライブラリーとの統合を可能にします！ Webpackとの統合は、他のWebpackがサポートしているビルドツールとの統合を可能にします。

ありがとう！

読んでいただき、またReact on Railsコミュニティーの一員でいていただきありがとうございます。この文書へのフィードバックや、React on Railsに関するものは何でも歓迎します。IssueやPull Requestをください。もし、我々のプライベートなSlackチャンネルに参加したい場合はメールでご依頼ください。