サイト構築でAstroを選んだ理由：ベンダーロックインを避ける静的サイト生成の選択

by

なぜサイト構築の方法で悩んだのか

3ページ程度のランディングページサイト（仮にサンプル歯科とします）を作る必要がありました。トップページ、医院概要、お問い合わせという、よくある構成です。

しかし、選択肢を検討すると、どれも一長一短でした。WordPressは高機能ですが、3ページのサイトには大げさすぎます。Wixのようなサービスは簡単ですが、企業のサービスに依存することになります。手打ちでHTMLを書くのは確実ですが、保守性に不安があります。

何か良い方法はないのでしょうか。

技術選択で重視したい価値観

まず、何を重視するかを整理しました。

  • 最も重要なのは、特定の企業のサービスに依存しないことです。
    これを「ベンダーロックイン」といいます1。例えば、Wixでサイトを作ると、Wixが料金を値上げしたり、サービスを終了したりした場合、他のサービスへの移行が困難になります。これは長期的なリスクです。
  • 次に、保守性と拡張性を重視しました。
    将来的にページを追加したり、デザインを変更したりする際に、簡単に対応できる仕組みが必要です。
  • 学習コストも考慮しました。
    新しい技術を学ぶ時間と、得られる価値のバランスが重要です。

Astroとの出会い

そんな中で出会ったのが「Astro」でした。

最初、Astroは「モダンなCMS（コンテンツ管理システム）」だと思っていました。
しかし、調べてみるとCMSとは違い、静的サイトジェネレーター（Static Site Generator）でした2。これは、事前にHTMLファイルを生成して、それをサーバーに配置する仕組みです。WordPressのように、訪問者がアクセスするたびにページを動的に生成するのではありません。

Web開発ツールの歴史と課題

Web開発ツールの歴史を振り返ると、同じ課題に対するアプローチの違いが見えてきます。

  • 技術者向けのツールは、手打ちHTML→PHP→静的サイトジェネレーターという流れで進化しました。
  • 一方、非技術者向けのツールは、FrontPage→WordPress→Wixという流れです。NotionのようなツールでWeb公開できるようになったのも、この延長線上にあります。

これらのツールが解決しようとしている共通の課題があります。それは、HTMLの冗長性です。例えば、3ページのサイトでヘッダーやフッターが同じ場合、従来のHTMLでは同じコードを3回書く必要があります。電話番号を変更する際は、3つのファイルすべてを修正しなければなりません。

プログラミングの世界では、これを「DRY原則」（Don’t Repeat Yourself：同じことを繰り返すな）の違反といいます3。この問題を解決するのが、現代のWeb開発ツールの共通目標です。

興味深いことに、これはC言語のプリプロセッサが解決していた問題と本質的に同じです4。共通部分を一箇所にまとめて、必要な場所で再利用する仕組みです。

なぜWordPressやWixではダメだったのか

WordPressには多くの利点があります。慣れ親しんだ管理画面、豊富な機能、大きなコミュニティです。しかし、3ページのサイトには過剰です。セキュリティ対策、定期的なアップデート、プラグインの管理など、運用負荷が重すぎます。また、表示速度の面でも、静的サイトには劣ります。

Wixのようなサービスも魅力的です。簡単で美しく、機能も豊富です。ただし、企業のサービスに完全に依存することになります。料金体系の変更、サービス終了のリスク、データの移行困難さなど、長期的な懸念があります。ベンダーロックインを避けたい場合には適しません。

Astroが解決してくれること

Astroは、これらの問題を別のアプローチで解決します。

  • まず、DRY原則に基づいたコンポーネント化ができます。ヘッダーやフッターを一度定義すれば、すべてのページで再利用できます。電話番号の変更も一箇所で済みます。
  • 生成される静的サイトは非常に高速です。サーバーでの処理が不要なため、表示速度でWordPressを上回ります。
  • フレームワーク非依存も特徴です。ReactやVueなどの既存知識を活かしつつ、Astro独自の記法も使えます。SEO対策も自動化されています。適切なメタタグやサイトマップが自動生成されます。

CMS組み合わせという誘惑と落とし穴

Astroを調べていると、他のCMSと組み合わせる方法もよく紹介されています。Ghost + Astro、Strapi + Astroなどの構成です。

理論的には魅力的です。CMSで記事を管理し、Astroで高速な静的サイトを生成する。両方の利点を活かせそうです。しかし、実際に検討すると複雑になりすぎることが分かりました。

まず、サーバー環境の問題があります。一般的な共有レンタルサーバーでは、Node.jsアプリケーションの常時稼働は困難です。VPS（Virtual Private Server）が必要になり5、運用負荷とコストが増加します。

次に、システム全体の複雑さです。CMS、データベース、API、ビルドシステム、デプロイメントなど、管理すべき要素が多すぎます。3ページのサイトには本末転倒です。シンプルさというAstroの価値を損なってしまいます。

Vercel依存という新たな落とし穴

当初は、Vercelというホスティングサービスに魅力を感じていました。GitHubにコードをプッシュするだけで、自動的にビルドとデプロイが完了します。CDN（Content Delivery Network）により世界中で高速配信されます6。開発体験は素晴らしいものです。

しかし、ここで重要な矛盾に気づきました。

