概要
- Rails5.1ではJS関連の機能が大きく変わるらしいと知ったので、いまのedge railsで試してみた
- Railsが用意してくれるものにのっかりつつ、データを処理するrailsサーバーと見た目を処理するJSできれいに処理が分割されたアプリケーションをかなり楽に書けた
- 可能性を感じた
- 今回の内容は https://github.com/skuroki/hello_webpacker で見ることができます
作ってみた人はどんな人か
- Rails+ActiveAdminで管理ツール作る仕事をやってた
- Railsのapi modeでAPIサーバー作る仕事も最近はやっている
- JSは3年くらいまともに触っていない（ので、錆びついた知識を更新する目的もある）
今回登場するJS関連の技術
- yarn - bundlerみたいなやつ
- webpack - 1個の機能のために書いたJSとかCSSとかの複数のファイルを必要な変換とかを行った上で1個のJSファイルに固めてくれるやつ
- react - JSでUIを作るためのやつ
世では「あれとそれとこれと…を組み合わせるといいよ！」的な話があるかと思いますが、一気に新しいものに触れすぎるとわけがわからなくなってしまいそうだったので、今回は、上記３つ以外の新しい技術スタックは積まないという制約でやってます。
ここから本題
下準備
- nodeはインストールしておく
- yarnもインストールしておく
- npmで入れるのは非推奨とのことなのでbrewで
- いきなりやるよりは、webpackとreactの単独のチュートリアルは先にやっておくのがおすすめ
- 自分はwebpackに1時間、reactに3時間かかった
rails new
bundle exec rails new hello_webpacker --webpack=react --edge --api
- railsのedgeを使って、かつedgeオプションも使うことで、最新のgem構成でアプリを作れる
- yarnは言わなくても勝手に入ります
- webpack=reactと指定すると、webpackでreactを使えるように準備してくれます
--api なの？
- なんかせっかくviewをJSで処理するんなら静的ページ+APIで作ってみようと思った
- webpackとか動くんか？と思ったけどちゃんと動いた
- javascript_pack_tagとかのview機能はあったけど、簡単なscriptタグを吐くだけだったから使わなくてもいけそうと判断
rails webpack:install
- rails newの最後に走る（けど今回はなんでか失敗しててあとから手動で流した）
- yarn関連のファイルとwebpack関連のファイルが追加される
yarn関連のファイル
- vendor/package.json - Gemfileみたいなやつ
- yarnコマンドで追加すると自動で書き換わるので、手で編集する必要はあんまりない
- vendor/yarn.lock - Gemfile.lockみたいなやつ
- bin/yarn - yarnのラッパー
- .gitignoreにvendor/node_modulesが追加される
- 取ってきたパッケージの置き場所
webpack関連のファイル
- app/javascript/packs/application.js - JSアプリのサンプル
- bin/webpack - webpackのラッパー
- bin/webpack-watcher - ↑をwatchモードで起動するラッパー
- これを立ち上げておくと、jsの変更を検知してビルドが自動で走る
- config/webpack/*.js - webpackの設定ファイル
- 何形式のファイルをどうコンパイルして固めるかとかが書いてある
rails webpack:install:react
- rails newの最後に走る（けど今回はなんでか失敗しててあとから手動で流した）
- reactを使ったJSアプリのサンプルが追加される
- webpackの設定にreactの内容が追加される
- yarnで管理されるパッケージにreactが追加される
scaffoldの生成
- railsのapi modeでやるとCRUD用のapi scaffoldが生成される
- レスポンスはjson
- 今回のアプリ作成にあたって、scaffoldを生成した以降rubyのコード修正作業は一切行っていない
reactを使ったコードを書く
- ES6で書ける
- coffeeなくても、いい感じのコードが書ける（個人の感想）
- HTTPアクセスはfetch()がいい感じ
- ブラウザネイティブ
- 自分の知ってるものでは、UniRxに近い感じのメソッドチェーンで書ける
- jsonからオブジェクトに落とすのもjson()メソッドで一発
スタイルを追加する
- scssを使ってみた
- sass-loaderパッケージを追加
- 依存するcss-loader style-loader node-sassも必要
- scssをビルドする設定を追加
- これでwebpackの生成するjsの中にスタイルも含まれる
これでできあがり
作ってみた感想
- 管理ツールを作ることを考えたときに、Rails+ActiveAdminとかと比べて「最終的に機能がサクサクつくっていけるようになりそうか」っていうと割とトントンになるんじゃねーかなっていう気持ち
- 見た目部分の複雑さはJS側に寄っただけで低減はしてないという印象
- もっと技術スタックを積めば違うのかもしれないけど、それはそいつらの使い方を結局覚えないといけないってことだし
- 重要な違いは、Railsのロジック/DBアクセスとJSのviewがほぼほぼ別物として作れているというところであるように感じた
- RailsはJSのviewを作りやすい機能を提供してくれているだけという関係性、だからapi modeでも普通に動く
- 別物であるということは、それぞれ別個に差し替えることがやりやすい事を意味している。たとえばサーバー側をnodeで書くようにしたり、同じapiを扱うUnityのエディタ拡張を書く、というようなことがやりやすくなる