TIPS

2019.04.19
vol.94

WEB

webpack(ウェブパック) 世界のフロントエンド開発者が使うツール!

vol.94 webpack(ウェブパック) 世界のフロントエンド開発者が使うツール!

こんにちは。フロントエンドエンジニアの勝浦です。
変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているwebpackを導入するメリットについて詳しく解説します。

webpackとは

webpackはNode.js上で動作し、ブラウザ環境外のコンピュータやサーバーで使用できるJavaScriptランタイムです。また、ESMとCommonJSの両方をサポートするJavaScriptアプリケーション用のモジュールバンドラとして、アプリケーションにおけるモジュールの依存関係を解析して1つまたは複数のパッケージにバンドルします。

JSファイルを1つのJSファイルに
結合する

フロントエンドの担う役割は年々増大しており、それに伴ってフロントエンドの占めるコードの割合も増大しているので、それを1つのファイルに落とし込むとなると、ファイルサイズはかなりのものになります。そのファイルを初回アクセス時にユーザーに読み込ませるとなると、無関係のコードも含まれる1つのファイルの読み込みを、ユーザーは延々と待たされることになり、大変なストレスに感じます。

そして、これを解決するためにwebpackは複数のファイルから構成されたjsファイルを一つのjsファイルに結合し、ファイルを吐き出してサーバーからブラウザに送ってます。

モジュール間の依存を解決する

webpack

1つのJavaScriptファイルに長い処理を書くと、可読性が悪くなります。これを解決するには複数ファイルへ分割することでしょう。ウェブのフロントエンド界隈では、機能ごとに分割されたJavaScriptファイルのことを一般的に「モジュール」と呼びます。

JavaScriptモジュールはこのままだとレガシーブラウザなど(例:IE 11)では使用できないため、webpackを使うと、JavaScriptモジュールをブラウザで扱える形に変換できます。さらに複数のファイルの依存関係を考慮したうえで自動的に結合します。

JSだけでなく、CSSや画像も
バンドルできる

webpack

それだけでも便利なのですが、webpackはJavaScriptだけでなくスタイルシートや画像までもバンドルできてしまうのです。先述の転送の最適化につながるメリットです。

さまざまなアセットをJavaScriptファイルにまとめることができます。

まとめ

いかがでしたでしょうか。今回紹介した機能以外にもJSを圧縮したり、画像を圧縮したり、ローカルサーバーの起動まで包括的な制作環境としての機能まであります。学習するのに少し時間かかるかもしれませんが、webpackを導入しておけばフロントエンドエンジニアに必要な技術や開発環境が揃うのでこれを機にぜひ試してみてください。

参考URL
webpack
https://webpack.js.org/

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
December (
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。