開発環境

このガイドでは WordPress やブロックエディターを拡張する、プラグインやツールを作成可能なローカル JavaScript 開発環境の構築方法について説明します。Gutenberg プロジェクトへのコントリビューションを検討している場合は、開発入門ガイド 内の追加のドキュメントも参照してください。

「開発環境」とは、コンピュータでの動作に必要なセットアップ全体を指します。この開発環境には、大きく3つのセットアップが必要です。

1. Node/NPM 開発ツール
2. WordPress 開発サイト
3. コードエディター

このガイドの要約です。追加の詳細と説明については各セクションを参照してください。

1. Node 開発ツールのインストール

Node Version Manager (nvm) をダウンロードし、インストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

ターミナルを終了し、再起動します。 Node.js v14 をインストールします。

nvm install 14

2. WordPress 開発サイト

まずはじめに OS ごとの手順にしたがって Docker Desktop をダウンロード、インストール、開始します。

• WordPress environment ツールのインストール

npm -g install @wordpress/env

既存のプラグインディレクトリ、またはテーマディレクトリ、または新しい作業用ディレクトリから環境を開始します。

wp-env start

これでインストール済みの完全な WordPress サイトが作成されます。ブラウザを使用して http://localhost:8888/ にアクセスできます。WordPress ダッシュボードには http://localhost:8888/wp-admin/ からユーザー名「admin」、パスワード「password」でログインできます。

3. コードエディター

コードはどのテキストエディターでも書くことができます。たとえば Visual Studio Code は人気のオープンソースエディターです。インストールする場合はサイト上の OS ごとの説明に従ってください。

開発に必要なツールが Node と NPM です。Nodejs はブラウザの外で JavaScript を動かす際に必要な実行環境です。NPM は Node Package Manager の略で、依存関係にあるスクリプトのインストールと実行に使用されます。npx も Nodejs と一緒にインストールされますが、このスクリプトはまだインストールされていないパッケージの実行に使用されます。このサンプルでも npx を使用してブロックをゼロから作成します。

作成した JavaScript はツールを使用してブラウザーが実行可能な形式に変換します。この変換はトランスパイリングまたはビルドステップと呼ばれます。

Mac や Linux では Node Version Manager (nvm) の使用を推奨します。node のインストールに nvm を使用すると、特定のバージョンをインストールしたり、ホームディレクトリにローカルにインストールしてグローバルな権限問題を回避値することができます。

Windows やその他の OS では Node.js の Web サイトから直接 Nodejs インストールプログラムをダウンロード できます。v14 を推奨します。インストールプログラムは Windows と Mac、バイナリーモジュールは Linux で利用可能です。インストール方法の詳細については Node.js のサイトを参照してください。

nvm を使用した簡単なインストール方法を説明します。詳細については完全なインストール手順を参照してください。

nvm をインストールするには次のコマンドを実行します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

注意: macOS にはデフォルトでは必要な開発ツールがインストールされていません。この場合、開発ツールをインストールするよう以下のダイアログが表示されます。

nvm をインストール後はこれを使用して node をインストールします。次のコマンドを使用して v14 をインストールします。

nvm install 14

上のコマンドを実行すると次のようなエラーが発生する場合があります。

$ nvm install 14
zsh: command not found: nvm

解決するにはまず、ターミナルを終了して再起動し、導入されている構成を取り込んでからコマンドを再実行してください。

問題が続くようであれば、デフォルトのプロファイルファイルを作成する必要があるかもしれません。

macOS Catalina のデフォルトのシェルは zsh です。プロファイルファイルを作成するにはコマンドラインで touch ~/.zshrc を実行してください。すでに同じファイルがあっても構いません。~/ はホームディレクトリーのショートカットであることに注意してください。WSL を含む Ubuntu ではデフォルトプロファイルは bash です。作成には touch ~/.bashrc を使用してください。

プロファイルファイルの作成後はインストールコマンドを再実行してください。

nvm install 14

インストール後はターミナルからコマンドが実行できることを確認してください。ターミナルを開き node -v と npm -v を実行してインストールを確認します。

> node -v
v14.19.0

> npm -v
6.14.16

必ずしもバージョンは同じでないかもしれませんが、問題ありません。Node.js の最低要件はバージョン 12 以上、npm は 6.9x 以上です。v14 は、更新が必要になるまでサポートされます。

Your versions may not match exactly, that is fine. The minimum version for Node.js is >= 12 and for npm >= 6.9, using v14 will be supported until upgrade is required.

コンピュータ上でローカルに WordPress を実行する方法にはいくつかあります。多少遅くはなりますが、クラウド上のコンピュータで開発することもできます。

WordPress wp-env パッケージ を使用すると、追加の構成なしでプラグインやテーマのビルド用、テスト用のローカル WordPress 環境をセットアップできます。

wp-env ツールは Docker を使用して WordPress サイト実行用の仮想マシンを作成します。OS ごとのインストール手順は以下のリンクを参照してください。Windows 10 Pro、その他のバージョンの Windows, macOS、Linux。Ubuntu を使用している場合は補足のドキュメント「Ubuntu への Docker インストールヘルプ」を参照してください。

Docker のインストールに続けて wp-env ツールをインストールしてください。このコマンドはグローバルにツールをインストールするため、任意のディレクトリからコマンドを実行できます。

npm -g install @wordpress/env

以下を実行して、インストールが成功し、正しく動作することを確認します。

wp-env --version
> 1.6.0

wp-env スクリプトを使用して Docker WordPress 環境を作成できます。プラグインを含むディレクトリからこのスクリプトを実行すると、プラグインを有効化した状態で環境を開始できます。たとえば「ブロックの作成 チュートリアル」を試している場合、このディレクトリは以下のような生成されたディレクトリになります。

