コードの裏側うらがわ：このパーソナルウェブサイトの構築こうちく

最初さいしょは、履歴書りれきしょを載のせるためのウェブサイトを作つくりたかっただけだ。その方ほうがクールで便利べんりだと思おもったからだ。しかし、チャットボットやトップページ、そしてこの技術紹介ぎじゅつしょうかいページを追加ついかしていくうちに、このサイトは本当ほんとうに私自身わたしじしんの能力のうりょくを示しめす作品さくひんへと進化しんかした！最もっとも重要じゅうようなのは、この過程かていで多おおくのことを学まなんだということだ！

1. Astro SPAにおける状態管理じょうたいかんり

右下みぎしたのインタラクティブな小ちいさな生物せいぶつは、私わたしがとても熱中ねっちゅうしたミニプロジェクトだ。アイトラッキング（視線追跡しせんついせき）のアルゴリズムと、滑なめらかな液体えきたいの変形効果へんけいこうかを完成かんせいさせるために数日間すうじつかんを費ついやした。しかし、ユーザーがリンクをクリックするたびにページがリロードされ、これらの生物せいぶつがリセットされてしまい、本来ほんらいの没入感ぼつにゅうかんが壊こわれてしまった。この問題もんだいを解決かいけつするために、このサイトをシングルページアプリケーション（SPA）に変換へんかんする必要ひつようがあった。

Astroは本質的ほんしつてきにはマルチページアプリケーション（MPA）のフレームワークであるため、Astroの <ViewTransitions /> を導入どうにゅうしたことで、ライフサイクル（lifecycle）に関連かんれんするバグが大量たいりょうに発生はっせいした。クライアント側がわのJavaScriptが新あたらしいページで正常せいじょうにトリガーされない一方いっぽうで、これらの小ちいさな生物せいぶつは**絶対ぜったいに**リロードさせないようにする必要ひつようがあった。私わたしは、2つの異ことなるAstroディレクティブを使つかって異ことなるコンポーネントのロジックを処理しょりすることで、この問題もんだいを解決かいけつした。生物せいぶつについては persist タグを使用しようし、ページ遷移間せんいかんでそのHTMLノードをシームレスに保持ほじするようAstroに指示しじした。

<div id="orange-creature" transition:persist>
</div>

標準的ひょうじゅんてきなページインタラクション（モーダルウィンドウやホバー効果こうかなど）の場合ばあい、ユーザーが新あたらしいルートに入はいるたびにスクリプトを再実行さいじっこうする必要ひつようがある。標準ひょうじゅんの DOMContentLoaded はAstro SPAでは機能きのうしないため、Astroのカスタムライフサイクルフック（lifecycle hook）にロジックをラップして、ナビゲーションのたびに確実かくじつに実行じっこうされるようにした。

// This ensures the logic re-runs every time a new page is injected into the DOM
document.addEventListener('astro:page-load', () => {
const interactiveCards = document.querySelectorAll('.interactive-card');
interactiveCards.forEach(card => initHoverLogic(card));
});

2. AIチャットボット：RAGとシステムプロンプトエンジニアリング

最初さいしょは、AIのバックエンドを構築こうちくするのが最もっとも難むずかしい部分ぶぶんだと思おもっていた。予想外よそうがいなことに、現代げんだいのAPIのおかげで統合とうごうは非常ひじょうにスムーズに進すすんだ。本当ほんとうの課題かだいは、ボットに個性こせいを与あたえ、私わたしの実際じっさいのデータに基もとづいて回答かいとうさせることだった。

私わたしは普通ふつうのチャットボットを作つくるのではなく、検索拡張生成けんさくかくちょうせいせい（RAG）の原則げんそくと厳密げんみつなシステムプロンプトエンジニアリングを活用かつようした。非常ひじょうに具体的ぐたいてきなシステムプロンプトを設計せっけいし、私わたしの履歴書りれきしょデータ、プロジェクト経験けいけん、そして厳格げんかくな行動規範こうどうきはんをAIに与あたえ、私わたしの口調くちょうで話はなし、専門的せんもんてきな背景はいけいに関連かんれんする質問しつもんにのみ答こたえるようにした。フロントエンド部分ぶぶんでは、UIとUXに重点じゅうてんを移うつした。ストリーミングされるテキストブロックを処理しょりするためにカスタマイズされたタイプライター効果こうかを作成さくせいし、ZAPSPLATからの正確せいかくな効果音こうかおんを統合とうごうして、チャットルームに物理的ぶつりてきなメカニカルキーボードのような感触かんしょくを与あたえた。

