2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたもの

1. 我が家のフロントエンド開発事情
山田 直樹
株式会社リクルートマーケティングパートナーズ
2015.09.24
- Web application development environment -

2. 自己紹介
俺の名前を言ってみろ

3. 自己紹介
山田 直樹
@wakamsha
株式会社リクルートマーケティングパートナーズ
フロントエンドエンジニア
2014年7月 入社 ( 3 社目 )
リクルートに来る前は UI デザイナー & フロントエンドエンジニアとして
業務系アプリケーションの UI 設計から開発までをやっていた

4. https://ryorisapuri.jp
料理サプリ

6. http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

8. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
Agenda

9. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
1.

10. 新規サービスを
SPA で作っています
Single Page Application

12. Web Server

13. 2015 年 11 月末
Web 版リリース ( 仮 )
Coming soon...

14. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
2.

15. SinglePageApplication なので
JavaScript が大規模になるのは必然
Too Fat Front-end Code

16. SPA なので JavaScript が大規模になるのは必然
• 変化の激しい Web フロントエンド界隈
• デファクトスタンダードの生まれにくい領域
• ひとつずつ自分達で調査しつつ、手探りで環境構築
• 流行は適度に取り入れつつ、分かりやすさを重視
• 問題に直面したら、開発の最中でも躊躇なく見直す

17. TypeScript
A typed superset of JavaScript that compiles to plain JavaScript.

18. TypeScript
• Microsoft が開発した AltJS ( トランスパイラ )
• JavaScript のスーパーセット ( 完全上位互換 )
• 静的型付け言語
• 型推論あり
• 圧倒的多機能
• Class, Interface, Arrow func, Generic, Module, Namespace …
基本的には推論に頼らず
全力で型定義します

19. TypeScript
• Java, C# にインスパイアされた言語仕様
• ECMAScript 6 の仕様を積極的に採用している
• コンパイル後の JS コードは美しく読み易い
• 既存 JS ライブラリの多くが使える ( 充実の型定義ファイル )

20. Vanilla JS よりはずっと高機能だが、
動的型付けなのは大規模開発において不利
複数人で開発する以上、型は必須要件
( ある程度コーディングにも統制がとれる )
そのほか候補になった JS トランスパイラ
今後 ES6 が浸透していくことを考えると
この時期にあえて選択する必要性は低いとも

21. そのほか候補になった JS トランスパイラ
ES6 で書かれた JS コードを ES5 に変換する
トランスパイラ
今年の旬な技術ではあるが、
やはり型を持たないという理由から NG
ES6 の文法は TypeScript でもだいたい書けるので
あえてこちらに拘る理由は薄い

22. AngularJS
Superheroic JavaScript MVW Framework

23. AngularJS
• Google が開発したフルスタック JS フレームワーク
• 圧倒的多機能
• Data binding, Routing, Custom directive, D.I, Promise, and more…
• 特に強力なルーティング機能は SPA にうってつけ
• AngularUI-Router モジュールと組み合わせれば最強

24. Custom directive
独自の機能を実装したタグやプロパティを定義できる

25. AngularJS TypeScript
TypeScript との相性が抜群
コントローラ、サービス、ディレクティブなど
機能別にクラス化しやすい
ただし、知見は少なめ
( ググっても実践的な情報は殆ど出てこない )

26. 今年最も旬な JS フレームワーク ( ? )
AngularJS と比較して知見が少ない
( 2015年初頭はまだ情報が少なかった )
そのほか候補になった JS フレームワーク
JSX の文法が独特すぎて
馴染める自信が持てなかった
意識高い系の人たちがやたら推しているが
どの発言も眉唾くさい印象
React

27. AngularJS が流行る前は皆これに夢中だった
わりと素直な MVC (P) が書けるのは好印象
Marionette と組み合わせれば、混沌としがちな
Backboneのコードにもある程度統制がとれる
これから作るアプリの規模を考えると
やや力不足を感じる
そのほか候補になった JS フレームワーク

28. CreateJS
A suite of JavaScript libraries and tools designed for working with HTML5

29. • Canvas や Audio 等をいい感じにお世話してくれる
• 各種 API が Flash ( AS3 ) のそれと酷似している
• TypeScript との相性が抜群
• リッチコンテンツを表現する箇所で使用
• Canvas を使ったアニメーション
• オーディオファイルの再生
• メディアファイルの非同期読み込み
CreateJS

30. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
3.

31. 流行は適度に取り入れる
分かりやすさ & 説明しやすさを重視
大事なことなので二回言いました

33. JavaScript 実行環境
これをベースに開発環境を構築し、
様々なツールを動かす
一時期、io.js と対立 (?) していたっぽいけど、
最終的に和解して統合。Ver.4.0 がリリース
node.js

34. タスクランナー
Gulp
• TypeScript, SCSS, Jade のコンパイル
• ローカルサーバーの起動
• Web フォントの生成
• その他なんでも…
$ npm install -g gulp
詳しくは弊社のブログを読め！
http://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/

35. フロントエンド関連のパッケージ管理ツール
Bower
AngularJS, CreateJS, Bootstrap
といった外部ライブラリは全てこれ経由で
取得 & 管理
Browserify や Webpack の採用も検討したが、
諸々と不都合があったので却下

36. CSS を生成するプリプロセッサー言語
SCSS
Gulp 経由で使用する
ただし Less, てめーはダメだ
Sass でも Stylus でもお好きなのをどうぞ

37. HTML を生成するプリプロセッサー言語
Jade
Gulp 経由で使用する
Haml や Slim と非常によく似た文法だが、
機能はそれらに一段劣る

38. JavaScript のユニットテストツール
Jasmine Karma
AngularJS の標準テスティングフレームワーク
詳しくは弊社のブログを読め！
http://tech.recruit-mp.co.jp/front-end/post-5299/
テストを導入するかは、エンジニアのスキルと
リソース ( 期間 ) に応じて柔軟に判断すること
スキル or 期間に不安があるのなら
潔く切り捨てよう

40. TypeScript はコンパイラ自体が IDE 用 API を
持っているため、エディタにコード補完といった機
能を持たせやすい
コード補完 - TypeScript の場合
VisualStudio と同等の補完機能が期待できる
僕は IntelliJ と SublimeText
を使っています

41. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
4.

42. AngularUI and TypeScript
Architecture
https://github.com/wakamsha/angular-ui_typescript

43. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
5.

44. API ドキュメントは
必須

45. API ドキュメントは必須
• サーバー <=>クライアントは API のみでやり取りする
• どのような ( JSON ) 形式で通信するのか常に把握しておくことが必要
• 開発中もドキュメントを常に最新にしておくことで認識に齟齬が生まれ
るのを防ぐ

46. API Blueprint 仕様で書かれた
Markdown ファイル
gulp-aglio で Markdown ファイルから
静的 HTML を生成
適当なサーバーにアップロードすれば
立派な API ドキュメントページが完成
API ドキュメント作成ツール
gulp-aglioAPI Blueprint
詳しくは弊社のブログを読め！
http://tech.recruit-mp.co.jp/dev-tools/post-6138/

47. Demo
https://github.com/wakamsha/try_gulp/tree/master/try_api

48. Q & A
Any Questions ?

49. Thank you :)