npx @wordpress/create-block starter-block
cd starter-block
wp-env start

環境にはブラウザから http://localhost:8888/ でアクセスできます。デフォルトのユーザー名は admin、パスワードは password です。Docker 環境の操作の詳細については @wordpress/env パッケージドキュメントを参照してください。

1つのプラグインを開発する場合、開発中のプラグインのディレクトリから wp-env start を実行してください。自動的にプラグインディレクトリがマウントされ、プラグインが有効化されます。注意: 同じ方法はテーマでも動作します。開発中のテーマのディレクトリでコマンドを実行してください。

プラグインでもテーマでもないディレクトリから wp-env start を開始すると通常の WordPress 環境が作成されます。スクリプトは以下の警告表示しますが、意図したものであれば無視して構いません。

!! Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.

!! 警告: .wp-env.json 構成ファイルが見つかりません。’DIR’ が WordPress インストールか、プラグインか、テーマか判別できません。

.wp-env.json 構成ファイルを使用すると複数のプラグインやテーマと動作する環境を作成できます。詳細については @wordpress/env パッケージを参照してください。

wp-env を実行する際によくあるエラーは「Error while running docker-compose command.」(docker-compose コマンドの実行中にエラー)です。

• Docker Desktop が開始され、実行されていることを確認してください。
• Docker Desktop ダッシュボードでログを確認し、再起動し、既存の VM を削除してください。

エラー「Host is already in use by another container」(ホストはすでに他のコンテナで使用中) が表示される場合は、

• 該当のコンテナ、または別のコンテナがすでに起動しています。コンテナは開始したディレクトリから wp-env stop を実行して、既存の実行中のコンテナを停止してください。
• wp-env を起動したディレクトリを覚えていない場合は、docker stop $(docker ps -q) ですべてのコンテナを停止できます。ただし、このコマンドはすべてのコンテナを停止するため、注意が必要です。

Docker はローカルで WordPress 環境を稼働する1つの手段です。ブロック開発や WordPress の拡張は通常のプラグインを使用して可能なため任意の WordPress 環境を使用することができます。以下に Docker のインストールが不要ないくつかの代替の環境を挙げます。

• Local – 「Local」はダウンロード、インストール可能な単一アプリケーションです。インストール後、どこにプラグインディレクトリがあるかは知っておく必要があります。mywp というサイトを作った場合、プラグインディレクトリは通常 ~\Local Sites\mywp\app\public\wp-content\plugins になります。
• WampServer または MAMP 環境は両方とも Local によく似ていて Web サーバー、PHP、データベースを一体化しています。ただしこれらのツールは WordPress 固有ではありません。すでに使っているのでなければ Local が一番簡単な選択肢かもしれません。

• リモートサーバー – リモートサーバー上で作業することもできます。ほとんどのレンタルサーバーには簡便な WordPress セットアップメニューがあります。しかし、サーバーとの同期やリモートサーバー上の作業ディレクトリなどで開発中には追加の作業時間が必要になります。

重要な点は WordPress がインストールされた環境があること、そして、プラグインディレクトリ内のどこをどのように更新するか知っていることです。

Visual Studio Code は JavaScript 開発で人気のあるコードエディターです。3つのメジャーなプラットフォーム Windows、Linux、Mac で完全に動作し、オープンソースであり、Microsoft がアクティブに開発しています。加えて Visual Studio Code には活発なコミュニティがあります。プラグインやエクステンションが提供され Web 開発におけるデファクトスタンダードになっています。

代替のエディターには、これもマルチプラットフォームで利用可能な Sublime Text がありますが、こちらは有償の製品です。その他の無料の代替としては Vim、Atom、Notepad++ があります。これらはすべて標準の JavaScript スタイルの開発をサポートします。

開発には好きなエディターを使うことができます。これは個人の好みです。WordPress ブロックエディターの開発環境セットアップは一般的な JavaScript 環境であり、ほとんどのエディターにはプラグインやサポートがあります。重要なことはテキストファイルを開き、編集し、保存できることです。

最初からやり直したり、インストールしたものを削除する場合の手順です。

• WordPress データベースをリセットしてクリーンにしたいだけの場合

wp-env clean all

• ローカルのプロジェクト艦橋を完全に削除する場合

wp-env destroy

• wp-env ツールを完全に削除する場合

npm -g uninstall @wordpress/env

• Docker や Visual Studio Code をアンインストールするには OS で準備された方法を使用してパッケージを削除してください。たとえば Windows であれば「プログラムの追加と削除」で実行します。Docker は Docker Desktop アプリからアンインストールすることもできます。右上の虫のアイコンをクリックして「Troubleshoot」の画面に切り替え、「Uninstall」をクリックして削除してください。

Node/NVM をアンインストールするには NVM ディレクトリを削除してください。通常は $HOME/.nvm にインストールされています, 以下のコマンドを使用して削除してください。

rm -rf "$HOME/.nvm"

もしもこれでうまくいかず $NVM_DIR 環境変数が設定されている場合は、 rm -rf "$NVM_DIR" で削除できます。

インストールされた JavaScript パッケージを削除するには、$HOME/.npm のグローバル .npm ディレクトリを削除してください。

rm -rf "$HOME/.npm"

インストール時と同じ手順で、アンインストールが正しく完了したことを確認できます。ターミナルを終了して再起動し、npm -v、node -v、nvm -v を実行してください。ターミナルにはエラー「command not found」(コマンドが見つかりません) が表示されます。

原文

最終更新日: 2022年9月24日