GitHub Pages へのデプロイでハマった話

サイト公開完了

無事、GitHub Pages でサイトを公開できました。

個人用ページなので致命的ではなかったものの、これが仕事だったらかなり焦っていたと思います。 今回の作業を通して、このサイト自体を検証環境として使うのも悪くないと感じました。

ハマった内容

ビルド中に、次のようなエラーが出ました。

TypeError: Cannot read properties of undefined (reading ‘replace’)

最初は原因が分からず、Astro の再インストールを試したり、コンポーネントを切り分けて最小構成にしたりしながら調査しました。

原因

原因は、TypeScript の型定義を曖昧にしていたことでした。

ページタイトルなどを pageInfo.ts で管理していたのですが、必要なプロパティまで optional にしてしまっていたため、undefined の可能性を残したままコードを書いていました。

その結果、ビルド時に undefined に対して .replace() が呼ばれ、エラーが発生していました。

反省点

TypeScript を探り探りで書いていると、今回のように「一見型が通っていても、実際には危ない状態」を作ってしまうと感じました。

型をきちんと定義しておくと、エラーの予防だけでなくコードの見通しも良くなるので、今後は optional を安易に増やしすぎないように気をつけたいです。