きっかけ

AmazonのセールでKeychron B1 Pro ウルトラスリムワイヤレスキーボード（US版）を買った。

それまではエレコムの5,000円くらいのフルサイズキーボードを使っていたが以下の不満があった。

• backspaceを押そうとしてうっかりInsertに触れ、VS Codeが上書きモードになってめちゃくちゃになる
• ノートパソコンのような薄くてパチパチした打鍵感のほうが好き
• 机が少し狭い

買い換えた結果、上記の条件をすべて満たしていて非常に満足しているのだが、ちょっとイキってUS配列を選んでしまった。記号を入力しようとするたびに「どこだっけ」と手が止まることがある。

せっかく新しいキーボードを買ったので、これを機にホームポジションを徹底し（要件追加）、US配列にも早く慣れたい。

とはいえ、寿司打をひたすら続けるのはあまり好みではなくどうせ練習するなら、記号も交えながら効率よくやりたい。......コード書くか。

じゃあ何やんの？

コード書くにしても作りたいものも特にないし競プロは頭おかしくなるので、自作サイトのリファクタリングをすることにした。こっそりしこんだログによると週に約5回訪問されているので、いい感じに使いやすいようにしたい。 うっすら直したいなーというところが以下の点。

• 楽曲データをローカルに直書きしているが、数が膨らんできてエディタ上で確認するのがしんどくなってきたのでDBに移してデータ管理を分離したい
• 配色を白黒基調にしろと言ったきりデザインはcodexくんにすべて任せたので、いい感じに見直したい
• Tailwind CSSのクラスがJSXに大量に並んでいて、見た目の変更箇所を追いづらい

みたいなところで、俺の設計が良くなかったのと9割バイブコーディングのせいで手が出しずらくなっているのが現状。知らん奴がかいたCSSとかいじりたくないし。と、いうわけでリファクタ通り越してリライトしようと思います。

もうはじまってる！

昨日（26/07/26）からぼちぼち始めた。 構成イメージはこれ

リライト後の構成イメージ

/login
├── 一般パスワード
│   ├── /home
│   │   ├── /songs    旧・楽曲詳細
│   │   └── /djs      旧・DJ詳細
│   └── /ranking      旧・Top 100
│
└── いい感じの認証ライブラリとロールベースの認可
    ├── 一般ユーザー向けの全ページ
    └── /admin（仮）
        └── CSVインポートなどによる楽曲DBの更新

正直機能的になそんなに変えず、メンテナンスのしやすさを高めようとしている。（まぁ全部AIにまかせればそんなもの気にしなく良いのですが、、、） 見た目の変更的に一番デカいのは今まで詳細テキストリンクからモーダル表示していた箇所をページ自体を切り替えて表示しようとしているところ。特に意味はない。 あとは引継ぎ（そんなことが起こるのか？）でしやすいように管理者モードを追加しようとしている。

既にちょっとコード書き始めてて、技術構成はこれ

技術構成

• コンセプト
  • React使いて～。じゃあNext.jsで。Next.jsといったらVercelっしょ！
  • 認証、DB操作、CSVインポートなどのバックエンド処理も必要になるが、Java分かんないので全部TypeScriptでやる（王）。Server ActionsやRoute HandlersでなんとかするからNext.js 1本でイク。
  • なんと、タイピングしたいがためにAIによるインライン補完はなし

進捗

• とりあえず /home 雑な骨組みをやった
  • 検索窓
  • 検索結果に応じて表示される表（MSWでAPIのモック作って確認している）
• /home には表示しないけど今後の遷移先ページに出すようにパンくずリストを作った。

• こういう try-catch-finally とかマジで真心こめて書いてる

  useEffect(() => {
    async function getSongsInfo() {
      try {
        const response = await fetch('api/songsInfo');
  
        if (!response.ok) {
          setErrorMessage('予期せぬエラーが発生しました');
          return;
        }
  
        const songsInfoData: SongsInfoType[] = await response.json();
        setSongsInfoList(songsInfoData);
      } catch (error) {
        console.log(error);
        setErrorMessage('楽曲データの取得に失敗しました');
      } finally {
        setIsLoading(false);
      }
    }
  
    void getSongsInfo();
  }, []);
  

今後

• そんなに複雑な処理とかないと思うけど、定期的に進捗の記事かいてナレッジ蓄積したい（願望）
• 完全に余談だが、git操作ももちろん自分で打ってる。一周回ってgit commit --amend --no-edit がアツい