はじめに
Web制作におけるフレームワークというと、ReactやVue.jsなど、エンジニアが効率的に開発を行うために必要なシステムの骨組み、という印象がありますが、Astroは筆者のような、どちらかというとデザイン寄りの制作者でも理解しやすい設計になっており、実体験としてデザインから静的サイトの構築までを一人で完結させるのに有効活用することができました。
もちろん本職エンジニアの方にとっては、高パフォーマンスなWebフレームワークとして最近注目されているAstroを筆者以上に深く理解し、既存の開発プロセスを改善するヒントにも繋がるのではないかと思います。
現代におけるWebサイト構築のアプローチ
一つのWebサイトを構築しようと思ったとき、現代ではさまざまなアプローチが存在します。
単体、もしくは複数のページをHTMLコーディングする方法から、WordPressに代表される各種CMSをカスタムする方法や、画面遷移を意識させないシングルページアプリケーション(SPA)としてビルドする方法、最近ではAIを活用して、ほとんどコードを入力せずにWebコンテンツが構築できてしまうサービスなどもあります。
そのためWeb制作者は、目的に合わせて、最も効率的にWebサイトを構築するための手段を適切に選択する必要があります。
一方で、昨今のモダンブラウザにおける表現力の向上とCSSの進化、フロントエンド界隈における技術トレンドの変化は極めて早く、ライブラリやフレームワーク、開発言語の選定や、それらを含めた開発環境の構築には幅広い専門知識が要求され、デザインも実装も一人で完結させるのは年々難しくなってきています。
開発経験豊富なコーダーやフロントエンドエンジニアの場合、デザインさえあればどのような手段でも制作に着手できるのかもしれません。しかし、デザインが本業で、基礎的なコーディングスキルのみを持つ人の場合、最初の時点で選択肢が限られてしまうこともあります。
たとえば、最初に紹介したアプローチの中で、デザインデータを基にHTMLとCSS、そして少しのJavaScriptを用いて、静的サイトとしてコーディングする方法は、古くからある手法ですが、Webサイトを構築するすべてのアプローチのベースとして誰もが通る道でもあり、ランディングページ(LP)やプロモーションサイトなどに、今も尚多く使われています。
このような静的サイトコーディングは、最新のフレームワークを使った方法に比べて時代遅れなのでしょうか?
技術的な部分だけに着目すれば、答えは「イエス」なのかもしれません。
しかし、Webサイトを訪れるユーザーにとっては、そのサイトがどのように作られているかの過程や方法などは実はどうでもよく、必要な情報がわかりやすい表現で快適に閲覧できるかどうかが重要だと言えます。
顧客が本当に見せたかったもの、ユーザーが本当に見たかったものを正しく届けることができるのであれば、初学者にもベテランにとっても、静的サイトコーディングは安定した手段の一つであるとも言えるでしょう。
ただ、静的サイトコーディングでは、JavaScriptフレームワークでは当たり前のように用いられる、再利用可能なコンポーネント設計が使えなかったり、CSSの影響範囲(スコープ)を常に意識しなければならなかったり、といったジレンマもあります。
初学者でもベテランでも、便利なコンポーネント設計や最適化されたCSSスコープの恩恵を受けつつ、高いパフォーマンスの静的サイトを効率的に作ることができたら理想と言えますが、果たしてそんな夢のような方法はあるのでしょうか?
そこで、筆者はAstroフレームワークを紹介したいと思います。