土曜日。9:00起床。11月なのでこれはもう間違いなく秋だ。
3連休と言われても特に予定を作ったりはしないし、一方でやることが無いかと言われればやるべきことは無数に存在する。勤め人ではなくなって初めてその事を知ったと思う。自由というのはすなわちそういう事だ。より時間に支配されている事を自覚する。

今日からStorybookを使ったコンポーネント開発を学びはじめる。チームに入れば否が応でも使うかと言うと実はそんな事もなかったりする。チームに入ると、大体のケースでそんなコンポーネント単体での実装など求められたりはしないのだが、AIにコンポーネントのコードを書かせると話は変わってくる。
非常に高速で便利ではあるのだが、もちろん見た目を作るわけではないので、こちらでスタイルは調整していく事になる。その時にStorybookが便利だと分かった。
Storybookのカタログに登録されているコンポーネントを見ながらスタイルを整えるというプロセスが非常に効率的で仕事も実際にページ上やアプリ上に配置してやるよりも丁寧な仕事が出来る。
ストーリーの作成ファイルに直接コンポーネントテストのコードを実装出来るのも楽である。

Storybook: Frontend workshop for UI development
https://storybook.js.org

というわけで早速取り掛かったのだが、テストの構成で苦戦した。どうしてもVitestでのユニットテスト時にStorybookのテストランナーも走ってしまう。Storybookのストーリーに書かれたテストはStorybook上でだけ走らせたいのに。このパターンを作るのに実はかなりの時間を割いた。

結局は逆転の発想で、Vitestのプロジェクトにユニットテストだけを対象にするプロジェクトを追加しておいて、ユニットテストのスクリプト、例えば npm run test などには vitest run --project=unit と設定することで解決した。
つまりStorybookの方を省くという発想ではなく、ユニットテストだけに限定するという発想でなければ実現しなかったという事である。これは多くのケースで使える考え方だなと。

夜、食後に軽くウォーキング4km。4kmでも意外と足にこたえる。歩くルートを変えただけで、4kmが6km歩くよりもキツく感じたりもする。人間の脳は本当に不思議だ。

日曜日。9:00起床。ドジャース、やりましたね。
起きてから早速ワールドシリーズ第7戦。大谷の先発と知って、もちろん朝からテレビにかじりついて観戦する。本当に「こんな事があるんだなあ」とあまりにも劇的な試合で、その事に感動してしまった。MVPを獲得した山本由伸がマウンドに上がる姿に興奮しない人間がいるのだろうか？というほどに面白い。

延長10回。終わったのが14:00。ゲームを堪能して心が浮つきながらも今日も仕事に取り掛かる。昨日、ご飯を食べながらノンビリYouTube見てると、CursorとClaudeの新しいモデルの組み合わせが凄いという動画を見つけた。
今日さっそく使ってみる事に。昨日組み上がったNext.jsのスターターキットを早速使って、いろいろとCursorの機能を設定。VSCodeをフォークして開発したとあるが、確かにVSCodeな見た目だが、使い勝手は大きく違う。AIからの提案がワンテンポ早く提供されてくる感じだ。完全に比較したわけじゃないからなんとも言えないが、なるほど、確かにAIコーディングをする時はこちらの方が最適化されているかもしれない。

Cursor: AIで最高のコーディング体験
https://cursor.com/ja

さらに良かったのはClaudeのSonnetモデル。バージョンは4.5になっていたが、こいつがかなり凄い。凄いというか自然だ。コードが。これまで触ったどのAIモデルよりも人間が書くコードに近いとすぐに分かる。
すべてのチャットが日本語に対応しているのはもちろんだが、コメントの書き方がとても秀逸で、しかも丁寧だ。Reactのコンポーネントを書かせたのだが、まずコンポーネント内にあるすべての関数にコメントが書かれている。そして使われているuseEffectにも同様にコメントが書かれ、依存配列に登録されている変数やステートがしっかりそのWatcherの役割を果たすものに限定されているので、人間が読んで分かりやすいコードになっている。
そして他のAIではほぼ発生していたuseEffect内でuseStateのセッターを呼び出していて無限再帰に陥るパターンも解消されている。つまり”要求された通りに動作すればそれでいい”になっていないのだ。
人間が発想する順序に基づいてコードが書かれている。これはたしかに凄い。
ただ、Sonnet特有のミスなどもある。importされたモジュールのパッケージ名になぜか「@」が含まれていたり、テストが通っていない状態のままで完了を出してきたりなどだ。

