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