Claude Codeで数時間。非エンジニアがWordPressデスクトップエディターを自作してみた

誰しもがかつて熱中するものがあったはずである。僕の小学生時代でいうところの「ミニ四駆」であり、「ポケモン」にあたるものである。

そして何を隠そう、その熱中するものが今ある、ソフトウェア開発だ。本来、プログラミング言語に精通したエンジニアの領域だったが、生成AIのおかげでその敷居がガクッと下がり、非エンジニアでも動くソフトウェアが容易に開発可能になった。

コードを理解せずとも、プロンプトに基づき生成AIから出力されるコードを深く理解せずとも、実装していく…どうやらバイブコーディングというらしい。この先頭のバイブは「バイブス」が語源、ノリでコーディングしていく姿勢を指しているのだ。

Anthropic社のClaude Codeが優秀すぎて、コーディングだけでなく、テスト、バグ出しまで一貫してやってくれる。そして、このWordrpressのデスクトップエディターのプロトタイプを数時間でササッと作ってしまった。話に聞いていたが、実際に自らの手を動かしてみると、その技術革新の感動は格別だ。

<Wordpressのオリジナルデスクトップエディタ>

自作の醍醐味はカスタマイズと言っても過言ではない。こだわりは、使用する最小限の書式スタイルのコマンドをトップバーに配置したこと。エディタ画面の選択肢が最小限だと、記事作成の没頭感が変わってくるからだ。括弧や二重括弧もタイプが大変なので専用コマンドを配置した。

画像挿入も16:9へのトリミング機能を実装、さらにシネマティックな雰囲気を醸し出すティール&オレンジ調の色補正のオプション機能も搭載した。この色補正は理想にまだ程遠いの調整中なのだが、これも写真の専門知識不要、近づけたい参考写真をClaude Codeのプロンプトへ投げかけるだけで 良きに計らった色補正のコードを実装してくれる。

そして何より、言語だったり、フォントだったり、色合いだったり、UIも自分の気分が上がるデザインへ作り込むことが出来て、今、「熱中」しているのである。

尚、UI はインフルエンサーのトバログさんを参考にしてとClaude Codeに依頼したところ、Tobalog Writerというプロジェクト名で走ってしまったので、ソフト名もそのままにしている。