我が家のフロントエンド開発事情

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

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

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

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

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

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

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

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

9. Web Server

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

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

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

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

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

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

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

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

19. AngularJS Superheroic JavaScript MVW Framework

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

43. Q & A Any Questions ?

44. Thank you :)

我が家のフロントエンド開発事情

Esté a ler uma amostra.

Confira estes a seguir

我が家のフロントエンド開発事情

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Semelhante a 我が家のフロントエンド開発事情 (20)

Mais recentes (20)