webpackを利用したい方に向けた Ver. 2.12 からの取り組み

2021年11月4日

この記事は公開日より2年以上経過しているため、現在の内容と異なる可能性があります。

今回のブログ記事では、今後リリース予定のVer.2.12で公式テーマに同梱されているWebpackの開発環境についてご紹介します。

まず始めに、Webpackを使わなくてもいい場合について

この記事でご紹介するWebpackの開発環境はa-blog cmsの実装に必要なものではなく、既存のJSを変更したい場合やWebpackからSass（SCSS）をコンパイルしたい場合に任意で使用するものです。
a-blog cms を使用する上で最低限必要な技術はa-blog cms、HTML、CSSだけです。あくまで開発環境を整えるということはよりよいサイト制作をするための手段の1つなので、今回ご紹介するWebpackを無理に使わなくても大丈夫です。

Webpackを用意しているテーマでも、Ver.2.11以前と変わらずに以下のことはできます。

テーマですでに用意されているJSは変更せず、新しいJSファイルを追加して読み込む
テーマですでに用意されているスタイルをCSSファイルから変更する
新しいCSSファイルを読み込んでテーマですでに用意されているスタイルを上書きする

Webpackを使用する方法以外でもコンパイルするアプリなどのツールが存在しています。
今回の記事では詳しいツールについてご紹介しませんが、もしWebpack以外の方法でスタイルをSCSSファイルからCSSへコンパイルしたいという方がいらっしゃれば、ご自身が使いやすいものを別途調べていただけると幸いです。

Ver.2.12から同梱されているWebpackでできること

以下の作業のために開発環境を整えています。

JSやCSSなどのファイルを1つにまとめる
SCSSをCSSに変換する
ソースコードを整形する
ESLint（JavaScriptの構文チェッカーのこと）

Ver.2.12 β版の配布について

Ver.2.12は2021年11月現在、β版が用意されています。正式版のリリースまで、今しばらくお待ちください。

本記事で紹介するWebpackの環境がいち早く確認したい方は、β版用ablogcms.ioにてVer.2.12を体験できる環境を用意しておりますのでこちらから確認できます。 ablogcms.ioの環境を用意し、SFTPに接続すると各テーマファイルにWebpackの設定ファイルがあるので、こちらからご確認ください。

β版用ablogcms.ioを試してみる

使い方

UTSUWAテーマを例にして、ご紹介します。

マシンにnode.jsが入っていない方はnpmコマンドが使えないため、事前に公式サイトからインストールしてください。
インストールするバージョンは、.node-versionに記載しているバージョンと同じバージョンをインストールしてください。

.node-versionの中身

例えば、以下のような記述が書かれています。

v14.16.0

この場合は、v14.16.0と書かれているのでNode.jsの14.16.0をインストールしましょう。

npm コマンドの使い方

themes/utsuwa に移動してnpm install をする（npm installコマンドを実施することによって、UTSUWAで使用している全てのパッケージをインストールします）
その後npm run start またはnpm run dev で開発を開始する（JSやCSSが1つにまとめたり、SCSSをCSSに自動で変換します）
リリースできるようになったら、npm run build でビルドする

npm installをすると、そのディレクトリにnode_modulesと言うフォルダが作成され、大量のファイルがダウンロードされます。これは普通のことなので、焦らなくても大丈夫です。 npm run dev とnpm run build は、後ほど説明します。

package.json

package.jsonにはUTSUWAで使用できるコマンドと使用しているパッケージがリストされています。

以下、把握した方が良さそうな項目を絞って一部の設定について紹介します。

package.jsonのconfig

local ... 後述する npm run start のライブリロードで使用します。開発環境を表示しているドメインなどあれば記入してください。
theme ... 使用しているテーマを記述します

local	後述する npm run start のライブリロードで使用します。開発環境を表示しているドメインなどあれば記入してください。
theme	使用しているテーマを記述します

package.jsonのscripts

npm run build	リリース用のCSSとJSを書き出します。サイト公開時に最適な設定がされています。
npm run dev	開発時用のCSSとJSを書き出します。SCSSのソースマップを書き出すので、開発者ツール上からどのSCSSファイルのコードかわかります。
npm run start	devの機能に加えて、さらにライブリロードを行います。package.jsonのconfigの項目で、localに指定したURLをもとに別途localhostが立ち上がります。
npm run analyze	結合したファイルの各パッケージがどのくらいの容量を占めているか可視化してくれる機能です。パフォーマンスを最適化したいときに使います。

基本的には、 npm run dev とnpm run build を使用すればOKです。
もしライブリロードが欲しいなら、npm run dev の代わりに npm run startを使いましょう。

Webpack の設定ファイル

以下はWebpackの処理を設定しているファイルです。Webpackの処理をカスタマイズしたい際は、以下のファイルを変更してください。
JSの結合や、SCSSからCSSのコンパイルする作業などの基本的な設定はすでにされているので、基本的なことをしたい場合は変更は特に必要ありません。

webpack.analyze.js	バンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたいときの処理が書かれていファイル。npm run analyzeで使用しています。
webpack.common.js	各コマンド実行時に使用している共通のファイルです。
webpack.dev.js	開発中のタスクに使用するファイル。npm run devやnpm run startなどで使用しています。
webpack.prod.js	リリース時のタスクに使用するファイル。npm run buildで使用しています。

.babelrc	Babelの設定ファイル（JS関係）
.editorconfig	自動で整形してくれるeditorconfigの設定ファイル（Webpackは関係ないですが、設置してあるとコードを整形してくれるので便利です）
.eslintrc	ESLintの設定ファイル（JS関係）
.gitignore	Gitで管理しないものを設定するファイル（.gitignoreを入れていないと、Gitで利用する際に大量のnode_modulesも含まれてしまうので、Webpackを利用する際は忘れずに設置しましょう）
.node-version	node.jsのバージョンを管理するファイル。開発時に使用されたNode.jsのバージョンが記載されており、nodenvなどのバージョン管理ツール使用時に適用されます。
.stylelintrc	StyleLintの設定ファイル（SCSS、CSS関係）

まとめ

今回ご紹介したWebpackの開発環境は無理にお使いいただくものではありません。これからもa-blog cmsを使ったWeb制作で最低限必要な知識はa-blog cms、HTML、CSSのみです。
そこにさらにJSの知識があればよりリッチな表現ができますし、今回のようなWebpackに関する知識があれば開発効率が上がったり、パフォーマンス改善を行なったりすることができます。つまり、これらの開発環境を整えるということはよりよいサイト制作をするための手段の1つにすぎません。

Web制作に関する技術が増え、技術選択に迷う時代ではありますが、弊社としては開発効率の向上やパフォーマンス改善を行なう際のベースとして、みなさまがより良いお仕事ができるようにWebpackの開発環境を提供できたらと考えております。

弊社としては時にはCMSの垣根を超えて、みなさまの制作に役立つものを提供したいと考えております。
フィードバックなどありましたら、お気軽にお問い合わせフォーム、TwitterやFacebookなどのSNSからお気軽にお知らせください。