正直、これはもう決定かもしれない。
自然言語でのドキュメントを書いたり企画を作ったり調査をしたりといった事はChatGPTを使う事になるだろうが、開発の仕事はClaude Sonnetが一番だろうと、そこにはCodexやCopilotとは別次元と呼べるレベルで明らかな差ががあった。明日はどのエディタで使うのが一番ハマるかテストだな。
Cursorの方は1日使ってみて「気に入る」というレベルではなかった。WebStormのようなハマる感じではないし、これが最高か？と問われるとちょっとボタンが小さすぎてツールを使っている感触は弱いなという感じ。WebStormなら年間ライセンスは¥6,600で月に¥600、AIを含めても¥1,800弱だ。一方でCursorを使うと月に¥3,300、なんと2倍近くかかる。検討の余地はあるだろうと。

月曜日。6:30起床。朝からウォーキング6km、ヘトヘトで即2度寝してしまう。
なんとなく感じていた事だが、朝歩いた方がペースが速まる気がする。今日は気づかず1km9分を切るペースで歩いていた。5km超えたぐらいで「あれ？足の付け根が少し痛いかも、、、」と感じてようやく気がついた。こういう気づかずにやる無理には気をつけないといけない。浪費とかの元である。

明日は待ちに待った、本当に待ちに待った詩織ちゃんのビルボードライブということで、いまいち仕事に身が入らなくなる。去年、どうしてもチケットが手に入らなかった公演。どうしてもテンションは他とは異なってくるものだ。
とりあえず進めないといけない事だけを進めていく。この土日の2日間、Cursorを触り少しエディタを乗り換えた方がいいかもしれないと感じているので、そこまで他のエディタと異なるのかなとVSCodeとWebStormのAI機能も一通り納得がいくまで使ってみる事にした。これを今週いっぱいまでやって、次の案件で使うエディタを決める。

今日はVSCodeにCodexの拡張機能を入れてみた。またClaude Codeもインストールして使ってみる。印象としてはやはりClaudeに軍配が上がる。まず何よりもCodexは頻繁にコードを間違える。一度、すごく簡単なコード（Tailwindに設定されているテーマの色をhexで取得するというだけのユーティリティ）を依頼したのだが、こんなのでもまったく動作しないコードを提案してきたので、逆に驚いてしまった。関数を呼び出すと普通にnullを返してくるのだから、これはちょっと使えない。
一方、Claude Codeは優秀だ。プロンプトに対する返答もそうだが、非常に丁寧で優秀。こちらがお願いしたのは単に設定されたテーマカラーを取得したいというだけのものだったが、カラーコードを変換する関数やらカラーごとにシェードの一覧を取得する関数やらまでいたれりつくせりで用意される。
昔、こち亀で優秀なロボット警官とまるでダメなロボット警官の話があったが、なるほどこんな感じかと。OpenAIはSoraの開発など放って置いて、まずはこういうところのアップデートをしていった方がいい。

どうやら、自分の使い方で言うと書きたいコード、作りたいものがハッキリした上でコーディングに取り掛かるのでClaudeの方が付き合いやすい。さすがに、どんなにサイトまるまる生成するよ！と言われても、まるで動かない状態のコードをレビューする暇はないのだ。
だんだんAIとどう付き合っていったらいいのかを掴めるようになってきた。正直ここまでくるのにも半月ぐらいは費やしている。実際、思い通りに使いこなせるようになるのに3ヶ月ぐらいは取り組む必要があるなという事も分かってきた。
これもだいたい人と付き合うのと同じである。恋でいえば「今、一番ドキドキする時期」だな。

