suzuuuuu09.com

##はじめに

こんにちは。はじめまして。suzu (@suzuuuuu09) です。私は情報系の大学 1 年で、個人的に Web フロントエンド技術を使った Web 開発をおこなっています。夏休みの機会を利用して、触ったことがなかった技術を使って新しいものを作ろうと思いました。
そこで今回、Astro と React を使ったポートフォリオサイト兼ブログサイトを制作しましたので、紹介します。

##画像・動画

suzuuuuu09.com-1758351963075.webp

##技術スタック

###フレームワーク

####Astro

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

Astro

静的サイト生成に適していて、扱いやすい Astro を採用しました。
パフォーマンスに優れており、非常に高速なページの読み込みがデフォルトで行えるようになっています。また、後述する Content Collections も Astro を採用した理由のひとつです。

####React

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.

ja.react.dev

UI フレームワークに React を使用しました。

####GSAP

Homepage

Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.

gsap.com

アニメーションを行うために、GSAP を採用しました。 Motion(旧Framer Motion)↗️ の採用も考えましたが、React でしか動かせないのがネックだったので諦めました。

###スタイリング・デザイン

####Panda CSS

Panda CSS - Build modern websites using build time and type-safe CSS-in-JS

Build modern websites using build time and type-safe CSS-in-JS

panda-css.com

スタイリングには Panda CSS を採用しました。
Chakra UI 開発チームによって作られた

サーバーファースト時代における CSS-in-JS の課題を解決することを目的とした新しい CSS-in-JS エンジン

です。(公式ページより)
Tailwind CSS や UnoCSS のようなユーティリティクラスを活用した CSS フレームワークと違い、高い保守性があります。(余談ですが、当初このサイトは UnoCSS で作っていましたが、保守性が低さからサイトを一度作り直しています)

####フォント

IBM Plex Sans JP - Google Fonts

IBM Plex® is the corporate typeface for IBM worldwide and an open-source project developed by the IBM Brand & Experience team (BX&D). Plex is an international t

Google Fonts

GitHub - yuru7/moralerspace: Moralerspace は、欧文フォント Monaspace と日本語フォント IBM Plex Sans JP 等を合成したプログラミング向けフォントです。

Moralerspace は、欧文フォント Monaspace と日本語フォント IBM Plex Sans JP 等を合成したプログラミング向けフォントです。 - yuru7/moralerspace

GitHub

フォントは本文に IBM Plex Sans JP 、コードブロックに Moralerspace を使用しました。

####絵文字

GitHub - twitter/twemoji: Emoji for everyone. https://twemoji.twitter.com/

Emoji for everyone. https://twemoji.twitter.com/. Contribute to twitter/twemoji development by creating an account on GitHub.

GitHub

絵文字は Twitter(現 X) が開発したTwemojiを採用しています。
絵文字を入力すると自動で SVG 画像に変換してくれます。
😄⭐☔←こんな感じ

####アイコン

Iconify

All popular icon sets, one framework

iconify.design

GitHub - manuelmeister/astro-iconify: Inline and sprite-based SVGs in Astro using up to date Iconify service

Inline and sprite-based SVGs in Astro using up to date Iconify service - manuelmeister/astro-iconify

GitHub

アイコンはastro-iconifyを使っています。
astro-iconify を使うことで mdi や devicon などのアイコンやロゴを簡単に扱うことができます。もともとは Astro Icon↗️ を使っていましたが、アイコンを使うために別途でパッケージをインストールする必要があり煩わしかったため、Astro Icon は採用しませんでした。

###コンテンツ管理

####Content Collections

Content collections

Manage your content with type safety.

Docs

Astro を採用したもうひとつの理由です。
Content Collections は Astro のプロジェクトフォルダ内に src/content ディレクトリを作ることでディレクトリ内にある Markdown ファイルを簡単に管理することができます。また、title や slug などのデータを型安全に処理できます。

###ホスティング

####Cloudflare Pages

フルスタックアプリケーション

Cloudflare Pagesをは、フロントエンドエンジニア向けフルスタックアプリケーションで、コードを簡単にデプロイできます。試してみませんか？

www.cloudflare.com

ホスティングには Cloudflare Pages を使用しました。
知り合いから「Cloudflare Pages が楽で使いやすい」と聞いたので試しに導入してみました。

###OGP 画像の生成

####Satori & Resvg

GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG

Enlightened library to convert HTML and CSS to SVG - vercel/satori

GitHub

GitHub - thx/resvg-js: A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.

A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs. - thx/resvg-js

GitHub

Satori を使って HTML と CSS から SVG を生成します。生成した SVG を Resvg を用いて PNG 画像に変換しています。

####BudouX

GitHub - google/budoux

Contribute to google/budoux development by creating an account on GitHub.

GitHub

BudouX はタイトルの文を分かち書きするために使いました。

###アナリティクス

####Google Analytics

Google Analytics | Google for Developers

Google アナリティクスをデジタル戦略の調整やキャンペーンの最適化に活用し、自社のオンラインプレゼンスをさらなる高みへ導きましょう。

Google for Developers

アナリティクスは Google Analytics を使用しています。特にこだわりがなかったので無難なものを選びました。

###コードブロック

####Expressive Code

Expressive Code

Present your source code on the web, making it easy to understand and visually stunning. All batteries included!

Expressive Code

コードブロックに Expressive Code を使用しました。Astro との相性も良く、簡単にリッチなコードブロックを扱えるのが特徴です。

##こだわりポイント

###ヘッダーナビゲーション

GSAPを使ったヘッダーのホバーアニメーションです。
触っていて楽しさや爽快感を感じられるようなアニメーションを作りました。また、このアニメーションを作ることで、カーソルの位置がナビゲーションのどの位置にあるのか分かりやすくなりました。

###見出しの「#」レベル

先日 Twitter を見ていたところ、このようなツイートを見かけました。

md ってレンダリング後も ## とか維持した方が読みやすいので、維持してみた。 https://t.co/pM5c59DWwV pic.twitter.com/BACqA896yM
— V (@voluntas) October 25, 2025

なるほど…確かに読みやすい…てことで当サイトにも実装してみました。

suzuuuuu09.com-1762359073619.webp

このような感じになりました。見出しのレベルが分かりやすくなりました。
実装方法について説明します。
rehype-slug↗️ と rehype-autolink-headings↗️ をインストールします。簡単に説明すると、rehype-slug は見出しに固有 id を持たせるプラグイン。rehype-autolink-headings は見出しにリンクを追加するプラグインです。

import { defineConfig } from "astro/config";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeSlug,
      [
        rehypeAutolinkHeadings,
        {
          behavior: "prepend",
          content: /** @param {any} node */ (node) => {
            // headingのlevelに応じて#の数を変える
            // h1 から h6 まで対応
            const level = Number.parseInt(node.tagName.substring(1), 7);
            const hashes = "#".repeat(level);

            return {
              type: "element",
              tagName: "span",
              properties: {
                className: ["heading-anchor"],
              },
              children: [{ type: "text", value: hashes }],
            };
          },
          group: {
            type: "element",
            tagName: "div",
            properties: {
              className: ["heading-wrapper"],
            },
            children: [],
          },
        },
      ],
    ],
  },
});