フロントエンドの開発環境にパッケージ管理ツールとかwebpackを利用するのは当たり前になりつつありますよね。
しかし、初心者プログラマーからしたら、なんのことかよくわからないものかもしれません。
今回はフロントエンドの開発が劇的に効率よくなる、webpackの入門編を解説していきます。
そして、webpackを使うなら、一緒にJavaScriptのパッケージ管理ツールについて、知っておかなきゃね。
webpack入門編についてと、avaScriptのパッケージ管理ツールについてとなります。
webpackってどんな時に使うの？
簡単に説明すると、webpackっていうのはモジュールバンドラーというもので、名前の通りモジュールをバンドルしてくれるツールです。
要するに複数のjsファイルや、npmでインストールしたモジュールを一つのファイルにまとめてくれるのです。
npmとはjavascriptのパケージ管理ツールで、npmを利用するようになるとモジュールバンドラーの便利さを実感できるようになります。
特に大規模アプリケーションの開発になってくると、もはや必須といっても良いでしょう。
もちろん、npmやwebpackを使わなくてもWeb制作をすることは可能です。
なので、初心者プログラマーはwebpackなんて使ったことないっていう人も多いんじゃないでしょうか。
しかし、使った方が圧倒的に制作の効率が良くなるので、単純なホームページ制作だったとしても、webpackは使うべきなんじゃないかと僕は思います。
新しいことを覚えるのが「めんどくさい」ってマインドになってしまうと、知らなくてもできるなら今のままでいいってなるかもしれません。
これは正直残念なマインドですね。
便利なもの、特に業界で標準になりつつあるものに関しては、積極的に取り入れるべきだと僕は思います。
npmを使った方がいい理由
なにかjsのライブラリを使う時、npmを使わないやり方だとこんな感じですよね。
- どこからかダウンロード
- 必要なファイルを持ってくる
- scriptタグで読み込む
このやり方だと、毎回公式サイトにいってダウンロードしてくるのがめんどくさいし、使わなくなったライブラリをそのままにしてしまうこともよくあります。
ダウンロードしてくるのがめんどくさいならCDN使えば別にいじゃん、と思う人もいるかもしれませんが、CDNを使うとこれらのデメリットがあります。
- CDN先のファイルがなくなったら使えなくなる
- オフライン状態だとエラー
- そもそもHTTPリクエスト数が多いのはよくない
jsのライブラリをダウンロードして読み込むのも、CDNを利用して読み込むのも、様々なデメリットがあるのです。
npmとwebpackを使うとこれらのデメリットを全て解消してくれます。
npmでライブライを管理するようになると、package.jsonというファイルが必要になってきます。
ここに使うライブラリを記述しておけば、コマンド一つで必要なライブラリをすべてダウンロードしてくれるのです。
さらに、不要になったら、package.jsonの記述から削除するだけ。
さらにpackage.jsonをいれば、現在、使われているライブラリが何なのかも一目瞭然。
ここまで聞いたらnpmを使うことに、めちゃくちゃメリットがあるということも理解できなのではないでしょうか。
npmを使うならwebpackも必須
webpackを知らないと、npmでダウンロードしたモジュールをどうやって使えば良くわからなくなると思います。
npmでインストールすると、/nodo_modulesというディレクトリに保存されるのですが、/nodo_modulesは基本的にドキュメントルートの外にあり、gitignoreされているものです。
なので、
<script src="/nodo_modules/ファイル名.js">
みたいな読み込み方をするのは非常にナンセンスということです。
手動で/nodo_modulesから自分でつくったjsディレクトリ移動させるやり方もできるが、これをやってしまうとpackage.jsonで管理してる意味がなくなってしまいます。
そこで必要になってくるのがwebpackです。
webpackを知らない人がnpmを使おうとすると、ここでつまづいてしまうでしょう。
webpackを利用すると、使いたいモジュールの名前を指定するだけで、nodo_modulesから必要なファイルだけを取り出して一つにファイルにまとめてくれるのです。
便利ですよね。
これを一度使ってしまうとwebpackを使わないフロントエンド開発環境なんてもはや考えられなくなるでしょう。
めちゃくちゃ簡単にwebpackを利用する方法
webpackって設定がわかりにくいし、フロントエンド開発環境はテクノロジーの発展でコロコロ変わってしまいます。
なので頑張って全てを理解する必要はありません。
webpackとはどういうものなのか、この概要さえ理解しておけばそれで良いのです。
概要さえ理解していれば細かい設定ファイルを理解しなくても使えるようになりました。
何かを開発を始める時、フレームワークを利用することが多くなりました。
フレームワークにはwebpackを含むビルドツールが同梱されていて、このビルドツールは非常に設定がシンプルで、webpackの難しい設定を理解しなくても利用することができるのです。
PHPのフレームワークであるLaravelですら、jsのビルドツールが同梱されているのです。
laravel mixといってLaravelを使わなくても、単独で利用できるビルドツールなので、静的なhtmlサイトはもちろんのこと、wordpressでも利用することが出来ます。
僕もwebpackの設定については、ぜんぜんわかりませんが、laravel mixがあれば簡単にscssのコンパイルと、jsのバンドルが使えるから非常に重宝しています。
webpackの設定がよくわからない初心者プログラマーには特にオススメです！
コメント