wordpress/create-block でブロックを作る
タロスカイ社内文書共有シリーズです。弊社では最近「wp create block でブロックを作ろう」というルールを決めました。それはなぜかというと……
- WordPress公式でサポートされているブロック作成方法である。
- gutenbergプロジェクトがこのツールを元に開発されており、構成などが似ている（この手法に慣れる＝コアの開発チームの手法に慣れる）
- ドキュメント化されており、生成AIなどのツールもその利用方法を理解するのが早い。
などが理由です。マットさんが2015年だかに “Learn JavaScript Deeply” と宣言してから10年経ちますが、wordpress/gutenbergリポジトリのボタンのソースを見ると私はいまでもちょっとビックリします。importや分割代入、プロパティの省略記法なども慣れていないと読みづらいですよね。しかし、これに慣れないことにはコアのコードも読み解けません。がんばるしかない！
で、例によって学習用リポジトリとして tarosky/headfirst-create-block を作りました。このリポジトリの使い方ですが、大きくわけて2つあります。
用途1. 学習用に使う
このリポジトリをクローンして、ローカルで色々試します。ブロックを追加するコマンドの例もREADMEに書いてあるので、その通りに作ってみてください。いまのところサポートしている方法は以下の通り。
- 一つのプロパティをもった単純なAlertブロック。
- 中に他のブロックを入れられるInnerBlocks。
- Charts.jsと組み合わせたちょっと複雑なブロック
- サーバーサイドレンダリングでPHPが外部のAPIと連携するブロック。ブロックのサイドバーであるInspectorControlsも学べます。
- メタボックスに配置された値がブロックと連動する
- ブロックスタイル
- ブロックバリエーション
用途2. 生成AIに参考にさせる
いまなんらかのプロジェクトを行っていて、たとえば「3つプロパティがあるブロックを作りたいな」となったとしましょう。その場合、次のようにディレクトリを並列に並べます。
Document - my-project - headfirst-create-block
my-projectの中で生成AI（Claude CodeやGemini CLI）を使っていたら、次のようなプロンプトを打つといい感じになるでしょう。
../headfirst-create-block の中にあるalertブロックのようなものを作りたいです。../headfirst-create-block/README.mdにリポジトリの仕様が書いてあるので、それに従ってください。ビルドシステムも同じにしたいので、このディレクトリ（./）にも同じものを揃えてください。ただし、alertブロックはプロパティが3つですが、わたしが作りたいのはmy-project/noticeブロックです。
これでたぶんいい感じに作ってくれるのではないでしょうか。
世の中にはブロックを作るプラグインもあるのですが、生成AIの普及によって「知る人ぞ知るブロック作成用プラグインを使う」より「生成AIの助けを借りて標準的な作り方をする」方が効率的になってきたかもしれません。ちょうどDrupalの創業者ドリエスさんが “Adaptable Drupal modules: code meant to be adapted, not installed” （適応型Drupalモジュール: インストールされるのではなく適用されることを意識したコード）という興味深い記事を書いていたので、そちらも合わせてどうぞ。
コンセプトは単純明快だ：実在するサイトの実在する問題を解決する、テスト済みで動作するコードを、明示的に出発点として共有する。これらのモジュールをインストールする必要はない。ましてや箱から出してすぐに動作することを期待するべきではない。代わりに、AIがコードを読み込み、そこに埋め込まれた設計上の判断を理解することで、コードを適応させる。あるいは人間が同じことを行うことも可能だ。
……（中略）
人間がすべてのアダプテーションを行わなければならなかった時代には、このワークフローはあまり意味をなさないものだった。しかしAIが経済性を変える。AIはコードを読み解き、その機能を理解し、新たな文脈に合わせて再構築するのが得意だ。アダプテーションという機械的な作業は、安価かつ信頼性の高いものになりつつある。
