オープンソースを活用したフロントエンド開発の取り組み
TRANSCRIPT
オープンソースを活用したフロントエンド開発の取り組み
Mar. 30th, 2015at 春のフロントエンドまつり
Tsutomu Ogasawara@ogaoga
自己紹介
Tsutomu Ogasawara@ogaogaFront-end Engineer / Team Manager
背景
● HTML5 やスマートフォンの普及による、フロントエンドの重要性増大と複雑化。
● 問題解決のためにオープンソースのツールやライブラリがいろいろ出てきた。
● 開発者が試しに使ってみたら結構便利。
オレオレ Gruntfile.js の大量発生
問題点
● 新規開発のたびに、環境構築に時間をかけてしまう。
● 最新の技術、バージョンに追いつかない。● 人によって構成がバラバラ。
問題点
● 新規開発のたびに、環境構築に時間をかけてしまう。
● 最新の技術、バージョンに追いつかない。● 人によって構成がバラバラ。
長期的、組織的に非効率。
解決案
● ツールや構成を標準化して、誰もが同じ環境、フローで開発ができるように。
● 様々なサービス、開発手法にフィットするよう、カスタマイズ可能であること。
● 開発したツールが継続的にメンテナンスされ、常に最新の状態になること。
Yeoman
Yeoman
● プロジェクトに必要なファイル一式を生成するツール。
● すぐに開発が始められるよう、テンプレートやツールが準備されている。
● 対話形式でカスタマイズが可能。● 様々なジェネレータが利用可能。
Yeoman
generator-rff
● 自分たちの開発にフィットする Yeoman ジェネレータを開発。
● ファイル構成や設定の標準化と、その一元管理。
● 様々な言語、構成、オプションに対応。
generator-rff
$ npm install -g generator-rff$ yo rff
generator-rffMarkup
HTML / JadeStylesheetCSS / Sass / LESS / StylusScriptJavaScript / CoffeeScriptUtilitiesCSS Autoprefixer / CSS Sprite
/ Icon FontsLibrariesMordernizr
TestingHTML Validation / CSS Lint
/ JSHint / JSCS / Mocha/ JasmineOptimization
Minification / SVG Optimization/ Static Revision RevisioningDeployment
Deploy to Git repository/ Deploy via FTPOthersSSI Support on preview
generator-rff
生成されたプロジェクトに含まれている機能● ビルド（ Grunt）● プレビュー（ BrowserSync）● パッケージ管理（ Bower）● デプロイ（ Git / FTP）● etc...
generator-rff / ビルド
Grunt
generator-rff / プレビュー
BrowserSync デモ
generator-rff / パッケージ管理
Bower デモ
効果
● 素早くプロジェクトを始められ、便利な機能を簡単に利用できる。
● 自動的にファイルが最適化され、意識せず に Web パフォーマンスが向上。
● ファイル構成やツールが標準化されたので、複数人での開発や引き継ぎが容易に。
オープンソース化
https://github.com/rakuten-frontend/generator-rff
オープンソース化
● generator-rff 自体が、オープンソースの組み合わせ。
● GitHub / npm / Travis CI などのツールが利用可能。
● 外部委託案件でも利用可能。● 社内の取り組みを知ってもらうチャンス。
オープンソース化
https://github.com/rakuten-frontend/bower-browser
オープンソース化
これから
● 標準ライブラリの充実o CSS Framework
● デプロイとテストの自動化o ブラウザテストo SEO / Web Performance / Mobile Friendly
これから
● 標準ライブラリの充実o CSS Framework
● デプロイとテストの自動化o ブラウザテストo SEO / Web Performance / Mobile Friendly
ツール、ライブラリ、環境を有機的に統合していく
まとめ
● オープンソースを最大限活用。● 自分たちの環境にあったツールを開発。● 開発効率、Web パフォーマンスの向上。● メンバー間で共通の認識を持てる。● 対外的なアピールにも。
Thanks!