このホームページに込めた思い — Astro v6 という、まだ日本で知られていないフレームワークと歩む

📅 2026/4/18 ⏱ 7分で読めます ホームページエッセイAstroAstrov6 +2

なぜ私は、自分のホームページを作ったのか

SNS は便利です。X で短い言葉を投げられるし、Wantedly で経歴を出せるし、Qiita に技術記事を書けば誰かが読んでくれます。

それでも、自分のホームページを作りました。

理由はシンプルで、自分の言葉と、自分の作品と、自分の考えを、一つの場所に置きたい と思ったからです。プラットフォームの仕様が変わっても、サービスが終了しても、ここに積み上げた言葉は私のままで残ります。そして、そのすべての管理権を自分が持っていることに、静かな安心があります。

「発信」ではなく「残す」という感覚

ホームページを作っていると、よく「発信」という言葉が出てきます。でも、私がやっていることは、それよりもう少し静かです。

「残す」という感覚が一番近い。

毎日ブログを書き、技術の実験を記事にし、読んだ本の感想を言葉にする。それは誰かに届けるためというより、数年後の自分に対して「このとき私はこう考えていた」を手渡すために書いています。

もちろん読んでもらえたら嬉しい。けれど一義的には、自分のためのアーカイブです。ユメハシのアプリが「夢を書き出して残す」ツールであるように、このホームページも「思考を書き出して残す」ツールなのです。

「会いに行ける私」でありたい

私初めての人と出会う時、一番大切にしているのは 「事前に相手を知ってもらえること」 です。

LinkedIn や Wantedly の経歴は素晴らしい仕組みですが、どうしても「フォーマットに沿った私」になってしまいます。資格の一覧。参画プロジェクト。定量実績。それは事実ですが、その人が何を考え、何に突き動かされているか までは伝わりません。

このホームページは、そこを埋めたい。

プロフィールには哲学と座右の銘を、ブログには仕事観や読書の記録を、プロダクトには私の作った 3 つのアプリを、プロジェクトには正社員として歩んだ道のりを。初めましての人が、30 分このサイトを歩き回れば、私という人間の輪郭が見える ものにしたかった。

それは「会う前に、もう会ってもらえている状態」です。技術的な実力だけでなく、人間として信頼できそうかを判断してもらえる準備です。

個人開発のコストを 0 円に保つ、という美学

このホームページ、運用コストは月額 完全に 0 円 です。

これは節約のためというより、私の 美学 に近いです。AWS や有料 SaaS を潤沢に使えば、もっと豪華なサイトが作れます。でも、制約を自分に課すことで、設計は鋭くなり、本当に必要なものだけを選び取る目が鍛えられます。

  • ホスティングは GitHub Pages（静的サイトを無料配信）
  • ブログ記事は Markdown で Git 管理
  • 予約投稿は GitHub Actions の日次 cron
  • お問い合わせフォームは Formspree の無料枠
  • 外部 API 連携は Qiita のビルド時 fetch

すべて無料ツールで組み立て、メンテナンスも自動化されています。記事を書いて Git に push すれば、あとは全自動で公開まで完了する。この「書くことだけに集中できる」状態を作ることに、時間を使いました。

Astro v6 というフレームワーク — 日本ではまだ情報が少ない選択肢

このホームページは Astro v6 というフレームワークで作っています。

Next.js や Nuxt と比べて、日本語の技術記事はまだ多くありません。公式ドキュメントも英語中心で、v5 時代の日本語記事が混在しているため、検索しても情報が古いということが起こります。この記事でも、Astro v6 を選んで実装する中で得た知見を、技術用語を含めて少しだけ共有します。

Astro v6 の特徴

Astro は アイランド・アーキテクチャ と呼ばれる設計思想を持つ 静的サイトジェネレータ（SSG） です。ページ全体を静的 HTML として事前ビルドし、インタラクティブな部分だけを JavaScript として「島」のように部分的に水和（hydration）します。結果として、ゼロ JS がデフォルトとなり、ページ表示は非常に高速です。

