htmxを触ってみる

## はじめに
表題通り、htmxを触ってみます。html+JavaScriptをhtml内で実現している位の知識がなく、ちょっと触ってみたいなと思い実装してみました。

## 成果物
![htmx.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/c5ee21a8-e18a-6bb5-bbc0-ee3b41ad5b2e.gif)

## htmxのソースコード
```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>htmx with JSONPlaceholder Example</title>
    <script src="https://unpkg.com/htmx.org@1.7.0"></script>
</head>
<body>
    <h1>htmx with JSONPlaceholder Example</h1>
    <button hx-get="https://jsonplaceholder.typicode.com/users" hx-trigger="click" hx-target="#user-list" hx-swap="innerHTML">Load Users</button>
    <ul id="user-list"></ul>

    <!-- Template for rendering users -->
    <template id="user-template">
        <li>
            <strong>Name:</strong> <span class="user-name"></span><br>
            <strong>Email:</strong> <span class="user-email"></span>
        </li>
    </template>

    <script>
        document.addEventListener('htmx:afterOnLoad', (event) => {
            if (event.detail.target.id === 'user-list') {
                const userTemplate = document.getElementById('user-template').content;
                const userList = document.getElementById('user-list');
                const users = JSON.parse(event.detail.xhr.responseText);

                userList.innerHTML = '';
                users.forEach(user => {
                    const userElement = userTemplate.cloneNode(true);
                    userElement.querySelector('.user-name').textContent = user.name;
                    userElement.querySelector('.user-email').textContent = user.email;
                    userList.appendChild(userElement);
                });
            }
        });
    </script>
</body>
</html>
```

:::note info
触ってみた感想としては、ほぼhtmlですね。違いをみていきましょう！！
:::

```html:index.html(html+javascript)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure JavaScript with JSONPlaceholder Example</title>
</head>
<body>
    <h1>Pure JavaScript with JSONPlaceholder Example</h1>
    <button id="load-users">Load Users</button>
    <ul id="user-list"></ul>

    <script>
        document.getElementById('load-users').addEventListener('click', function() {
            fetch('https://jsonplaceholder.typicode.com/users')
                .then(response => response.json())
                .then(users => {
                    const userList = document.getElementById('user-list');
                    userList.innerHTML = '';
                    users.forEach(user => {
                        const userItem = document.createElement('li');
                        userItem.innerHTML = `<strong>Name:</strong> ${user.name}<br><strong>Email:</strong> ${user.email}`;
                        userList.appendChild(userItem);
                    });
                })
                .catch(error => console.error('Error fetching users:', error));
        });
    </script>
</body>
</html>
```

:::note info
確かに、fetchの有無がありますね。うーん、でもまだ恩恵は全然感じない。
というよりも差もよくわからない。もうちょっと、学習をすすめていきたいと思います。
:::