サイト開設の挨拶と目的

主にAstro,SCSS,TSを使ってポートフォリオサイトを作りました。
作成目的としては、就職活動に備えて、今まで作った作品やスキルをまとめることです。
webプログラミングは学び始めたばかりなので拙い所も多いと思います。優しくお願いします。

技術スタック

webフレームワークAstro
プログラミング言語：TypeScript
スタイルシート言語：SCSS
ホスティングサービス：Cloudflare pages
ブログ作成への採用言語：MDX

技術構成の理由

この技術構成のほとんどは大学のサークルでホームページ制作(2025年夏ごろ)をした際に遭遇した不満点に、端を発します。
その頃の技術スタックはjs(ノンフレームワーク),html,cssというシンプルな物であり、そこでは以下の不満点がありました。

ファイルの分割基準がhtml css js、つまり言語基準である事
JSの型の不透明さ&動かすまでエラーが分からない事
CSSではセレクタをネストすることが出来ない⇐勘違い

１番については特に不満であり、もしナビゲーションバーを修正したい時、htmlの海の中から、該当箇所を探し、cssの海の中から該当箇所を探しといった感じでそれが本当に苦しかったです。

Astroの採用理由

１番を解決するために採用しました。具体的には、ファイルの分割基準が、言語から、ヘッダーやフッターといったパーツ基準になる事で、解決しました。
また、next.jsやnuxt.jsも同じように解決できますが、webアプリを作る機能も備えているので、「ポートフォリオサイト制作に対して学習のコストが高いのでは？」という懸念点からそちらのフレームワークは見送りました。

TypeScriptについて

２番を解決するために採用しました。具体的には、JSを書いている時、自分は静的型付け言語(c#)出身故か、「この代入された変数は何のデータ型なのだろう？」と疑問を持つ事が多いです。ですが、JSだとカーソルを合わせてもanyとして表示されるなど、その疑問にあまり答えてくれない事が多く不満でした。また、動的型付け言語故か、動かしてからでないと判明しないエラーも多い印象です。それをAIに聞いたらTSをおすすめされたので、それに従い採用しました。

SCSSについて

お恥ずかしながら、3番に関しては「CSSではネストができない」という勘違いから採用しました。
おそらくCSSのネスト記法が比較的新しい機能(2023年)だったため、自分の理解が追いついていなかったのだと思います。
しかし、linear-gradient()を用いたストライプ模様の実装時、@functionと@forを用いて効率的に記述したり、
@mixinで効率的にスタイルをまとめたり等、SCSSならではの便利な書き方を学べたため、無駄ではなかったと思います。

Cloudflare Pagesについて

デプロイ時に、GitHubのリモートリポジトリから自動でビルドして公開できるため導入しました。
大学のホームページ制作ではGitHub Pagesを使いましたが、Astroで作ったサイトをデプロイするには、GitHub Actionsを設定するか、自分でビルドした結果をプッシュする必要がありそうで、難易度が高い、または煩雑そうだと感じました。そのため、今回は採用しませんでした。
NetlifyやVercelも候補にありましたが、当時調べた範囲ではCloudflare Pagesの無料枠が自分の用途に合っていそうだったため、最終的にこちらを選びました。

MDXについて

これは技術ブログを書きたいと考えたため導入した技術です。具体的には、MDXからHTMLを生成するSSGの仕組みと、MDXのフロントマターに型を付けられるContent Collectionsを利用しています。
これにより、ブログ記事を効率的に管理できるようにしました。ブログを書く動機としては、AIで、それなりの物が作れるようになりつつある昨今において、作った物を見せるだけではなく、何をどのように考えてコードを書いたか？、何故その技術を選択したのか？を言語化するのが大事だと感じたからです。

制作を通して学んだ事

今回の制作では、コンポーネント単位でUIを分ける考え方や、TypeScriptによる型の安心感、SCSSによるスタイル管理のしやすさを学びました。まだCSS設計やレイアウトなどに悩む部分も多く、バックエンドに関しては全く知識がないなど、未熟な部分も多いですが、このサイトを更新しながら少しずつ改善していきたいです。