YasushiKobayashi · YasushiKobayashi · Sep 21, 2025 · Sep 21, 2025 · Sep 21, 2025 · gemini-code-assist
diff --git a/.cursor/rules/all.mdc b/.cursor/rules/all.mdc
@@ -0,0 +1,143 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# プロジェクト概要
+
+このリポジトリは、Zennの記事とサンプルコードを1つのモノレポで管理しています。サンプルコードが常に動作する状態を維持するために継続的にメンテナンスされています。
+
+## 技術スタック
+
+- **パッケージマネージャー**: Bun
+- **テストフレームワーク**: Vitest
+- **言語**: TypeScript
+- **フロントエンドフレームワーク**: React
+- **CI/CD**: GitHub Actions
+- **コードカバレッジ**: Codecov
+
+## 主要機能
+
+- 記事とサンプルコードを統合したモノレポ構造
+- Vitestによる自動テスト
+- vitest-axeによるアクセシビリティテスト
+- コードカバレッジレポート
+- TypeScriptサポート
+- Reactコンポーネントのテスト
+
+## プロジェクト構造
+
+### ルートディレクトリ
+- `/articles`: Zennの記事を格納
+  - 各記事はMarkdownファイルとして管理
+  - フロントマターで記事のメタデータを管理
+  - 画像は`/articles/images`に配置
+
+- `/src`: サンプルコードの実装を格納
+  - 各サンプルは独立したディレクトリとして管理
+  - テストファイルは実装と同じディレクトリに配置
+  - 共通の設定ファイルはルートに配置
+
+### サンプルプロジェクト
+- `/src/jest-same-example-next`: Jestのテストファイル構成例
+  - Next.jsプロジェクトでのテストファイル配置例
+  - テストと実装を同じディレクトリに配置する構成
+
+- `/src/jest-same-example-rollup`: Rollupを使用したJestの例
+  - Rollupでバンドルするプロジェクトのテスト構成例
+  - モジュールバンドリング時のテスト設定例
+
+- `/src/react-if-sample`: Reactのif文パターン
+  - 条件分岐の実装パターン集
+  - コンポーネントの条件付きレンダリング例
+
+- `/src/jest-ts-auto-mock-sample`: モックデータ生成の例
+  - TypeScriptの型定義からモックデータを自動生成
+  - テストデータの管理方法の例
+
+## 開発環境のセットアップ
+
+```bash
+# .node-versionで指定されたNode.jsバージョンをインストール
+$ cat .node-version | nodenv install
+
+# Bunで依存関係をインストール
+$ bun install
+```
+
+## テスト
+
+プロジェクトではVitestを使用してテストを行い、以下の機能を提供しています：
+- Happy DOMテスト環境
+- Reactテストサポート
+- vitest-axeによるアクセシビリティテスト
+- Istanbulによるコードカバレッジレポート
+- Canvasモックサポート
+
+### テストの書き方
+- テストファイルは実装ファイルと同じディレクトリに配置
+- テストファイル名は`*.test.ts`または`*.test.tsx`の形式
+- コンポーネントテストは`__tests__`ディレクトリに配置可能
+- テストカバレッジは80%以上を維持
+
+## CI/CD
+
+- GitHub Actionsによる自動テスト
+- Codecovによるカバレッジレポート
+- 自動テストワークフローバッジ
+- カバレッジバッジ
+
+## 記事一覧
+
+このリポジトリには以下の記事が含まれています：
+- Jestのテストファイル構成
+- Reactのif文パターン
+- モックデータ生成
+- Laravel API環境の構築
+- Next.js/Serverless FrameworkでのISR実装
+- PlaywrightによるE2Eテスト
+- テストとStorybookのセットアップ
+- axeによるアクセシビリティテスト
+
+## 最近の移行
+
+プロジェクトは最近以下の移行を行いました：
+- パッケージマネージャーをYarnからBunへ
+- テストフレームワークをJestからVitestへ
+
+これらの移行により以下の改善が実現されました：
+- パッケージインストール速度の向上
+- 設定の簡素化
+- TypeScriptサポートの強化
+- テスト実行パフォーマンスの向上
+
+## 開発フロー
+
+### 新規機能追加
+1. 新しいサンプルプロジェクトのディレクトリを作成
+2. 必要な依存関係をインストール
+3. テストを実装
+4. コードカバレッジを確認
+5. PRを作成
+
+### 記事の追加・更新
+1. `/articles`にMarkdownファイルを作成
+2. フロントマターを設定
+3. サンプルコードとリンク
+4. プレビューで確認
+5. PRを作成
+
+## トラブルシューティング
+
+### よくある問題
+- **Bunのインストールエラー**
+  - Node.jsのバージョンを確認
+  - `bun install`を再実行
+
+- **テストの実行エラー**
+  - `node_modules`を削除して再インストール
+  - テスト環境の設定を確認
+
+- **TypeScriptの型エラー**
+  - `tsconfig.json`の設定を確認
+  - 型定義ファイルの更新
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,4 @@ test-results
 trace.zip
 .jest-test-results.json
 junit.xml
