片手間JS on Rails
•Download as PPTX, PDF•
4 likes•6,288 views
Roppongi.rb #3 "Rails x Frontend-Tech" での発表資料です、 Ref: https://roppongirb.connpass.com/event/56456
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 片手間JS on Rails
More from Ryunosuke SATO
Recently uploaded
Recently uploaded (10)
片手間JS on Rails
- 3. @tricknotes
- 4. I am a maintainer of: ember-rails ruby-babel-transpiler some sprockets extensions… JS ♥ Rails 流しの Rails エンジニア 今日は Sprockets 枠
- 7. 今日の話 Rails でのアプリ開発において、 “ 片手間” で JS を書きたい人のため の Rails と JS の関係をビルドツー ルを切り口として考察する。 現在多くの選択肢があり、なにを どう選ぶのがよいか判断が難しい
- 9. Q. JS ライブラリは何を使う？ A. 各自よしなに ※トークのスコープ外です
- 15. - 作るもの - 作り方 - チーム いくつか軸となりそうなもの
- 16. 作るもの 判断基準その１
- 17. ポイントは JS と Rails の 結合度合い ウェブサイト ハイブリッド型 埋め込み型 SPA 密 疎
- 18. ポイントは JS と Rails の 結合度合い ウェブサイト ハイブリッド型 埋め込み型 SPA 密 疎ここがよく観測される。そして悩ましい
- 19. すべての Rails アプリがウェブ サイトもしくは SPA になると 幸せかというとそんなことはな い(と思う) 適材適所
- 20. JS と Rails が疎であれば、そ れぞれやりやすいようにアセッ トを管理すればよい
- 21. ここで難しいのが、Rails のコ ードと JS のコードがどちらも そこそこの分量存在するアプリ ケーション
- 22. 例えば、 • view を共有させたかったり… • i18n を共有させたかったり… • 設定値を渡したかったり… Rails と JS の接点
- 23. Rails アプリのある画面でイン タラクションのあるとてもリッ チなフォームを作りたい。 ただしフォームで表示するデー タや振る舞いは Rails に定義さ れている。 例えば…(状況)
- 24. JS のエントリーポイントでデ ータを渡しもよいが、静的な値 であればビルド時に設定してお いたほうが JS コードがシンプ ルになる場合がある。 (異論は受け付けます) 例えば…(アプローチ)
- 25. i18n-js のような Sprockets ベ ースの gem を使うのも一つの 手 もしくは、Webpacker の rails- erb-loader を使ってもよさそう
- 26. JS と Rails の結合度が高い場 合は、ビルドも一緒に行うこと を検討してもよいのでは (ただし、まずは設計を見直し てみることも大切)
- 27. 作り方 判断基準その２
- 28. Rails / JS どちらのエコシ ステムに寄せるか？ Sprockets で十分か？
- 30. どちらにしても、静的な JS ライブラリは yarn (NPM) でインストールで きる
- 31. s の asset 管理に慣れた開発者にとって 必要としない JS を Rails から使うので ockets + yarn で十分なケースは多々あ
- 32. Sprockets も意外と頑張っている • Babel サポート(まだ5…) • ソースマップサポート • パイプライン処理中のメタデータ保持 • 拡張 API の改善(カスタマイズポイント を分離) ※Sprockets 4.0.0.beta4現在
- 34. • ビルドが必要な JS のライブラリ を使いたい場合 • 気の利いたプリプロセッサを使い たい場合(babel プラグインなど)
- 35. とは言え、Sprockets 周りに不 安要素があるのも事実 各種 loader の不在 メンテナのリソース不足 Node エコシステムとの乖離
- 37. チーム 判断基準その３
- 38. 他のメンバーはどれくら い JS のツール群に興味 があるか？ (Rails には興味がある前 提で)
- 39. Sprockets だと、”ウェブ サイト” 制作の延長線で開 発できる JS のツールを選択するの だと、それなりにメンタ ルモデルの転換が必要
- 41. わたしの 実例
- 42. ケース1 Asset Pipeline でハイブリッド 型の SPA を管理した
- 44. • 1つの Rails アプリに複数の Ember.js ア プリ を埋め込んでいる • チームとしては JS のエコシステムにあま り明るくない • ember-rails (Sprockets ベース)を使った ケース1: Asset Pipeline
- 45. • Pros • アセット関連でハマったときに疑う個所が Sprockets 周りだけ • いつもの Rails のお作法で JS を変更できる • i18n、環境変数、もろもろを共有が楽だった • Cons • Ember のエコシステムに乗れないので、アド オンの利用が制限される • Rails と Ember で view を共有したのは動いて いたけど実装は無理をしていた感 ケース1: Asset Pipeline
- 48. ケース2: Webpacker • React アプリをある画面でだけ使いたい • JS ができるチームだが、Webpack の設 定にあまり興味はない(だいたいいい感じ であれば) • Rails とのインテグレーションも勝手にや ってほしかったので採用
- 49. • Pros • Webpack の設定が最初からそこそこちゃんと 動くようになっている • react_on_rails と組み合わせて SSR も特に苦 がなくできた • Rails の設定値を JS でも引き回せた • Cons • Webpacker のバージョン上がるたびに世界が 変わる ケース2: Webpacker
- 50. ふりかえってみて
- 51. • コードは意外とビルドツールに依存するので、 コードベースが育ってから別の仕組みに載せ替 えるのはけっこう大変(ES module syntax とか) • とはいえ、最初から状況に合わない選択肢をす るとそれはもっと大変 • 最適解は状況によって異なる
- 52. JS ライブラリと Rails の共存 の仕方はいろいろある。 判断基準となる変数が多いの で、状況によって何がよいか はまちまち まとめ