第5章 開発環境とCLIの入口

Slide 01. 手元で動かす入口を整える

Chapter 5では、これから使うローカルの作業場を整えます。ローカルとは、自分の手元のPC上、という意味です。アプリを起動する、ファイルを探す、ログを見る、止める、詰まった状況を記録する。この基本動作ができると、後のGit、API、フロントエンド、テストの章に進みやすくなります。

Slide 02. この章で持ち帰ること

この章で身につけるのは、手元で動かし、観察し、記録する流れです。どのディレクトリで、どのコマンドを実行し、何が出て、どこで止まったか。ここを残せると、自分でも振り返れますし、メンターにも相談しやすくなります。全部のコマンドを覚えなくても大丈夫です。見る順番を身につけます。

Slide 03. Part 2の入口

ここまでの章では、学び方、価値の見方、AIの検証、チームへの伝え方を扱いました。ここからは、実際に手元の環境でアプリケーションを動かします。画面が表示されるか、ログに何が出るか、変更したら何が変わるかを見ます。第5章は、その入口になる章です。

Slide 04. 開発環境は再現性の土台

開発環境は、コードを書く場所というだけではありません。同じ手順をもう一度たどれるようにする土台です。自分だけがなんとなく動かせる状態だと、前章で練習した相談文にも材料を書きにくくなります。どの場所で、どのコマンドを実行し、どんな結果になったかを残すと、本人とメンターが同じ状況を確認できます。

Slide 05. プロジェクトルート

プロジェクトルートは、作業を始める基準の場所です。ルートは根っこという意味で、プロジェクト全体を見渡す出発点だと考えてください。多くのコマンドは、どのディレクトリで実行したかによって結果が変わります。まず現在地を確認し、プロジェクトルートにいるかを見てから作業を始めます。

Slide 06. ファイルとディレクトリ

プロジェクトに入ったら、すぐコードを書き始める前に構成を見ます。まずREADMEで起動手順や前提を確認します。次に、必要なライブラリを書くファイルと、アプリのコードが入った場所を探します。余裕があれば、テストや設定ファイルも見ます。最初から全部覚える必要はありません。

Slide 07. 相対パスと絶対パス

パスは、ファイルやディレクトリの住所です。絶対パスは、PCのいちばん上の階層からたどる住所です。相対パスは、今いる場所から見た住所です。たとえば同じ src/app.js でも、今いる場所が違うと指しているものが変わることがあります。コマンドの対象を間違えないために、現在地とパスをセットで見ます。

Slide 08. ターミナルの基本

ターミナルは、PCや開発ツールに文字で命令を渡し、結果を受け取る場所です。CLIは Command Line Interface の略で、文字で操作する入口という意味です。たとえば ls -la は、ls がツール名、-la が表示を変える指定です。まずはコマンドを部品に分けて読みます。

Slide 09. 出力と失敗の見方

コマンドを実行すると、結果が表示されます。標準出力は、普通の結果です。標準エラーは、エラーや警告が表示される場所です。終了コードは、コマンドが成功したか失敗したかを数字で表すものです。最初は名前を暗記するより、何が普通の結果で、何が失敗の手がかりかを分けて見ることが大切です。

Slide 10. 読み取り系コマンド

最初に慣れるのは、見るだけのコマンドで十分です。pwdで現在地、lsで一覧、cdで移動先を変えます。ファイルの中身はcatやhead、検索はrg、ツールの場所はwhichで確認します。迷ったら、まず壊さずに読める操作から始めます。

Slide 11. ランタイムと依存関係

アプリケーションを動かすには、コードを実行する土台と、追加で使う部品が必要です。ランタイムは、コードを動かす土台です。Node.jsなら、JavaScriptを手元で動かせます。依存関係は、アプリが使うライブラリです。バージョンが違うと動かないことがあるので確認します。

Slide 12. ローカル開発サーバー

