取り組み2021年11月4日この記事は公開日より1年以上経過しているため、現在の内容と異なる可能性があります。今回のブログ記事では、今後リリース予定のVer.2.12で公式テーマに同梱されているWebpackの開発環境についてご紹介します。cmsの実装に必要なものではなく、既存のJSを変更したい場合やWebpackからSass(SCSS)をコンパイルしたい場合に任意で使用するものです。cms、HTML、CSSだけです。開発環境を整えるということはよりよいサイト制作をするための手段の1つなので、今回ご紹介するWebpackを無理に使わなくても大丈夫です。Webpackを用意しているテーマでも、Ver.2.11以前と変わらずに以下のことはできます。テーマですでに用意されているJSは変更せず、新しいJSファイルを追加して読み込むテーマですでに用意されているスタイルをCSSファイルから変更する新しいCSSファイルを読み込んでテーマですでに用意されているスタイルを上書きするWebpackを使用する方法以外でもコンパイルするアプリなどのツールが存在しています。今回の記事では詳しいツールについてご紹介しませんが、もしWebpack以外の方法でスタイルをSCSSファイルからCSSへコンパイルしたいという方がいらっしゃれば、ご自身が使いやすいものを別途調べていただけると幸いです。Ver.2.12から同梱されているWebpackでできること以下の作業のために開発環境を整えています。β版の配布についてVer.2.12は2021年11月現在、β版が用意されています。正式版のリリースまで、今しばらくお待ちください。本記事で紹介するWebpackの環境がいち早く確認したい方は、β版用ablogcms.ioにてVer.2.12を体験できる環境を用意しておりますのでこちらから確認できます。ablogcms.ioの環境を用意し、SFTPに接続すると各テーマファイルにWebpackの設定ファイルがあるので、こちらからご確認ください。β版用ablogcms.ioを試してみる使い方UTSUWAテーマを例にして、ご紹介します。マシンにnode.jsが入っていない方はnpmコマンドが使えないため、事前に公式サイトからインストールしてください。インストールするバージョンは、.node-versionに記載しているバージョンと同じバージョンをインストールしてください。以下のような記述が書かれています。v14.16.0この場合は、v14.16.0と書かれているのでNode.jsの14.16.0をインストールしましょう。installをすると、そのディレクトリにnode_modulesと言うフォルダが作成され、大量のファイルがダウンロードされます。これは普通のことなので、焦らなくても大丈夫です。package.jsonpackage.jsonにはUTSUWAで使用できるコマンドと使用しているパッケージがリストされています。以下、把握した方が良さそうな項目を絞って一部の設定について紹介します。ライブリロードで使用します。開発環境を表示しているドメインなどあれば記入してください。ライブリロードで使用します。開発環境を表示しているドメインなどあれば記入してください。buildリリース用のCSSとJSを書き出します。サイト公開時に最適な設定がされています。dev開発時用のCSSとJSを書き出します。SCSSのソースマップを書き出すので、開発者ツール上からどのSCSSファイルのコードかわかります。startdevの機能に加えて、さらにライブリロードを行います。package.jsonのconfigの項目で、localに指定したURLをもとに別途localhostが立ち上がります。analyze結合したファイルの各パッケージがどのくらいの容量を占めているか可視化してくれる機能です。パフォーマンスを最適化したいときに使います。startを使いましょう。設定ファイル以下はWebpackの処理を設定しているファイルです。Webpackの処理をカスタマイズしたい際は、以下のファイルを変更してください。JSの結合や、SCSSからCSSのコンパイルする作業などの基本的な設定はすでにされているので、基本的なことをしたい場合は変更は特に必要ありません。webpack.analyze.jsバンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたいときの処理が書かれていファイル。analyzeで使用しています。webpack.common.js各コマンド実行時に使用している共通のファイルです。webpack.dev.js開発中のタスクに使用するファイル。startなどで使用しています。webpack.prod.jsリリース時のタスクに使用するファイル。buildで使用しています。関連する不可視ファイル開発環境を整えるために使用している不可視ファイルです。Macだと可視化するために特別な設定(Shift+⌘+.)が必要になります。Webpackの開発環境を利用する際は、これらのファイルも忘れずに設置してください。.babelrcBabelの設定ファイル(JS関係).editorconfig自動で整形してくれるeditorconfigの設定ファイル(Webpackは関係ないですが、設置してあるとコードを整形してくれるので便利です).eslintrcESLintの設定ファイル(JS関係).gitignoreGitで管理しないものを設定するファイル(.gitignoreを入れていないと、Gitで利用する際に大量のnode_modulesも含まれてしまうので、Webpackを利用する際は忘れずに設置しましょう).node-versionnode.jsのバージョンを管理するファイル。開発時に使用されたNode.jsのバージョンが記載されており、nodenvなどのバージョン管理ツール使用時に適用されます。.stylelintrcStyleLintの設定ファイル(SCSS、CSS関係)まとめ今回ご紹介したWebpackの開発環境は無理にお使いいただくものではありません。cms、HTML、CSSのみです。そこにさらにJSの知識があればよりリッチな表現ができますし、今回のようなWebpackに関する知識があれば開発効率が上がったり、パフォーマンス改善を行なったりすることができます。これらの開発環境を整えるということはよりよいサイト制作をするための手段の1つにすぎません。Web制作に関する技術が増え、技術選択に迷う時代ではありますが、弊社としては開発効率の向上やパフォーマンス改善を行なう際のベースとして、みなさまがより良いお仕事ができるようにWebpackの開発環境を提供できたらと考えております。弊社としては時にはCMSの垣根を超えて、みなさまの制作に役立つものを提供したいと考えております。フィードバックなどありましたら、お気軽にお問い合わせフォーム、TwitterやFacebookなどのSNSからお気軽にお知らせください。