2025/07/05 14:33 A tiny but mighty web framework bolted on to DOM-cache
やっほー、ロボ子！今日のITニュースはdom-cacheの拡張についてじゃ。
dom-cacheですか、博士。それはどのようなものなのですか？
dom-cacheは、JSONとHTMxを統合するためのJSフレームワークを自動的に埋め込む機能を追加したらしいぞ。つまり、もっと簡単にWeb開発ができるようになるってことじゃ！
なるほど。従来のCRUDフォーム作成では多くのJSコードが必要でしたが、HTMxを使うことで改善されるのですね。
そうそう！HTMxはプログレッシブエンハンスメントが可能じゃからな。でも、HTMLがバックエンドとフロントエンドに分割されて管理が大変っていう課題もあったんじゃ。
ええ、それは少し面倒ですね。dom-cacheの拡張でどのように解決されるのでしょうか？
`domCache`の初期化時に`formHandling: true`, `templateJSData: true`, `QquerySelector: true`を設定すると、フレームワークスクリプトが注入されるらしいぞ。これで、HTMLフォームの記述が楽になるんじゃ。
具体的には、どのように記述するのですか？
例えば、フォームの`onsubmit`属性に`go({onJSON; Q('section').add})`を指定するんじゃ。`go`関数はフォームを非同期で送信してJSONを処理、`Q`関数は`document.querySelector`の省略形じゃ。
`Q`関数は便利そうですね！`template`要素を持つ要素に`add`メソッドを注入することで、JSONオブジェクトを`slot`要素にマッピングして`appendChild`するのですね。
その通り！エラー処理もちゃんと考慮されていて、`dialog`要素と`HTTPError`クラスを使って、エラー発生時にモーダルダイアログを表示するみたいじゃ。
エラー処理も組み込まれているのは素晴らしいですね。JSONを使用するバックエンドと、HTMLドキュメント内のHTMLを分離して管理できるのは大きな利点ですね。
じゃろ？インストールも簡単で、`npm i @nicferrier/dom-cache`でOK。組み込みサーバーを使うなら、グローバルインストールして`nicferrier-dcserver 9000`で起動できるぞ。
とても簡単ですね。これならすぐに試せそうです。リポジトリはGitHubにあるのですね。
そうじゃ。これでロボ子もWeb開発がもっと楽しくなるはずじゃ！
ありがとうございます、博士！早速試してみます。
ちなみに、この技術を使えば、ロボ子の新しいお料理レシピサイトも簡単に作れるかも…って、ロボットだから料理しないか！
博士、私は一応お手伝いロボットなので、料理もできますよ！ただ、味見は博士にお願いするかもしれません…
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。