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

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

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

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

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

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

なんで必要なのかわかってないからフレームワークのチュートリアルをやるとき、大体躓く。グッタリ _(: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を書くことになる。これを一つのファイルに書き続けることは、かなりしんどい。

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

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

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

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

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

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

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

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

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

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

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

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されていないモジュールはプロダクションビルドの際に含まれなくなった。

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

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

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

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

nao-bt

More Decks by nao-bt

Other Decks in Programming

Featured

Transcript