テーマ開発のベストプラクティスと基礎知識

基礎編

WordPressのファイルディレクトリ

以下参照
https://zenn.dev/wataru_nishi731/scraps/e96db2d8b8599f

環境構築編

wp-env を利用したDockerベースの環境構築

wp-env(https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/)
を利用します。

ビルド時の設定は .wp-env.json に記述します

yarn wp-env start -d
でバックグラウンドで Dockerコンテナの立ち上げ・起動を行います

CSS環境

• Sass(https://sass-lang.com/) / dart-sassを利用
• JS(TSファイル）からsassファイル（scssファイル）を読み込み、ビルドツールに渡しビルドツールプラグインで実行する
• 出力はCSSファイルで書き出し、 wp_enqueue_scripts関数を利用して読み込む

NodeJS / JavaScript 環境

yarn v3 を nodeLinker: node-modules で運用する

https://zenn.dev/mizchi/articles/yarn-v1-to-v3

JavaScript 実行について

wordpressのwp_enqueue_scripts関数を利用してJavaScriptを読み込むが、バニラJSのみでは機能を満たせないケースやブロックテーマの利用は難しいためバンドラーの利用が必須

webpack5(https://webpack.js.org/)

wp-scripts と呼ばれるWordPress公式のReactベースライブラリはwebpackをベースにしているため、利用するのであればベストだが、sassのビルドやバンドルサイズの肥大化に比例してかなり速度が遅くなるため開発体験を下げる

esbuild ( https://esbuild.github.io/ )

webpackの107.29倍早い（公式談）バンドルツール。
webpackのようにwebpack.cofig.jsなどの設定ファイルを作成せずに、自前でビルドスクリプトを作成しesbuildのbuild関数を呼び出すことでビルドできる

ビルドスクリプトはGist参照（https://gist.github.com/WataruNishimura/74ac3e7a17180241315939f0823637f5）

viteのようにhtmlへ、scriptsの埋め込みなどせず単純に、JavaScriptのビルドやファイル生成をする場合はesbuildがベスト(?)