[オープンソース推奨事項] HMPL: React よりも軽量で、従来の jQuery よりもモダンで、HTMX に似ていますが、テンプレートの制御がより優れている、最小限のサーバー駆動型テンプレート言語です。 核となる目標は非常に明確です。現代のウェブアプリケーションのダイナミックでインタラクティブなエクスペリエンスを維持しながら、クライアントサイドのJavaScriptコードの量と複雑さを大幅に削減することです。これは、HTMLとEJSの「中間形式」とも言えるもので、従来のテンプレートエンジンの直感性と、現代の「サーバー駆動型UI」の機能を両立しています。 💡 コアコンセプト: HTML で「リクエスト」を定義します。 HMPLの最大の革新性は、その構文ロジックにあります。従来のアプローチは「リクエストを送信するJavaScriptを書く -> データを取得する -> DOMを更新する」というものでした。一方、HMPLでは「このブロックのデータがどこから来るのか」をHTMLテンプレート内で直接宣言できます。 • WYSIWYGデータフロー：長々としたfetchやaxiosコードを書く必要はありません。テンプレート内で特定の構文（{{ src: "/api/component" }}など）を使用するだけで、HMPLが自動的にリクエストを処理し、サーバーから返されたHTMLフラグメントを取得して、ページ上に安全にレンダリングします。 • サーバー中心：ロジックをサーバーに戻し、クライアントは「オンデマンドでの取得と表示」のみを担当することを推奨します。これにより、複雑なフレームワークの負担なしに、SSRのような効果を自然にサポートできます。 ✨ 主な機能の説明 1. 非常に軽量 最新のフロントエンドフレームワーク (React や Vue など) は数十 KB 以上になることがよくありますが、HMPL のコアは非常に小さく (gzip 圧縮後は約 24 KB 以下)、最初の画面の読み込み速度とパフォーマンスに対する要件が高いプロジェクトに非常に適しています。 2. 組み込みセキュリティ（セキュリティ第一） サーバーサイドHTMLを直接レンダリングすることは、XSS攻撃に対して最も脆弱です。HMPLはDOMPurifyを巧みに統合しており、レンダリングされたコンテンツをデフォルトでクリーンアップおよびサニタイズすることで、開発者が最も懸念するセキュリティリスクを解決します。 3. 優れた開発者エクスペリエンス（DX） ニッチな言語であるにもかかわらず、VS Codeプラグイン、Viteプラグイン、Webpack Loaderなど、包括的なサポートツールを提供しています。つまり、HMPLを書く際に、構文のハイライトや自動補完といった最新の開発エクスペリエンスを享受できるということです。 4. 柔軟性 フレームワーク全体を置き換えるものではありません。スタンドアロンツールとして使用したり、既存のVueまたはReactプロジェクトに組み込んで、動的に読み込む必要がある特定のサーバーサイドコンテンツを処理したりすることもできます。 ⚖️ 業界価値と評価: 現在のフロントエンド開発分野において、HMPL の出現は次のような反映を示しています。 • 過剰なエンジニアリングを拒否: 単純な動的ページごとに巨大な SPA フレームワークを導入する必要があるのでしょうか? HMPL は否定的な答えを示しています。 • 学習曲線が低い: バックエンド開発者やフルスタック開発者にとって、HMPL の「テンプレートの作成 = ロジックの作成」アプローチは、React Hooks や Vue Lifecycle 全体を学習するよりもはるかに直感的です。 オープンソースアドレス:
![[オープンソース推奨事項] HMPL: React よりも軽量で、従来の jQuery よりもモダンで、HTMX に似ていますが、テンプレートの制御がより優れている、最小限のサーバー駆動型テンプレート言語です。
核となる目標は非常に明確で](https://pbs.twimg.com/media/G67VZNsasAEDM14.jpg)