磨き込みと出荷準備
動くコードを「完成したプロダクト」に仕上げる
⏱ 想定 ~9 分
01 · 読む
ゲームは動きます。 2 人が出会えて、 tic-tac-toe をリアルタイムに楽しめて、切断もきれいに処理できる。でも 動く と 完成している は別物です。
完成したプロジェクトには、整った UI、何のアプリかを説明する README、デバッグ用のログが残っていないコード、ちゃんとした git 履歴があります。これが side project とポートフォリオ作品の差 —— 他のエンジニアや採用担当者に実際に見せたい、と思える成果物です。
この課は、 90 % の頑張りを輝かせる、最後の 10 % の話です。
ポイントまとめ
- 動くコードと完成したコードは別物
- 磨き込みとは：きれいな UI、 README、デバッグログなし、整った git
- README は、あなたのプロジェクトを見た人が最初に目にするもの
- ここが side project とポートフォリオ作品を分ける境目
02 · プロンプトテンプレート
Claude にゲームの見た目を磨いてもらいます。雑に感じる部分を具体的にフィードバックしましょう。
tic-tac-toe ゲームの UI を改善してください。具体的な要望：（1）記号がマスに現れる際になめらかなトランジションアニメーションを付ける。（2）誰かが勝ったら、勝ちラインのマス 3 つを別の背景色でハイライトする。（3）誰の手番かを示す視覚ヒントを足す —— たとえばステータステキストをパルスさせる、現在の手番の記号の色に変える、など。（4）対戦相手を探している間は Find Game ボタンを無効化し、 loading spinner かアニメーションを表示する。（5）スマホでも見やすいように、盤面が小さい画面でも自動でリサイズされるようにする。
03 · プロンプトテンプレート
プロジェクトには必ず README が必要です。 Claude にこのプロジェクトが何で、どう動かして、どんな技術を使っているかを説明する README を書いてもらいましょう。
tic-tac-toe ゲームのプロジェクトに README.md を作ってください。中身：（1）タイトルと 1 文の紹介。（2）「How to Play」セクション。ゲームの流れ（対戦相手を見つける、交互に打つ、勝ち / 引き分け）を説明。（3）「Tech Stack」セクション。 Node.js、 Express、 Socket.io、そして素の HTML / CSS / JS を列挙。（4）「Run Locally」セクション。手順：clone、 npm install、 node server.js、 localhost:3000 を開く。（5）「How It Works」セクション。 client-server 構成と WebSocket 通信を簡単に説明。簡潔に書いてください —— 500 行の README は誰も読みません。
04 · チェックリスト
次の出荷準備チェックリストを順番に見ていきましょう。ここでの 1 項目 1 項目が、アマチュアの作品とプロの作品を分けます。
- デバッグ用の console.log を全部削除（server.js の connection / disconnection ログだけ残す）
- ゲームの UI がきれい —— 要素の重なり、レイアウト崩れ、プレースホルダのテキストがない
- README にプロジェクトの説明と起動方法が書かれている
- node_modules/ を除外する .gitignore ファイルを作る
- コードに localhost URL がハードコードされていない —— 相対パスでデプロイ先でも動く
- 磨き込み後にゲーム全体の流れをもう一度通しでテストする
05 · 実機演習
git リポジトリを初期化し、最初のコミットを作って、 GitHub へ push します。 Level 4 で学んだ流れです。
06 · クイズ
出荷前にデバッグ用の console.log を消すべきなのはなぜ？
- Server が目に見えて遅くなるから
- DevTools を開けば内部状態が誰にでも見えてしまい、 server ログもノイズだらけになって本当の問題を見つけにくくなる
- JavaScript は production モードで console.log を禁止しているから
- Socket.io が console.log と競合するから
07 · 空欄補充
_____ ファイルは、ほかのエンジニアにプロジェクトが何で、どうセットアップして、どう動かすかを伝えます。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。