2015/05/30 に開催された「春のフロントエンド祭り」の発表資料。

1. オープンソースを活用した
フロントエンド開発の取り組み
Mar. 30th, 2015
at 春のフロントエンドまつり
Tsutomu Ogasawara
@ogaoga

2. 自己紹介
Tsutomu Ogasawara
@ogaoga
Front-end Engineer / Team Manager

3. 背景
● HTML5 やスマートフォンの普及による、
フロントエンドの重要性増大と複雑化。
● 問題解決のためにオープンソースのツール
やライブラリがいろいろ出てきた。
● 開発者が試しに使ってみたら結構便利。

4. オレオレ Gruntfile.js の大量発生

5. 問題点
● 新規開発のたびに、環境構築に時間をかけ
てしまう。
● 最新の技術、バージョンに追いつかない。
● 人によって構成がバラバラ。

6. 問題点
● 新規開発のたびに、環境構築に時間をかけ
てしまう。
● 最新の技術、バージョンに追いつかない。
● 人によって構成がバラバラ。
長期的、組織的に非効率。

7. 解決案
● ツールや構成を標準化して、誰もが同じ環
境、フローで開発ができるように。
● 様々なサービス、開発手法にフィットする
よう、カスタマイズ可能であること。
● 開発したツールが継続的にメンテナンスさ
れ、常に最新の状態になること。

8. Yeoman

9. Yeoman
● プロジェクトに必要なファイル一式を生成
するツール。
● すぐに開発が始められるよう、テンプレー
トやツールが準備されている。
● 対話形式でカスタマイズが可能。
● 様々なジェネレータが利用可能。

10. Yeoman

11. generator-rff
● 自分たちの開発にフィットする Yeoman ジ
ェネレータを開発。
● ファイル構成や設定の標準化と、その一元
管理。
● 様々な言語、構成、オプションに対応。

12. generator-rff
$ npm install -g generator-rff
$ yo rff

14. generator-rff
Markup
HTML / Jade
Stylesheet
CSS / Sass / LESS / Stylus
Script
JavaScript / CoffeeScript
Utilities
CSS Autoprefixer / CSS Sprite
/ Icon Fonts
Libraries
Mordernizr
Testing
HTML Validation / CSS Lint
/ JSHint / JSCS / Mocha
/ Jasmine
Optimization
Minification / SVG Optimization
/ Static Revision Revisioning
Deployment
Deploy to Git repository
/ Deploy via FTP
Others
SSI Support on preview

15. generator-rff
生成されたプロジェクトに含まれている機能
● ビルド（Grunt）
● プレビュー（BrowserSync）
● パッケージ管理（Bower）
● デプロイ（Git / FTP）
● etc...

16. generator-rff / ビルド
Grunt

17. generator-rff / プレビュー
BrowserSync デモ

18. generator-rff / パッケージ管理
Bower デモ

19. 効果
● 素早くプロジェクトを始められ、便利な機
能を簡単に利用できる。
● 自動的にファイルが最適化され、意識せず
に Web パフォーマンスが向上。
● ファイル構成やツールが標準化されたので、
複数人での開発や引き継ぎが容易に。

20. オープンソース化
https://github.com/rakuten-frontend/generator-rff

21. オープンソース化
● generator-rff 自体が、オープンソースの組み
合わせ。
● GitHub / npm / Travis CI などのツールが利
用可能。
● 外部委託案件でも利用可能。
● 社内の取り組みを知ってもらうチャンス。

22. オープンソース化
https://github.com/rakuten-frontend/bower-browser

23. オープンソース化

24. これから
● 標準ライブラリの充実
o CSS Framework
● デプロイとテストの自動化
o ブラウザテスト
o SEO / Web Performance / Mobile Friendly

25. これから
● 標準ライブラリの充実
o CSS Framework
● デプロイとテストの自動化
o ブラウザテスト
o SEO / Web Performance / Mobile Friendly
ツール、ライブラリ、環境を
有機的に統合していく

26. まとめ
● オープンソースを最大限活用。
● 自分たちの環境にあったツールを開発。
● 開発効率、Web パフォーマンスの向上。
● メンバー間で共通の認識を持てる。
● 対外的なアピールにも。

27. Thanks!