astroであえてレガシーなサイトを作った
昨今のウェブサイト/ウェブサービスは高度化・複雑化が進みました。
個人サイトはほぼ壊滅し、SNSがその代替えになっているとおもいきや、雑多なタイムラインに自分の作品が流れていくのがさみしい... やっぱり自分のWebサイトが欲しい！ そんな人が増えて、また個人サイト乱立...とまでは言わなくとも、自分のサイトを持ちたい！
―――というニーズの流れが来ていると思いませんか？！そんなことないか...
ホームページ作りたい！
私はそう思いました。なので作ろうと考えました。
事前調査
時代は令和。もうメモ帳でコードを書いてブラウザの更新ボタンを連打するのは旧時代的すぎです。忍者ツールズのサービス減ってて悲しくなった...
令和に適したやり方を模索するべきだ、ということでまずは昨今のWebページってどうやって作るんだという所から調べました。
現代のWeb開発事情について
エンジニアの皆さん横文字使いすぎ問題。
はじめてHTMLを書いた10年前から現在までWebなんて触れてこなかったものですから、もはやみんなが何を言ってるのかさっぱりわからなかった...
ので、ざっくりですが調べてまいりました。
フレームワークとは
枠組みのことです。HTML書くのに枠組みなんてあるっけ？と思われることかもしれませんが、Web制作にもフレームワークは従来から存在していました。
古いものだと ホームページビルダー(1994~)とかWordpress(2003~)みたいなものがあります。今回紹介しようとしているastro(2022~)も、Web制作フレームワークの一つです。
昨今流行りのWebフレームワークとして、少なくとも執筆現在、Web業界外の人間から見るとVue.jsやReactが流行っているといった印象を受けています。
あの辺は何なのでしょうか？
SPAについて
SPA = Single Page Application。
文字通りで、一つのページ上で動作するWebアプリケーションを指します。イメージとしてはTwitter(元X)、Instaglam、だいたい現代に存在するWebアプリたるものはSPAです。
一つのページ上で動作するってどないこっちゃというと、艦これあたりのブラウザゲームをイメージしていただければわかりやすいかもしれません。
ユーザの操作によってアプリケーションが必要な部分だけを更新することで、早いレスポンスを得られる、スムーズな動作を期待できる、それがユーザー体験を向上させる...
Twitterのタイムラインを読み込むために更新ボタンを押すことはないでしょう。Discordでもメッセージが届けば即座に画面に反映されますし、絵チャのキャンバスに線を引けば即座に線が描画されます。これがSPA。
バックエンドとしてJavaScriptがクライアントで動いています。動的なコンテンツとかいう言い方をしたりします。
そしてVue.jsやReactはSPA開発に長けたフレームワークです。SPAが流行っているからこれらが流行っているという感じです。
MPAについて
MPA = Multi Page Application。
こちらも文字通りで、複数のページを使って動作するWebアプリケーションを指します。イメージとしてはAmazonに始まる各種ECサイト、古いものだとFF Adventureあたりが該当します。
アプリケーションと称されていて大それた感じがしますが、広い意味では従来の（レガシーな）Webページなどはこちらに分類されます。
複数のページを使って動作するというのは、Webアプリケーションのコンポーネント(部品)が、ページ単位で分けられていて、それらを総合して一つのサービスだと言い張るイメージです。
古の個人サイトだって、「入口」があって「画廊」があって「掲示板」があって、それらを全てひっくるめて「あなたのサイト」だったはずです。
一点注意すべきは、MPAはSPAを含んで構成されることがあります。○○ファンクラブサイトには「チャットルーム」などが設置されていませんでしたか？その部分だけで言えば「チャットルーム」はSPAです。
こちらはバックエンドはまちまちです。不要（HTMLべた書き）だったり、ホームページビルダーやWordpressを使って作成したりします。
機器選定へ
個人サイトを作りたい！というのがもともとの目的だったため、今流行りのSPAよりはMPAを採用した方がよさそうです。
令和なのでHTMLベタ打ち部は嫌だ！フレームワーク使いたい！ ということで、MPAなフレームワークを探したところ、astroと出会いました。
astroって何よ
2022年ごろに発足し、これから話題になる（はず）の大変ホットなMPA-Webアプリケーション作成フレームワークです。
どうしてastro？
astroを選ぶ理由については、astro公式が素晴らしい説明を用意してくれています。
私目線では低い学習コストで(トレンドの)コンポーネント化・仮想DOMを体験できることが一番目立つメリットだと思いました。
学習コストが低い？
astroは基本的にHTMLの構文をそのまま使います。HTMLと違うところは、HTMLを動的に作成するためのコードスペースが存在する所ぐらいです。
---
const pageTitle="This is my site"
---
<html lang="ja">
<head>
<title>{pageTitle}</title>
</head>
<body>
Hello World!
</body>
</html>
以下の部分がコードスペースです。
---
const pageTitle="This is my site"
---
---で囲まれた部分にはJavascriptやTypescriptを使ってコードを書くことができます。
もちろん書かなくてもよいです。
つまり、HTMLさえ出来れば基本的にすべてが解決します。あとCSS。
ついでにJavascriptやTypescriptの体験学習だってできちまうんだ。
コンポーネント化？
astroではHTML部分を使いまわしてパーツのように扱い、コード部分でコンテンツの制御をすることができます。 従来のiframeのように、別々のページの寄せ集めではなく、あくまでパーツを統合して一つのWebサイトのように見せることが可能というわけです。これが令和ってこと...
この、Webページを構成するパーツを別々のオブジェクトとして扱う概念をコンポーネント化とかいいます。そしてこの概念が便利だ！ということでよく使われるのがVue.jsだったりReactだったりするということ。
ReactやVue.jsとの違いは、このコンポーネント化がHTMLさえわかれば基本的に使えちゃうということ。
つまり、HTML+αの学習量で流行りの概念を取り扱ってWeb制作ができる。レガシーさを保ちつつ最新トレンドを追っかけられるということ！
もちろんastroにはもっと様々なメリットがあります（開発環境にSSRが採用されていてデバッグが簡単だったり、Javascriptを全て取り除くことで高速なサイトを作れたり...）が、そちらは公式サイトの受け売りがありますので割愛します。
開発環境がSSR？なんだって？
Reactもそうなのですが、最近のフレームワークは仮想DOMを用いていて、ソースコードをいじるだけで勝手にサーバ側がクライアントにリフレッシュリクエストを送信してくれます。
これが非常に楽。
要は、HTML(astro)ファイルを更新するだけでプレビューがすぐ表示されます。
従来のWeb開発のように更新ボタンを押すためにいったんエディタを離れなければいけない...とか、キャッシュが残ってるせいで正しく表示されないからキャッシュを消しに行かなきゃいけない...とか、そういう開発の部分でも楽が出来ます。
楽であることに越したことはない、でしょう？
成果物が見たい
別名で活動をしておりまして、なんだか急にWebページを持ってみたくなったので作りました。
ソースコードも公開してます。チュートリアルが大いに役立っています。
（名義が違うためgithubアカウントは別です）
あとがき
astroはもっと流行っていいと思います、むしろこれから流行っていくんじゃないかなって。
ReactとかVueのコンポーネントを読み込んだりもできて汎用性も高いみたいですし。
地味にドキュメントもしっかりしてます。とりあえずなぞれば個人サイトレベルの物ならすぐ作れるようになります（なりました）。
あとは私やみなさんががどんどん使いつぶしていって、インターネットに知見を増やしていけば覇権間違いなし！astro、おすすめです。
参考
Discussion