M3社内ツールのフロントエンド開発環境の改善#m3dev

Transcript

1. M3 社内ツールの フロントエンド開発環境の改善 2017.5.19　阿部早苗（M3, Inc）
2. 社内ツールの紹介 プロデューサー＆ディレクター向けのツール。 フォームに入力していくと、コーダーへの作業依頼に必要な情報をまとめることができ る。
3. これまでの開発環境　2014年〜2017年4月
4. 主な問題点 1. プロジェクト管理がしづらい ◦ パッケージが Bower と NPM の二重管理になっている ◦ ドットファイルが散在している 2. タスクランナーの管理が大変 ◦ 更新が途絶える Grunt プラグイン ◦ Gruntfile.js が複雑化、デバッグがしづらい 3. Sass などの代替言語が衰退しつつある ◦ 独自構文から次世代の標準構文でのコーディングに移り変わってきた 4. 運用工数がかかる ◦ JSのフレームワークを入れたい
5. 新しい開発環境　2017年4月〜
6. 主な改善点 1. パッケージ、タスク、各種ツールの設定を package.json で一元管理 ◦ プロジェクトの管理、環境構築が容易に 2. ビルドを Grunt から Webpack へ移行 ◦ 依存関係を解消ながら、シンプルなビルドを可能に 3. Sass から PostCSS へ移行、Babel の導入 ◦ 次世代の標準構文でコーディングが可能に 4. Vue.js の導入 ◦ 開発＆運用の工数を削減
7. 　　パッケージ、タスク、各種ツールの設定を 1. package.json で一元管理 • タスクを Grunt から package.json の scripts に移行。yarn で実行できるように。 ドットファイル も少なく • Babel, ESLint, StyleLint 等のツールの設定を packge.json にまとめた。 • フロントエンドのパッケージ管理を Bower から Yarn に変更。 （Yarn：NPM に互換性のあるパッケージマネージャ） yarn install yarn build yarn start gem install sass npm install -g bower npm install -g grunt-cli npm install bower install grunt 環境構築が3行＆約１分に
8. 2. ビルドを Grunt から Webpack へ移行 1. 依存しているモジュールや CSS を JS 内で import。 2. JS と CSS を分離。 3. JS と CSS をそれぞれ別のツールでビルド、バンドルファ イルを作成。 main.js Webpack：依存関係を解消するビルドツール。 Grunt の複雑なタスク定義、 プラグインの不具合から逃れ、 ビルドがシンプルに webpack.config.js
9. 3. Sass から PostCSS へ移行, Babel の導入 ★次世代の標準構文でコーディングするメリット ・コードがツールに依存しない ・ブラウザのサポートが追いついたらそのまま移行できる ・新技術のキャッチアップに役立つ PostCSS… プラグインを使ってスタイルを変換するツール。次世代の CSS 標準構文をブラウザでサポートされている構文 に変換できる CSSNext プラグインが有名。 - Ruby Sass の30倍処理が早い - Sass のように全部入りではなく、必要な機能だけをプラグインで拡張できる Babel… 次世代の JS の標準機能を、ES5 に変換できるツール
10. 4. Vue.js の導入 Input Output Vue.jsを使えば たったこれだけで、 ユーザの入力内容が 反映される Vue.js：UI を構築するための JS フレームワーク。 今回、複雑ことはしていないが v-model ディレクティブがとても役立った。 テンプレートファイル作って、コ ンパイルして、他のJSと一緒に バンドルして、ユーザの入力内 容を取得して、JSONにして、 Handlebarsに渡して… 複雑化していたJS
11. 今回、社内ツールの開発環境を以下の方法で改善しました。 1. パッケージ、タスク、各種ツールの設定を package.json で一元管理 ➡ プロジェクトの管理、環境構築が容易に 2. ビルドを Grunt から Webpack へ移行 ➡ 依存関係を解消ながら、シンプルなビルドを可能に 3. Sass から PostCSS へ移行、Babel の導入 ➡ 次世代の標準構文でコーディングが可能に 4. Vue.js の導入 ➡ 開発＆運用の工数を削減 知らなかったツールや効率化手法があったら使ってみてください。 もっと良い方法があったら教えてください。 まとめ
12. 参考ページ https://github.com/hail2u/hail2u.net https://github.com/mizchi/frontend-boilerplate