火曜日。6:00起床。早起き＆昼寝が板についてきた。
なぜ早起きしているのかといえば、ウォーキングは朝にやろうと思ったからだが今日はライブがあるのでお休み。出来るだけ眠気を誘う行動は避けたい。
昨日の続きで、AIコーディングをいくらかやる。今はStorybookを使ったコンポーネント開発を想定していろいろと試しているのだが、とにかくClaude Codeが優秀だと昨日書いたもののちょっとした事もClaudeを使うのはなんだか利用トークンがもったいないなと思い、コンポーネントのスタイルの調整などはCodexの方にやらせてみることに。思い通りとはいかないものの、完全に間違ったコードなどは書かない。
自分はReactでもVueでもUIフレームワークを使っていて、どうやってスタイル調整したらいいのだろう？とよく躓くのだが、AIはフレームワーク内のコンポーネントの内容をソースを見て解析して、どういうスタイルを当てればどこが変わるのかを実例で教えてくれると考えれば、これはかなり役に立つ。今までは1時間2時間はゆうにかけていたところだ。

そんな下調べをやってる間に出かける時間に。21:00開演だが物販は18:30には開けるという事なので、その時間に間に合うようにいざ横浜へ。18:30ちょうどに馬車道に着く。ちょっと不安だったが、どうやら一番乗りだったようで問題なくグッズは買えた。
それにしてもいい建物だなあと、元々はなんの建物だったのだろう。

開場まで1時間半もあるので、夜の横浜を散歩した。馬車道からみなとみらいを通って野毛のあたりまで。これだけでも1.5km弱あるので驚いた。若い頃はこれぐらい平気で歩いた記憶がある。若者なのによく歩く人間だっのかと思い出した。
ちょっと美味しそうなラーメン屋があったので、今日はここで食事することにした。惹かれたのはトリュフの香りのスープと3種類のチャーシューが楽しめる。もちろんちょい高い。一杯¥1,500のラーメン。
実際はトリュフというよりもポルチーニの香りだったように思うが、確かにメチャクチャに美味い。ポルチーニソースのパスタをラーメンにしたような味。これで¥1,500ならアリかなと思った。ちゃんと繁盛もしている。

ラーメンを食べて元気が出た＆血糖値の上がりを感じたのでそこから馬車道までまた歩く。ちょうど20:00の開場時間だ。
初めて入る開場はやっぱり少し緊張する。1時間会場の雰囲気を楽しんで、ついに詩織ちゃんのステージだ。明日もあるのでライブの感想は明日書くことにしよう。
とにかく驚くほど満足度の高いステージ。1曲1曲が渾身か、というレベルに到達する演奏と歌唱で実に驚くべきライブだった。こんなのを実に300人程度のお客さんだけに見せるというのだからその事にも驚く。詩織ちゃんは武道館アーティストだぞと。
80分たっぷり歌ってくれてあっという間に時間が過ぎた。明日も観れるのかよ、これ。

水曜日。6:30起床。昨日のライブの余韻がすごくて今日も同じものを見られるとか信じられない。
仕事に取り掛かる気分ではなかったが、今日のビルボードライブは18:00の回なので少し早く出なくてはならない。思いの外早く起きたので先にStorybookの学習から取り掛かる。

今やってるUdemyの講座の質が著しく低い。画面にエラー出したまま次のチャプターへ、なんて講座はさすがに初めて見た。流石にコードをレビューしてからそれを他人に見本として見せろよ。こんなのいくら見たって意味はない。
結局、Storybookとアプリの状態管理の切り分け部分は自分で新しいライブラリを使って実装してみることにした。使ったのはJotai。ゲッターとミューテーションの扱いと使い分けがいまいちよく分からない。明日、もう少し触ってみる。

17:00には馬車道に着くように仕事場を出る。東横線で35分ほどで到着。横浜、みなとみらいと比べると極端に降りる人は少ない。そういう街だ。横浜のあの町並みの外れが馬車道という事だろうか。
駅から出るとすぐにビルボードライブ。駅直通というところがいい。来週の幕張が面倒になるほどに楽ちんだったりする。

