Figmaのデザインが完成しました！
完成したのは昨日ですが、ブログを書く力が残ってなかった〜ページ数は少くても表からでは見えない部分(リセットパスワード、エラー、ローディングページなど)で結構作成するものは多いですよね。それに時間切れとそうでない場合の表示の違いなど、実装時にも中々手間のかかるところとか認証やデータ保存が加わるとエラー時や取得待機時の表示も加わってくるので結構根気がいります...
ということで、デザインが一応終わったので現在は環境構築中です。GitHub Copilotを導入しました。久々にcreate-next-appをしたのですが、AI指示用のファイルを作成する初期設定が追加されていました。年に何度かcreate-next-appをする度に新しい設定が追加されているので進化の速さを感じます。storybookの初期設定にもaddon-mcpというAIにStorybook の情報を読み取れるようにしてStoryやテストケースを書いてもらうことができる機能みたいですが、とりあえず入れときました新しい機能はなるべく試しておかないとね
実は1つ前のアプリの制作中、途中まではなかったのですが1つのファイルにいつの間にかエラーが発生していて、そのままになっていました。そのままにしていた理由はAIを使いながらでも中々解決できなかったのと、エラーは出ているもののアプリ自体には何も影響が出ていなかったからでした。ところがそのエラーが今回のアプリでも全く同じ箇所に出てしまいましたそのエラーは、storybookをインストールすると作成されるpreview.tsで、globals.cssのインポートで出たエラーです。エラーは、'../src/app/globals.css’;に、'../src/app/globals.css' の副作用インポートに対するモジュールまたは型宣言が見つかりません。という内容です。TypeScriptのエラーのようです。global.d.tsを追加したり、Storybook/ViteのViteが影響しているんじゃないかと考えたり(最近はStorybookをインストールすると自然とViteがくっついてきますまたAIに聞きながらでも解決ができない状態がしばらく続いていましたが、ついに正体が判明しました！
npx tsc --noEmitというコマンドがあるのですが、TypeScript の型チェックだけを実行し、JavaScript ファイルは出力しないというものです。型チェックだけしたい時に使用します。このコマンドを実行するとエラーが出ませんでした。つまり、プロジェクト内には型エラーは存在しなかったのです。でも型エラー表示がされているのはなぜか？答えは、VS Codeが使うTypeScript と、プロジェクトが使うTypeScript が違うバージョンだったことが原因でした。VS Code側のTypeScript 6.0 系は不安定な部分があり、それがエラーを起こしていました。エラーはVS Code内のみのためアプリにも影響は現れていませんでした。その後、プロジェクト側5系に合わせるとエラーは消えました。npx tsc --noEmitが成功している場合、TypeScriptのバージョンが一致しているかを確認する。実務でもかなりよくある確認項目みたいです。Github Actionsの項目に追加しようと思います。VS CodeでプロジェクトかVS Code側かどちらのバージョンを使うのか選択できるみたいですが知りませんでしたVS Codeにもバージョンがあるなんていうことも知らず...
今日はこんなとこで、もうじき朝日が上がりそうなんで寝ます