+settings.local.json
diff --git a/.textlintrc b/.textlintrc
@@ -8,8 +8,36 @@
     "preset-ja-technical-writing": {
       "sentence-length": {
         "max": 200
+      },
+      "ja-no-mixed-period": {
+        "severity": "warning"
       }
     },
-    "spellcheck-tech-word": true
+    "spellcheck-tech-word": true,
+    "no-doubled-joshi": true,
+    "ja-no-redundant-expression": true,
+    "ja-no-successive-word": true,
+    "ja-unnatural-alphabet": true,
+    "max-ten": {
+      "max": 4
+    },
+    "max-kanji-continuous-len": {
+      "max": 6
+    },
+    "terminology": true,
+    "no-todo": true,
+    "no-empty-section": true,
+    "abbr-within-parentheses": true,
+    "common-misspellings": true,
+    "no-dead-link": {
+      "checkRelative": false,
+      "ignore": ["http://localhost*"]
+    },
+    "no-mix-dearu-desumasu": {
+      "preferInHeader": "",
+      "preferInBody": "ですます",
+      "preferInList": "",
+      "strict": false
+    }
   }
 }
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,107 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## プロジェクト概要
+
+Zenn の記事とサンプルコードを 1 つのモノレポで管理しているリポジトリです。サンプルコードは常に動作する状態を維持するため継続的にメンテナンスされています。`/articles`に Zenn 記事（フロントマター付き Markdown）、`/src`にサンプルコード実装が格納されています。
+
+## 主要コマンド
+
+### 開発環境セットアップ
+```bash
+# .node-versionで指定されたNode.jsバージョンをインストール
+cat .node-version | nodenv install
+
+# Bunで依存関係をインストール
+bun install
-# .node-versionで指定されたNode.jsバージョンをインストール
-cat .node-version | nodenv install
-
-# Bunで依存関係をインストール
-bun install
+# .node-versionで指定されたNode.jsバージョンをインストール
+$ nodenv install
+
+# Bunで依存関係をインストール
+$ bun install
-# .node-versionで指定されたNode.jsバージョンをインストール
-cat .node-version | nodenv install
-
-# Bunで依存関係をインストール
-bun install
+# .node-versionで指定されたNode.jsバージョンをインストール
+$ nodenv install
+
+# Bunで依存関係をインストール
+$ bun install
+```
+
+### テスト実行
+```bash
+# 全ワークスペースのテストを並列実行
+bun run vitest
+
+# CI用（カバレッジとJUnit出力付き）
+bun run vitest-ci
+
+# ウォッチモードでテスト実行
+bun run vitest-watch
+
+# 単一テストファイルの実行（ワークスペースディレクトリから）
+bunx vitest path/to/test.spec.tsx
+```
+
+### 型チェックとリント
+```bash
+# 全ワークスペースの型チェック
+bun run type-check
+
+# ウォッチモードで型チェック
+bun run type-check-watch
+
+# TypeScript/JavaScriptファイルのリント
+bun run lint-ts
+
+# Markdown記事のリント
+bun run lint-md
+
+# 全ての問題を自動修正
+bun run fix
+```
+
+### ビルドと開発
+```bash
+# 全ワークスペースを並列ビルド
+bun run build
+
+# Zenn記事をローカルでプレビュー
+bun run start
+
+# 開発サーバー起動（src/next-sampleなど特定ワークスペースから）
+bun run dev
+```
+
+### PlaywrightでのE2Eテスト
+```bash
+# Playwrightブラウザをインストール
+bun playwright install
+
+# E2Eテスト実行（src/playwright-sampleから）
+bun run e2e-chromium
+```
+
+## アーキテクチャ
+
+### モノレポ構造
+- Bun ワークスペースと連携した Lerna で複数パッケージを管理
+- `/src`内の各サンプルプロジェクトは独立したワークスペース（独自の`package.json`を持つ）
+- ルートレベルのスクリプトが全ワークスペースでの並列実行を統括
+
+### テストアーキテクチャ
+- **フレームワーク**: パフォーマンスと設定の簡素化のため Jest から Vitest へ移行
+- **テスト環境**: 高速 DOM テスト用の Happy DOM
+- **Reactテスト**: `@testing-library/react`と`@vitejs/plugin-react`を使用
+- **アクセシビリティテスト**: 自動アクセシビリティチェック用の`vitest-axe`を統合
+- **カバレッジ**: Codecov 統合付きの Istanbul プロバイダー
+- **テストファイル**: 実装ファイルと同じ場所に配置（例：`Main.tsx`と`Main.spec.tsx`）
+
+### CI/CDパイプライン
+- **GitHub Actions**: master へのプッシュと PR 時の自動テスト
+- **テスト実行**: リント、型チェック、ユニットテスト、end-to-end テストを実行
+- **カバレッジレポート**: Codecov へ自動アップロード
+- **Chromatic統合**: Storybook コンポーネントのビジュアルリグレッションテスト
+- **Launchable統合**: テストインテリジェンスとフレーキーテスト検出
+
+### 主要な技術的決定
+- **パッケージマネージャー**: 高速インストールと組み込み TypeScript サポートのため Yarn から Bun へ移行
+- **テストフレームワーク**: ESM サポート改善と実行速度向上のため Jest から Vitest へ移行
+- **設定**: ルートの共有 Vitest 設定とワークスペース固有のオーバーライド
+- **コード品質**: ESLint と Prettier、Husky でのプリコミットフック、lint-staged での増分リント
+
+## 最近の移行
+
+プロジェクトは最近大規模な移行を実施：
+1. **Yarn → Bun**: パッケージインストール速度の向上とスクリプトの簡素化
+2. **Jest → Vitest**: TypeScript サポート改善、テスト実行高速化、設定の簡素化
+3. これらの移行により設定ファイルがクリーンになり、開発体験が向上
-3. これらの移行により設定ファイルがクリーンになり、開発体験が向上
+3. これらの移行により設定ファイルがクリーンになり、開発体験が向上
+
-3. これらの移行により設定ファイルがクリーンになり、開発体験が向上
+3. これらの移行により設定ファイルがクリーンになり、開発体験が向上
+
diff --git a/articles/axe-accessibility.md b/articles/axe-accessibility.md
@@ -10,9 +10,9 @@ published: true
 
 `jest-axe` ・ `@axe-core/playwright`  を使用したテストを CI で回すことで、アクセシビリティを継続的に担保していくことができます。
 