2日目という事もあって、緊張しないでお店に入るものの昨日のカジュアル席とDX席では扱いがまったく異なる。何しろ入店前にオーダーを聞いてくれる。席に着くとすぐに食事とドリンクが運ばれる。これは凄い。まだ夕方ということもあり、軽いものをとハンバーガーを頼んだ。それでも結構なボリュームがあって味もいい。和牛のパティと輪切りにしたトマトのフリッターが気に入った。
詩織ちゃんのライブでなくてもまた来たいなと思うホスピタリティが凄い。

食事をして、トイレに行くとすぐにステージがスタート。これまた昨日とは観え方も音の聞こえ方もまったく違う。今日は詩織ちゃんの声がこれでもかってぐらい響くように。
昨日のDay1からセットリストに変化はないが、昨日感激したところで今日はさらに感激が大きかった。今日の詩織ちゃんは純白のドレス姿。この白の衣装でアコギを鳴らしながらベルベットの森を歌う姿が本当にカッコいい。オープニングの涙目のアリスから、演奏される1曲1曲の歌唱ディレクションと演奏アレンジが作り込まれていて、一体いつ準備したんだろうと不思議なぐらい訓練されたステージを感じる。

ベルベットの森や黄色、PLAYでは力の入ったカッコよさを感じさせる声を聴かせるかと思えば、桃源郷やThis Loveではドラムが柏倉さんという事もあるのか、乗りに乗ったグルーブ感が素晴らしい。君100と泣くな向日葵では場にそぐわず？大いに盛り上げる。
珠玉の演奏だったのはSweet Wanderer。とにかく詩織ちゃんの歌声で作り込まれたバンド・サウンドとのマッチングが素晴らしい。優しくも圧倒的な声の品の良さ、楽曲の持つリズムとメロディの良さが際立って、これこそビルボードのステージにふさわしいものになっていた。あれは何度でも聴きたいなと。

アンコールは詩織ちゃんのピアノの独奏から始まる「マリンブルー」。ピアノのメロディ、こんなにいいメロディだったのかと気づき思わず涙が出そうになる。サビが歌われる中、バンドメンバーが一人ひとりステージに上がり2番からアンサンブルで演奏される演出がこれまた感動的だ。
マリンブルーはとにかく詩織ちゃんの歌の上手さ、声を使う上手さに舌を巻くという曲だが、こうして演奏されるとすべての楽器が際立つように作られているんだと、その気付きを使った演奏に心を打たれる。

今日のステージも本当に期待以上、お値段以上で楽しかった。心の底から「こんな素晴らしいタレントのファンをやっていたんだ」と痛感させられるステージで、早くも来年の公演に期待がかかる。
どうやら昨日のフードの売上がこれまでのビルボードライブ横浜の新記録だったらしく、これは来年もまたお声がけをいただけるだろうと。

正直、これだけのものを見せられると、どうしても他のメンバーへの期待も持ってしまう。ももクロはまだまだやるべきこと、引き上げるべきことが多い。正直、キャパとか人気とかはどうでもよく、ひたすらに「タレントとしてどこまでのものを見せるグループになるのか」を楽しんでいたいなと一層に感じさせる詩織ちゃんのステージだった。

木曜日。5:00起床。いよいよいつ起きていつ寝ていつ起きるのかが自分で分からない。
ライブ明けの平日。詩織ちゃんのビルボードライブは昨日まで、今週の週末はファンクラブイベントで来週は五木ひろしのフェス、氣志團万博とももクロラッシュだ。
それが終わればついに次のチーム案件に入る。1ヶ月間を目安にした自分の少し長めの休憩期間もそろそろ佳境である。

今日もまたStorybookの学習。今日はReactの状態管理してるデータを適用したコンポーネントをどうやってStorybookのコンポーネントのサンプルとしてカタログ化するかの理解を深めた。
使ったライブラリは初めて使うJotai。名前のとおり、日本人の開発者が作った軽量の状態管理ライブラリである。