Astroを選んだ理由は、ベンダーロックインを避けることでした。それなのに、Vercelに依存するのは本末転倒な気がしてきたのてす。Astroのコードは標準的な技術で書かれており、理論的には他のサービスへの移行も可能ですが、実際にはVercel固有の設定や機能を使うことになります。完全な独立性は失われます。

ベンダーロックインを許容するなら、最初からWixなどで十分だったはずで、便利さと自由度のトレードオフを、改めて考え直す必要がありました。

最終的な構成の決定

最終的に選択した構成は以下の通りです。

  • 開発環境はAstro + VS Codeです。
    コンテンツ管理はマークダウンファイルとJSONファイルで行います。
    バージョン管理にはGitを使用します。
  • ホスティングには、既存のレンタルサーバー（ミックスホスト）を使用します。
    デプロイは、ターミナルからrsyncコマンドで行います。

この構成により、完全な技術的独立性を実現できます。

なぜこの構成を選んだのか。

  • 第一に、ベンダーロックインを完全に回避できます。Astroはオープンソースであり、生成されるHTMLは標準的な技術です。どこのサーバーでもホスティングできます。
  • 第二に、既存資産を活用できます。すでに契約しているレンタルサーバーを使うため、追加コストはありません。
  • 第三に、システム全体がシンプルで理解しやすいことです。複雑な依存関係やサービス間連携がありません。
  • 第四に、長期的な持続可能性があります。10年後でも、同じ方法でサイトを運用できるでしょう。

学習コストと得られる価値のバランスも良好です。Astroの学習により、モダンなWeb開発の知識が身につきます。この知識は他のプロジェクトでも活用できます。

実際の開発・運用体験

実際に使ってみると開発体験は快適です。VS CodeでAstroファイルを編集すると、適切なシンタックスハイライトとコード補完が効きます。マークダウンでコンテンツを書くのは、HTMLより楽です。Gitでバージョン管理できるため、変更履歴も明確です。ファイル構造も分かりやすく、保守性に優れています。どこに何があるか一目で分かります。

ローカル開発サーバーでリアルタイムプレビューを確認しながら作業できます。デプロイ体験も想像以上に簡単でした。ターミナルから一つのコマンドを実行するだけで、GUI FTPソフトより確実で高速です。

<code>npm run build && rsync -avz --delete dist/ server:/public_html/</code>Code language: HTML, XML (xml)

ブログなど頻繁更新サイトでも有効

静的サイトジェネレーターと聞くと、更新頻度の低いサイトにしか向かないと思われがちです。しかし、実際にはブログのような頻繁更新サイトでも有効です。

記事をマークダウンファイルで作成し、Gitにコミットすれば、数分後にはサイトに反映されます。WordPressのような管理画面はありませんが、VS Codeでの執筆は慣れると快適です。実際に、多くの企業がAstroでブログを運営しています。Firebase Blog、Trivago Tech Blogなどが有名です。

どんな場面でAstroを選ぶべきか

Astroが適している用途をまとめます。

  • 小規模から中規模のコンテンツサイトに最適です。
    企業の情報サイト、個人のポートフォリオ、技術文書サイトなどです。ブログも、想像以上に適しています。
  • 一方、適していない用途もあります。
    高度にインタラクティブなWebアプリケーション、複雑な状態管理が必要なサイト、チーム開発で非技術者が多い場合、既存WordPressサイトの単純な置き換えなどは、別の選択肢を検討すべきです。

まとめ

今回のサイト構築では、Astro + 自前サーバーという構成を選択しました。この選択により、ベンダーロックインを回避しつつ、モダンな開発体験と高速なサイトを実現できました。技術選択において、本質的な価値観の明確化と長期的視点の重要性を再認識する機会となりました。

  1. ベンダーロックインとは、特定の企業の製品やサービスに依存しすぎて、他社への乗り換えが困難になる状況を指します。IT業界では特に重要な概念として認識されています。 – ベンダーロックインとは何か？回避方法も含めて解説
  2. 静的サイトジェネレーターは、事前にHTMLファイルを生成するツールです。動的サイトと異なり、サーバーでの処理が不要なため高速に動作します。代表的なものにGatsby、Next.js、Hugoなどがあります。 – 静的サイトジェネレーターとは？仕組みとメリットを解説
  3. DRY原則はソフトウェア開発における基本原則の一つで、同じコードや情報を重複させないことを推奨します。保守性と可読性の向上に寄与します。 – DRY原則とは？プログラミングの基本概念を解説
  4. C言語のプリプロセッサは、コンパイル前にソースコードを処理するツールです。#defineや#includeにより、コードの再利用と抽象化を実現します。現代のWebフレームワークのコンポーネント化と類似した概念です。 – C言語プリプロセッサの基本と活用方法
  5. VPSは仮想専用サーバーのことで、物理サーバーを仮想化技術で分割して提供するサービスです。共有レンタルサーバーより自由度が高い反面、サーバー管理の知識が必要になります。 – VPSとは？レンタルサーバーとの違いと選び方
  6. CDNは、世界各地に配置されたサーバーからコンテンツを配信するネットワークです。ユーザーに最も近いサーバーからデータを送信することで、読み込み速度を大幅に向上させます。 – CDNとは？仕組みとメリットを初心者向けに解説