AHA Stack を試したい(9) Alpine.js編
前回に続いて、Alpine.js について試していきます。 今回のチュートリアルは少し複雑になっています。 完成形としては、入力欄に入力した文字列により下部の要素がフィルタリングされて表示される、というものです。 まずは […]
AHA Stack を試したい(8) Alpine.js編
前回のAlpine.jsのコードを元に、要素の範囲外をクリックした時にも非表示にするコードを試しました。 追加したのはpタグに 「@click.outside="expanded = false"」を追加したことです。 […]
AHA Stack を試したい(7)
Alpine.jsのサンプルコードと組み合わせてみます。 以前試した、コンテンツの表示・非表示を切り替えるコードの中に、Increment, Decrementを入れてみます。 ブラウザで確認。 「Toggle Cont […]
AHA Stack を試したい(6)
AHA Stack チュートリアル チュートリアルの中で一番簡単な「A little example」を試してみます。 フロントエンド UIをコンポーネントとして作成しています。 コード上部の---で囲まれた箇所はAst […]
AHA Stack を試したい(5) Alpine.js編
Alpine.jsについて AlpineJSはAstroに簡単に統合出来る模様 ということでインストール 設定ファイルも書き換えてくれました 次に、AlpineJSを使ったデモ画面の作成。 例によって、チュートリアルのコ […]
AHA Stack を試したい(4) HTMX編
HTMXについて astroを動かしてみましたので、次はHTMXを試してみようと思います。 astroのチュートリアルにHTMXもあったのでそのまま試します。 まず、画面作成 「Click Me!」ボタンをクリックした際 […]
AHA Stack を試したい(3) Astro編
前回の続きから。 index.astro ファイルを編集してみます。 前回はcomponentとして Mypage.astro を作りましたが、エラーでうまく表示出来ませんでした。 今回は2行目の import分を見直し […]
AHA Stack を試したい(2) Astro編
とりあえず、Astro から 環境について まずはインストール いろいろ設定してからの起動 からのアクセス とりあえずページにアクセス出来ました。 これからページをいじっていこうと思います。 公式ページのチュートリアルの […]
AHA Stackを試したい
AHA Stackなるものを見かけました。 Astro とAlpine.jsについて興味があったので目に入りました。 2年前（2024年初めぐらい）ぐらいに何名かサンプルを試して記事を書いていますが、その後あまり利用され […]