htmx-sample

htmxを学習するための日本語サンプルリポジトリ 🚀

📚 はじめに

このリポジトリは、htmx初心者の方がスムーズに学習を始められるように作成されたオンボーディング教材です。

実際に動かせるサンプルアプリケーションと分かりやすい日本語のドキュメントを用意しています。

🎯 htmxとは？

htmxは、HTMLの属性を追加するだけでAJAXやWebSocketなどの機能を実装できる軽量JavaScriptライブラリです。

主な特徴:

• 📝 JavaScriptを書かずに動的なWebアプリを作成
• ⚡ 約14kBの軽量ライブラリ
• 🔧 どんなバックエンド言語とも組み合わせ可能
• 🎨 既存のプロジェクトに段階的に導入可能

🚀 クイックスタート

1. リポジトリをクローン

git clone https://github.com/mashharuki/htmx-sample.git
cd htmx-sample

2. サンプルを起動

Pythonを使う場合:

cd samples/01-basic
python -m http.server 8000

Node.jsを使う場合:

# http-serverをインストール（初回のみ）
npm install -g http-server

cd samples/01-basic/counter.html
http-server -p 8000

3. ブラウザで開く

http://localhost:8000 にアクセスして、サンプルファイルを開いてください。

📂 サンプルの構成

🌱 01-basic: 基本編

初心者向けの基本的なサンプルです。htmxの核となる機能を学べます。

• counter.html - カウンターアプリ（hx-getの基本）

  • ボタンクリックでサーバーからデータを取得
  • hx-get, hx-target, hx-swap の使い方

• form.html - フォーム送信（hx-postの基本）

  • ページをリロードせずにフォームを送信
  • フォームデータの自動収集

• search.html - リアルタイム検索（hx-triggerの活用）

  • 入力に応じて即座に検索結果を表示
  • デバウンス処理（入力が止まるまで待つ）

🌿 02-intermediate: 中級編

より実践的なアプリケーションの例です。

• todo.html - TODOアプリ（CRUD操作）

  • 追加・更新・削除の実装
  • チェックボックスによる状態管理

• tabs.html - タブ切り替え（コンテンツ切り替え）

  • クリックで異なるコンテンツを表示
  • SPA風のユーザー体験

• infinite-scroll.html - 無限スクロール

  • スクロールで自動的にコンテンツを読み込み
  • hx-trigger="revealed" の活用

🌳 03-advanced: 応用編

高度な機能を組み合わせた実践的なサンプルです。

• validation.html - フォームバリデーション

  • リアルタイムで入力をチェック
  • ユーザーフレンドリーなエラー表示

• polling.html - ポーリング（自動更新）

  • ダッシュボードの定期的な更新
  • リアルタイムモニタリング

📖 ドキュメント

このリポジトリには以下のドキュメントが用意されています：

docs/ONBOARDING.md - オンボーディングガイド

詳しい学習ガイドです。以下の内容が含まれています：

• htmxの基本概念
• 主要な属性の詳細説明
• 学習の進め方
• よくある質問
• トラブルシューティング

docs/QUICK_REFERENCE.md - クイックリファレンス

よく使う属性とパターンの早見表です：

• 全ての主要な属性の一覧
• hx-swap、hx-triggerの値の説明
• 実践的なコードパターン集
• デバッグのTips

🎓 学習の進め方

1. 基本サンプルを動かす

   • samples/01-basic/counter.html から始める
   • ブラウザの開発者ツールでリクエストを観察

2. コードを読む

   • HTMLファイル内の日本語コメントを読む
   • どの属性が何をしているか理解する

3. 改造してみる

   • hx-target や hx-swap の値を変更してみる
   • 動作がどう変わるか確認する

4. 自分で作る

   • 学んだ知識で簡単なアプリを作成
   • 実際のバックエンドと統合してみる

💡 各サンプルの特徴

すべてのサンプルには以下が含まれています：

• ✅ 動作するコード - すぐに試せます
• 📝 詳細な日本語コメント - コードの各部分を説明
• 💡 学習ポイントの解説 - 何が学べるか明示
• 🔍 試してみようセクション - 実際に手を動かすヒント
• 🎨 見やすいUI - 理解しやすいデザイン

🛠 技術スタック

• htmx 1.9.10 - メインライブラリ
• HTML5 - 構造
• CSS3 - スタイリング
• JavaScript - モックAPIサーバー（学習用）

📚 参考リソース

• htmx公式サイト
• htmx公式ドキュメント
• htmxサンプル集
• htmx GitHub

🤝 コントリビューション

改善提案やバグ報告は Issue や Pull Request でお願いします！

📄 ライセンス

このサンプルコードはMITライセンスの下で公開されています。 自由に学習・改変・再配布していただけます。

🙋‍♀️ 質問・フィードバック

わからないことや改善提案があれば、お気軽にIssueを立ててください！

---

Happy learning with htmx! 🎉

htmxを使って、シンプルで強力なWebアプリケーションを作りましょう！