Download to read offline
オープンソースを活用したフロントエンド開発の取り組み
- 1. オープンソースを活用した フロントエンド開発の取り組み Mar. 30th, 2015 at春のフロントエンドまつり Tsutomu Ogasawara @ogaoga
- 2. 自己紹介 Tsutomu Ogasawara @ogaoga Front-end Engineer/ Team Manager
- 3. 背景 ● HTML5 やスマートフォンの普及による、 フロントエンドの重要性増大と複雑化。 ●問題解決のためにオープンソースのツール やライブラリがいろいろ出てきた。 ● 開発者が試しに使ってみたら結構便利。
- 4.
- 5.
- 6. 問題点 ● 新規開発のたびに、環境構築に時間をかけ てしまう。 ● 最新の技術、バージョンに追いつかない。 ●人によって構成がバラバラ。 長期的、組織的に非効率。
- 7. 解決案 ● ツールや構成を標準化して、誰もが同じ環 境、フローで開発ができるように。 ● 様々なサービス、開発手法にフィットする よう、カスタマイズ可能であること。 ●開発したツールが継続的にメンテナンスさ れ、常に最新の状態になること。
- 8.
- 9. Yeoman ● プロジェクトに必要なファイル一式を生成 するツール。 ● すぐに開発が始められるよう、テンプレー トやツールが準備されている。 ●対話形式でカスタマイズが可能。 ● 様々なジェネレータが利用可能。
- 10.
- 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.
- 17.
- 18.
- 19. 効果 ● 素早くプロジェクトを始められ、便利な機 能を簡単に利用できる。 ● 自動的にファイルが最適化され、意識せず にWeb パフォーマンスが向上。 ● ファイル構成やツールが標準化されたので、 複数人での開発や引き継ぎが容易に。
- 20.
- 21. オープンソース化 ● generator-rff 自体が、オープンソースの組み 合わせ。 ●GitHub / npm / Travis CI などのツールが利 用可能。 ● 外部委託案件でも利用可能。 ● 社内の取り組みを知ってもらうチャンス。
- 22.
- 23.
- 24. これから ● 標準ライブラリの充実 o CSSFramework ● デプロイとテストの自動化 o ブラウザテスト o SEO / Web Performance / Mobile Friendly
- 25. これから ● 標準ライブラリの充実 o CSSFramework ● デプロイとテストの自動化 o ブラウザテスト o SEO / Web Performance / Mobile Friendly ツール、ライブラリ、環境を 有機的に統合していく
- 26. まとめ ● オープンソースを最大限活用。 ● 自分たちの環境にあったツールを開発。 ●開発効率、Web パフォーマンスの向上。 ● メンバー間で共通の認識を持てる。 ● 対外的なアピールにも。
- 27.