Simple Button Block を実現した便利ライブラリの紹介

こんにちは！！

以前にリンクをいい感じに表示できるWordPressプラグイン、Simple Button Block をリリースしました。（↓みたいな感じで、好きなページへのリンクをいい感じに表示できます。まだ使ったことのない方はぜひ！）

noted.run Tシャツ

もっと見る

さて今回は、このプラグインの技術について少しお話すると同時に、その実現の中で大きな核となったライブラリである@wordpress/create-blockをご紹介したいと思います。

Simple Button Block の開発技術と問題点

このプラグインは主にReactというJavaScriptのフレームワークによって開発されました。技術の選定理由は単純に私自身が絶賛学習中であり、その知見を持っていたからです。

しかし、本来ReactでWordPressのプラグインを開発するのは簡単な話ではないです。そもそもWordPressはPHPという言語がメインで動いていますし、そこをうまいこと変換してあげないとプラグインとして成り立たせるのはもちろん、開発体験としても悪くメンテナンス等も一苦労です。

しかし、そんな中 @wordpress/create-block に出会いました。

@wordpress/create-block のご紹介

ReactでWordPressプラグインを開発したいというわがままな願いをかなえてくれる便利ライブラリです。Node.jsとDockerが現環境にあれば、以下のコマンドで必要な一式をローカルに用意し、すぐに開発を始められます。

npx @wordpress/create-block --wp-env

詳しくは以下の日本チームによる公式の解説を見ていただくと良いと思います。

実際に触ってみた中では、開発体験が素晴らしいと感じました。

具体的には、

• Dockerによる仮想環境が用意される。
• 修正後の動作を開発中にすぐに確認できる。
• コマンドを整備すれば、一発でパッケージングできる

といった、「メンテナンスのしやすさ」が良かったです。一度作ったら終わりというサービスはほとんどないので、そういう意味でも導入したいライブラリだと感じました。

ということで、Simple Button Block を実現したライブラリ@wordpress/create-block のご紹介でした。

また面白いライブラリなんかを見つけたらご紹介しますね。ではでは！