注文口で、場所と動作を確かめる

ターミナルで最初に確かめるのは現在地です。動かすプログラムと、その結果を見るブラウザを分けて扱うと、止まった場所を説明できます。

この回は、しくみを読むことと、実際の結果を確かめる練習を組み合わせます。付属見本はブラウザーだけで保存する一人用の版です。アカウント・データベース・共有は拡張課題として扱います。

練習用の「まちの読書メモ」を開く。見本には追加・読書状況の変更・JSONの書出があります。編集・削除・検索・復元・共有は、依頼文を使って追加する拡張課題です。練習用データを使い、一つのタブで操作してください。

ターミナル、シェル、パスを分ける

黒い画面へ文字を入れる前に、いまの場所を確かめます。ターミナルは、文字による操作を受け渡すアプリです。その中ではシェルがコマンドを解釈します。Appleの案内も、この二つを分けて説明しています。色や見た目が変わっても、現在地と動かしているプログラムを見る習慣は同じです。資料 APPLE_TERMINAL_GUIDE

最初に読むのは、入力を待つ行です。行の末尾に%や$などの印が出る場合がありますが、見た目は設定で変わります。説明書の印まで一緒に入力する必要はありません。本書ではコマンドそのものと、返ってきた結果を分けて記します。慣れるまでは一行ずつ実行し、結果を見てから進みます。

Macのシェルでは、pwdが現在の作業場所を表示します。lsは、その場所にある名前の一覧を示します。cdは作業場所を移す指示です。読書メモを扱う前に、pwdとlsで専用フォルダにいるかを確かめます。ファイルが見つからないときは、作り直す前に、見ている場所が違わないかを確認します。

ファイルの場所を表す文字列がパスです。先頭から場所を指定する絶対パスと、いまの場所を基準にした相対パスがあります。Appleの案内では、フォルダ名を区切る書き方や、ホームを表す~、現在の場所を表す.が説明されています。読書メモのフォルダ名を、自分の場所へ読み替えて使います。資料 APPLE_TERMINAL_GUIDE

たとえば現在地がreading-memoなら、./index.htmlは、その場所にあるindex.htmlを指します。別のフォルダへ移れば、同じ書き方でも指す場所が変わります。書き方が正しいのに開けないときは、この基準を見直します。相対パスの短さだけで、対象が同じだと判断しないでください。

フォルダ名に空白がある場合は、名前を一つの引数として渡す必要があります。名前を引用符で囲む方法や、Finderからターミナルへドラッグして場所を入力する方法があります。貼り付けたパスを見て、対象のフォルダが読書メモ用であると確かめてから実行します。資料 APPLE_TERMINAL_GUIDE

ターミナルでコーディングエージェントを起動した後は、そのプログラムが自然言語を受け取る場合があります。起動前のシェルへ『登録ボタンを直して』と書いても、同じようには通りません。いま入力を受けるのがシェルなのか、AIのプログラムなのかを、画面の表示と起動した操作から見分けます。

読書メモのために新しいフォルダを作ると、操作の対象を絞りやすくなります。ただし、専用フォルダは権限の保証ではありません。知らないコマンドを受け取ったら、何を読み、何を変更し、外へ通信するかを先に尋ねます。ファイルの一覧を見る指示と、削除する指示には違う影響があります。

準備が終わったら、現在地、見えたファイル、入力を待っているプログラムを短く記録します。次に同じ画面を開いたとき、この記録が再開の手がかりになります。『ターミナルが動きません』より、『このフォルダでこの一行を実行し、この結果が出た』と伝える方が、原因を絞れます。

場所だけを確認する

pwd
ls
これらはMacのシェルで使う確認例です。結果に読書メモのフォルダとindex.htmlがあるかを見ます。
AIへ相談するときは、個人名などを除いた現在地と、実行した一行、結果を添えます。

手を動かす順番

• 現在地を表示する
• ファイルの名前を確認する
• シェルと起動したプログラムを見分ける

開発サーバーとブラウザの役割

