621 lines
16 KiB
Markdown
621 lines
16 KiB
Markdown
---
|
||
author: usbharu
|
||
draft: false
|
||
categories:
|
||
- 技術
|
||
date: 2026-02-01T13:07:30+09:00
|
||
tags:
|
||
- pnpm
|
||
- npm
|
||
- Tauri
|
||
- Next.js
|
||
- Biome
|
||
- Storybook
|
||
- Changesets
|
||
- TypeScript
|
||
- Renovate
|
||
- Vitest
|
||
keywords:
|
||
- pnpm
|
||
- npm
|
||
- Tauri
|
||
- Next.js
|
||
- Biome
|
||
- Storybook
|
||
- Changesets
|
||
- TypeScript
|
||
- Renovate
|
||
- Vitest
|
||
title: プロジェクトを作るときに考えたいこと
|
||
relpermalink: posts/2026-01-31/
|
||
url: posts/2026-01-31/
|
||
decription: プロジェクトを作るときに考えたいこと
|
||
---
|
||
|
||
何か新しいものを作ろうとしたときに、毎回調べている気がするのでまとめてみた。
|
||
|
||
最近はWeb(Next.js)＋Desktop(Tauri+Vite+React)で作ることが多いので、なんだかんだ偏っているけどnpm使うなら使えるはず
|
||
|
||
## プロジェクトの構造を作る
|
||
|
||
基本的にpnpmを使う
|
||
|
||
```bash
|
||
pnpm init --init-type module
|
||
```
|
||
|
||
モノレポでやる場合は`pnpm-workspace.yaml`を追加する
|
||
|
||
[pnpm-workspace.yamlの構文](https://pnpm.io/ja/next/pnpm-workspace_yaml)
|
||
|
||
大体こんな感じのディレクトリ構造でやることが多い desktopとwebのフォルダは`pnpm create ほにゃらら`が作るので自分では作らない
|
||
```bash
|
||
tree .
|
||
.
|
||
├── apps
|
||
│ ├── desktop
|
||
│ └── web
|
||
└── packages
|
||
├── ui
|
||
└── utils
|
||
|
||
7 directories, 0 files
|
||
```
|
||
|
||
### Next.js
|
||
|
||
こんな感じで作成する
|
||
ESLintではなくBiomeを使う
|
||
|
||
```bash
|
||
create next-app@latest web
|
||
✔ Would you like to use the recommended Next.js defaults? › No, customize settings
|
||
✔ Would you like to use TypeScript? … No / Yes
|
||
✔ Which linter would you like to use? › Biome
|
||
✔ Would you like to use React Compiler? … No / Yes
|
||
✔ Would you like to use Tailwind CSS? … No / Yes
|
||
✔ Would you like your code inside a `src/` directory? … No / Yes
|
||
✔ Would you like to use App Router? (recommended) … No / Yes
|
||
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
|
||
✔ What import alias would you like configured? … @/*
|
||
```
|
||
|
||
`pnpm-workspace.yaml`と`biome.json`が作成されるが、プロジェクトルートで作成するので必要に応じて削除する。
|
||
|
||
### Tauri
|
||
|
||
Rustがインストールされていることを確認する
|
||
|
||
```bash
|
||
pnpm create tauri-app
|
||
✔ Project name · desktop
|
||
✔ Identifier · dev.usbharu.test
|
||
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
|
||
✔ Choose your package manager · pnpm
|
||
✔ Choose your UI template · React - (https://react.dev/)
|
||
✔ Choose your UI flavor · TypeScript
|
||
```
|
||
|
||
### TypeScript
|
||
|
||
```bash
|
||
pnpm add -D typescript
|
||
npx tsc --init
|
||
```
|
||
|
||
npm scriptにtypecheckを追加しておく
|
||
正直いらないが… AIが利用できるコマンドを制限するときに楽
|
||
|
||
```json
|
||
"typecheck": "tsc --noEmit"
|
||
```
|
||
|
||
### Vite(ライブラリモード)
|
||
|
||
npmに公開するかはともかくライブラリを作るときはViteのライブラリモードを利用するといいらしい やったことない
|
||
|
||
https://ja.vite.dev/guide/build#library-mode
|
||
|
||
単にモノレポの1パッケージとして作るだけなら不要
|
||
|
||
---
|
||
|
||
pnpmでモノレポ内のパッケージを追加する場合
|
||
|
||
```bash
|
||
pnpm add --workspace @test/ui
|
||
```
|
||
|
||
npmではやったことないけど、バージョンカタログの仕組みであるpnpm catalogで管理するというのもいいかも
|
||
|
||
https://pnpm.io/ja/catalogs
|
||
|
||
|
||
## テストとか諸々
|
||
|
||
### Biome
|
||
Biome君VSCodeの拡張機能がちょっと残念だけど基本的に優秀なので使ってます
|
||
|
||
https://biomejs.dev/ja/guides/getting-started/#%E8%A8%AD%E5%AE%9A
|
||
|
||
```bash
|
||
pnpm add -w -D @biomejs/biome
|
||
pnpm exec biome init
|
||
```
|
||
|
||
- JSONスキーマをURLからnode_modules内のファイルに変える
|
||
- 自動的にインストールされているバージョンのスキーマを使うことができる
|
||
- useIgnoreFile
|
||
- *.d.tsファイルの除外
|
||
- tailwindcss対応
|
||
|
||
```json
|
||
{
|
||
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
|
||
"vcs": {
|
||
"enabled": true,
|
||
"clientKind": "git",
|
||
"useIgnoreFile": true
|
||
},
|
||
"files": {
|
||
"ignoreUnknown": true,
|
||
"includes": ["**", "!**/*.d.ts"]
|
||
},
|
||
"formatter": {
|
||
"enabled": true,
|
||
"indentStyle": "space",
|
||
"indentWidth": 2
|
||
},
|
||
"linter": {
|
||
"enabled": true,
|
||
"rules": {
|
||
"recommended": true,
|
||
"a11y": {
|
||
"noStaticElementInteractions": "off"
|
||
},
|
||
"nursery": {
|
||
"useSortedClasses": {
|
||
"fix": "safe",
|
||
"level": "error",
|
||
"options": {
|
||
"functions": ["twMerge", "twJoin", "tv", "cn"]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"javascript": {
|
||
"formatter": {
|
||
"quoteStyle": "double"
|
||
}
|
||
},
|
||
"css": {
|
||
"parser": {
|
||
"cssModules": true,
|
||
"allowWrongLineComments": true,
|
||
"tailwindDirectives": true
|
||
},
|
||
"formatter": {
|
||
"enabled": false
|
||
},
|
||
"linter": {
|
||
"enabled": false
|
||
}
|
||
},
|
||
"assist": {
|
||
"enabled": true,
|
||
"actions": {
|
||
"source": {
|
||
"organizeImports": "on"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
npm scriptにlintとlint:fixを追加しておく
|
||
--unsafeオプションはご自由に 僕はつけます
|
||
```json
|
||
"scripts": {
|
||
"lint": "biome check",
|
||
"lint:fix" : "biome check --write --unsafe"
|
||
},
|
||
```
|
||
|
||
### Vitest
|
||
|
||
テストにはVitestを使う 正直そんなに使ったことない
|
||
|
||
```bash
|
||
pnpm add -D vitest
|
||
```
|
||
|
||
npm scriptにtestを追加する
|
||
|
||
```json
|
||
"scripts": {
|
||
"test": "vitest"
|
||
},
|
||
```
|
||
|
||
### Storybook
|
||
|
||
AIと色々やるときにあるとすごい便利
|
||
|
||
ReactとかのUIライブラリが依存関係に入っていないと自動作成に失敗するみたいなので注意
|
||
|
||
```bash
|
||
pnpm create storybook@latest
|
||
```
|
||
|
||
あとは画面の指示に従うだけ
|
||
|
||
Tailwindcssの設定もしておく
|
||
|
||
https://pystyle.info/react-vite-tailwind-storybook/
|
||
|
||
### Storycap
|
||
|
||
ビジュアルリグレッションテストを簡単に行えるよう、コンポーネントのスクショを自動で取れるようにしておく
|
||
|
||
AIにUIコンポーネントを触らせるときにちょっとだけ安心できる
|
||
|
||
Storycapとあるが正確には改良版のStorycap-testrunというもの
|
||
|
||
```bash
|
||
pnpm add -D @storycap-testrun/browser
|
||
```
|
||
|
||
vitest.setup.tsに以下を追記
|
||
```typescript:vitest.setup.ts
|
||
import { page } from "vitest/browser";
|
||
import { screenshot } from "@storycap-testrun/browser";
|
||
|
||
|
||
afterEach(async (context) => {
|
||
await screenshot(page, context);
|
||
});
|
||
```
|
||
|
||
|
||
vitest.config.tsのプラグインに以下を追記
|
||
```typescript:vitest.config.ts
|
||
import storycap from "@storycap-testrun/browser/vitest-plugin";
|
||
|
||
storycap({
|
||
output: {
|
||
file: (context) => `${context.id}.png`,
|
||
},
|
||
}),
|
||
```
|
||
|
||
`.gitignore`に`__screenshots__`と書いておくと良い
|
||
|
||
## Git/GitHubとCI/CD
|
||
|
||
基本的にGit Flowをちょっと省略したブランチ戦略を取る
|
||
`release`ブランチを省略(リリース作業は自動化、それ以外はdevelopでするので)
|
||
`hotfix`ブランチも省略
|
||
|
||
### Gitの設定
|
||
|
||
やっていなければリポジトリの初期化 masterとmainに注意(n敗)
|
||
```bash
|
||
git init .
|
||
```
|
||
|
||
`.gitignore`の設定
|
||
|
||
https://github.com/github/gitignore
|
||
|
||
こういうところから持ってくる
|
||
|
||
### コミット前に自動修正
|
||
|
||
lefthookとbiomeを組み合わせる
|
||
|
||
```bash
|
||
pnpm add -D -w lefthook
|
||
```
|
||
|
||
lefthook.yamlを作成する
|
||
```yaml:lefthook.yaml
|
||
pre-commit:
|
||
commands:
|
||
check:
|
||
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
|
||
run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
|
||
stage_fixed: true
|
||
|
||
pre-push:
|
||
commands:
|
||
check:
|
||
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
|
||
run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}
|
||
```
|
||
|
||
適用
|
||
|
||
```bash
|
||
pnpm lefthook install
|
||
```
|
||
|
||
### GitHub
|
||
|
||
とりあえずリポジトリを作る。masterとmainに注意 上でやった`.gitignore`はここでやってもいい
|
||
Renovateとかを有効化しておく
|
||
|
||
設定していく
|
||
|
||
- オートマージを許可
|
||
- デフォルトブランチをdevelopに
|
||
- プルリクエストブランチの更新を常に提案する
|
||
- ヘッドブランチを自動的に削除する
|
||
- Dependabot Alertsを有効にする
|
||
- ブランチプロテクションルールを作成する CIの構築をしてからの方が楽
|
||
- Masterブランチは直Push禁止
|
||
- CI全Passが必須
|
||
- バイパス禁止
|
||
- Developブランチは直Push許可
|
||
- CI全Passが必要だがバイパスを許可
|
||
- レビューが必要なら最少Approve数を設定
|
||
- チーム開発ならWebhookを設定
|
||
- Issue追加・PR追加・リリースあたりを通知してスレッド運用が良さげ 正直SlackのGitHub Appが一番いい
|
||
- Discord https://mekurun.com/tips/discord-github/
|
||
|
||
### Renovate
|
||
|
||
依存ライブラリのバージョン管理は自動化する
|
||
|
||
- minorとpatchの自動マージを有効化
|
||
- platformAutomergeを有効化
|
||
- rebaseWhenをconflictedかneverに
|
||
- lockFileMaintenanceをtrueに 正直いらんかも
|
||
|
||
|
||
```json:renovate.json
|
||
{
|
||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||
"extends": ["config:recommended"],
|
||
"packageRules": [
|
||
{ "matchUpdateTypes": ["minor", "patch"], "automerge": true }
|
||
],
|
||
"platformAutomerge": true,
|
||
"rebaseWhen": "conflicted",
|
||
"lockFileMaintenance": {
|
||
"enabled": true,
|
||
"recreateWhen": "always",
|
||
"rebaseStalePrs": true,
|
||
"branchTopic": "lock-file-maintenance",
|
||
"commitMessageAction": "Lock file maintenance",
|
||
"commitMessageTopic": null,
|
||
"commitMessageExtra": null,
|
||
"schedule": ["before 4am on monday"],
|
||
"groupName": null,
|
||
"prBodyDefinitions": {
|
||
"Change": "All locks refreshed"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### Vitest
|
||
|
||
package.json内に存在している不要なtestスクリプトは削除しておく
|
||
|
||
ルートのpackage.jsonに
|
||
```json
|
||
"test:all": "pnpm -r --reporter-hide-prefix test"
|
||
```
|
||
を追記しておく
|
||
|
||
-rオプションで子プロジェクトでも再起的に実行
|
||
--reporter-hide-prefixオプションで後述するテストレポートの邪魔を防げる
|
||
|
||
簡単にテストレポートを手に入れる手段としてGitHubのアノテーションを使う
|
||
|
||
https://vitest.dev/guide/reporters.html#github-actions-reporter
|
||
|
||
|
||
### VRT(ビジュアルリグレッションテスト)
|
||
|
||
AIにUIを触らせるならあったらすごく便利です
|
||
|
||
`reg-viz/reg-actions@v3`を使います。
|
||
|
||
playwrightとのインストールが必要な割に実行する必要があるタイミングが多く、コストが重め
|
||
|
||
PRのコメントに差分を投稿してくれるけど、PRのマージ先のコミットで必ずVRTが実行されている必要があるため、マージコミットにもVRTのアクションを実行する必要がある(この仕様にめちゃくちゃハマった)
|
||
|
||
残っている最新のスクショ結果ではなく、最新のコミットのスクショを探すという点に注意
|
||
|
||
簡単に書くのが凄く難しいので今動いているActionをそのまま書いておきます
|
||
|
||
`@travel-scheduler/ui`の部分をUIコンポーネントのパッケージ名に変えると動くと思います。
|
||
|
||
```yaml
|
||
name: Visual Regression Test
|
||
on:
|
||
push:
|
||
branches: [develop, main]
|
||
pull_request:
|
||
branches: [develop, main]
|
||
|
||
permissions:
|
||
contents: write
|
||
actions: write
|
||
pull-requests: write
|
||
|
||
jobs:
|
||
test:
|
||
timeout-minutes: 10
|
||
runs-on: ubuntu-latest
|
||
strategy:
|
||
fail-fast: false
|
||
matrix:
|
||
shard: [1/3, 2/3, 3/3]
|
||
steps:
|
||
- uses: actions/checkout@v6
|
||
|
||
- uses: pnpm/action-setup@v4
|
||
|
||
- uses: actions/setup-node@v6
|
||
with:
|
||
node-version: 22
|
||
cache: "pnpm"
|
||
|
||
- name: Install dependencies
|
||
run: pnpm install
|
||
|
||
- name: Cache Playwright binaries
|
||
uses: actions/cache@v5
|
||
id: playwright-cache
|
||
with:
|
||
path: ~/.cache/ms-playwright
|
||
key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||
|
||
- name: Install Playwright Browsers
|
||
if: steps.playwright-cache.outputs.cache-hit != 'true'
|
||
run: pnpm -F @travel-scheduler/ui exec playwright install chromium
|
||
|
||
- name: Install Playwright system dependencies
|
||
run: pnpm -F @travel-scheduler/ui exec playwright install-deps chromium
|
||
|
||
- name: Run storycap tests (shard ${{ matrix.shard }})
|
||
run: pnpm -F @travel-scheduler/ui exec vitest run --project=storybook --shard=${{ matrix.shard }}
|
||
|
||
- name: Upload screenshots
|
||
uses: actions/upload-artifact@v6
|
||
if: always()
|
||
with:
|
||
name: screenshots-${{ strategy.job-index }}
|
||
path: packages/ui/__screenshots__
|
||
retention-days: 1
|
||
|
||
compare:
|
||
needs: test
|
||
if: always()
|
||
timeout-minutes: 5
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- uses: actions/checkout@v6
|
||
|
||
- name: Download all screenshot artifacts
|
||
uses: actions/download-artifact@v7
|
||
with:
|
||
pattern: screenshots-*
|
||
path: downloaded-screenshots
|
||
|
||
- name: Merge screenshots
|
||
run: |
|
||
mkdir -p packages/ui/__screenshots__
|
||
for dir in downloaded-screenshots/screenshots-*; do
|
||
if [ -d "$dir" ]; then
|
||
cp -r "$dir"/* packages/ui/__screenshots__/ 2>/dev/null || true
|
||
fi
|
||
done
|
||
echo "Merged screenshots:"
|
||
ls -la packages/ui/__screenshots__/
|
||
|
||
- name: Upload merged screenshots
|
||
uses: actions/upload-artifact@v6
|
||
with:
|
||
name: storycap-report
|
||
path: packages/ui/__screenshots__
|
||
retention-days: 30
|
||
|
||
- name: Run visual regression comparison
|
||
uses: reg-viz/reg-actions@v3
|
||
with:
|
||
github-token: "${{ secrets.GITHUB_TOKEN }}"
|
||
image-directory-path: "./packages/ui/__screenshots__"
|
||
```
|
||
|
||
### Changesetsによるバージョン管理
|
||
|
||
自分は調べながら初めて使ったけど、とても便利そう
|
||
|
||
インストール
|
||
```bash
|
||
pnpm add -wD @changesets/cli
|
||
```
|
||
|
||
初期化
|
||
```bash
|
||
npx changesets init
|
||
```
|
||
|
||
変更を追記(GitHub Appで自動化可能)
|
||
```bash
|
||
npx changesets
|
||
```
|
||
|
||
追記した変更をまとめてリリース(GitHub Actionで自動化可能)
|
||
```bash
|
||
npx changesets version
|
||
```
|
||
|
||
変更の追記の確認をしてくれるBot
|
||
|
||
https://github.com/apps/changeset-bot
|
||
|
||
masterにpushがあったら自動でリリース(changesets version)を行うAction
|
||
|
||
```yaml
|
||
name: Release
|
||
|
||
on:
|
||
push:
|
||
branches:
|
||
- master
|
||
|
||
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
||
|
||
jobs:
|
||
release:
|
||
name: Release
|
||
permissions:
|
||
pull-requests: write
|
||
contents: write
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- name: Checkout Repo
|
||
uses: actions/checkout@v3
|
||
- uses: pnpm/action-setup@v4
|
||
with:
|
||
run_install: false
|
||
- name: Setup Node.js 20
|
||
uses: actions/setup-node@v3
|
||
with:
|
||
node-version: 22
|
||
|
||
- name: Install Dependencies
|
||
run: pnpm install
|
||
|
||
- name: Create Release Pull Request
|
||
uses: changesets/action@v1
|
||
env:
|
||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||
```
|
||
|
||
### npm versionによるバージョン管理
|
||
|
||
npmではやったことないけど、Gradleでは近い方法でバージョン管理をしていた 全パッケージが同じバージョン番号を持つプロジェクトやモノレポじゃないプロジェクトではGitに全部を合わせることができるので楽
|
||
|
||
https://qiita.com/minamo173/items/8b8b27bc6ecd17ad925e
|
||
|
||
masterブランチにtagがpushされたときにfrom-gitで発動させる
|
||
|
||
### GitHub Copilotによるレビューを行う
|
||
|
||
自動でレビューさせるかはともかく設定する
|
||
|
||
https://github.com/settings/copilot/features
|
||
|
||
で有効化できる
|
||
|
||
`.github/copilot-instructions.md`に日本語で頼む的な指示を書いておきましょう。
|
||
|
||
---
|
||
|
||
AI関連のことも書こうかと思ったけどだいぶ長い記事になったので一旦ここまで |