Jotai, primitive and flexible state management for React
https://jotai.org/

特徴として、状態管理のStateにあたる部分をAtomという概念を用いてReactのuseStateフックと差別化させやすくすると共に同じように使えるようにする考え方で作られたようだ。アプリの実装側は状態管理のプロセスを考えず、アプリ全体に共有させるグローバルな状態を、ただの値として扱うのか(getter)、更新させるセッターとして扱うのか(setter)だけを考えて実装する。
Atom自体の定義は、getter関数を同時に設定することが出来るようになっていて、stateの利用時にそのgetter関数が走るという仕組みである。setter関数はただ値を更新するだけでなく、payloadを渡してそれを元に再度計算させて値を更新させることが出来るようにもなっている。

ああなんだこんなことかと思うのだが、使ってみるとこれがなかなか分かりやすい。これまでのstateとaction dispatchを逐一使い分けていた頃とは一線を画す手段である。
非同期なデータ取得もgetter関数の中に処理を入れておけば、データの取得後にコンポーネント側のレンダリングが自動的に行われるという事になるからである。useStateと同じ機能を提供できているとすぐに分かる。
ちなみに、Storybookの方はコンポーネント内で使用しているAtomに初期値を注入する事でstateの分離が出来た。これもまた分かりやすい。VueにおけるPiniaの存在になるかもしれないと思った。

夜になってウォーキングに行っていない事に気がつく。今日は中目黒から五本木に向かうルートで6kmウォーキング。時間がすぎるのが早いなあ。もっとシンプルに習慣をこなすようになっていかないと何も達成できないぞ。

金曜日。10:30起床。1日中、掃除をしていた。
いい加減にもう秋だと認めなければならない。秋が終わればすぐに年末だ。
というわけで仕方がないながらも冬に向けてアトリエの掃除をはじめる。ちょうど次の案件の合間なので、仕事場周りをスッキリと一新させるという目的もある。

掃除をしていると置き忘れたままのあんなものやこんなものを思い出す機会に巡り合う。今回もデスクを掃除しているだけで、そういえばWindowsのラップトップ用にHDを載せられるドックを買っていた事を思い出した。正直、一度も使った事はない。いつもラップトップに接続じたいはされているのだがそこからデータを取り出したり保存したりはした事ないな。たしか4GぐらいのHDを入れていたはずだ。
あとSDカードも挿せる。SDカード自体は使うケースがない。

恐ろしい話だがこれが現実だ。道具というのは相当に意識しないと、ほとんど買った意味がなくなってしまう。こうして打ってるキーボードだって、たしか4年ぐらい前に新しいキーボードを買ったはずだが、慣れる前に打ちやすい前のRealforceを使う必要が出てきて、そこで片付けたままである。既にどこに仕舞ったのかも忘れてしまった。ああ、恐ろしい。

一応「人も同じだよ」と戒めているつもりだ。

とりあえず1階の掃除は一通り済んだので、夕方にまた6kmのウォーキング。今は五本木の方を回るのがブームだ。三茶より人が少なくて歩いていて気持ちがいい。
帰ってきて明日の準備を済ませたらようやく仕事に取り掛かる。Storybookの学習を一旦終わらせた。Next.jsでの活用手段はマスター出来たので、次は同じノウハウをNuxtアプリにも適用する実験をやろう。これは日曜から。

土曜日。7:30起床。毎年恒例のAEイベント当日である。今日も昼・夕2公演で場所は幕張。
起きて、朝風呂に入り、すぐに出かける。幕張だと中目黒から1時間15分、そこから徒歩10分なのでなかなか遠い。さいたま新都心よりも時間がかかるので、実は幕張メッセはあまりイベントをやって欲しくない会場だ。

とりあえず10:50には到着して物販会場に向かうと、なんと物販が閉まっていた。再開は12:00からだというので、とりあえず1部が始まる前にグッズを購入するのは諦めた。
いつも寄るのはホール5の前にあるデイリーヤマザキ。ここに売ってるフレンチトーストがすこぶる美味しい。もう何年ここでこれを食べているかは分からないが、とにかくいつもこれで腹ごしらえをしてからライブに行く。

