Compare commits
No commits in common. "master" and "weekly-2026-2" have entirely different histories.
master
...
weekly-202
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
|
|
@ -1,75 +0,0 @@
|
|||
---
|
||||
author: usbharu
|
||||
draft: false
|
||||
categories:
|
||||
- 技術
|
||||
date: 2026-01-20T09:30:58+09:00
|
||||
tags:
|
||||
- null
|
||||
keywords:
|
||||
- null
|
||||
title: OpenCodeをGitHub Copilot Proで試す
|
||||
relpermalink: posts/2026-01-20/
|
||||
url: posts/2026-01-20/
|
||||
decription: OpenCodeをGitHub Copilot Proで試す
|
||||
---
|
||||
|
||||
最近はClaude Codeが流行っているようですが、いきなり3000円払って後悔するのもなぁ…と思っているうちにいい感じの代替が出てきました。
|
||||
|
||||
## インストール
|
||||
|
||||
OpenCodeは名前が名前だけにややこしいのですが、bun製の方のOpenCodeです。
|
||||
|
||||
[OpenCode 違い](https://zenn.dev/tkithrta/articles/13b576270f4d18)
|
||||
|
||||
↓でインストールしようとするとなんかバージョンが取得できないとか行ってエラーになるので、`npm install -g opencode-ai`でインストールしました。
|
||||
|
||||
```bash
|
||||
❯ curl -fsSL https://opencode.ai/install | bash
|
||||
Failed to fetch version information
|
||||
```
|
||||
|
||||
## プロバイダを接続
|
||||
|
||||
以下のコードを打ったらあとは指示に従います
|
||||
|
||||
```bash
|
||||
opencode auth login
|
||||
```
|
||||
|
||||
GitHub Copilotのページに行ってモデルを有効化しないと使えませんでした。
|
||||
|
||||
https://github.com/settings/copilot/features
|
||||
|
||||
モデルを有効化したあとopencodeの再起動が必要でした。
|
||||
また、Claude Opus 4.5は有効化後しばらく待ってから新規セッションを立ち上げると使えました。
|
||||
|
||||
## 簡単な使い方
|
||||
|
||||
まぁ普通にPlanモードで実装プランを作ってもらったあと、Buildモードで実装してもらいます。プラン作成中に質問が飛んできたりするので、随時答えたり修正したりしながら続けていきます。
|
||||
|
||||
`ctrl+c`で終了
|
||||
|
||||
`opencode -c`でセッションを継続して開始
|
||||
|
||||
## 所感
|
||||
|
||||
Antigravityのときは使おうとも思わなかった(Gemini 3 Pro Highでもリミット来ないので)Gemini 3 Flashが意外と賢い
|
||||
|
||||
Antigravityより自走力がある
|
||||
|
||||
shift+enterで改行とかはできないっぽい
|
||||
|
||||
Claude Opus 4.5は圧倒的に賢いけど一瞬でプレミアムリクエストの枠を消費してしまう
|
||||
|
||||
Antigravityと比べてGemini 3 Proが遅い気がする
|
||||
|
||||
Claude Opus 4.5やべぇよ!!!!!(コストが)
|
||||
|
||||
|
||||
|
||||
GitHub Copilot Proの枠だけで何かを完成させるのは普通に無理ですね 乞食ばっかりじゃなくてClaude Codeも試そうと思いました。
|
||||
|
||||
Claudeに詳しそうな友人によるとOpusでPlan、SonnetでBuildがバランスが良いらしい(Claude Codeでの話だと思うが)
|
||||
|
||||
MCPサーバーの設定が他と違うので注意
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
---
|
||||
author: usbharu
|
||||
draft: false
|
||||
categories:
|
||||
- 技術
|
||||
date: 2026-01-29T00:21:34+09:00
|
||||
tags:
|
||||
- 開発環境
|
||||
keywords:
|
||||
- 開発環境
|
||||
title: MacBook環境構築2026
|
||||
relpermalink: posts/2026-01-29/
|
||||
url: posts/2026-01-29/
|
||||
decription: MacBook環境構築2026
|
||||
---
|
||||
|
||||
<iframe src="https://misskey.usbharu.dev/embed/notes/ahyv1dij16" data-misskey-embed-id="v1_ai2r4r3797" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
|
||||
<script defer src="https://misskey.usbharu.dev/embed.js"></script>
|
||||
|
||||
去年アイマスにMacBook Proが買えるぐらいお金を使ってしまったので、反省して今年は最初にMacBook Proを買うことにしました。嘘です。
|
||||
|
||||
メモリが高騰しているということで、まだ影響が出ていなかったMacを買いました。最初はMac miniで考えていたのですが、やっぱ持ち運びたいよな…ということで、MacBookを選びました。
|
||||
|
||||
スペックはMacBook Pro(M5) 32GB/1TB です。Airのインターフェースが終わってたのでProにしましたが、流石にいい値段しました。
|
||||
|
||||
まだ数日しか使っていませんが、モバイル系の開発ではメモリの多さが効いてきそうです。
|
||||
|
||||
完全に新しい環境ということで、構築時のメモも兼ねて環境を記しておこうと思います。
|
||||
|
||||
## リスト
|
||||
|
||||
とりあえず入れたものリストです。今後増えたり減ったりします。
|
||||
|
||||
- brew
|
||||
- nvim
|
||||
- LazyVim
|
||||
- lazygit
|
||||
- fd
|
||||
- VSCode
|
||||
- JetBrains Toolbox
|
||||
- Intellij IDEA
|
||||
- Android Studio
|
||||
- Google Chrome
|
||||
- iCloudキーチェーン
|
||||
- DaVinci Resolve
|
||||
- Slack
|
||||
- Discord
|
||||
- ownCloud
|
||||
- shapr3d
|
||||
- zsh
|
||||
- Powerlevel10k
|
||||
- Oh My Zsh
|
||||
- XCode
|
||||
- mise
|
||||
- HackGen_NF
|
||||
|
||||
## とりあえず先人の真似をする
|
||||
|
||||
Macを触るのはほぼ初めてです。というわけでタイムラインでたまたま見かけていた人の設定を真似することにしました。
|
||||
|
||||
といっても尖ったやつは真似せず、自分にあってそうなものだけ試しています。
|
||||
|
||||
### とりあえずGhosttyとmiseを採用
|
||||
|
||||
homebrewというのもインストールしました。よく見かけていたやつですが、自分も使うことになるとは思いませんでした。
|
||||
|
||||
https://brew.sh/ja/
|
||||
|
||||
miseではnode.jsとhugo-extendedとpnpmをインストールしました。管理については今後考えていきたいです。
|
||||
|
||||
WindowsではWezTermというものを使っていたんですが、なんかGhosttyの名前をよく聞くのでとりあえず使ってみることにしました。ゼロコンフィグって最高ですね
|
||||
|
||||
普段はデフォルトのフォントを使っていますが、なんかうまく日本語を表示できなかったので、HackGenフォントをインストールしました。
|
||||
|
||||
コンフィグは
|
||||
|
||||
```
|
||||
font-family="HackGen Console NF"
|
||||
```
|
||||
だけ追加しています。
|
||||
|
||||
## NeoVimなど
|
||||
|
||||
普段nanoを使ってますが、正直なんでもいいのでこれも名前をよく聞くNeoVimにしました。コンフィグの盆栽をする前にやることがあるだろう ということでとりあえずLazyVimの設定を流し込んでいます。
|
||||
|
||||
LazyVimがらみでlazygitとfdを入れました。
|
||||
|
||||
lazyvimの設定は適当にTUIでやったので覚えてません。LSPとLazyExtendみたいなのをいくつか有効化しただけです。
|
||||
|
||||
## Google Chrome
|
||||
|
||||
よくわかりませんがタブの固定をしても一度閉じるとタブが消えてしまうみたいなのでよく使うタブをタブグループに放り込んで代用しています。あとはiCloudアカウントに保存されたパスワードとかを使うためにiCloudキーチェーンの拡張機能をインストールしました。 iPhoneではSafariをメインで使っていたんですが、とりあえずGoogle Chromeメインで使っていこうと思います。
|
||||
|
||||
## その他
|
||||
|
||||
Windowsと変わらず支えています。今のところRosettaはインストールせず、ネイティブだけで頑張っています。
|
||||
|
||||
色々やってるツリー
|
||||
|
||||
<iframe src="https://misskey.usbharu.dev/embed/notes/ahyw9tii3z" data-misskey-embed-id="v1_ai2qxvsf7n" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
|
||||
<script defer src="https://misskey.usbharu.dev/embed.js"></script>
|
||||
|
||||
## 感想
|
||||
|
||||
快適の一言です。
|
||||
|
||||
日常使いや学校で使う分にはWindowsの方が好きかもですが、Webとかモバイルの開発するならMacはいいかもです。組み込み系の開発とか設計とかはまだ試せていないので今後試していきたいところ。不満点はわかっていた事ではあるんですが、ちょっと重いしぶ厚い事ですね。どっちもMacBook Airだと解決しとるやないかい！！！！
|
||||
|
|
@ -1,621 +0,0 @@
|
|||
---
|
||||
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関連のことも書こうかと思ったけどだいぶ長い記事になったので一旦ここまで
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
author: usbharu
|
||||
draft: false
|
||||
categories:
|
||||
- 技術
|
||||
date: 2026-02-09T18:08:54+09:00
|
||||
tags:
|
||||
- Rust
|
||||
keywords:
|
||||
- Rust
|
||||
title: IME用の辞書から子音抜き検索ができるコマンドを作ったよ
|
||||
relpermalink: posts/2026-02-09/
|
||||
url: posts/2026-02-09/
|
||||
decription: IME用の辞書から子音抜き検索ができるコマンドを作ったよ
|
||||
---
|
||||
|
||||
|
||||
## Q. 子音抜きって何？
|
||||
|
||||
A.
|
||||
|
||||
```
|
||||
春日未来(かすがみらい) → ksgmri
|
||||
```
|
||||
|
||||
まぁTwitterとかでえっちな話する時に使われるやつですね
|
||||
|
||||
これを覚えるというか元の名前を思い出すのが苦手なので作ってみました。まぁ作ったのはGemini君なんですが
|
||||
|
||||
## Skltn
|
||||
|
||||
Skeletonから子音を抜いた名前です。
|
||||
|
||||
[skltn](https://github.com/usbharu/skltn)
|
||||
|
||||
Rust製で、手元の環境だと27万行の辞書ファイルを大体30msぐらいで検索してくれました。正直速いのかはわかりませんが…
|
||||
|
||||
ニコニコ大百科の内容をIME用の辞書にしたやつを使うのがおすすめです。
|
||||
|
||||
## 最適化
|
||||
|
||||
当然ですがIME用の辞書ファイルはただのテキストで、普通に検索するとなるとフルスキャンする必要があります。フルスキャンでもReleaseビルドだと意外と速かった(190ms~)んですが、流石にもっと早くできるだろうと言うことで色々最適化してもらいました。
|
||||
|
||||
- メモリマップIO
|
||||
- 並列化
|
||||
- 二分探索→インデックスファイル作成
|
||||
- 早めの検索切り上げ
|
||||
|
||||
ほぼAIが考えた最適化の中で、唯一自分が考えた最適化が二分探索です。50音順に辞書が並んでいる前提で、1文字目を高速に検索できます。ちなみに大して速くなりませんでした。かなしい
|
||||
|
||||
ちなみにインデックスファイルを作成しますが、使ってもあんまり速くなりません なんでや…
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Loading…
Reference in New Issue