我が家のフロントエンド開発事情
TRANSCRIPT
我が家のフロントエンド開発事情
山田 直樹 株式会社リクルートマーケティングパートナーズ 2015.09.24
- Web application development environment -
自己紹介
俺の名前を言ってみろ
自己紹介
山田 直樹 @wakamsha 株式会社リクルートマーケティングパートナーズ フロントエンドエンジニア
2014年7月 入社 ( 3 社目 ) リクルートに来る前は UI デザイナー & フロントエンドエンジニアとして 業務系アプリケーションの UI 設計から開発までをやっていた
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
Agenda
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
1.
新規サービスを SPA で作っています
Single Page Application
Web Server
2015 年 11 月末 Web 版リリース ( 仮 )
Coming soon...
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
2.
SinglePageApplication なので JavaScript が大規模になるのは必然
Too Fat Front-end Code
SPA なので JavaScript が大規模になるのは必然
• 変化の激しい Web フロントエンド界隈
• デファクトスタンダードの生まれにくい領域
• ひとつずつ自分達で調査しつつ、手探りで環境構築
• 流行は適度に取り入れつつ、分かりやすさを重視
• 問題に直面したら、開発の最中でも躊躇なく見直す
TypeScriptA typed superset of JavaScript that compiles to plain JavaScript.
TypeScript
• Microsoft が開発した AltJS ( トランスパイラ )
• JavaScript のスーパーセット ( 完全上位互換 )
• 静的型付け言語
• 型推論あり
• 圧倒的多機能 • Class, Interface, Arrow func, Generic, Module, Namespace …
基本的には推論に頼らず 全力で型定義します
TypeScript
• Java, C# にインスパイアされた言語仕様
• ECMAScript 6 の仕様を積極的に採用している
• コンパイル後の JS コードは美しく読み易い
• 既存 JS ライブラリの多くが使える ( 充実の型定義ファイル )
Vanilla JS よりはずっと高機能だが、 動的型付けなのは大規模開発において不利
複数人で開発する以上、型は必須要件 ( ある程度コーディングにも統制がとれる )
そのほか候補になった JS トランスパイラ
今後 ES6 が浸透していくことを考えると この時期にあえて選択する必要性は低いとも
そのほか候補になった JS トランスパイラ
ES6 で書かれた JS コードを ES5 に変換する トランスパイラ
今年の旬な技術ではあるが、 やはり型を持たないという理由から NG
ES6 の文法は TypeScript でもだいたい書けるので あえてこちらに拘る理由は薄い
AngularJSSuperheroic JavaScript MVW Framework
AngularJS
• Google が開発したフルスタック JS フレームワーク
• 圧倒的多機能 • Data binding, Routing, Custom directive, D.I, Promise, and more…
• 特に強力なルーティング機能は SPA にうってつけ
• AngularUI-Router モジュールと組み合わせれば最強
Custom directive
独自の機能を実装したタグやプロパティを定義できる
AngularJS × TypeScript
TypeScript との相性が抜群
コントローラ、サービス、ディレクティブなど 機能別にクラス化しやすい
ただし、知見は少なめ ( ググっても実践的な情報は殆ど出てこない )
今年最も旬な JS フレームワーク ( ? )
AngularJS と比較して知見が少ない ( 2015年初頭はまだ情報が少なかった )
そのほか候補になった JS フレームワーク
JSX の文法が独特すぎて 馴染める自信が持てなかった
意識高い系の人たちがやたら推しているが どの発言も眉唾くさい印象
React
AngularJS が流行る前は皆これに夢中だった わりと素直な MVC (P) が書けるのは好印象
Marionette と組み合わせれば、混沌としがちなBackboneのコードにもある程度統制がとれる
これから作るアプリの規模を考えると やや力不足を感じる
そのほか候補になった JS フレームワーク
CreateJSA suite of JavaScript libraries and tools designed for working with HTML5
• Canvas や Audio 等をいい感じにお世話してくれる
• 各種 API が Flash ( AS3 ) のそれと酷似している
• TypeScript との相性が抜群
• リッチコンテンツを表現する箇所で使用
• Canvas を使ったアニメーション
• オーディオファイルの再生
• メディアファイルの非同期読み込み
CreateJS
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
3.
流行は適度に取り入れる 分かりやすさ & 説明しやすさを重視
大事なことなので二回言いました
JavaScript 実行環境
これをベースに開発環境を構築し、 様々なツールを動かす
一時期、io.js と対立 (?) していたっぽいけど、 最終的に和解して統合。Ver.4.0 がリリース
node.js
タスクランナー
Gulp
• TypeScript, SCSS, Jade のコンパイル • ローカルサーバーの起動 • Web フォントの生成 • その他なんでも…
$ npm install -g gulp
詳しくは弊社のブログを読め！ http://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/
フロントエンド関連のパッケージ管理ツール
Bower
AngularJS, CreateJS, Bootstrap といった外部ライブラリは全てこれ経由で 取得 & 管理
Browserify や Webpack の採用も検討したが、 諸々と不都合があったので却下
CSS を生成するプリプロセッサー言語
SCSS
Gulp 経由で使用する
ただし Less, てめーはダメだ
Sass でも Stylus でもお好きなのをどうぞ
HTML を生成するプリプロセッサー言語
Jade
Gulp 経由で使用する
Haml や Slim と非常によく似た文法だが、 機能はそれらに一段劣る
JavaScript のユニットテストツール
Jasmine × Karma
AngularJS の標準テスティングフレームワーク
詳しくは弊社のブログを読め！ http://tech.recruit-mp.co.jp/front-end/post-5299/
テストを導入するかは、エンジニアのスキルと リソース ( 期間 ) に応じて柔軟に判断すること
スキル or 期間に不安があるのなら 潔く切り捨てよう
TypeScript はコンパイラ自体が IDE 用 API を 持っているため、エディタにコード補完といった機能を持たせやすい
コード補完 - TypeScript の場合
VisualStudio と同等の補完機能が期待できる
僕は IntelliJ と SublimeText を使っています
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
4.
AngularUI and TypeScript Architecture
https://github.com/wakamsha/angular-ui_typescript
1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
5.
API ドキュメントは 必須
API ドキュメントは必須
• サーバー <=>クライアントは API のみでやり取りする
• どのような ( JSON ) 形式で通信するのか常に把握しておくことが必要
• 開発中もドキュメントを常に最新にしておくことで認識に齟齬が生まれるのを防ぐ
API Blueprint 仕様で書かれた Markdown ファイル
gulp-aglio で Markdown ファイルから 静的 HTML を生成
適当なサーバーにアップロードすれば 立派な API ドキュメントページが完成
API ドキュメント作成ツール
gulp-aglioAPI Blueprint
詳しくは弊社のブログを読め！ http://tech.recruit-mp.co.jp/dev-tools/post-6138/
Demohttps://github.com/wakamsha/try_gulp/tree/master/try_api
Q & AAny Questions ?
Thank you :)