そろそろWebpackと真剣に向き合ってみる

1.

そろそろWebpackと真剣に向き合ってみる。 NAO-BT

2.

自己紹介文系出身・プログラミング歴は約4年目サーバーもフロントもやる人になってきてる。 ※できるとは言っていない。日々勉強中

3.

JSに関しては 4年前前の会社の研修でちょこっといじる。約1年前 Angularの1.4系を前の会社の業務で利用。徐々にJSの面白みを感じ、個人的にフレームワークを中心に勉強をはじめる(Angular2,React) 現在サーバーサイドはPHP（フレームワークはLaravel）、フロントはVue.jsで業務システムのＳＰＡを作っている。

4.

ＪＳのフレームワークで毎回躓くところ。

5.

ビルドまわりがよくわからん。

6.

なんで必要なのかわかってないからフレームワークのチュートリアルをやるとき、大体躓く。グッタリ _(:3 」∠)_

7.

でも最近、おぜん立てしてもらえるのでなんとかなる。 Vue-cli create-react-app Laravel-mix

8.

なんとかなってしまった結果・・・なんとなくわかった気になる。

9.

いやいや！！便利ツールによりかかってるだけで、理解してないよね！？サポートおわったらどうすんの！？

10.

ということで、ＪＳの知識が少しは身についた今、もう一度ビルドまわりと向き合ってみる。

11.

とりあえず、 Webpackと向き合ってみる

12.

Webpackは各CLIで使われている create-react-appのreact-script Vue-cli

13.

そもそもなんで、WebPackを使うの？

14.

★★★ Webアプリを効率よく開発するために分割したモジュールの名前解決・依存関係を整理してくれる。 ★ TypeScriptやJSXをトランスパイルする。

15.

JSの役割がWebサイトの簡単な装飾程度なら、そんな必要はなかった。 1ファイルにまとめられる程度の量に収まる。

16.

しかし、非同期通信やＤＯＭ操作など様々な機能をページに盛り込む SPAなサイトを作ろうとすると大量のJSを書くことになる。これを一つのファイルに書き続けることは、かなりしんどい。

17.

大量のJSのコードをモジュールごとにわけるサブルーチンやデータ構造を役割ごとに分割したものをモジュールと言います。モジュール同士の依存性を可能な限り減らし、保守性を高めて再利用可能にすれば、開発もはかどる！

18.

フレームワーク利用の利点には DOM操作や非同期通信を簡単に書ける！というのもありますが・・・、それぞれの思想に沿って使えば最適なモジュール構成になります。・ＭＶＶＭ・コンポーネント指向

19.

そもそも、Javascriptは「Webのページにちょっと動きを与える言語」という想定だったので、言語仕様としてモジュールをサポートしていません。ビルドツールを使わなければモジュールパターンというコーディングのテクニックを使っているにすぎない。ただし・・・

20.

そのまま、開発しようとすると <head>タグがこんなことに・・・。

21.

JSの悩ましいモジュールの実情グローバルオブジェクト内の競合や読み込む順番を間違えると、エラーが起きるのでどんなモジュールがあるか開発者は把握していないといけない。システムが大きくなればなるほど、 <head>タグ内の<script>リストが長くなる。

22.

それをビルドを通して解決するＪＳＪＳＪＳＪＳＪＳＪＳＪＳ

23.

ビルドとは複数のソースコードを基に組み合わせて実行ファイルを生成する作業。この中でモジュール間の名前解決、依存関係の解決を行っている。

24.

Webpackはまずはこれさえ、分かれば怖くない。 Entry Output Loaders Plugins

25.

Entry コンテキストルートとなるファイルの指定。そのファイルから依存関係を追跡するようにwebpackに指示します。 Webpack.config.js entry.js module1.js

26.

Output ビルド結果の出力に関する指定。 filenameはビルド後に出力されるファイル名、pathはそのファイルの出力先 Webpack.config.js Index.html

27.

Loaders ビルドの際にモジュールのソースコードに適用される変換を指定します。これの利用でJS以外の拡張子(jsx/vue/ts/css/img) のものもビルドできるようになります。 package.json 拡張子がcssのファイルをjsに変換するためLoderを npm install する
拡張子がcssのファイルにインストールした Loaderを使うよう指定 Webpack.config.js

28.

Loaders entry.js modulecss.css Index.html

29.

Loadersではまったところ testってしないとビルドが通らない！ Webpack.config.js package.jsonのscriptsみたいに自由に書き換えられるのかと思いきや・・・

30.

