HN紹介: ブラウザで100%実装されたHTMX Playground

 (lassebomh.github.io)
6 ポイント 投稿者 GN⁺ 2024-01-09 | 1件のコメント | WhatsAppで共有

HTMX Playground

  • HTMX Playgroundは、HTMXを使ってシンプルなコードサンドボックス環境で試せるツール。
  • 追加設定なしですぐに使え、もともと htmx.org のサンプルから持ってきた例を確認できる。
  • ブラウザ内でバックエンドに似た環境でコードを書け、server.js 内でエンドポイントを定義し、独自テンプレートをレンダリングできる。
  • HTMX から送られるリクエストを横取りするモックサーバーを実行し、Django を使う人になじみやすいリクエスト処理とテンプレートエンジンを提供する。
  • このプロジェクトは HTMX に限定されないため、ほかのライブラリも自由に試せる。

保存と共有

  • 右上の "Copy as JSON" ボタンを押すと JSON 形式でコピーできる。
  • コピーした内容を Gist にアップロードし、"Load Playground" に raw URL を入力すると、そのページの URL が更新されて共有できる。
  • コードは GitHub でも利用可能。

注意事項

  • ページナビゲーション機能はない。
  • モバイル対応は限定的。
  • server.js は状態を持てるが、on.get("/") ビューで状態を更新すると、初回ページ読み込み時に別の iframe 経由で取得されるため、状態更新が失われる可能性がある。

使用ライブラリ

  • Svelte
  • Ace (コードエディタ)
  • PollyJS (モックサーバー)
  • Nunjucks (テンプレートエンジン)

GN⁺の意見

  • HTMX Playgroundは、Web開発者がHTMXを使ってインタラクティブなWebアプリケーションを素早くプロトタイピングできる便利なツール。
  • Django のようなバックエンドフレームワークに慣れた開発者でも取り組みやすい環境を提供することで、フロントエンドとバックエンドの開発体験を統合する助けになる。
  • このツールはコードを簡単に保存・共有できる機能を備えており、協業や教育目的にも非常に役立つ可能性がある。

関連記事

1件のコメント

 
GN⁺ 2024-01-09
Hacker News の意見

  • htmx 作者からの感謝のメッセージ

    • htmx 作者: htmx を作った作者から感謝の言葉が寄せられる。自分のプロジェクトに対する関心と利用について、非常に励みになると述べている。

  • htmx の利用に関する懸念と質問

    • 開発者プールへの懸念: あるユーザーは htmx の利用を検討したものの、開発者プールが小さく採用が難しいと感じた。専用フレームワークに慣れた専門のフロントエンド開発者を採用するほうが、専門的なフルスタック開発者を見つけるより簡単だった経験を共有。複雑なコードを扱うことを開発者が嫌がり、バックエンド開発者がボトルネックになるのも望んでいないという。htmx がこの問題を認識しているのか、またどう解決しようとしているのかを質問している。

  • htmx とモバイルアプリ対応に関する悩み

    • モバイルアプリ対応: htmx の考え方が気に入り関連書籍を読み始めたが、モバイルアプリ対応が必要になった際にフロントエンドとバックエンドを大幅に書き直さなければならないことを思い出し、悩んでいる。hyperview.org は知っているが、関心のあるユースケースには react-native アプリは適していないと述べている。

  • エディタ選択とエラー出力に関する意見

    • エディタとエラー出力: あるユーザーはモバイル対応が限定的だと指摘し、Ace Editor の代わりに Monaco Editor を使うべきだと主張している。しかし、Monaco はモバイルで意図的に動作しないため Ace を使っていると説明している。GitHub の issue リンクでその点を裏付けている。

  • htmx と Django を併用した経験の共有

    • htmx と Django の利用: ユーザーは maplibre、Django、htmx を併用しており、他の人と共有するためにサンプルを投稿する予定だと述べている。

  • htmx の使用経験とフィードバック

    • htmx の利用とフィードバック: htmx を仕事で使っており、うまく動作すると評価している。今後も使う予定だが、PHP ベース版を作るかもしれないという。JSON を URL 読み込みフィールドに貼り付けたときに作業が何度か失われたことや、ネットワークリクエストブラウザを整理できない問題（機能要望）についての経験も共有している。

  • 技術サポートに関する質問

    • ActiveX 対応の有無: あるユーザーが htmx は ActiveX をサポートしているのかと質問している。

  • 開発ツール選択に関する風刺的なコメント

    • Svelte の利用: htmx は Svelte で作られているのかと尋ねるユーザー。MPA（Multi-Page Application）純粋主義者たちはどこにいるのか、彼らの反応が気になるという風刺的なコメント。

  • オフラインアプリ開発への好奇心

    • オフラインアプリ開発: htmx と HTML を使ったリクエスト・レスポンスでオフラインアプリを作り、サービスワーカー内に仮想サーバーを定義している人がいるのか気になっているユーザー。

  • Web サイト説明文のタイプミス指摘

    • タイプミスの指摘: Web サイトのメインページの説明にタイプミスがあると指摘するユーザー。"intersepts" は "intercepts" に直すべきだと述べている。