---
author: usbharu
draft: false
categories:
  - null
date: 2026-02-01T13:07:30+09:00
tags:
  - null
keywords:
  - null
title: プロジェクトを作るときに考えたいこと
relpermalink: posts/2026-01-31/
url: posts/2026-01-31/
decription: TBD
---

何か新しいものを作ろうとしたときに、毎回調べている気がするのでまとめてみた。

最近は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
```

あとは画面の指示に従うだけ

## Git/GitHubとCI/CD

https://vitest.dev/guide/reporters.html#github-actions-reporter

https://qiita.com/minamo173/items/8b8b27bc6ecd17ad925e