-## jest axeを活用してコンポーネントのアクセシビリティ担保
+## Jest axeを活用してコンポーネントのアクセシビリティ担保
 
-`jest-axe`を使用することでコンポーネント単位でアクセシビリティテストをできます。
+`jest-axe`を使用することで、コンポーネント単位のアクセシビリティテストが可能になります。
 
 コンポーネント単位でテストができることで、1 つ 1 つアクセシビリティ的に正しいコンポーネントを作ることができ、小さい単位でアクセシビリティの改善をしていくことができるので既存プロジェクトにも導入がしやすいです。
 
@@ -53,7 +53,7 @@ https://github.com/YasushiKobayashi/samples/blob/master/src/next-sample/src/temp
 
 また、すべてのルールにちゃんとドキュメントがあり、今守りたいルールなのか考えながら導入していくことが可能です。
 
-下記のように基本的に日本語に翻訳されているルールも多いです。
+下記のように基本的には日本語訳が提供されているルールも多いです。
 
 https://dequeuniversity.com/rules/axe/4.4/label?lang=ja
 
@@ -65,7 +65,7 @@ https://zenn.dev/ptpadan/articles/hygen-storybook-jest
 
 ## Playwright axeでE2Eテストでもアクセシビリティテストする
 
-`@axe-core/playwright` を使うことで、E2E テストの中でもアクセシビリティテストができます。
+`@axe-core/playwright` を使うことで、end-to-end テストの中でもアクセシビリティテストができます。
 
 全てに対応しようとすると難しいものも多いので対応できてないルールも多いのですが、1 つのコンポーネントをテストするだけでは検出できるできないエラーを発見でき、例えばこのように h1 タグに関するエラーを出してくれます。
 
