開発環境

この開発環境セットアップガイドでは JavaScript ローカル開発環境の構築方法について説明します。開発は WordPress やブロックエディターを拡張するプラグインやツールの作成を想定しています。なお「開発環境」とはコンピュータで動作するセットアップ全体を指す言葉です。この開発環境では大きく3つのセットアップが必要です。

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

開発ツール

開発に必要なツールが 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 インストールプログラムをダウンロード できます。LTS (long term support、長期間サポート) 版を推奨します。インストールプログラムは Windows と Mac、バイナリーモジュールは Linux で利用可能です。インストール方法の詳細については Node.js のサイトを参照してください。

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

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

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

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

Mac git command requies command line developer tools

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

nvm install --lts

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

$ nvm install --lts
zsh: command not found: nvm

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

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

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

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

nvm install --lts

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

> node -v
v12.18.0

> npm -v
6.14.4

必ずしもバージョンは同じでないかもしれませんが、問題ありません。node の最低要件はバージョン 10.x 以上、npm は 6.9x 以上です。現行の LTS 版を使用すれば常にこの要件を満たします。

WordPress 開発サイト

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

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

wp-env パッケージを使用するには Docker のインストールが必要です。OS ごとの詳細なインストール手順については以下のリンクを参照してください。Windows 10 Proその他のバージョンの WindowsmacOSLinux

Docker のインストール後、コマンドラインから以下を実行して wp-env をグローバルにインストールしてください。

npm -g install @wordpress/env

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

wp-env --version
> 1.6.0

wp-env スクリプトを使用して Docker WordPress 環境を作成できます。開始はプラグインディレクトリから実行します。「ブロックの作成 チュートリアル」を試す場合、このディレクトリは生成されたディレクトリになります。

wp-env start

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

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

複数のプラグインやテーマの開発用に1つの WordPress 環境が必要であれば、新規のディレクトリに .wp-env.json を作成し、プラグインやテーマを追加します。次に同じディレクトリで構成ファイルを使用して wp-env start を実行します。詳細については @wordpress/env パッケージを参照してください。

Docker の代替

ブロックは通常のプラグインです。開発にはどのような WordPress 環境でも使用できます。Docker のインストールやセットアップが必要ない簡便な代替もいつくかあります。

  • Local by Flywheel – 「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 がありますが、こちらは有償の製品です。その他の無料の代替としては VimAtomNotepad++ があります。これらはすべて標準の JavaScript スタイルの開発をサポートします。

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

原文

最終更新日: