Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

sanata0130

May 23, 2017
Tweet

Other Decks in Programming

Transcript

  1. 主な問題点 1. プロジェクト管理がしづらい ◦ パッケージが Bower と NPM の二重管理になっている ◦

    ドットファイルが散在している 2. タスクランナーの管理が大変 ◦ 更新が途絶える Grunt プラグイン ◦ Gruntfile.js が複雑化、デバッグがしづらい 3. Sass などの代替言語が衰退しつつある ◦ 独自構文から次世代の標準構文でのコーディングに移り変わってきた 4. 運用工数がかかる ◦ JSのフレームワークを入れたい
  2. 主な改善点 1. パッケージ、タスク、各種ツールの設定を package.json で一元管理 ◦ プロジェクトの管理、環境構築が容易に 2. ビルドを Grunt

    から Webpack へ移行 ◦ 依存関係を解消ながら、シンプルなビルドを可能に 3. Sass から PostCSS へ移行、Babel の導入 ◦ 次世代の標準構文でコーディングが可能に 4. Vue.js の導入 ◦ 開発&運用の工数を削減
  3.   パッケージ、タスク、各種ツールの設定を 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行&約1分に
  4. 2. ビルドを Grunt から Webpack へ移行 1. 依存しているモジュールや CSS を

    JS 内で import。 2. JS と CSS を分離。 3. JS と CSS をそれぞれ別のツールでビルド、バンドルファ イルを作成。 main.js Webpack:依存関係を解消するビルドツール。 Grunt の複雑なタスク定義、 プラグインの不具合から逃れ、 ビルドがシンプルに webpack.config.js
  5. 3. Sass から PostCSS へ移行, Babel の導入 ★次世代の標準構文でコーディングするメリット ・コードがツールに依存しない ・ブラウザのサポートが追いついたらそのまま移行できる

    ・新技術のキャッチアップに役立つ PostCSS… プラグインを使ってスタイルを変換するツール。次世代の CSS 標準構文をブラウザでサポートされている構文 に変換できる CSSNext プラグインが有名。 - Ruby Sass の30倍処理が早い - Sass のように全部入りではなく、必要な機能だけをプラグインで拡張できる Babel… 次世代の JS の標準機能を、ES5 に変換できるツール
  6. 4. Vue.js の導入 Input Output Vue.jsを使えば たったこれだけで、 ユーザの入力内容が 反映される Vue.js:UI

    を構築するための JS フレームワーク。 今回、複雑ことはしていないが v-model ディレクティブがとても役立った。 テンプレートファイル作って、コ ンパイルして、他のJSと一緒に バンドルして、ユーザの入力内 容を取得して、JSONにして、 Handlebarsに渡して… 複雑化していたJS
  7. 今回、社内ツールの開発環境を以下の方法で改善しました。 1. パッケージ、タスク、各種ツールの設定を package.json で一元管理 ➡ プロジェクトの管理、環境構築が容易に 2. ビルドを Grunt

    から Webpack へ移行 ➡ 依存関係を解消ながら、シンプルなビルドを可能に 3. Sass から PostCSS へ移行、Babel の導入 ➡ 次世代の標準構文でコーディングが可能に 4. Vue.js の導入 ➡ 開発&運用の工数を削減 知らなかったツールや効率化手法があったら使ってみてください。 もっと良い方法があったら教えてください。 まとめ