MENU

環境構築初心者の私がwp-env × ViteでWordPress開発環境を作れた話

WordPress その他
目次

はじめに

WordPressオリジナルテーマ開発は経験してきましたが、開発環境を自分で作ったことはありませんでした。

いつも配布された開発環境でコーディングしていました。
指示通りにセットアップし、使えてはいたけど、中身を完全に理解していたかと言われると…自信がありません。

自分でもできるようになって理解を深めたいなという気持ちはあったけどいつも何かエラーが出ると進めなくなり、苦手意識がありました。

きっかけ

そんな私が環境構築に挑戦してみようと思ったのは、リードする側でチーム開発に参加することになったから。
小規模ですが、もしかしたら自分のほうが経験がある立場かもしれないという状況になったためです。

Dockerとwp-env

Dockerを使った開発では、どのパソコンでも全く同じ開発環境が再現できるということで知ってはいました。

「PHPのバージョンが違うから動かない」「Macでは動くのにWindowsではエラーが出る」みたいなことがなくなります。そんなメリットを知っていながらも、その環境を自分で作るのはハードルが高いなと思っていました。

そして気になっていたVite。これも配布された環境で少し試した経験があったので、超高速ということだけ知っていましたが、自分が今対応している案件でどう使うのか、調べたことがなかったです。

これを機にwp-env × Viteの開発環境構築に挑戦してみることにしました。

やってみた

AIを活用しながらやってみました。

まずは、公式サイトの手順で進めました。

事前に、Nodeのインストール、Dockerのインストールが必要です。

ターミナルで npm -g install @wordpress/env を実行し、wp-env をグローバルにインストールする。

新しい作業ディレクトリに移動してターミナルで wp-env start を実行して、ローカルの WordPress 環境を起動。

スクリプトの実行後、http://localhost:8888/wp-admin にアクセスし、ユーザー名 admin とパスワード password を使用して WordPress ダッシュボードにログインする。

参考公式サイト

これで、ローカル環境がたちあがります。（めっちゃ簡単でした。）

wp-env start を実行したディレクトリに .wp-env.json というファイルを作ることで、『どのテーマを読み込むか』『どのプラグインを最初から入れるか』を細かく指定できます。これを共有すれば、チームメンバーも全く同じ設定のWordPressが一瞬で手に入るのだそう。

あとは開発用のテーマファイルが必要です。

設定ファイルの記述はAIに助けてもらいました。

AIが出したコードが『自分のやりたいこと（Sassをassetsフォルダに吐き出す等）』と合致しているかを確認し、実際に動くか検証するのは自分の役割。AIを『超優秀な新人アシスタント』のように使いこなすのも、これからの開発スキルだと実感しました。

vite.config.js　には以下のように記述しています。

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    outDir: "dist",
    emptyOutDir: true,
    watch: {},
    minify: false, // 圧縮を無効化
    cssMinify: false, // CSS圧縮を無効化
    rollupOptions: {
      input: "src/main.js",
      output: {
        entryFileNames: "js/main.js",
        assetFileNames: (assetInfo) => {
          if (assetInfo.name && assetInfo.name.endsWith(".css")) {
            return "css/main.css";
          }
          return "css/[name][extname]";
        },
      },
    },
  },
  css: {
    devSourcemap: true, // 開発時のソースマップを有効化
  },
});

1. emptyOutDir: true （お掃除機能）

これは「ビルドするたびに、一度 dist フォルダの中身を空にする」という設定です。

  • 「古いファイルが残ってしまって、『修正したはずなのに反映されない！』という混乱を防ぐための設定です。チーム開発でファイルをやり取りする際、ゴミが残らないので清潔です」

2. minify: false （あえて圧縮しない）

通常、本番用はファイルを軽くするために圧縮しますが、あえて false（無効）にしています。

  • 「今回は開発環境の構築がメインなので、出力されたコードが人間にも読める状態（デバッグしやすい状態）にしています。チームメンバーがコードを確認する時も、これなら読みやすいはずです」

成果

もし私が構築した環境をチームで共有できると、メンバーは以下の手順で自分と同じ環境を手に入れることができます。

  1. DockerとNode.jsをいれる。
  2. ファイルをダウンロードする。
  3. npm install して npx wp-env start する。

これで、自分が見ているのと全く同じWordPress画面が、相手のパソコンにも立ち上がります。

うまくいくといいなー。

おわりに

今回、AIの助けを借りながらも「自分で環境を構築」して見ることができました。

もちろん、まだ完璧に理解できているわけではありません。でも、分からないなりに手を動かし、AIにきちんと指示を出すことができば、できることが広がるなと思いました。

AIに頼りっぱなしではなく、使いながらコードや仕組みの理解も深めていきたいと思います！

WordPress その他
目次