5.6 KiB
| author | draft | categories | date | tags | keywords | title | relpermalink | url | decription | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| usbharu | false |
|
2026-02-01T13:07:30+09:00 |
|
|
プロジェクトを作るときに考えたいこと | posts/2026-01-31/ | posts/2026-01-31/ | TBD |
何か新しいものを作ろうとしたときに、毎回調べている気がするのでまとめてみた。
最近はWeb(Next.js)＋Desktop(Tauri+Vite+React)で作ることが多いので、なんだかんだ偏っているけどnpm使うなら使えるはず
プロジェクトの構造を作る
基本的にpnpmを使う
pnpm init --init-type module
モノレポでやる場合はpnpm-workspace.yamlを追加する
大体こんな感じのディレクトリ構造でやることが多い desktopとwebのフォルダはpnpm create ほにゃららが作るので自分では作らない
tree .
.
├── apps
│ ├── desktop
│ └── web
└── packages
├── ui
└── utils
7 directories, 0 files
Next.js
こんな感じで作成する ESLintではなくBiomeを使う
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がインストールされていることを確認する
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
pnpm add -D typescript
npx tsc --init
npm scriptにtypecheckを追加しておく 正直いらないが… AIが利用できるコマンドを制限するときに楽
"typecheck": "tsc --noEmit"
Vite(ライブラリモード)
npmに公開するかはともかくライブラリを作るときはViteのライブラリモードを利用するといいらしい やったことない
https://ja.vite.dev/guide/build#library-mode
単にモノレポの1パッケージとして作るだけなら不要
pnpmでモノレポ内のパッケージを追加する場合
pnpm add --workspace @test/ui
npmではやったことないけど、バージョンカタログの仕組みであるpnpm catalogで管理するというのもいいかも
テストとか諸々
Biome
Biome君VSCodeの拡張機能がちょっと残念だけど基本的に優秀なので使ってます
https://biomejs.dev/ja/guides/getting-started/#%E8%A8%AD%E5%AE%9A
pnpm add -w -D @biomejs/biome
pnpm exec biome init
- JSONスキーマをURLからnode_modules内のファイルに変える
- 自動的にインストールされているバージョンのスキーマを使うことができる
- useIgnoreFile
- *.d.tsファイルの除外
- tailwindcss対応
{
"$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オプションはご自由に 僕はつけます
"scripts": {
"lint": "biome check",
"lint:fix" : "biome check --write --unsafe"
},
Vitest
テストにはVitestを使う 正直そんなに使ったことない
pnpm add -D vitest
npm scriptにtestを追加する
"scripts": {
"test": "vitest"
},
Storybook
AIと色々やるときにあるとすごい便利
ReactとかのUIライブラリが依存関係に入っていないと自動作成に失敗するみたいなので注意
pnpm create storybook@latest
あとは画面の指示に従うだけ
Git/GitHubとCI/CD
https://vitest.dev/guide/reporters.html#github-actions-reporter