@@ -104,7 +104,7 @@ export const axeRunner = async (page: Page, disableRules: string[] = []) => {
 }
 ```
 
-Playwright のセットアップやテストの書き方については、こちらを参考にしてください Playwright が実行できていればすぐに上記のような方法でテスト可能です。。
+Playwright のセットアップやテストの書き方については、こちらを参考にしてください。Playwright が実行できていればすぐに上記のような方法でテスト可能です。
 
 https://zenn.dev/ptpadan/articles/playwright-e2e
 

diff --git a/articles/bun-vitest-cline-migration.md b/articles/bun-vitest-cline-migration.md
@@ -10,7 +10,7 @@ published: true
 
 このリポジトリでは、記事とサンプルコードを 1 つのモノレポで管理し、継続的にメンテナンスしてきました。これにより、サンプルコードが現在も動作するかどうかを確認しやすくしていました。
 
-しかし、今後採用される可能性が低い技術のバージョンアップなどのメンテナンスには工数をかけたくないため、いくつかのサンプルコードを削除しました。また、最近よく採用している技術スタックである bun/vite などへの移行を行いました。
+しかし、今後採用される可能性が低い技術のバージョンアップなどのメンテナンスには工数をかけたくないため、いくつかのサンプルコードを削除しました。また、最近よく採用している技術スタックである bun/vite などへ移行しました。
 
 この記事では、AI コーディングアシスタント「Cline」を使って行った bun と vitest への移行作業について紹介します。Cline は、コード変更の提案や実装を自動化してくれるツールで、今回のような移行作業を効率的に進めるのに役立ちました。
 
@@ -101,7 +101,7 @@ Jest から vitest への移行には以下のようなメリットがありま
 
 ## Clineを使ったvitestへの移行作業
 
-vitest の移行は、まず設定ファイルを手動で作成し、1つのディレクトリを手動で移行しました。具体的には、`vitest.config.ts`と`vitest-setup.tsx`を作成し、1つのプロジェクトのテストファイルを更新して動作確認を行いました。
+vitest の移行は、まず設定ファイルを手動で作成し、1 つのディレクトリを手動で移行しました。具体的には、`vitest.config.ts`と`vitest-setup.tsx`を作成し、1 つのプロジェクトのテストファイルを更新して動作確認を行いました。
 
 テストファイルの移行では、主に以下のような変更が必要でした：
 - import パスの更新（`jest`→`vitest`）

diff --git a/articles/eslint-update-9.md b/articles/eslint-update-9.md
@@ -1,5 +1,5 @@
 ---
-title: ESLint 9へのアップデートとFlat Config移行の実践記録
+title: ESLint 9へのアップデートとFlat Config移行ログ
 emoji: "🔧"
 type: "tech" # tech: 技術記事 / idea: アイデア
 topics: ['eslint', 'typescript', 'javascript', 'linter', 'monorepo']

diff --git a/articles/hygen-storybook-jest.md b/articles/hygen-storybook-jest.md
@@ -77,7 +77,7 @@ Primary.play = async ({ canvasElement }) => {
 
 ## テンプレートをメンテナンスしていくことで、なるべく新しい書き方に追従できる
 
-例えば、Storybook はバージョンによって推奨される書き方が変わることがあるので、テンプレートを最新の書き方にすることで最新の書き方に追従していきやすい環境を作ることができます。
+例えば、Storybook はバージョンによって推奨される書き方が変わることがあります。テンプレートを最新の書き方に更新することで、新しい書き方への追従が容易になります。
 
 既存のコードのコピー&ペーストをベースにして作ってしまうと古い好ましくない書き方をベースにしてしまうことがありますが、テンプレートをメンテナンスしていくことで今好ましい書き方をし続けることができます。
 
@@ -86,7 +86,7 @@ Primary.play = async ({ canvasElement }) => {
 
 `Play function`を使用することで、シナリオテストを作成できるので、下記のようにフォームに入力・送信までテストできる Story を簡単に作成できます。
 
-`@storybook/jest` という addon で Storybook の中で jest のようにモックや assertion を書くこともできるので、Storybook でコンポーネントに関するテストは完結できます。
+`@storybook/jest` という addon で Storybook の中で Jest のようにモックや assertion を書くこともできるので、Storybook でコンポーネントに関するテストは完結できます。
 
 また、簡単なテストケースであれば jsdom 上でデバッグしていくことができますが、Storybook でテストを実行しているのでブラウザ上でもテストを実行し devtool で詳しい状態を見ることができるので、複雑なシナリオのテストでもこれまでより大幅に書きやすくなりました。
 
@@ -155,7 +155,7 @@ https://github.com/YasushiKobayashi/samples/blob/master/src/next-sample/src/temp
 
 参考記事はこちら。
 
-https://storybook.js.org/docs/react/writing-stories/play-function
+https://storybook.js.org/docs/writing-stories/play-function
 https://storybook.js.org/addons/@storybook/addon-jest
 https://zenn.dev/takepepe/articles/hygen-template-generator
 https://zenn.dev/azukiazusa/articles/df307292037265