一枚のHTMLは、ファイルを直接開いて試せます。ファイルが増えたり、追加の開発道具を使ったりすると、開発サーバーを起動して見る構成が出てきます。開発サーバーは、手元のアプリを試すために応答するプログラムです。ブラウザは、その応答を受け取り、画面を表示します。資料 S2

起動するコマンドは、使うプロジェクトによって変わります。npm run devは、package.jsonのscriptsにあるdevという名前の処理を動かす例です。devと書けば何でも同じアプリが起動するわけではありません。npmの公式資料で示される通り、処理の内容はプロジェクトが用意したスクリプトを確かめます。資料 S6

読書メモが一枚のHTMLだけなら、npm run devを実行するためだけに道具を増やす必要はありません。後の章で構成を移したら、その版の起動方法を記録します。本の途中でファイルを直接開く方法とサーバーで開く方法が変わった場合は、どちらを試しているかを明確にします。

開発サーバーが起動すると、http://localhost:3000のようなURLが表示されることがあります。localhostは端末自身、3000はポートという受付の番号です。番号は3000に固定ではありません。既に同じ番号を使っているプログラムがある場合など、別の番号が選ばれることもあります。[資料 S3](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server)

ブラウザでは、起動結果に表示されたURLを開きます。以前のURLを覚えていても、今回は同じ番号とは限りません。画面が出ないときは、サーバーが起動したか、URLが一致しているか、そのURLで読書メモの版が出ているかを順に見ます。いきなり全ファイルの修正を頼む必要はありません。

動いているプログラムが入力を待つ行へ戻らず、文字を出し続けることがあります。それは、サーバーが動作中である可能性があります。MacではControlとCを同時に押すと、多くのコマンドへ終了を求める信号を送れます。止まったかを画面で見てから、必要なら起動し直します。資料 APPLE_TERMINAL_GUIDE

ControlとCで止めても、すでに変更されたファイルが元へ戻るわけではありません。動作を止めることと、変更を取り消すことは別です。前の版へ戻す準備はGitを扱う章で、記録の復元は保存を扱う章で確かめます。止めた直後に、慌てて別の変更を重ねないようにします。

手元のサーバーも、設定によっては同じネットワークの別端末から接続できる場合があります。localhostという画面を見ているだけで、誰も接続できないと断定しません。起動方法や待受けの設定を確かめ、最初は教材の架空データだけを使います。公開したいときは、後の章で公開先と確認方法を決めます。

再開の記録には、作業フォルダ、起動コマンド、表示されたURL、終了方法を残します。別のブラウザを開いても、同じ読書メモが見えるかを試してください。コードを保存したこと、サーバーが動いていること、ブラウザが表示したことを分けて見られると、止まった場所を人へ説明できます。

起動方法を調べてもらう

この読書メモの構成を変更せず、起動方法を調べてください。
直接開くファイルか、開発サーバーが必要かを説明してください。
起動コマンドの内容、使うURL、終了方法と、外部から接続できる設定かを教えてください。

手を動かす順番

• この版の起動方法を調べる
• 結果に出たURLを開く
• 停止と再開を一度試して記録する

演習：再開できる操作メモを作る

いまの版の開き方を、翌日でも再現できるように書きます。教材が一枚のHTMLなら直接開く方法を記録し、サーバーを使う構成なら起動と終了を記録してください。

• 作業フォルダと必要なファイルを確認する。
• 使う起動方法と、表示を確認する場所を書く。
• 終了して開き直し、同じ版が見えるかを試す。
• 起動しないときに人へ渡す情報をまとめる。

この回で確かめること

• 作業フォルダと必要なファイルを確認する。
• 使う起動方法と、表示を確認する場所を書く。
• 終了して開き直し、同じ版が見えるかを試す。
• 起動しないときに人へ渡す情報をまとめる。

次の回：画面の中で、何が変わるか

参考資料

• APPLE_TERMINAL_GUIDE Terminal User Guide — Apple
• S2 MDN: How the web works
• S3 MDN: How do you set up a local testing server?
• S6 npm: Scripts