今回は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 表示に直接出力します。