フロントエンド開発環境の話

社内勉強会で最近のJavaScript開発環境の話をしたときの資料です。

Transcript

1. フロントエンド開発環境の話 2016-10-07 fixpoint 社内勉強会資料
2. 目次  モチベーション  利用するツールなどの紹介  構成例の紹介  まとめ
3. モチベーション  フロントエンド開発に必須のJavaScript – 年々、JavaScript開発の規模が増大  JavaScriptは依存管理が面倒 – 外部のライブラリを利用する場合、コピーしてくる – ファイル名にバージョンを含めるなどで対応 – <script>タグでの読み込み順にも注意が必要 – 破綻  コードベースの管理のため、モジュール単位で分割したい – 依存管理
4. 利用するツールなどの紹介  Node.js  gulp.js  webpack  ES2015
5. Node.jsについて  JavaScriptの処理系  サーバサイドJavaScript等のキーワードで一時流行  Node Package Manager (npm) というモジュール管理システム
6. gulp.jsについて  MakeのJavaScript版 (のようなもの)  JavaScriptで記述した設定に従って動作 – 自由度が高い  各種pluginにより動作を拡張可能
7. gulp.jsの動作概要 JavaScript CSS HTML gulp.js JavaScript CSS HTML フィルタ処理
8. webpackについて  JavaScriptの依存関係を解決し、単一のファイルにまとめる  各種拡張モジュール – loader  babel-loader  json-loader – plugin  DedupePlugin  CLIでの呼び出し、gulp.js経由での呼び出し
9. webpackの動作概要 app.js + others app.js webpack + dist/ - app.js + src/ - app.js + libs/ - some.js - module.js 依存解決 + マージ
10. ES2015について  最新のJavaScript言語仕様 – CoffeeScriptから各種構文の輸入  今まで弱点だった箇所を強化 ※抜粋 – Object-based OOP => Class-based OOP (構文上) – モジュールの概念 – thisの取り回し – 変数のスコープ  ブラウザの対応状況はまだ悪い – Babelというツールを利用することで回避可能 – 既存のライブラリとの親和性に難があるため、実務での利用は避けたい
11. EcmaScript2015の例 今までのクラス定義 var Hoge= function(opts){ opts || (opts= {}); this.fuga= opts.fuga; }; Hoge.prototype.piyo= function(args){}; ES2015のクラス定義 class Hoge{ constructor(opts= {}) { this.fuga= opts.fuga; } piyo(args){} }
12. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json
13. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json 環境変数等により、ビルド時にconfig.jsonなどとしてコピー JavaScriptから読み込む
14. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json 自分たちで実装するJavaScriptを除いた、 フルセットのWebサイトを置く
15. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json 実装対象のJavaScript 各Webページで読み込むものがわかりやすいよう HTMLと対応するJavaScriptファイル名を合わせる
16. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json gulp.jsの設定ファイル webpackの設定ファイル 利用するJavaScriptライブラリを記述するファイル
17. 構成例の紹介 (ファイル構成) project/ ├ conf/ │ ├ prd.json │ ├ dev.json ├ src/ │ ├ main/ │ │ ├ static/ │ │ │ ├ index.html │ │ │ ├ css/ │ │ │ │ ├ style.css │ │ ├ js/ │ │ │ ├ index.js ├ dist/ ├ gulpfile.js ├ webpack.config.js ├ package.json ビルドされたWebサイトのフルセットが格納
18. まとめ  フロントエンドの開発環境について、簡単に説明した  JavaScriptは依存管理が面倒なので、ビルド時に解決する  構成例を説明した