ライブの感想を書こうと思ったのだが、正直1部がどうしようもない内容で文字に起こすのも腹ただしい。2部はちゃんとももクロらしさが際立った素晴らしい内容だっただけに本当にもったいないことをしたなと思う。
イベントの観客というのは、それこそどんな人が来ているのかが分からない。だから少なくとも「期待しているものか、またはその期待を上回るほどに新しいもの」を提供しようという姿勢で臨んでいただきたいものである。本当にこの日を楽しみにして、はるばる新幹線に乗って来ている客もいるわけだ。このライブを見るために5万円6万円を惜しまずに払っているのである。
それに少しでも応えたいと思ったら、少なくとも「ももクロのライブ」は見せる事が前提になっていなければならない。「ももクロ見たさにやってきたお客さんが筋トレでへばっている姿なんて面白いでしょうw」なんて思っているんだろうが、それはお前らが金を払って誰かにやってもらう事だろうが。お前らが見たいだけなんだから。
「ライブはおまけ」なんて発想はあり得ないのだ。ライブを見る事に金を払っているのだから、まずはそれが見られる事が前提である。自分たちはお金をもらってそれを売っているという姿勢を絶対に忘れてはいけないという事を思い出すような機会だった。

日曜日。5:30起床。日曜日にトイレ掃除をするとか、会社員やってた頃を思い出す。
今日は運動を控える代わりに早起きを敢行してAIコーディングに取り組む。単に昨日のイベントでヘトヘトになってしまっただけなんだが、それでも一応”今日一日の目標”を持って取り組む事は大事である。

金曜日に出た課題としてNuxt（Vue）アプリの開発環境をブラッシュアップしたいと考えた。Next.jsの方のスターターキットを作ったので、Vueの方も一旦Reactのそれと同じ状態まで持っていく。
AIと一緒にプロジェクトを進めると、なんとなく得意な事、不得意な事というのが存在するのが分かって面白い。NuxtのUIフレームワークには公式のNuxt UIを初めて採用してみたのだが、世の中は圧倒的にVuetifyが用いられているせいか、AIはNuxt UIのコンポーネントを触るのが苦手らしい。

Nuxt UIのコンポーネントはTailwindCSSを利用しているので、大方の見た目はTailwindのclassでカスタマイズできるようになっているのだが、CodexでもClaudeでもTailwindを使わず、構わずコンポーネント上の<style>内で強制的(!import多様)でスタイルを作ろうとする。
これはあまりにNuxt UIに関する情報がネット上に無いからだろうと思われる。
普通に考えればVueのSFCでコンポーネントを作ろうと思えば、そのコンポーネントファイル内の記述だけで完結する形が望ましいわけなので、実際はAIのアプローチの方が正しい。Tailwindを使うと見た目の記述がそのコンポーネントのclassに記述するスタイルと、Tailwindのテーマ変数に使用されている変数の2つに見た目の設定が分かれてしまうので、関心の分離のパターンに沿わなくなる。

つまり、プログラミングの手法からすれば、Nuxt UIの設計思想の方が間違っているのだ。この間違いをAIは前提に出来ない。あくまで王道のパターン、つまりネットに溢れているパターンを前提にコードを提案してくるというわけだ。
この辺、AIのコードレビューだとどう判断するんだろう？試す価値はありそうなので近いうちにやってみたい。

16:00になってももクロのラジオタイム。今週もまた面白いなあ。もうこれは終わる事がないのではというぐらいももクロのフリートークは面白い。
ラジオが終わって数時間の仮眠。その後でトイレ掃除をした。ピカピカになったのはいいのだが、便器の不具合を直さずに11月まできてしまった。もう引っ越すまでこのままでいいかな、、、と思い始めている。修理を呼ぶのが面倒だし、そもそも直るのかどうかも分からない。タンクの蓋のスキマから水が漏れるという症状なのだが。