主要な機能は以下の通りです。

  • Content Collections: Markdown / MDX / JSON を型安全に管理する仕組み。Zod によるスキーマ定義で frontmatter の型が TypeScript に自動反映される
  • ClientRouter（旧 ViewTransitions）: ブラウザの View Transitions API を使った SPA 風ページ遷移。v6 から名称変更
  • File-based Routing: src/pages/ 配下のディレクトリ構造がそのまま URL になる。[lang] や [...slug] のような動的セグメントも標準サポート
  • i18n (多言語対応): prefixDefaultLocale を使った URL 戦略、defaultLocale のフォールバックなど、国際化向けルーティングが組み込み済み
  • glob loader: Content Collections のローダー仕様。v6 では defineCollection で明示指定が必要（v5 からの破壊的変更）
  • Integrations: @astrojs/sitemap・@astrojs/mdx・@astrojs/react など公式統合モジュールが豊富

Scoped CSS（data-astro-cid-* 属性ベースのスタイルスコープ）や、rehype-external-links のような rehype プラグインとの統合もスムーズで、SEO に強いサイトを静的に構築する用途では非常に強力 です。TypeScript の strict モードとの相性もよく、型チェックを重視する開発者にとって安心感があります。

一方で、v5 → v6 の移行には注意が必要です。Content Collections の loader 必須化、ClientRouter への名称変更、base パスの末尾スラッシュ必須化など、日本語記事がまだ追いついていない破壊的変更がいくつかあります。このあたりの実践的な詰まりどころは、いずれ別記事で技術的に深掘りするつもりです（Qiita 向けの本格的な技術記事として）。

書き続けることで、少しずつ輪郭が立ち上がる

このホームページを始めて、毎日ブログを書くという運用を続けています。

一日一投稿。一つの記事は 3〜5 分で読める長さ。大仰なことは書かず、その日の気づきか、読んだ本の感想か、作っているもののメモ を残す。

続けているうちに気づいたのは、書き溜めることで自分の輪郭が立ち上がってくる という感覚です。一本一本の記事はそれほど意味深くないかもしれない。でも、20 本、30 本と積み上がると、読んだ人に「この人はこういう考え方をする人なんだな」という像が届くようになります。

これは一発のバズでは手に入らないものです。継続というコストを払った人だけが、少しずつ蓄積できる信頼 のようなものだと思っています。

このサイトが目指すもの

目指す姿具体的なこと
私の輪郭が伝わる場所哲学・座右の銘・夢・目標をプロフィールに明記
作ったものが並ぶ場所個人開発プロダクト 3 つを公開し、実際に触ってもらえる
考えたことが残る場所ブログに日々の気づきを一日一投稿
会う前にすでに会えている場所仕事相談の前に、この人となりが分かる
コストも手間も 0 円で続く場所無料ツールと自動化で、継続できる仕組み

技術的にも美しく、運用的にも続けられ、そして何より 私らしくあること。この 3 つが同居しているからこそ、毎日書き続けられているのだと思います。

これを読んでくれたあなたへ

ここまで読んでくれて、ありがとうございます。

もしあなたが自分のホームページを作ろうか迷っているなら、一歩踏み出してみてほしい と思います。SNS では残せないものが、自分のサイトには残せます。プラットフォームの仕様が変わっても揺らがない、あなたの言葉のアーカイブ になります。

そして、もし「Astro v6 って気になるけど情報が少なくて……」という方がいれば、このサイトのソースコード自体が一つのサンプルです。HomePage リポジトリ で全て公開しているので、どんな構成で動いているか自由に覗いてみてください。

このホームページが、私のことを知る入口になり、そしてあなたがご自分の場所を作る小さなきっかけになれば、それだけでこのサイトの役割は果たせたと思っています。

関連記事

お問い合わせ

ご質問やフィードバックなど、お気軽にお問い合わせください。

お問い合わせはこちら