Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

片手間JS on Rails

3,154 views

Published on

Roppongi.rb #3 "Rails x Frontend-Tech" での発表資料です、
Ref: https://roppongirb.connpass.com/event/56456

Published in: Technology
  • Be the first to comment

片手間JS on Rails

  1. 1. 佐藤竜之介(@tricknotes) Roppongi.rb #3 2017.05.31 片手間JS on Rails
  2. 2. @tricknotes
  3. 3. I am a maintainer of: ember-rails ruby-babel-transpiler some sprockets extensions… JS ♥ Rails 流しの Rails エンジニア 今日は Sprockets 枠
  4. 4. よろしく お願いします 角谷
  5. 5. 佐藤竜之介(@tricknotes) Roppongi.rb #3 2017.05.31 片手間JS on Rails
  6. 6. 今日の話 Rails でのアプリ開発において、 “ 片手間” で JS を書きたい人のため の Rails と JS の関係をビルドツー ルを切り口として考察する。 現在多くの選択肢があり、なにを どう選ぶのがよいか判断が難しい
  7. 7. 今日は自分のいままでの経験から の気づきと実例をお話する これから取り組むひとにとっての ヒントになると嬉しい
  8. 8. Q. JS ライブラリは何を使う? A. 各自よしなに ※トークのスコープ外です
  9. 9. 今日はビルドツールに 主眼をおいて考えたい
  10. 10. JS ライブラリの選択とビ ルドツールの選択は完全 に直交した話しではない が、区別して考えると選 択肢が増えるのでおすす め
  11. 11. ビルドツールのいくつかを分類してみる Webpacker sprockets-commoner Rails JS JSライブラリ非依存度 sprockets Webpack xxx-rails xxx_on_rails ※個人の見解です xxx-cli
  12. 12. ビルドツールのいくつかを分類してみる Webpacker sprockets-commoner Rails JS JSライブラリ非依存度 sprockets Webpack xxx-rails xxx_on_rails ※個人の見解です xxx-cli ルも含まれているので単純な比較は難しいが
  13. 13. では何を判断基準に するとよいか?
  14. 14. - 作るもの - 作り方 - チーム いくつか軸となりそうなもの
  15. 15. 作るもの 判断基準その1
  16. 16. ポイントは JS と Rails の 結合度合い ウェブサイト ハイブリッド型 埋め込み型 SPA 密 疎
  17. 17. ポイントは JS と Rails の 結合度合い ウェブサイト ハイブリッド型 埋め込み型 SPA 密 疎ここがよく観測される。そして悩ましい
  18. 18. すべての Rails アプリがウェブ サイトもしくは SPA になると 幸せかというとそんなことはな い(と思う) 適材適所
  19. 19. JS と Rails が疎であれば、そ れぞれやりやすいようにアセッ トを管理すればよい
  20. 20. ここで難しいのが、Rails のコ ードと JS のコードがどちらも そこそこの分量存在するアプリ ケーション
  21. 21. 例えば、 • view を共有させたかったり… • i18n を共有させたかったり… • 設定値を渡したかったり… Rails と JS の接点
  22. 22. Rails アプリのある画面でイン タラクションのあるとてもリッ チなフォームを作りたい。 ただしフォームで表示するデー タや振る舞いは Rails に定義さ れている。 例えば…(状況)
  23. 23. JS のエントリーポイントでデ ータを渡しもよいが、静的な値 であればビルド時に設定してお いたほうが JS コードがシンプ ルになる場合がある。 (異論は受け付けます) 例えば…(アプローチ)
  24. 24. i18n-js のような Sprockets ベ ースの gem を使うのも一つの 手 もしくは、Webpacker の rails- erb-loader を使ってもよさそう
  25. 25. JS と Rails の結合度が高い場 合は、ビルドも一緒に行うこと を検討してもよいのでは (ただし、まずは設計を見直し てみることも大切)
  26. 26. 作り方 判断基準その2
  27. 27. Rails / JS どちらのエコシ ステムに寄せるか? Sprockets で十分か?
  28. 28. 正直、Node.js のエコシ ステムの成長がめざまし い 一方、Sprockets 拡張は 導入がとても簡単
  29. 29. どちらにしても、静的な JS ライブラリは yarn (NPM) でインストールで きる
  30. 30. s の asset 管理に慣れた開発者にとって 必要としない JS を Rails から使うので ockets + yarn で十分なケースは多々あ
  31. 31. Sprockets も意外と頑張っている • Babel サポート(まだ5…) • ソースマップサポート • パイプライン処理中のメタデータ保持 • 拡張 API の改善(カスタマイズポイント を分離) ※Sprockets 4.0.0.beta4現在
  32. 32. じゃあ Sprockets だと足 りない場合ってどういう 場合?
  33. 33. • ビルドが必要な JS のライブラリ を使いたい場合 • 気の利いたプリプロセッサを使い たい場合(babel プラグインなど)
  34. 34. とは言え、Sprockets 周りに不 安要素があるのも事実 各種 loader の不在 メンテナのリソース不足 Node エコシステムとの乖離
  35. 35. いま作ろうとしているも のに対して、Sprockets の機能が足りているかい ないか、が判断基準にな りそう
  36. 36. チーム 判断基準その3
  37. 37. 他のメンバーはどれくら い JS のツール群に興味 があるか? (Rails には興味がある前 提で)
  38. 38. Sprockets だと、”ウェブ サイト” 制作の延長線で開 発できる JS のツールを選択するの だと、それなりにメンタ ルモデルの転換が必要
  39. 39. 特にアプリケーション開 発とデザインのコーディ ングを分けるのであれば 、お互いが変更を加えや すい落とし所を探りたい
  40. 40. わたしの 実例
  41. 41. ケース1 Asset Pipeline でハイブリッド 型の SPA を管理した
  42. 42. ケース1: Asset Pipeline Ember ember-rails(Sprockets) その他のJS/CSS
  43. 43. • 1つの Rails アプリに複数の Ember.js ア プリ を埋め込んでいる • チームとしては JS のエコシステムにあま り明るくない • ember-rails (Sprockets ベース)を使った ケース1: Asset Pipeline
  44. 44. • Pros • アセット関連でハマったときに疑う個所が Sprockets 周りだけ • いつもの Rails のお作法で JS を変更できる • i18n、環境変数、もろもろを共有が楽だった • Cons • Ember のエコシステムに乗れないので、アド オンの利用が制限される • Rails と Ember で view を共有したのは動いて いたけど実装は無理をしていた感 ケース1: Asset Pipeline
  45. 45. ケース2 Webpacker で埋め込み型の SPA を管理した
  46. 46. React Webpacker ケース2: Webpacker Sprockets その他のJS/CSS
  47. 47. ケース2: Webpacker • React アプリをある画面でだけ使いたい • JS ができるチームだが、Webpack の設 定にあまり興味はない(だいたいいい感じ であれば) • Rails とのインテグレーションも勝手にや ってほしかったので採用
  48. 48. • Pros • Webpack の設定が最初からそこそこちゃんと 動くようになっている • react_on_rails と組み合わせて SSR も特に苦 がなくできた • Rails の設定値を JS でも引き回せた • Cons • Webpacker のバージョン上がるたびに世界が 変わる ケース2: Webpacker
  49. 49. ふりかえってみて
  50. 50. • コードは意外とビルドツールに依存するので、 コードベースが育ってから別の仕組みに載せ替 えるのはけっこう大変(ES module syntax とか) • とはいえ、最初から状況に合わない選択肢をす るとそれはもっと大変 • 最適解は状況によって異なる
  51. 51. JS ライブラリと Rails の共存 の仕方はいろいろある。 判断基準となる変数が多いの で、状況によって何がよいか はまちまち まとめ
  52. 52. まぜると辛いのはその通りだ が、実現したいことを考えて バランスで取りつつやるのは あり…!?
  53. 53. まずは使いたいライブラリと 使い方を選択したら、あらた めてビルドツールについても 検討してみるとよさそう
  54. 54. 当然ながら、何を選択するに しても良し悪しはある。
  55. 55. 実際にどういう前提があって 、どういう選択をしたかとい いう知見を交換できるとあり がたいです :pray:

×