はじめに
最近ずっと気になっていたAstroをようやく学べたため、アウトプット目的で早速何か作ってみたいと思い、ブログサイト “A Web Odyssey” を実装しました。ひとまず「完成」はさせたため、この記事では、
- ・Astroとは？
- ・なぜ、Astroが気になったのか？
- ・Astroについて今の段階で学んだこと
- ・なぜ、「ブログサイト」なのか？
- ・このサイトを実装するにあたって苦戦したこと
以上の構成で、アウトプットしていきます。
Astroとは？
Astroはコンテンツ中心のWebサイト構築に特化したフレームワークで、静的サイトジェネレーターの1つです。
また、AstroはSPAではなくMPAを採用しており、クライアント側の負荷軽減、初期レンダリングの高速化を実現しています。
MPAは本来、各ページ間の遷移に時間がかかりますが、Astroはアイランドアーキテクチャを採用することで、必要な部分だけをインタラクティブにし、ページ遷移時に時間がかかる問題を部分的に暖和することでページ遷移を高速化できます。
なぜ、Astroが気になったのか？
ブログサイトやポートフォリオサイト（コンテンツにフォーカスしたWebサイト）に適したフレームワークを探していたところ、コンテンツ中心のWebサイト構築に特化しているAstroを見つけました。
ポートフォリオサイトに関しては、Next.jsで実装したこともあり、ブログサイトをAstroで実装してみたいと思いました。
Astroについて今の段階で学んだこと
アイランドアーキテクチャ
Webページ内の静的コンテンツを「海」とし、動的コンテンツを「島（アイランド）」として分ける設計手法のことを、アイランドアーキテクチャといいます。
アイランドとは「ページ上のインタラクティブなUIコンポーネント」を指します。
アイランドのメリット
各アイランドは常に独立して動作します。そのため、各アイランドごとに適したフレームワークを選定できるため、1つのページで複数のフレームワークを混在させることができます。
また、各アイランドは並列ロードなので独立してハイドレーションされます。これにより、重たいアイランドにブロックされずに軽いアイランドからインタラクティブになることができます。さらに、各アイランドは状態の共有と通信が可能です。
インテグレーション
Astroインテグレーションとは、Astroプロジェクトに追加機能や他のツールとの連携を簡単に組み込むための仕組みのことです。
Astroは「React」「Preact」「Svelte」「Vue」「SolidJS」「AlpineJS」「Lit」のインテグレーションをオプションとして提供しています。1つまたは複数のAstroインテグレーションをプロジェクトにインストールし、設定できます。
インテグレーションとアイランドアーキテクチャは密接に関係してる
インテグレーションにより追加されたフレームワークを使って、開発者は動的なアイランドを作成できます。
例えば、Reactインテグレーションを使用して、静的なAstroページの中にReactコンポーネントをアイランド（動的なUIコンポーネント）として埋め込むことができます。
サーバーファースト
Astroは、ブラウザ上のクライアントサイドのレンダリングよりも、サーバーでのレンダリング（SSG, SSR）を可能な限り活用します。
レンダリングモード
Astroのページ、ルート、APIエンドポイントは、ビルド時に事前レンダリング（SSG）することも、ルートがリクエストされたときにサーバーでオンデマンドにレンダリング（SSR）することもできます。Astroアイランドにより必要に応じてクライアントサイドレンダリング（CSR）も含められます。
デフォルトでゼロJS
Astroは、デフォルトでJavaScriptを送信せず、静的コンテンツ（HTML, CSS）のみを生成します。
アイランドアーキテクチャにより、必要な部分のみを読み込むように指定することができるので、読み込み時間の短縮、初回ロードの高速化、全体のパフォーマンス向上を実現できます。
コンテンツコレクション
コンテンツコレクションとは、Astroプロジェクトでコンテンツを管理、整理するための優れた方法のことです。
Markdownコンテンツを整理、検証し、TypeScriptの型安全性を提供してくれます。
プロジェクトディレクトリ
コレクションエントリー
コンテンツコレクションディレクトリ内に保存されたコンテンツのことを、コレクションエントリーといいます。例えば、
コレクションエントリーは、Markdown（.md）やMDX （.mdx MDXインテグレーションを使用）や、YAML（.yaml）やJSON（.json）などを使用できます。
Astro 5.0 β（ベータ）版
9月18日にAstro 5.0 β（ベータ）版がリリースされました。「Astro 5.0 β版がリリース！新たに導入された新機能とは？」という記事も書いてますので、よろしければご覧ください。
なぜ、「ブログサイト」なのか？
結論から言ってしまうと「自己成長」のためです。
自己成長のため、学習したことをアウトプットできる場所を作りたいと思い、ブログサイトを作りました。
単純にアウトプット目的で記事を書きたいだけであれば、ZennやQiitaなどの情報共有サイトで投稿すれば十分ですし、むしろそういったサービスはフォーマットが整っているので、有効活用するべきだと思います。
しかし、私は以下のいくつかの理由から個人開発でブログサイトを作って、そこでアウトプットしたいと考えていました。
ブログサイトの実装に至ったいくつかの理由
- ・サイトの実装には新しい技術を学びながら取り組むことになるので、強制的なアウトプットが実現できる
- ・サイトの完成後もブラッシュアップ（記事の投稿、デザインの修正、機能追加、パフォーマンス改善 etc…）をしていくことになるので、技術面の成長に繋がる
- ・「サイトのデザイン」「機能」「UI / UX」「SEO対策」「CSS設計」… などなど、上げたらキリがないが全てを自分で試行錯誤しながらサイトの運用ができる
このような理由から、学んだことをアウトプットする場所としてブログサイトを選びました。
サイト名の「“A Web Odyssey”」とは？
サイト名は「2001年宇宙の旅」がコンセプトになっています。
「2001年宇宙の旅」は、1968年に公開されたアメリカのSF映画で、人類の進化と宇宙探査をテーマにした壮大な旅の物語を描いています。
私は、この映画からインスピレーションを受け、サイト名「“A Web Odyssey”」を思いつき、デザインや配色もこの映画が着想源になっています。
「“A Web Odyssey”」に込められた思い。
ブログサイトを運営していく上で大切にしたいコンセプトは「自己成長」です。「2001年宇宙の旅」からのインスパイアで「壮大な旅」をこのサイトのテーマとし、Webエンジニアとしてクリエイターとして成長していく過程を「壮大な旅」として表現していきたいです。サブタイトルの「Webエンジニアの旅」にも、こういった思いが込められています。
このサイトを実装するにあたって苦戦したこと
1. サイトデザインの考案
デザインの技術や知識に関してはプログラミングに比べるとかなり乏しいので、ギャラリーサイトから色々なサイトを参考にさせていただき、このサイトのデザインを考えました。
参考にしたギャラリーサイトは以下です。
オススメのWebギャラリーサイトをまとめているサイトも参考になったので、よろしければこちらもご覧ください。
また、配色に関してはColor Huntを参考にしました。
2. Astroの使用
Astroは2022年8月にv1.0がリリースされた比較的新しいフレームワークです。
他のフロントエンド関連技術に比べると、Astroは技術記事が充実していません。そのため、実装にあたっては主に公式ドキュメントを精読しながら進める必要がありました。公式ドキュメントの精読はとっつきにくく骨が折れる作業ですが、正確な情報を得ながら、フレームワークの設計思想、細かい仕様まで深く理解できるという点で、改めて重要な作業だなと感じました。
また、実装中に直面したバグの修正や不明点の解決には、Claude 3.5 Sonnetを活用しました。AIからのアドバイスを得る際は、単に回答を鵜呑みにするのではなく、それを起点として公式ドキュメントを精査し、理解を深めた上でプロジェクトに反映させるよう心がけました。
3. ブログカードの実装
以下のようなブログカードを実装するにあたり、参考元の外部サイトのogpを取得して、ブログカードに反映させる設定で苦戦しました。
※実装手順についてはここでは省き、また別の記事で書こうと思います。
実装したブログカードUI
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
astro.build
正直、何回か挫けました笑。ですが、「あきらめねェ ど根性だ」というナルトマインドで、この壁を乗り越え、また1つ自身に繋がり、成長できました。
色々理由を並べて諦めることは簡単ですが、「諦めない」とか「根性」とか「やり続ける」とか「頑張る」とか「努力」みたいな泥臭いのが、結局はいつも自分を成長させてくれます、、、笑
何かを達成するまでのプロセスはキツかったりしますが、達成した時はそのプロセスで得たもの学んだものが自分を更に成長させてくれます。「諦めない」って単純だけど、「諦める」より簡単じゃないし、本当に大切なマインドだと思います。
さいごに
ブログサイトなので、「コメント機能」「ソート機能」「いいね機能」「シェア機能」「お問い合わせフォーム」などの機能追加をして、ブラッシュアップさせていきたいと考えています。
また、このサイトに限らずAstroを使用した新しい作品、Astroだけでなく新しい技術を学んだタイミングで、その技術を取り入れた新たなモノづくりにも挑戦していきたいです。
私のビジョンは「モノづくりと生きてゆく。」です。クリエイターとしてクライアントに寄り添える存在になるため、モノづくりで1人でも多くの人に感動を与えるために、日々学び、挑戦し続け、クリエイターとして成長していきます。
参考記事
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
astro.build