『健全なフロントエンド開発をしよう〜Railsに乗っかるという選択編〜』アップ用

健全なフロントエンド開発をしよう

〜Railsに乗っかるという選択編〜

2016/05/12平山光太郎

Twitter: @kotaro_hirayama / GitHub: @khirayama

◯概要・背景

◯実装方針

◯TIPS

◯今後

内容

自己紹介

@kotaro_hirayama

@khirayama

平山光太郎

マネーフォワード、Ruby on Rails/Rubyコミッターの松田明氏を技術顧問に

フルタイムRubyコミッターを採用Ruby1.8.6/1.8.7のリリースマネージャである卜部昌平氏が就任

Rubyコミッターと

働きたいJSerのみなさん、

おいでよ！

お前の仕事はJSだけどな

マネーフォワード、Ruby on Rails/Rubyコミッターの松田明氏を技術顧問に

フルタイムRubyコミッターを採用Ruby1.8.6/1.8.7のリリースマネージャである卜部昌平氏が就任

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

実装方針

◯できるだけRails Way

◯実装の初期コストが安い

◯ユニットテストを手軽に書ける環境

◯UIウェイトがデカいものは別リポジトリで作って乗っける

実装方針

◯エントリポイントを決める

◯JSユニットテストの導入

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

やってること

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

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

CaPartnersController#indexの場合

TIPS1: 1ページに1エントリポイント設ける





app/assets/javascript/ca_partners/index.jsを作成



app/assets/javascript/ca_partners/index.jsを作成

コントローラ名アクション名

複数ファイルに分割される場合、application.jsに1つずつrequireする。


assets/javascript/application.js

依存関係の解消




依存関係の解消



require_treeやjavascript_include_tagは不必要に使用しない


TIPS2: Controller名とaction名を取得する

ex) views/layouts/application.html.slim

views/layouts/application.html.slimなどに上記のように記述


JSの世界でController名とaction名を取得できるように

views/layouts/application.html.slimなどに上記のように記述

ex) views/layouts/application.html.slim


assets/ca_partners/index.js.coffee



Controller名 / action名を利用してエントリポイントを動作させる



Controller名 / action名を利用してエントリポイントを動作させる

sprocketsなどで結合されても必要な箇所でのみ動作する

副作用の発生は、この中でのみ許可する

TIPS3: 実装ガイドラインの整備

非フロントエンドの人でも始めやすいようガイドラインを作成

健康な状態を維持する

JSユニットテストの導入

テストしてますか？

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

/js_testを作成し、mochaをクライアントサイドで動かす。

テスティングフレームワーク: mochaアサーションライブラリ: chai

TIPS4: ブラウザでテストを動かす

config/routes.rb

views/js_test/index.html

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

TIPS5: テストガイドラインの整備

非フロントエンドの人でも始めやすいようガイドラインを作成

ハードルをさげ、カバレッジをあげる

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

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

複雑な機能を作る場合、

別リポジトリで好きに作って

単体のJSライブラリにする

個人の裁量で自由に開発！

TIPS6: 別リポジトリで作成してRailsに乗っける

◯Rails Wayに乗っかる（しばらくは）

◯node環境リライトしたい人は一緒やろう... |ω・`）チラ

今後

今日話したこと

◯エントリポイントを決める1ページに1エントリポイント設けるController名とaction名を取得する実装ガイドラインの整備

◯JSユニットテストの導入ブラウザでテストを動かすテストガイドラインの整備

◯フロントの裁量範囲を広げる別リポジトリで作成してRailsに乗っける

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

Engineering

『健全なフロントエンド開発をしよう 〜Railsに乗っかるという選択編〜』 アップ用

『健全なフロントエンド開発をしよう〜Railsに乗っかるという選択編〜』アップ用