More Related Content
Similar to 我が家のフロントエンド開発事情 (20)
我が家のフロントエンド開発事情
- 8. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
Agenda
- 9. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
1.
- 13. 2015 年 11 月末
Web 版リリース ( 仮 )
Coming soon...
- 14. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
2.
- 16. SPA なので JavaScript が大規模になるのは必然
• 変化の激しい Web フロントエンド界隈
• デファクトスタンダードの生まれにくい領域
• ひとつずつ自分達で調査しつつ、手探りで環境構築
• 流行は適度に取り入れつつ、分かりやすさを重視
• 問題に直面したら、開発の最中でも躊躇なく見直す
- 18. TypeScript
• Microsoft が開発した AltJS ( トランスパイラ )
• JavaScript のスーパーセット ( 完全上位互換 )
• 静的型付け言語
• 型推論あり
• 圧倒的多機能
• Class, Interface, Arrow func, Generic, Module, Namespace …
基本的には推論に頼らず
全力で型定義します
- 19. TypeScript
• Java, C# にインスパイアされた言語仕様
• ECMAScript 6 の仕様を積極的に採用している
• コンパイル後の JS コードは美しく読み易い
• 既存 JS ライブラリの多くが使える ( 充実の型定義ファイル )
- 21. そのほか候補になった JS トランスパイラ
ES6 で書かれた JS コードを ES5 に変換する
トランスパイラ
今年の旬な技術ではあるが、
やはり型を持たないという理由から NG
ES6 の文法は TypeScript でもだいたい書けるので
あえてこちらに拘る理由は薄い
- 23. AngularJS
• Google が開発したフルスタック JS フレームワーク
• 圧倒的多機能
• Data binding, Routing, Custom directive, D.I, Promise, and more…
• 特に強力なルーティング機能は SPA にうってつけ
• AngularUI-Router モジュールと組み合わせれば最強
- 26. 今年最も旬な JS フレームワーク ( ? )
AngularJS と比較して知見が少ない
( 2015年初頭はまだ情報が少なかった )
そのほか候補になった JS フレームワーク
JSX の文法が独特すぎて
馴染める自信が持てなかった
意識高い系の人たちがやたら推しているが
どの発言も眉唾くさい印象
React
- 29. • Canvas や Audio 等をいい感じにお世話してくれる
• 各種 API が Flash ( AS3 ) のそれと酷似している
• TypeScript との相性が抜群
• リッチコンテンツを表現する箇所で使用
• Canvas を使ったアニメーション
• オーディオファイルの再生
• メディアファイルの非同期読み込み
CreateJS
- 30. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
3.
- 34. タスクランナー
Gulp
• TypeScript, SCSS, Jade のコンパイル
• ローカルサーバーの起動
• Web フォントの生成
• その他なんでも…
$ npm install -g gulp
詳しくは弊社のブログを読め!
http://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/
- 40. TypeScript はコンパイラ自体が IDE 用 API を
持っているため、エディタにコード補完といった機
能を持たせやすい
コード補完 - TypeScript の場合
VisualStudio と同等の補完機能が期待できる
僕は IntelliJ と SublimeText
を使っています
- 41. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
4.
- 43. 1. いま取り組んでいる仕事
2. SPA 開発するにあたり採用したテクノロジー
3. これらを踏まえた我が家のフロントエンド開発環境
4. 大まかなアプリケーション構成
5. サーバー側とうまく連携するために必要なこと
5.
- 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/