『健全なフロントエンド開発をしよう...
-
Upload
kotarohirayama -
Category
Engineering
-
view
3.317 -
download
7
Transcript of 『健全なフロントエンド開発をしよう...
CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける
app/assets/javascript/ca_partners/index.jsを作成
CaPartnersController#indexの場合
TIPS1: 1ページに1エントリポイント設ける
app/assets/javascript/ca_partners/index.jsを作成
コントローラ名 アクション名
複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
assets/javascript/application.js
依存関係の解消
複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
assets/javascript/application.js
依存関係の解消
複数ファイルに分割される場合、application.jsに1つずつrequireする。
TIPS1: 1ページに1エントリポイント設ける
require_treeやjavascript_include_tagは不必要に使用しない
assets/javascript/application.js
TIPS2: Controller名とaction名を取得する
ex) views/layouts/application.html.slim
views/layouts/application.html.slimなどに上記のように記述
TIPS2: Controller名とaction名を取得する
JSの世界でController名とaction名を取得できるように
views/layouts/application.html.slimなどに上記のように記述
ex) views/layouts/application.html.slim
TIPS2: Controller名とaction名を取得する
assets/ca_partners/index.js.coffee
Controller名 / action名を利用してエントリポイントを動作させる
TIPS2: Controller名とaction名を取得する
assets/ca_partners/index.js.coffee
Controller名 / action名を利用してエントリポイントを動作させる
sprocketsなどで結合されても必要な箇所でのみ動作する
副作用の発生は、この中でのみ許可する
/js_testを作成し、mochaをクライアントサイドで動かす。
テスティングフレームワーク: mochaアサーションライブラリ: chai
TIPS4: ブラウザでテストを動かす
config/routes.rb
views/js_test/index.html
今日話したこと
◯エントリポイントを決める1ページに1エントリポイント設けるController名とaction名を取得する実装ガイドラインの整備
◯JSユニットテストの導入ブラウザでテストを動かすテストガイドラインの整備
◯フロントの裁量範囲を広げる別リポジトリで作成してRailsに乗っける