Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
そろそろWebpackと 真剣に向き合ってみる。 NAO-BT
Slide 2
Slide 2 text
自己紹介 文系出身・プログラミング歴は約4年目 サーバーもフロントもやる人になってきてる。 ※できるとは言っていない。日々勉強中
Slide 3
Slide 3 text
JSに関しては 4年前 前の会社の研修でちょこっといじる。 約1年前 Angularの1.4系を前の会社の業務で利用。 徐々にJSの面白みを感じ、個人的にフレームワークを中心に 勉強をはじめる(Angular2,React) 現在 サーバーサイドはPHP（フレームワークはLaravel）、 フロントはVue.jsで業務システムのＳＰＡを作っている。
Slide 4
Slide 4 text
ＪＳのフレームワークで 毎回躓くところ。
Slide 5
Slide 5 text
ビルドまわりがよくわからん。
Slide 6
Slide 6 text
なんで必要なのかわかってないから フレームワークのチュートリアルをやるとき、 大体躓く。 グッタリ _(:3 」∠)_
Slide 7
Slide 7 text
でも最近、 おぜん立てしてもらえるので なんとかなる。 Vue-cli create-react-app Laravel-mix
Slide 8
Slide 8 text
なんとかなってしまった結果・・・ なんとなくわかった気になる。
Slide 9
Slide 9 text
いやいや！！ 便利ツールによりかかってるだけで、 理解してないよね！？ サポートおわったらどうすんの！？
Slide 10
Slide 10 text
ということで、 ＪＳの知識が少しは身についた今、 もう一度 ビルドまわりと向き合ってみる。
Slide 11
Slide 11 text
とりあえず、 Webpackと向き合ってみる
Slide 12
Slide 12 text
Webpackは各CLIで使われている create-react-appのreact-script Vue-cli
Slide 13
Slide 13 text
そもそもなんで、WebPackを使うの？
Slide 14
Slide 14 text
★★★ Webアプリを効率よく開発するために 分割したモジュールの 名前解決・依存関係を整理してくれる。 ★ TypeScriptやJSXをトランスパイルする。
Slide 15
Slide 15 text
JSの役割がWebサイトの 簡単な装飾程度なら、 そんな必要はなかった。 1ファイルにまとめられる程度の量に収まる。
Slide 16
Slide 16 text
しかし、 非同期通信やＤＯＭ操作など 様々な機能をページに盛り込む SPAなサイトを作ろうとすると 大量のJSを書くことになる。 これを一つのファイルに 書き続けることは、かなりしんどい。
Slide 17
Slide 17 text
大量のJSのコードを モジュールごとにわける サブルーチンやデータ構造を役割ごとに分割したものをモジュールと言います。 モジュール同士の依存性を可能な限り減らし、 保守性を高めて再利用可能にすれば、開発もはかどる！
Slide 18
Slide 18 text
フレームワーク利用の利点には DOM操作や非同期通信を簡単に書ける！ というのもありますが・・・、 それぞれの思想に沿って使えば 最適なモジュール構成になります。 ・ＭＶＶＭ ・コンポーネント指向
Slide 19
Slide 19 text
そもそも、Javascriptは 「Webのページにちょっと動きを与える言語」 という想定だったので、 言語仕様としてモジュールをサポートしていません。 ビルドツールを使わなければ モジュールパターンというコーディングのテクニックを 使っているにすぎない。 ただし・・・
Slide 20
Slide 20 text
そのまま、開発しようとすると タグがこんなことに・・・。
Slide 21
Slide 21 text
JSの悩ましいモジュールの実情 グローバルオブジェクト内の競合や 読み込む順番を間違えると、エラーが起きるので どんなモジュールがあるか開発者は把握していないといけない。 システムが大きくなればなるほど、 タグ内のリストが長くなる。
Slide 22
Slide 22 text
それを ビルドを通して解決する ＪＳ ＪＳ ＪＳ ＪＳ ＪＳ ＪＳ ＪＳ
Slide 23
Slide 23 text
ビルドとは 複数のソースコードを基に 組み合わせて 実行ファイルを生成する作業。 この中でモジュール間の 名前解決、依存関係の解決を行っている。
Slide 24
Slide 24 text
Webpackは まずはこれさえ、 分かれば怖くない。 Entry Output Loaders Plugins
Slide 25
Slide 25 text
Entry コンテキストルートとなるファイルの指定。 そのファイルから依存関係を追跡するようにwebpackに指示します。 Webpack.config.js entry.js module1.js
Slide 26
Slide 26 text
Output ビルド結果の出力に関する指定。 filenameはビルド後に出力されるファイル名、pathはそのファイルの出力先 Webpack.config.js Index.html
Slide 27
Slide 27 text
Loaders ビルドの際にモジュールのソースコードに適用される変換を指定します。 これの利用でJS以外の拡張子(jsx/vue/ts/css/img) のものもビルドできるようになります。 package.json 拡張子がcssのファイルをjsに 変換するためLoderを npm install する 拡張子がcssのファイルにインストールした Loaderを使うよう指定 Webpack.config.js
Slide 28
Slide 28 text
Loaders entry.js modulecss.css Index.html
Slide 29
Slide 29 text
Loadersではまったところ testってしないとビルドが通らない！ Webpack.config.js package.jsonのscriptsみたいに自由に書き換えられるのかと思いきや・・・
Slide 30
Slide 30 text
Plugins ビルド時の設定を行います。 ビルドする際にファイルの圧縮をおこなったり（UglifyJsPlugin）、 コンパイルエラーが起きてもスキップする設定ができる(NoErrorsPlugin)。
Slide 31
Slide 31 text
Webpack 2になって変わったこと① Webpackはver2からES2015でjavascriptの新しい言語仕様に採用された import・exportが使えます。 このほかのES2015の仕様を利用したい場合は、LodersでBabelを使用する必要があります。 entry.js module1.js
Slide 32
Slide 32 text
Webpack 2になって変わったこと② TreeShakingという機能が加わり、 exportしているけどimportされていない モジュールはプロダクションビルドの際に 含まれなくなった。
Slide 33
Slide 33 text
まだまだ勉強が必要・・・ 「インストールしたフレームワークなどのライブラリーと 開発で作ったアプリケーションのコードはビルドの際には分けておいたほうがいい。」 と言われて、laravel-mix上ではできたんですが、素のwebpackではできなかった・・・。 他にも効率の良いビルドの設定の追求を目指し、お助けツールに頼ってばかりにならないよう チュートリアルを読み込みながら頑張りたい・・・
Slide 34
Slide 34 text
つたない発表ですみません。 ご清聴ありがとうございました。