JavascriptのフレームワークAstroで作る勤怠管理webアプリ【Astro概要編】【毎週Qiita】

JavascriptのフレームワークとしてはNext.jsなんかが人気で、私も学習はしているのですが、Astroってなんで流行らないん？という思いもありつつ、なんとかちょっとでも使えそうなものをデプロイできたらなぁなんて思いまして、勤怠管理のwebアプリを作ってみることにしました。
そのためにまずはAstroについての学習をまとめます。

Astroについて

https://astro.build/blog/astro-5/
2024年12月3日にversion5がリリースされているので、デフォルトでの構築はv5になるみたい。
astroの良いところは、その他いろんなライブラリ、フレームワークと互換性を有しながら共存させることが可能な点だと思います。あとはSSGで静的webサイトを構築するのに表示速度が速いという点も。
互換性を有するという点については、あるページはReactで、別のページはVueで書くっていうこともできるし、一つのページの中でReactとVueとほにゃららを共存させていけるということになります。
一つの言語やライブラリ特化型のエンジニアさんには旨み少ないのかもですが、この機能はVueの方が作りやすいけど、こっちの機能はReactの方が構築シンプルだよなって場面なんかもあると思うので、結構いいと思ってます。

SSGについてはSSRと何が違うんだってところから思考を整理していきたいと思います。

SSGとSSR

Static Site GeneratorとServer side renderingがそれぞれの言葉になるわけですが、HTMLやJavascriptといったコンテンツをどのタイミングで読み込むかというのが違いになります。

1. ページをビルドする時
2. ページのリクエストが送信されサーバーで情報を構築する時
3. 送ったリクエストに対してレスポンスがあってブラウザで表示される時

Astroで行うようなSSGは1のパターンになりますね。SSRでの実行が2の状態、普段よく見るようなwebサイトやLPとかでは3の状態という情報の処理になります。
先に情報を用意しておくのか、必要そうになるから用意しておくのか、くれと言われたから情報を用意するのか、みたいな状態です。
先に用意しておいた方が早いけど、webアプリとしての規模が大きくなると先に用意する量が増えるので大変だよねっていうのがメリットとデメリットになります。

Astroはどっちも対応しているけど

SSGとSSRでは情報の処理するタイミングが異なるので、Javascriptの読み込み順序が変わってきますからどこに書くかが重要になってきます。
ここで特徴的なのがコードフェンスという構成です。

Astroにおけるコードフェンス

Astroでは---のコードをフェンスのように開始行・終了行に立てることで、その間にライブラリのインポートやブラウザリクエスト前に実行されるスクリプトを記載することができます。
ここで記載されたコードは本文中に利用することも可能で

コードフェンス内の変数をそのまま利用する場合

---
const data:string = "hoge"
---
<h2>コードフェンス内の文字列変数を取得するには&lcub;data&rcub;の形式で書く</h2>
<div>{data}</div>

この実行結果が以下となります。

コードフェンス内の配列をそのまま取得、一つずつ取得する場合

---
const array:string[] = ["sample1", "sample2", "sample3"];
---
<div class="mb-10">
    <h2>コードフェンス内の配列を取得する時同じ</h2>
    <div>{array}</div>
</div>

<div class="mb-10">
    <h2>コードフェンス内の配列を一つずつ取得するには</h2>
    {array.map((item) => (
        <div>{item}</div>
    ))}
</div>

この時の結果は以下となります。

クライアントサイドで書いたスクリプトタグに、コードフェンスの変数を入れるには

---
const {message = "これはコードフェンス内の値です"} = Astro.props;
---
<div>ここにscriptタグの中身を表示させるには</div>
<astro-greet data-message = {message}>
    <button class="alert">Click me!</button>
</astro-Greet>
<script>
    class AstroProps extends HTMLElement{
        constructor(){
            super();

            const inMessage = this.dataset.message
            const buttons = this.querySelectorAll('button.alert');
            buttons.forEach((button) => {
                button.addEventListener('click', () => {
                alert(inMessage);
                });
            });
        }
    }

    customElements.define('astro-greet', AstroProps)
</script>

実行結果

この時だけ、オリジナルのHTMLタグを用意し、scriptタグ内でクラスを作成→カスタムのHTML要素を定義した上でクラス継承してイベント作成
という流れになってます。

Astroは自前でDBも揃っている

ちまたじゃFirebaseとかSupabaseとか流行りはあるかと思いますが、AstroでもDBがリリースされていて無料で使うことができるので、こっちでやるのもお勧めです。

さてこんなAstroを使って勤怠管理アプリを作ってみたいなーという思いがあり、やってみようと思います。
その辺の構成・アウトプットは別の記事で。