プロジェクト構成の記事を追加
This commit is contained in:
parent
a9a3e71207
commit
f820552b09
|
|
@ -0,0 +1,239 @@
|
|||
---
|
||||
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
|
||||
Loading…
Reference in New Issue