NEW ARTICLE
kotlin 正規表現を使用して文字列が部分一致で含まれているかを判定する
  1. HOME
  2. Alpine.js
  3. Alpine.jsでx-initとfetchを使ってjsonデータを取得する

Alpine.jsでx-initとfetchを使ってjsonデータを取得する

Alpine.jsでx-initとfetchを使ってjsonデータを取得する

JavaScriptフレームワークの1つであるAlpine.jsを導入して、x-initとfetchを使ってjsonデータを取得するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105
  • Alpine.js 2.7.3
windows10にApacheのインストール

Alpine.js導入

CDNから読み込んで利用します。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

jsonデータ取得

「x-init」ディレクティブとfetchを使用して、JSONデータを取得して表示するサンプルコードとなります。
CSSにtailwindを使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body class="sans-serif bg-gray-200">

    <div class="container mx-auto px-4" x-data="{ punchline:'' }" x-init="
                fetch('https://official-joke-api.appspot.com/random_joke')
                    .then(response => response.json())
                    .then(data => punchline = data.punchline)
            ">
        <p class="flex items-center text-center justify-center h-screen text-2xl" x-text='`${punchline}`'></p>
    </div>
</body>

</html>

実行結果をみると、取得したJSONデータが表示されていることが確認できます。