今回は、Alpine JS を使用して API からデータを取得する方法を学習します。以下の API から取得した、イングランド プレミア リーグに所属するサッカー クラブの一覧を表示する Web サイトを作成します。

Alpine JS は、React や Vue などのフレームワークを使用せずに、インタラクティブな Web サイトを作成するために使用できる軽量の Javascript フレームワークです。 Alpine JS を使用すると、JavaScript プロパティを個別に記述することなく、HTML ファイルに直接簡単に適用できます。

index.htmlという名前で HTML ファイルを作成し、次のコードを貼り付けてください。

次に、Tailwind CSS を使用してカード コンポーネントを作成します。

次に、データを取得してカード コンポーネントに表示します。

おめでとうございます! Alpine JS を使用して API を正常に取得し、ユーザーに表示しました。結果は次のとおりです。

以下は作成したコードの説明です。

x-data関数は、JavaScript ロジック データを HTML タグ上で直接実行できるようにします。このコードでは、データ型が配列である Teams という変数を作成します。この変数は、関数で取得した結果からのデータを保持することを目的としています。

x-initは、コンポーネントがロードされる前に初期化を実行することを目的としています。このコードでは、以前に準備した API エンドポイントからデータを取得することを目的としたフェッチ関数を挿入します。そして、ブラウザ ページが表示される前に、Alpine JS がバックグラウンドでフェッチ処理を実行し、フェッチの結果が最初に宣言された Teams 変数に収集されます。

x-forは、チーム変数の反復プロセスを実行し、それをチーム変数に戻すために使用されます。

x-bindは画像を表示し、x-textはデータを HTML 表示に直接出力します。

以上がAlpine JS を使用したデータの取得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。