Last updated on

ポートフォリオサイト構築の技術選定

はじめに

ポートフォリオサイトを公開するにあたっての技術選定のプロセスを記載します。

目次

技術選定

エディタ

Cursor↗を採用しました。 やはり大きなトレンドになっているものは触っておきたいというのが理由です。

まだ十分に使いこなせているとは言えませんが、ASK機能は便利だと感じます。簡単な内容であればGoogle AI StudioのAPIキー↗を使い、Gemini 2.0 Flashに質問すれば十分な回答が無料で得られます。

Cursor TabやAgent機能の無料プラン制限を使い切った場合は、以下の拡張機能も試してみたいと考えています。

ホスティング

Cloudflare Pages↗を採用しました。BandwidthがUnlimitedである↗ことが主な理由です。将来ウェブアプリを作成する際にCloudflare D1を採用しやすそうであることもプラスに働きました。

Vercel↗も検討しましたが、Hobbyプランでは商用利用が不可↗であるため今回は見送りました。すぐに収益化する予定はありませんが、制限がない方が安心です。

Netlify↗は、Freeプランでは日本リージョンのCDNが利用できず、サイトの表示速度が遅くなるという情報があったため同じく見送りました。

ランタイム

Node.js↗を採用しました。 競合も出てきてはいますが、安定性を重視して手堅い選択をしました。

フレームワーク

Astro↗を採用しました。State of JavaScriptでの評価が高く↗、以前から試してみたいと思っていたことが理由です。

Node.jsのバージョンが22.14.0だとnpm createでtemplateが使用できない問題が発生しましたが、20.19.0に下げることで解決しました。

npm warnが表示されているターミナルのスクリーンショット

Hugo↗などのSSG（Static Site Generator）も検討しましたが、Astroを使ってみたい気持ちが勝りました。

Astroの公式チュートリアル↗を完了しています。途中で文字化けが発生する場面がありましたが、英語版↗ を参照することで解決できました。

テーマ

公式のブログテンプレート↗を採用しました。

Github Star数を基準にAstroWind↗やastro-paper↗も試しましたが、Github Actions周りのエラーが解決できず、これ以上時間をかける部分ではないと判断しました。

パッケージ

以下、導入した内容の抜粋です。

フォーマッター

Prettier↗を採用しました。

// .prettierrc.mjs
/** @type {import("prettier").Config} */
export default {
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

リンター

ESLint↗とStylelint↗を採用しました。

とりあえずパッケージの導入はしたもののReactは未使用なのでコメントアウトしています。

// eslint.config.js

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
//import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";
import eslintPluginAstro from "eslint-plugin-astro";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    plugins: { js },
    extends: ["js/recommended"],
  },
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    languageOptions: { globals: globals.browser },
  },
  tseslint.configs.recommended,
  //pluginReact.configs.flat.recommended,
  ...eslintPluginAstro.configs.recommended,
]);
{
  "extends": ["stylelint-config-standard", "stylelint-config-html"],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["theme"]
      }
    ],
    "at-rule-no-deprecated": [
      true,
      {
        "ignoreAtRules": ["apply", "layer"]
      }
    ]
  }
}

CSSフレームワーク

Tailwind.css↗ を導入しました。classでスタイルを定義するのはBootstrap↗に似ていると感じましたが、実際に使ってみてどう違うのか、なぜこんなに流行っているのかを知りたいと思います。

フォントはちょうどWindowsに標準搭載されたばかりのNotoを採用しました。

/* global.css */

/* stylelint-disable-next-line import-notation */
@import "tailwindcss";

@theme {
  --font-sans:
    "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", meiryo, sans-serif;
  --font-serif:
    "Times New Roman", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-mono: consolas, "Courier New", "BIZ UDGothic", monospace;
}

@layer base {
  html {
    @apply scroll-smooth;
  }

  main {
    @apply mx-auto max-w-full;

    width: calc(100% - 2em);
  }

  h1 {
    @apply text-2xl font-bold;
  }

  h2 {
    @apply mt-5 border-2 border-l-8 border-solid border-yellow-600 p-3 text-2xl font-bold;
  }

  /* ヘッダーのロゴ部分 */
  nav h2 {
    @apply border-none;
  }

  h3 {
    @apply mt-4 border-l-8 border-solid border-yellow-300 pl-3 text-2xl font-bold;
  }

  h4 {
    @apply mt-3 text-2xl font-bold;
  }

  h5 {
    @apply mt-2 text-xl font-bold;
  }

  h6 {
    @apply mt-1 text-lg font-bold;
  }

  p {
    @apply mt-1;
  }

  a {
    @apply text-blue-700;
  }

  /* ブログ一覧の記事タイトル */
  a:has(h4) {
    @apply text-inherit;
  }

  img {
    @apply mt-1;
  }

  ul {
    @apply mt-1 list-disc pl-5;
  }

  ol {
    @apply mt-1 list-decimal pl-5;
  }

  pre {
    @apply mt-1 p-3 font-mono;
  }

  code {
    @apply rounded bg-gray-200 px-1 font-mono;
  }

  pre code {
    all: unset;
  }
}

@layer components {
  astro-breadcrumbs {
    @apply mx-auto my-5 block;

    width: calc(100% - 2em);
  }
}

@layer utilities {
  .hero-image img {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
  }

  .prose {
    width: 720px;
    max-width: calc(100% - 2em);
    margin: auto;
    padding: 1em;
    color: rgb(var(--gray-dark));
  }

  .title {
    margin-bottom: 1em;
    padding: 1em 0;
    text-align: center;
    line-height: 1;
  }

  .title h1 {
    margin: 0 0 0.5em;
  }

  .date {
    margin-bottom: 0.5em;
    color: rgb(var(--gray));
  }

  .last-updated-on {
    font-style: italic;
  }

  /* スクリーンリーダー用のスタイル（テンプレート流用） */
  .sr-only {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;

    /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px 1px 1px 1px);

    /* maybe deprecated but we need to support legacy browsers */
    clip: rect(1px, 1px, 1px, 1px);

    /* modern browsers, clip-path works inwards from each corner */
    clip-path: inset(50%);

    /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
    white-space: nowrap;
  }
}

分析ツール

GA4↗とClarity↗を採用しました。

タグ管理はGTM↗で行っています。

採用を見送った技術

Deno

以前Slackワークフロー↗のカスタムステップを開発する際に使ったことがありますが、標準ライブラリが開発中だった覚えがあり、まだ本格採用するには早いかもしれないという印象を受けていたので見送りました。

開発を始めてから気づきましたが、2024年10月にDeno 2がリリースされ↗ておりAstroも公式にサポートされているようなので検討してもよかったかもしれません。

Bun

Denoがnpm採用にかじを切ったのはBunの勢いが強いからだ、という意見を目にするくらいなので、存在感が強く気になってはいます。

とはいえやはり、まだ採用するには早すぎるかと判断しました。

Biome

Astroがまだ部分的にしかサポートしていない↗ため、今回は見送りました。

Markuplint

CLIでは動作したものの、@markuplint/astro-parserをinstallしてもdevDependenciesに入らず、随時Lintしてくれないのが不便だったため見送りました。

作者のかたがWindows環境にあまり精通していない↗とのことなのでパスの問題かもしれません（だとするともう少しGoogleで情報が出てきていいように思いますが……）。vue-parserでも同様の問題と思われるIssue↗があります。

今後

  • ページ数が増えてきたらintegrations↗のAstro Pagination↗を検討します。
  • ブログ一覧のCSSがほぼテンプレートそのままなので手を入れるかもしれません。
  • テストを一切書いていないので、今後活用してみたいです。