SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

HTML/JavaScript開発作業を効率化する便利ツールの活用

Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門

HTML/JavaScript開発作業を効率化する便利ツールの活用 第9回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、HTML/JavaScript開発作業を効率化する、さまざまなツールやライブラリを紹介します。今回取り上げる「webpack」は、Webページを構成するさまざまなファイルを、依存性を解決しながらまとめる「モジュールバンドラー」です。JavaScriptの依存性解決ができるほか、画像ファイルやCSSなど、さまざまな種類のファイルを処理できるwebpackの利用法を、第9回と第10回の2回にわたって説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 一般的にWebページは、HTMLファイル以外にJavaScriptやCSS、画像など、複数のファイルから構成されます。ファイル数が多くなってくると、構成ファイルの依存性を正しく管理することが難しくなります。

 webpackは、Webページを構成するファイルの依存性を自動的に処理してまとめるツールです。モジュールをまとめる(バンドルする)ことから「モジュールバンドラー」と呼ばれます。

 今回はwebpackの概要を説明したあと、コマンドラインからwebpackでJavaScriptモジュールをまとめる例を紹介します。また、webpackが対応する、JavaScriptモジュール形式についても説明します。

対象読者

  • Webページを構成する大量のファイルが把握できなくなった方
  • JavaScriptコードをモジュール分けしてスマートに記述したい方
  • 最近のJavaScriptモジュール事情を確認したい方

必要な環境の準備

 webpackの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。

 Node.jsのインストール後、リスト1のコマンドでwebpackがインストールされます。「-g」(または「--global」)オプションをつけると、特定のプロジェクトやフォルダにではなく、システム自体にインストールされます。

リスト1 webpackのインストール
npm install -g webpack

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • Node.js v6.11.2 64bit版
  • webpack v3.5.1
  • Microsoft Edge 40.15063.0.0

参考:webpackはプロジェクトごとにインストールしたほうがよい?

 webpackの公式ドキュメントでは、リスト1のような(-gオプションを利用した)システム自体へのインストールは、プロジェクトによって異なるバージョンを使い分けられなくなるため、推奨しないと記載されています。本記事ではコマンドラインで直接実行できるようにするため、リスト1のインストール方法を利用します。プロジェクトごとにインストールする利用法は次回の記事で説明します。

次のページ
JavaScriptライブラリの依存関係とwebpack

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10408 2017/09/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング