Golang htmx Tailwind CSS: レスポンシブ Web アプリケーションを作成する

背景

今日の Web 開発環境では、JavaScript は動的でインタラクティブな Web アプリケーションを作成するための言語として長い間選ばれてきました。

Go 開発者として、JavaScript を使用せずに応答性の高い Web アプリケーションを実装したい場合はどうすればよいですか?

ページ全体をリロードしなくても、タスクにチェックを入れると即座に更新される洗練された To Do リスト アプリを想像してみてください。これが Golang と htmx の力です!

Go と htmx を組み合わせると、JavaScript を 1 行も記述することなく、応答性の高いインタラクティブな Web アプリケーションを作成できます。

このブログでは、htmx と Golang を使用して Web アプリケーションを構築する方法を探っていきます。 (他のお気に入りのプラットフォームでも使用できます。)

学習として、ユーザーの基本的な作成および削除操作を実装します。

htmxとは何ですか？

htmx は、ブラウザとサーバー間の双方向通信を追加する最新の HTML 拡張機能です。

AJAX、サーバー送信イベントなどに HTML で直接アクセスできるため、JavaScript を書かずに動的な Web ページを作成できます。

htmxはどのように機能しますか?

• ユーザーが htmx 属性を持つ要素を操作すると (ボタンをクリックするなど)、ブラウザは指定されたイベントをトリガーします。
• htmx はイベントをインターセプトし、属性で指定されたサーバー側エンドポイント (例: hx-get="/my-endpoint") に HTTP リクエストを送信します。
• サーバー側のエンドポイントはリクエストを処理し、HTML レスポンスを生成します。
• htmx は応答を受信し、hx-target 属性と hx-swap 属性に従って DOM を更新します。これには以下が関係する可能性があります:

— 要素のコンテンツ全体を置き換えます。
 — 要素の前後に新しいコンテンツを挿入します。
 — 要素の末尾にコンテンツを追加します。

例を挙げてさらに深く理解してみましょう。

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

ポート 8080 で実行される基本的な Go サーバーをセットアップします。
go run main.go を実行してアプリケーションを実行します。

• ルート ディレクトリに HTML ファイルを作成し、ユーザー リストを表示します。

users.html

   
      <title>Go + htmx app </title>
      <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
      <script src="https://cdn.tailwindcss.com"></script>
   
   



<blockquote>
<p>We have included,</p>

<p><strong>htmx</strong> using the script tag — <u>https://unpkg.com/htmx.org@2.0.0</u></p>

<p><strong>Tailwind CSS</strong> with cdn link —<br>
<u>https://cdn.tailwindcss.com</u></p>
</blockquote>

<p>Now, we can use Tailwind CSS classes and render the templates with htmx.</p>

<p>As we see in users.html, we need to pass users array to the template, so that it can render the users list. </p>

<p>For that let’s create a hardcoded static list of users and create a route to render users.html .</p>

<h3>
  
  
  Fetch users
</h3>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "net/http"
 "text/template"

 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.GET("/", func(c *gin.Context) {
  users := GetUsers()

  tmpl := template.Must(template.ParseFiles("users.html"))
  err := tmpl.Execute(c.Writer, gin.H{"users": users})
    if err != nil {
       panic(err)
    }
 })

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

type User struct {
 Name  string
 Email string
}

func GetUsers() []User {
 return []User{
  {Name: "John Doe", Email: "johndoe@example.com"},
  {Name: "Alice Smith", Email: "alicesmith@example.com"},
 }
}

ユーザー リストをレンダリングし、ユーザーの静的リストを提供するためのルート / を追加しました (事前に新しいユーザーを追加します)。

以上です。サーバーを再起動し、 — http://localhost:8080/ にアクセスして、ユーザー リストが表示されるかどうかを確認します。以下のようにユーザーリストが表示されます。

ユーザーの作成

ファイルuser_row.htmlを作成します。新しいユーザー行をユーザー テーブルに追加する役割を果たします。

ユーザー行.html

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

フォーム入力から name と email を取得し、user_row.html.

を実行します。

新しいユーザーをテーブルに追加してみましょう。 http://localhost:8080/ にアクセスし、ユーザーの追加 ボタンをクリックします。

やったー！新しいユーザーをリストに追加しました?.

実装ガイドの詳細については、Canopas で完全なガイドを確認してください。

---

読んだ内容が気に入ったら、必ず ? をクリックしてください。ボタン！ — 作家として、それは世界を意味します!

以下のコメントセクションであなたの考えを共有することをお勧めします。皆様のご意見は、コンテンツを充実させるだけでなく、より価値のある有益な記事を作成するという私たちのモチベーションにもつながります。

コーディングを楽しんでください!