ローカル開発サーバーを起動すると、自分のPCの中でアプリを確認できる状態になります。localhostは、このPC自身、という意味です。ポートは、同じPCの中で複数のサーバーを区別する番号です。画面が表示されたら、URLとポート、起動コマンド、ログをセットで記録します。

Slide 13. プロセスと停止

開発サーバーは、起動したあと動き続けるプロセスです。プロセスは、PC上で実行中の仕事だと考えてください。使い終わったら、ターミナルで止めます。よくある停止方法は Ctrl キーと C キーです。止め方が分かると、前のサーバーが同じポートを使ったままで、次の起動が失敗することを防ぎやすくなります。

Slide 14. ログを読む

ログは、ツールやアプリが何をしたかを残す記録です。起動成功のURL、アクセスの記録、警告、エラーが出ます。エラーを見るときは、最後の行だけでなく、最初に失敗した場所を探します。全部をすぐ理解できなくても大丈夫です。実行したコマンドと、出たログを残すことから始めます。

Slide 15. エディタの役割

エディタは、文字を入力するだけの道具ではありません。プロジェクトルートを開くと、ファイルを探す、エラーの場所を見る、変更前後の差分を見る、といった作業がしやすくなります。まずは検索、診断表示、差分表示の3つに慣れます。エディタは、コード全体の中で今どこを見ているかを分かりやすくする道具です。

Slide 16. よくあるエラー分類

ローカル実行のエラーは、種類に分けると調べやすくなります。大きくは、場所の問題、道具の問題、設定の問題です。場所が違う。必要なツールやライブラリが入っていない。バージョンやポートや環境変数が合っていない。こう分けると、次に見るコマンドやファイルを選びやすくなります。

Slide 17. 悪いログと良いログ

動きませんでした、だけでは、相手は状況を再現できません。相談しやすい実行メモでは、実行した場所、コマンド、期待した結果、実際の結果、表示されたURLやポート、ログを書きます。最後に、何を見てほしいかを添えます。きれいな文章でなくても、あとから同じ手順をたどれることが大切です。

Slide 18. AIにログを読ませる

AIは、エラーログの要約、原因候補の整理、次に見る観点の提案に使えます。貼る前に、APIキー、トークン、個人情報がないかを確認します。実行前に、提案されたコマンドが何を対象にしているか、ファイルを消さないかを確認します。AIの答えは、採用前に自分で確かめる仮説として扱います。

Slide 19. 演習1 環境確認

最初の演習では、自分の開発環境の現在地を確認します。作業場所、node、npm、gitの場所とバージョンを見ます。成果物は environment-check.md です。使えるもの、入っていないもの、メンターに確認したいことを分けます。コマンド暗記より、確認結果を残すことを重視します。

Slide 20. 演習2 プロジェクト構成

次の演習では、サンプルプロジェクトの構成を書きます。まずREADMEを読み、起動に必要なファイルを探します。次に、アプリのコード、テスト、設定ファイルがどこにあるかを見ます。成果物は project-overview.md です。ファイル名だけでなく、それぞれの役割を短く書きます。

Slide 21. 演習3 起動ログ

3つ目の演習では、サンプルアプリを起動してログを読みます。READMEの手順に沿って依存関係を入れ、開発サーバーを起動します。表示されたURL、ポート、ブラウザで見えた結果、ターミナルのログ、停止方法を記録します。成果物は local-run-log.md です。

Slide 22. 演習4 エラー分類

最後の演習では、よくあるエラー例を読みます。command not foundは道具の問題、package.jsonが読めない場合は場所の問題かもしれません。ポートや環境変数は設定の問題として見ます。次に確認するものと、相談で伝えることを書きます。成果物は debug-note.md です。

Slide 23. 次はGitとGitHubへ

第5章では、手元で動かし、観察し、記録する入口を整えました。次の第6章では、このローカルの作業場をGitとGitHubにつなげます。変更を小さくまとめ、差分を見て、レビューできる形にします。今回作ったプロジェクト構成メモや起動ログは、次章で変更説明と確認方法を書く材料になります。