3. CI/CD、国際化こくさいか（i18n）とAIペアプログラミング

英語えいご、日本語にほんご、中国語ちゅうごくごの翻訳ほんやくを手動しゅどうで管理かんりするのは、アーキテクチャ上じょうの悪夢あくむだった。コードベースをモジュール化かし、コンテンツとコードを完全かんぜんに分離ぶんりする必要ひつようがあったが、ファイルツリー全体ぜんたいを手動しゅどうでリファクタリングするには何日なんにちもかかる可能性かのうせいがあった。

この問題もんだいを解決かいけつするために、私わたしはローカルのAI CLIエージェントツールに頼たよった。厳密げんみつなアーキテクチャのブループリントを書かき、エージェントにターミナルで直接ちょくせつ、大規模だいきぼで複数ふくすうファイルにまたがるリファクタリングを実行じっこうするよう指示しじした。AIにファイルシステムの自律的じりつてきな読よみ書かき権限けんげんを与あたえるのは非常ひじょうにリスクが高たかいため、安全あんぜんなDockerコンテナを構築こうちくし、その中なかにAIを「閉とじ込こめ」た。このサンドボックスにより、エージェントは私わたしのプロジェクトファイルにしかアクセスできないようになり、これがDockerベースの開発環境かいはつかんきょうを学まなぶきっかけにもなった。

4. 滑なめらかなアニメーションとユーザーエクスペリエンス（UX）

現代げんだいのウェブアプリケーションには、優すぐれた触覚的しょっかくてきフィードバックが求もとめられる。ページをスクロールする際さいに滑すべるような感覚かんかくがあり、要素ようそが自然しぜんに現あらわれるようにしたかった。そこで、数学的すうがくてきな計算けいさんによるスムーズなスクロールを実現じつげんするためにLenisを実装じっそうし、複雑ふくざつなスクロールトリガーアニメーションを処理しょりするためにGSAP（GreenSock）を使用しようした。これらのライブラリを使つかうのは初はじめてだったので、私わたしにとってはまさに短期集中たんきしゅうちゅうコースのようだった。ドキュメントを読よみ、タイムラインの状態じょうたいを管理かんりし、Astroのビュートランジション中ちゅうにアンマウントされたコンポーネントでメモリリーク（memory leaks）が発生はっせいするのを防ふせぐ必要ひつようがあった。

5. コードとキャンバスを繋つなぐ架け橋かけはし

著作権問題ちょさくけんもんだいを避さけるため、視覚的しかくてきなアセットは自分じぶんで制作せいさくすることに決きめた。一時的いちじてきに生成せいせいAIの使用しようも考かんがえたが、最終的さいしゅうてきにはピクセルアート（Pixel Art）を学まなぶことを選えらんだ。しかし、その難むずかしさを完全かんぜんに見みくびっていた！開発者かいはつしゃとして、純粋じゅんすいなロジックから視覚的しかくてきなUIデザインへの移行いこうは、私わたしが経験けいけんした中なかで最もっとも険けわしい学習曲線がくしゅうきょくせんだった。

私わたしはAsepriteを使つかい、苦労くろうしながら1フレームずつピクセルアートのアセットを設計せっけいし、アニメーションを作成さくせいした。これにより、スプライトシート（sprite sheets）とCSSキーフレーム（keyframe）の統合とうごうについて多おおくを学まなぶことができた。全体ぜんたいとして、自分じぶんの技術的ぎじゅつてきな背景はいけいを視覚的しかくてきに一貫性いっかんせいのあるUIに変換へんかんすること――flexboxの制限せいげん、タイポグラフィ、そして余白よはくのバランスをとること――は、構築こうちくプロセス全体ぜんたいで最もっとも挑戦的ちょうせんてきであり、同時どうじに最もっとも達成感たっせいかんのある部分ぶぶんだった。

効果音こうかおん（SFX）はどこから手てに入いれたのか？

効果音こうかおんの大部分だいぶぶんは ZAPSPLAT から取得しゅとくしたものだ！

特別とくべつな感謝かんしゃを捧ささげる技術ぎじゅつ：

Astro.js

Google Gemini & CLI

Docker

Docker

GitHub

Aseprite

ZAPSPLAT

GSAP

Lenis