AHA Stack を試したい(6)
kenpAHA Stack チュートリアル
チュートリアルの中で一番簡単な「A little example」を試してみます。
フロントエンド
---
import fs from 'node:fs'
try {
fs.accessSync('/tmp/count.txt')
} catch {
fs.writeFileSync('/tmp/count.txt', '0')
}
const count = fs.readFileSync('/tmp/count.txt', 'utf-8')
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
<meta name='generator' content='{Astro.generator}' />
<title>Astro</title>
<script src="https://unpkg.com/htmx.org@1"></script>
</head>
<body>
<h1>
Count: <span id='count'>{count}</span>
</h1>
<button hx-post='/api/increment' hx-target='#count'>
Increment
</button>
<button hx-post='/api/decrement' hx-target='#count'>
Decrement
</button>
</body>
</html>UIをコンポーネントとして作成しています。
コード上部の---で囲まれた箇所はAstroの機能で、JavaScriptまたはTypeScriptを記述する部分です。
count.txtにカウント情報を書き込み、それを読み込むことで初期表示を行っています。
ファイルがない場合は作成し、0を書き込んでいます。
ここで一つ注意点？がありました。/ が c:\ となっていたことです。
プロジェクトに対してtmpフォルダを作ったところエラーとなりました。
仕方なく、Cドライブ直下にtmpフォルダを作っています。
html部分の大事なところは、当たり前ですが、htmxのライブラリ読み込みです。
そして、Button に対してhtmxによる記述をしています。
バックエンド
---
import fs from 'node:fs'
export const partial = true
const count = +fs.readFileSync('/tmp/count.txt', 'utf-8').trim() + 1
fs.writeFileSync('/tmp/count.txt', count.toString())
---
{count}---
import fs from 'node:fs'
export const partial = true
const count = +fs.readFileSync('/tmp/count.txt', 'utf-8').trim() - 1
fs.writeFileSync('/tmp/count.txt', count.toString())
---
{count}カウントを増やす、減らす用のAPIを用意しています。
ブラウザでアクセス
出来上がったものは、「Increment」クリックでCountが１ずつ増え、「Decrement」クリックで１ずつ減ります。
簡単なチュートリアルということもあり、Astro と Htmx の利用であって、Alpine.jsが利用されていませんでした。
次はAlpine.jsを含めたものを試します。
＼ 最新情報をチェック ／
