🧭 このアプリ、どんなアプリ？
簡単にいうと、「成長記録 × スキル管理 × キャリア設計」が1つにまとまったキャリア支援ダッシュボードを作ろうとしています。
その中の中心機能のひとつがこちら👇
🗂 ログ記録機能（MVP）
毎日の作業や学習の内容（使った技術、作業時間、学びなど）を記録
キャリア目標に関連づけて保存
将来的にはSNS投稿文の自動生成や、ポートフォリオ連携も可能に
今日はその記録フォームのフロント部分を構築していました！
✅ 今日やったこと：
npx create-next-app でプロジェクト作成（App Router構成）
TailwindCSS（v4）導入 → 書き方の違いに戸惑いながら対応
npx shadcn@latest init でShadcn UI導入
shadcn add button/input/textarea/select でUIコンポーネント追加
/log/new に記録フォームを構築！
保存ボタンで入力内容を取得し、console.log() に出力される仮保存まで完了！
console.log("📝 ログ送信データ：", Object.fromEntries(new FormData(form).entries()))💥 ハマったポイントまとめ：
Shadcn UIの @shadcn/ui/styles を読み込もうとしてビルドエラー
Tailwind v4の @tailwind base 記法が廃止 → @import に変更が必要
theme.tsx で next-themes を使うためのインストールを忘れてクラッシュ
layout.tsx に <body> クラスがなくてスタイルが適用されない
formにイベントハンドラを渡しただけで「Client Componentにしろ」エラー
🧠 教訓：「ReactとTailwind、簡単そうで深いぞ…！」
🔧 明日以降やりたいこと：
Supabaseに接続して、フォーム送信内容を保存できるようにする
ChatGPT API連携で、SNS投稿文を自動生成できるようにしたい
もしくは、一旦Shadcn UIを外して、TailwindCSSだけでUIを組んでシンプルに進める案も検討中
📣 今日のまとめ：
「記録フォームが完成した」ではないけど、
「保存処理のベースができた」ことは、間違いなく前進。
見た目だけでなく、保存・連携・活用まで一貫して設計することの重要性を実感した1日でした。
キャリアログ、じわじわ進めていきます💪
それでは、また次の実験で！
#100日チャレンジ #キャリア支援 #NextJS #ShadcnUI
#Reactで学ぶDX #TailwindCSS #ログ記録アプリ
#業務効率化 #学習可視化 #DX実験記録