HTMX と Golang を使用したファイルのアップロード

もちろん、HTMX の素晴らしさについてはすでに聞いたことがあるでしょう (まだ聞いたことがないのですか? ここに来て良かったですか?)

今日は、HTMLX のシンプルさと Golang の機能を組み合わせて、ファイルをサーバーにアップロードします。はい、私たちは HTMX と Go を使って別のエキサイティングな Web 機能を構築する予定です。

ところで、HTMX を使用したフルスタック アプリの構築に関する実践的なプロジェクトベースのガイドが本当に必要な場合は、私の HTMX + Go: Build Fullstack Applications with Golang and HTMX コース [割引あり] をチェックしてください。

それでは、始めましょう

Go プロジェクトのセットアップ

最初のステップは、単純な Go プロジェクトをセットアップすることです。これを行うには、フォルダーを作成し、そのフォルダーに移動し、以下のコマンドを使用して Go プロジェクトとして初期化します。
リーリー

プロジェクトを初期化したら、プロジェクト内で必要となる依存関係をいくつかインストールしましょう。

これは、アップロード フォームを含む単一のページと、ファイルのアップロードに使用されるエンドポイントを含む単純なサーバーになります。

ルーティングには、Gorilla Mux ルーティング ライブラリを使用しますが、お好みのルーティング ソリューションを自由に使用してください。また、Google の Go 用 UUID ライブラリを使用して、ファイルをアップロードするときにファイルのランダムな名前を生成します。さまざまな方法でファイル名を生成できるため、これは個人的な好みです。

以下のコマンドを使用してこれら 2 つをインストールします:

ゴリラマックス
リーリー

Google UUID
リーリー

これら 2 つがインストールされると、プロジェクトは完全にセットアップされ、次のステップに進むことができます。

テンプレートの作成

この小さなプロジェクト用に 2 つの HTML テンプレートを作成します。

最初のテンプレートは、サーバーからクライアントに送信できる文字列メッセージのスライスを単に取得する HTML フラグメントになります。

このフラグメントは、メッセージのこのスライスを取得し、それをループして、クライアントに返される HTML リストを作成します (HTMX がハイパーメディア API でどのように動作するかを覚えていますか?

それでは、まずそれを作成しましょう。

Go プロジェクトのルートに、まずテンプレート フォルダーを作成します。このフォルダー内にすべてのテンプレートを保存します。

次に、テンプレートフォルダー内にファイルmessages.htmlを作成し、次のコードをそれに追加します:

リーリー
これはメッセージ テンプレートを定義し、文字列メッセージの受信スライスをループして HTML リストを形成します。

次のテンプレートでは、ファイルアップロードページ自体を作成します。

テンプレートフォルダー内に新しいファイルupload.htmlを作成し、以下のコードを貼り付けます:

リーリー
完璧!

それでは、このファイルのコードを見てみましょう。

まず、upload という名前でテンプレートを定義しました。これは、後でルート ハンドラーで参照するために使用する名前です。

その後、head セクションに定型的な HTML コードがいくつかありますが、ここでは 2 つの重要なライブラリを含めました (まあ、本当に重要なのは 1 つだけで、もう 1 つは CSS の雰囲気のためだけです)。

HTMX ライブラリは