言葉を、一つの台所の中へ置いてみます。置き場所と移動が分かったら、たとえを離れ、実際の画面やファイルへ戻ります。
この回は、しくみを読むことと、実際の結果を確かめる練習を組み合わせます。付属見本はブラウザーだけで保存する一人用の版です。アカウント・データベース・共有は拡張課題として扱います。
台所の中と、お店の向こう
読書メモのファイルを保存した後、どこで動いているか説明できるでしょうか。本書では、手元のパソコンを自宅の台所、作る人を店主、AIを雇った料理人にたとえます。料理人へ作業を頼む前に、台所の中のどこへ何を置くかを見渡してみます。
コードを書くエディタは調理台です。探す、書く、動かす、直す機能が一つに集まったIDEはシステムキッチンに当たります。どちらを使っても、読書メモを構成するファイルは必要です。画面上の道具と、その道具で作っているファイルを分けて見ると、保存場所が分からなくなりにくくなります。
フォルダは棚、ファイルはそこへ置く一つの物です。読書メモ用の棚には、index.html、見た目を決めるファイル、動きを決めるファイルを入れます。名前の末尾に付く.htmlや.cssは拡張子と呼ばれます。どんな内容を扱うファイルかを見分ける手がかりになります。
台所から、お店へ
手元のパソコンと、人に使ってもらう環境を分けて見ます。自宅で試せたことは、公開されたことを意味しません。
- 自宅の台所：パソコン
- 調理台：エディタ
- 注文口：ターミナル
- 試食：localhost
- お店：本番環境
- サーバー側の場所だけを厨房と呼びます。
- localhostはブラウザを動かす端末自身です。
すべてを一から書かず、ほかの人が用意した部品を使うこともあります。パッケージは出来合いの材料にたとえられます。必要な材料の名前と版を一覧にしておくと、別の場所でも同じ構成を準備できます。材料が増えるほど、何を使い、何のために必要なのかを確認する仕事も増えます。
ターミナルは注文口です。文字で指示を渡し、結果を文字で受け取る場所に当たります。ただし、そこにいるのがAIとは限りません。通常はシェルというプログラムがコマンドを解釈し、起動したプログラムによって入力の意味が変わります。注文口の前で、いま誰が指示を受けるのかを見ます。資料 APPLE_TERMINAL_PAGE
手元で画面を開いて試す場所は、試食コーナーと考えられます。localhostという名前が出たときは、ブラウザを動かしている端末自身を指します。自分のPCで開けたlocalhostのURLを友人へ送っても、友人の端末から自分の画面へは届きません。名前が同じでも、指す端末は違います。資料 S3
人に使ってもらう本番環境は、お店の客席です。手元で見えた画面を、公開する場所へ用意する必要があります。画面の背後で処理するサーバーは、お客さんから見えない厨房に当たります。ブラウザがサーバーへ必要なものを頼み、応答を受け取る関係は、MDNのWeb入門でも説明されています。資料 S2
自宅の台所と、お店の厨房は別の場所として描きます。自分のファイルを直したからといって、客席の画面まで変わったとは限りません。反対に、設定次第ではファイルを送る操作が公開へつながることもあります。何を変えるとどこへ届くかは、実際の設定を見て確かめます。
図を見た後は、読書メモの実物を指してみてください。エディタはどの画面か、棚はどのフォルダか、試食しているブラウザのURLは何か。たとえの名前を覚えるだけで終わらず、いま触っている物と結び付けると、分からない言葉をAIへ尋ねるときにも場所を伝えられます。
自分の台所を説明してもらう
いまの読書メモについて、エディタ、ファイルのフォルダ、ブラウザ、起動中のプログラムを対応させて説明してください。
手元で動く部分と、外部へ通信する部分を分けてください。
ファイルは変更せず、まだ分からない場所も教えてください。
手を動かす順番
- 読書メモのフォルダを開く
- 道具とファイルを対応させる
- ブラウザのURLと通信先を確かめる
たとえで分かること、分からないこと
台所のたとえは、言葉どうしの位置関係をつかむためのものです。正しい権限や保存の仕組みまで、絵だけで保証することはできません。読書メモの完成条件に関わる場面では、実際の名前へ戻って説明します。ここでは、信じすぎると困る箇所を先に確かめます。
AIを料理人と呼んでも、人間の料理人と同じ責任や経験を持つという意味にはなりません。AIは自信のある文章で誤った説明を返すことがあります。登録できた、保存できたという説明を受け取ったら、実際の画面と保存結果を見ます。口調は合格の根拠になりません。
専用の棚を作ると、道具を整理しやすくなります。しかし作業フォルダを分けただけで、AIやプログラムが棚の外へ触れなくなるとは限りません。読む場所、変更する場所、許した権限を別に確かめます。読書メモを作るために、個人の写真や別の仕事のフォルダまで扱う理由はありません。
たとえから、確認へ戻る
台所は関係を理解する入口です。権限、保存、公開の判断では、実際の対象と設定へ戻って結果を確かめます。
- フォルダの区切りだけで権限は保証できません。
- コードの履歴とデータの復元は分けます。
出来合いの材料も、名前だけで信用しません。パッケージを追加するなら、何をするものか、どこから入れるか、どの版を使うかを尋ねます。似た名前を取り違えることもあります。npmの仕組みでは準備や導入の工程でスクリプトが動く場合もあるため、インストールを単なるファイルの受取りと考えないようにします。資料 S6
Gitは試作ノートです。変更を記録し、以前の版と比べるために使います。ただし記録していない内容や、外部のデータベースの記録まで一緒に戻るとは限りません。読書メモの画面を前の版へ戻すことと、誤って消したメモを復元することには、それぞれの準備が要ります。
GitHubは本店の書庫にたとえます。書庫へ送ることと、お客さんへ見せることの関係は設定で変わります。自動公開を用意していれば、送信が公開のきっかけになります。用意していなければ、別に公開の操作が必要です。pushという言葉を聞いたら、どの記録先へ送るのかを確かめます。
エラーは焦げにたとえられます。焦げが見えれば、何かが起きたと分かります。一方、間違いが必ずエラー表示で知らせられるわけではありません。保存先を間違えていても、画面には成功と出ることがあります。他人の記録を見せてしまう問題も、見た目は普通の一覧です。期待する結果との照合が残ります。
本番環境を客席と呼ぶと、人へ届く段階が分かります。実際には、公開する画面のほかに、API、データ、ログ、利用料金も動きます。画面を閉じたから全部止まるとは限りません。使う人が増える前に、どこで動き、どこを止め、何を戻せるかを確認する必要があります。
言葉を確かめるときは、たとえと定義を往復します。ターミナルは注文口という感覚を持ったら、次に『起動しているシェルへコマンドを渡す画面』と説明してみる。図の位置、実際の意味、自分の操作を結び付けられれば、初めて出会う名前にも同じ方法で近づけます。
比喩の限界を尋ねる
パソコンは台所という対応で、いまの読書メモを説明してください。
その説明が当てはまらないところも、権限、保存、公開について具体的に示してください。
たとえの名前だけで終えず、実際のファイルや設定の名前へ戻してください。
手を動かす順番
- たとえで位置関係をつかむ
- 実際の定義を一文で書く
- 保証されていないことを確認する
演習：自分の画面と台所を対応させる
読書メモの作業場所を図にし、たとえが外れる所を添えます。まだ使っていないクラウドやデータベースを、実装済みとして描かないでください。
- エディタ、フォルダ、ファイル、ブラウザを実物で指す。
- localhostを友人へ送っても共有できない理由を書く。
- Gitで戻す物と、別に復元する物を一組ずつ挙げる。
解答例を読む
作業フォルダにはアプリのファイルがあり、エディタはそれを読む・書く道具です。
localhostは使う端末自身を指すため、相手の端末から自分の画面を指定できません。
記録したコードの版はGitで扱えます。ブラウザや外部のデータの復元には、その保存方法に合わせた準備が必要です。
この回で確かめること
- エディタ、フォルダ、ファイル、ブラウザを実物で指す。
- localhostを友人へ送っても共有できない理由を書く。
- Gitで戻す物と、別に復元する物を一組ずつ挙げる。