サイト開設の挨拶と目的

主にAstro、SCSS、TypeScriptを使ってポートフォリオサイトを作りました。作成目的は、就職活動に向けて、これまで作った作品やスキルをまとめることです。

Webプログラミングを学び始めてまだ日が浅いため改善点も多くありますが、このサイトを通して制作過程や技術選定の考え方を発信していきたいと考えています。

GitHubにこのポートフォリオサイトのコードを公開しているので、よろしければご覧ください。

技術スタック

※Codexにはコードを書かせておらず、主にコードレビューやサイト構成の検討に利用しています。

この技術構成のほとんどは、大学のサークルでホームページ制作(2025年夏ごろ)をした際に感じた課題に端を発します。

その頃の技術スタックはJS(ノンフレームワーク)、HTML、CSSというシンプルなものであり、そこでは以下のような課題がありました。

特に1番については、ナビゲーションバーを修正したい時、HTMLの中から該当箇所を探し、次にCSSの中から該当箇所を探す、という作業が大きな負担になっていました。

1番の課題を解決するために採用しました。

具体的には、ファイルの分割基準を「言語」から「ヘッダーやフッターといったパーツ」へと変えることで解決しました。

Next.jsやNuxt.jsでも同様の課題は解決できますが、Webアプリケーションを作るための機能も多く備えているため、「ポートフォリオサイト制作に対しては学習コストが高いのでは」と考え、今回は見送りました。

2番の課題を解決するために採用しました。

JSを書いている時、自分は静的型付け言語(C#)出身ということもあり、「この変数にはどんなデータ型が入っているのだろう」と疑問に思う場面が多くありました。しかしJSでは、カーソルを合わせてもanyと表示されることが多く、その疑問にあまり答えてくれない点が課題でした。

また、動的型付け言語であるため、実行してみないと分からないエラーも多い印象でした。調査した結果TypeScriptが課題解決に適していると判断し、採用しました。

3番に関しては、当初「CSSではネストができない」という認識のもとでSCSSを採用しました。CSSのネスト記法は比較的新しい機能(2023年)であり、当時の自分の理解が追いついていなかったことが原因でした。

しかし結果的には、linear-gradient()を用いたストライプ模様の実装時に@functionと@forを組み合わせて効率的に記述したり、@mixinでスタイルをまとめたりと、SCSSならではの便利な書き方を学ぶ機会になりました。

デプロイ時に、GitHubのリモートリポジトリから自動でビルド・公開できる点が決め手となり導入しました。

大学のホームページ制作ではGitHub Pagesを使用していましたが、Astroで作ったサイトをGitHub PagesにデプロイするにはGitHub Actionsの設定や、ビルド結果を手動でプッシュする手順が必要になりそうで、難易度・手間の面でハードルが高いと感じました。

NetlifyやVercelも候補に挙がりましたが、調べた範囲ではCloudflare Pagesの無料枠が今回の用途に合っていたため、最終的にこちらを採用しました。

技術ブログを書きたいと考え、導入した技術です。具体的には、MDXからHTMLを生成するSSGの仕組みと、MDXのフロントマターに型を付けられるContent Collectionsを利用しています。これにより、ブログ記事を効率的に管理できるようにしました。

ブログを書く動機としては、AIによってある程度のものが作れるようになりつつある今だからこそ、作ったものを見せるだけでなく、「何をどう考えてコードを書いたのか」「なぜその技術を選んだのか」を言語化することが大切だと感じたためです。

今回の制作では、コンポーネント単位でUIを分ける考え方、TypeScriptによる型の安心感、SCSSによるスタイル管理のしやすさを学びました。

一方で、CSS設計やレイアウトの考え方、バックエンド技術についてはまだ知識が浅く、今後の課題だと感じています。サイトを継続的に更新しながら、こうした部分も少しずつ改善していきたいです。