Plugins ビルド時の設定を行います。ビルドする際にファイルの圧縮をおこなったり（UglifyJsPlugin）、コンパイルエラーが起きてもスキップする設定ができる(NoErrorsPlugin)。

31.

Webpack 2になって変わったこと① Webpackはver2からES2015でjavascriptの新しい言語仕様に採用された import・exportが使えます。このほかのES2015の仕様を利用したい場合は、LodersでBabelを使用する必要があります。 entry.js module1.js

32.

Webpack 2になって変わったこと② TreeShakingという機能が加わり、 exportしているけどimportされていないモジュールはプロダクションビルドの際に含まれなくなった。

33.

まだまだ勉強が必要・・・「インストールしたフレームワークなどのライブラリーと開発で作ったアプリケーションのコードはビルドの際には分けておいたほうがいい。」と言われて、laravel-mix上ではできたんですが、素のwebpackではできなかった・・・。他にも効率の良いビルドの設定の追求を目指し、お助けツールに頼ってばかりにならないようチュートリアルを読み込みながら頑張りたい・・・

34.

つたない発表ですみません。ご清聴ありがとうございました。

そろそろWebpackと真剣に向き合ってみる

そろそろWebpackと真剣に向き合ってみる

nao-bt

Want more?

Transcript

そろそろWebpackと真剣に向き合ってみる。 NAO-BT

自己紹介文系出身・プログラミング歴は約4年目サーバーもフロントもやる人になってきてる。 ※できるとは言っていない。日々勉強中

ＪＳのフレームワークで毎回躓くところ。

ビルドまわりがよくわからん。

なんで必要なのかわかってないからフレームワークのチュートリアルをやるとき、大体躓く。グッタリ _(:3 」∠)_

でも最近、おぜん立てしてもらえるのでなんとかなる。 Vue-cli create-react-app Laravel-mix

なんとかなってしまった結果・・・なんとなくわかった気になる。

いやいや！！便利ツールによりかかってるだけで、理解してないよね！？サポートおわったらどうすんの！？

ということで、ＪＳの知識が少しは身についた今、もう一度ビルドまわりと向き合ってみる。

とりあえず、 Webpackと向き合ってみる

Webpackは各CLIで使われている create-react-appのreact-script Vue-cli

そもそもなんで、WebPackを使うの？

★★★ Webアプリを効率よく開発するために分割したモジュールの名前解決・依存関係を整理してくれる。 ★ TypeScriptやJSXをトランスパイルする。

JSの役割がWebサイトの簡単な装飾程度なら、そんな必要はなかった。 1ファイルにまとめられる程度の量に収まる。

しかし、非同期通信やＤＯＭ操作など様々な機能をページに盛り込む SPAなサイトを作ろうとすると大量のJSを書くことになる。これを一つのファイルに書き続けることは、かなりしんどい。

フレームワーク利用の利点には DOM操作や非同期通信を簡単に書ける！というのもありますが・・・、それぞれの思想に沿って使えば最適なモジュール構成になります。・ＭＶＶＭ・コンポーネント指向

そのまま、開発しようとすると <head>タグがこんなことに・・・。

それをビルドを通して解決するＪＳＪＳＪＳＪＳＪＳＪＳＪＳ

ビルドとは複数のソースコードを基に組み合わせて実行ファイルを生成する作業。この中でモジュール間の名前解決、依存関係の解決を行っている。

Webpackはまずはこれさえ、分かれば怖くない。 Entry Output Loaders Plugins

Entry コンテキストルートとなるファイルの指定。そのファイルから依存関係を追跡するようにwebpackに指示します。 Webpack.config.js entry.js module1.js

Output ビルド結果の出力に関する指定。 filenameはビルド後に出力されるファイル名、pathはそのファイルの出力先 Webpack.config.js Index.html

Loaders entry.js modulecss.css Index.html

Loadersではまったところ testってしないとビルドが通らない！ Webpack.config.js package.jsonのscriptsみたいに自由に書き換えられるのかと思いきや・・・

Plugins ビルド時の設定を行います。ビルドする際にファイルの圧縮をおこなったり（UglifyJsPlugin）、コンパイルエラーが起きてもスキップする設定ができる(NoErrorsPlugin)。

Webpack 2になって変わったこと① Webpackはver2からES2015でjavascriptの新しい言語仕様に採用された import・exportが使えます。このほかのES2015の仕様を利用したい場合は、LodersでBabelを使用する必要があります。 entry.js module1.js

Webpack 2になって変わったこと② TreeShakingという機能が加わり、 exportしているけどimportされていないモジュールはプロダクションビルドの際に含まれなくなった。

つたない発表ですみません。ご清聴ありがとうございました。