サイボウズ×マネーフォワード×Goodpatch Front-end Meetup http://connpass.com/event/30188/ #frontend_biz

1. 健全なフロントエンド開発をしよう
〜Railsに乗っかるという選択編〜
2016/05/12
平山 光太郎
Twitter: @kotaro_hirayama / GitHub: @khirayama

2. ◯概要・背景
◯実装方針
◯TIPS
◯今後
内容

3. 自己紹介
@kotaro_hirayama
@khirayama
平山 光太郎

5. マネーフォワード、Ruby on Rails/Rubyコミッター
の松田明氏を技術顧問に
フルタイムRubyコミッターを採用Ruby1.8.6/1.
8.7のリリースマネージャである卜部昌平氏が
就任

6. Rubyコミッターと
働きたいJSerのみなさん、
おいでよ！

7. お前の仕事はJSだけどな

8. マネーフォワード、Ruby on Rails/Rubyコミッター
の松田明氏を技術顧問に
フルタイムRubyコミッターを採用Ruby1.8.6/1.
8.7のリリースマネージャである卜部昌平氏が
就任

9. 仕訳帳入力
- スプレッドシートみたいなUI
- 会計向け機能が豊富

10. 実装方針

11. ◯できるだけRails Way
◯実装の初期コストが安い
◯ユニットテストを手軽に書ける環境
◯UIウェイトがデカいものは別リポジトリで作って乗っける
実装方針

12. ◯エントリポイントを決める
◯JSユニットテストの導入
◯フロントの裁量範囲を広げる
やってること

13. エントリポイントを決める

14. 期待されたものが期待されたとこにある

15. CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける

16. CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける

17. CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける
app/assets/javascript/ca_partners/index.jsを作成

18. CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける
app/assets/javascript/ca_partners/index.jsを作成
コントローラ名 アクション名

19. 複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
assets/javascript/application.js

20. 依存関係の解消
複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
assets/javascript/application.js

21. 依存関係の解消
複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
require_treeやjavascript_include_tagは不必要に使用しない
assets/javascript/application.js

22. TIPS2: Controller名とaction名を取得する
ex) views/layouts/application.html.slim
views/layouts/application.html.slimなどに上記のように記述

23. TIPS2: Controller名とaction名を取得する
JSの世界でController名とaction名を取得できるように
views/layouts/application.html.slimなどに上記のように記述
ex) views/layouts/application.html.slim

24. TIPS2: Controller名とaction名を取得する
assets/ca_partners/index.js.coffee

25. TIPS2: Controller名とaction名を取得する
assets/ca_partners/index.js.coffee
Controller名 / action名を利用してエントリポイントを動作させる

26. TIPS2: Controller名とaction名を取得する
assets/ca_partners/index.js.coffee
Controller名 / action名を利用してエントリポイントを動作させる
sprocketsなどで結合されても必要な箇所でのみ動作する
副作用の発生は、この中でのみ許可する

27. TIPS3: 実装ガイドラインの整備
非フロントエンドの人でも始めやすいようガイドラインを作成
健康な状態を維持する

28. JSユニットテストの導入

29. テストしてますか？

30. ブラウザでテストを動かす

31. /js_testを作成し、mochaをクライアントサイドで動かす。
テスティングフレームワーク: mocha
アサーションライブラリ: chai
TIPS4: ブラウザでテストを動かす
config/routes.rb
views/js_test/index.html

32. /js_testにアクセスしたら実行される

33. TIPS5: テストガイドラインの整備
非フロントエンドの人でも始めやすいようガイドラインを作成
ハードルをさげ、カバレッジをあげる

34. フロントの裁量範囲を広げる

35. 仕訳帳入力
- スプレッドシートみたいなUI
- 会計向け機能が豊富

36. 複雑な機能を作る場合、
別リポジトリで好きに作って
単体のJSライブラリにする
個人の裁量で自由に開発！
TIPS6: 別リポジトリで作成してRailsに乗っける

37. ◯Rails Wayに乗っかる（しばらくは）
◯node環境リライトしたい人は一緒やろう... |ω・`）チラ
今後

38. 今日話したこと
◯エントリポイントを決める
1ページに1エントリポイント設ける
Controller名とaction名を取得する
実装ガイドラインの整備
◯JSユニットテストの導入
ブラウザでテストを動かす
テストガイドラインの整備
◯フロントの裁量範囲を広げる
別リポジトリで作成してRailsに乗っける

39. ありがとうございました！