webpackを利用したい方に向けた Ver. 2.12 からの取り組み
今回のブログ記事では、今後リリース予定の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の設定ファイルがあるので、こちらからご確認ください。
使い方
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で使用しています。 |
関連する不可視ファイル
開発環境を整えるために使用している不可視ファイルです。Macだと可視化するために特別な設定（Shift+⌘+.）が必要になります。
Webpackの開発環境を利用する際は、これらのファイルも忘れずに設置してください。
| .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からお気軽にお知らせください。
