create-blockツールの使用

こんにちは。Learn WordPressへようこそ。

このチュートリアルでは、create-blockツールを使って新しいブロックプラグインをスキャフォールドする方法を学びます。この動画では、create-blockツールとは何か、create-blockを使うために必要なソフトウェア、create-blockを使って新しいブロックをスキャフォールドする方法、そしてcreate-blockによって生成されるコードについて説明します。

create-blockは、WordPressのコントリビューターによって開発された公式のコマンドラインツールで、新しいブロックプラグインをスキャフォールドまたは作成するためのものです。新しいブログプラグインを始めるために必要なものをすべて生成し、設定不要の最新のビルド環境を統合します。create-blockについて詳しくは、WordPress開発者リソースのBlock Editorハンドブックにある「Reference Guides -> Packages -> @wordpress/create-block」から確認できます。

create-blockツールを使うには、ローカルのWordPressインストール、コマンドを実行するためのターミナル、そしてNode.jsとnpmが必要です。LocalWPやDesktopServerなど、使い慣れた任意のローカルWordPressインストールを使用できます。まだローカルのWordPressインストールがない場合は、learn.wordpress.orgの「初心者向けローカルWordPressインストール」チュートリアルをご覧ください。

Mac OSまたはLinuxオペレーティングシステムを使用している場合は、組み込みのターミナルを使えます。Windowsユーザーには、microsoft.com/powershellから入手できるPowerShellのインストールと使用をおすすめします。

最後に、npmもインストールされるNode.jsをインストールする必要があります。create-blockツールは、バージョン12より新しい安定版のNode.jsであれば動作します。ただし、開発要件によっては、プロジェクト間でNode.jsのバージョンをすばやく切り替えられる必要があるかもしれません。幸い、これはオープンソースのNodeバージョンマネージャー、つまりnvmを使って行えます。nvmを見つけるには、GitHubページに案内してくれるnvm.shにアクセスしてください。nvmを使う大きな利点は、バージョン要件が変わった場合でも、nvmを使ってNode.jsのバージョンを簡単に更新できることです。このチュートリアルでは、コアのブロック開発に必要なバージョンと同じものをインストールします。このバージョンは、Block Editorハンドブックの「Getting Started development environment」ページに記載されています。

現在は、Node.jsバージョン14のインストールが推奨されています。macOSまたはLinuxを使用している場合は、デフォルトのターミナルアプリケーションを開き、nvmのドキュメントからコピーしたnpmインストールスクリプトを実行してnvmをインストールできます。

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

npmをインストールしたら、ターミナルを閉じて再度開く必要があります。

次に、nvm installコマンドを使って、必要なNode.jsとnpmのバージョンをインストールできます。

nvm install 14

Windowsマシンを使用している場合、nvmをインストールするにはWindows用のChocolateyパッケージマネージャーをインストールする必要があります。まず、PowerShellメニュー項目を右クリックして「管理者として実行」を選択し、管理者権限でPowerShellを開きます。次にChocolateyのセットアップドキュメントを開き、「PowerShellでインストール」の手順までスクロールします。手順をコピーし、PowerShellウィンドウ内を右クリックして貼り付けます。

Chocolateyをインストールしたら、次のコマンドを使ってnvmをインストールします。

choco install -y nvm

nvmをインストールしたら、nvm installコマンドを使って必要なNode.jsとnpmのバージョンをインストールします。

nvm install 14

最後に、nvm useコマンドを実行して、インストールしたNode.jsとnpmのバージョンを使用します。

nvm use 14.20.0

これでcreate-blockツールを使って最初のブロックを作成する準備ができました。ターミナルで、ローカルのWordPressインストールにあるWPコンテンツのプラグインディレクトリへ移動します。私の場合は次の場所です。

cd development/websites/wordpress/wp-content/plugins

次にcreate-blockコマンドを実行し、プラグインスラッグを渡します。スラッグはプラグインの一意の名前です。

npx @wordpress/create-block wp-learn-todo

これによりwp-learn-todoディレクトリに新しいプラグインが作成され、必要なパッケージがインストールされ、必要なファイルが作成されます。create-blockパッケージをインストールする必要がなかったことに気づくでしょう。npxコマンドを使うと、クラウド上でホストされている場所からパッケージを実行できます。

新しいプラグインがスキャフォールドされると、create-blockに渡したスラッグにちなんだ名前の新しいプラグインフォルダーがWordPressインストール内に作成されます。

そこにあるのがwp-learn-todoです。このプラグインで最も重要なディレクトリとファイルを見てみましょう。

buildディレクトリは、配布用の最終的なブロックアセットファイルがビルドされる場所です。node_modulesには、開発に必要なNodeパッケージやモジュールが含まれます。src、つまりsourceディレクトリでは、主にコーディングを行います。ブロックのコードはすべてここにあります。package.jsonは、コードに必要なパッケージを決定するファイルです。readme.txtは、WordPress.orgのプラグインリポジトリがプラグインを管理するために使用するファイルです。そしてwp-learn-todo.phpファイルは、これがプラグインであることをWordPressに伝えるメインのプラグインファイルです。

WordPressを開いてBlock Editorに移動すると、このブロックを追加できるはずです。まずブロックを有効にする必要があります。learn-todoは有効化されています。新しい投稿を作成して、新しいブロックを追加してみましょう。これです。現時点では、テキストを含む段落だけが入っています。

これでcreate-blockの使い方に関するチュートリアルは終了です。カスタムブロックの構築を始める準備ができたら、「既存のプラグインにブロックサポートを追加する」チュートリアルをご覧ください。その他のWordPress開発者向けチュートリアルについては、learn.wordpress.orgにアクセスしてください。

コーディングを楽しんでください。