カテゴリEからカテゴリFへ
カテゴリEでは、変数や関数、配列やオブジェクトといったコードの読み方を身につけました。それらの表記に一貫して使ってきた言語が、JavaScriptです。カテゴリFでは、この言語そのものと、それを動かす場所に目を向けていきます。最初の一歩となる今回は、同じコードでも「どこで動くのか」という視点を手に入れます。この視点が、これからのコードの読み方の土台になります。
このスライドのポイント
- カテゴリEで、変数・関数・配列・オブジェクトといったコードの読み方を学んだ
- カテゴリFでは、その表記に使ってきたJavaScriptという言語そのものと、動かす場所の話へ進む
- F-01の役割: 言語と「実行環境」を分けて捉える出発点に立つ
実行環境とは
まず言葉を定義します。実行環境とは、コードを実際に動かす土台となるソフトのことです。JavaScriptの実行環境は、大きく2系統に分かれます。ひとつはブラウザの中で、利用者の画面側で動くもの。もうひとつがNode.jsで、サーバーやPC上でJavaScriptを動かすための実行環境です。同じ言語が画面側とサーバー側の両方で使える、これが現代のWeb開発の大きな特徴です。
このスライドのポイント
- 実行環境＝コードを実際に動かす土台となるソフト
- JavaScriptの実行環境は大きく2系統
なぜ「動く場所」を意識するのか
なぜこの区別が要るのでしょうか。D-01で学んだ「この処理はクライアント側かサーバー側か」という問いを、コードのレベルでも判断できるようになるためです。実行環境を意識していないと、本来ブラウザで動かすべきコードをサーバー側に書いてしまう、あるいはその逆といった取り違えに気づけません。バイブコーディングでは、AIがこうした取り違えをすることがあります。動く場所の感覚がないと、その誤りを見抜けないのです。
このスライドのポイント
- 知らないと、D-01の「この処理はどちら側か」をコードのレベルで判断できない
- ブラウザ用のコードをサーバーに書く（逆も）というAIの取り違えに気づけない
- 動く場所の感覚が、AI生成コードの誤りを見抜く目になる
2つの実行環境の構造
全体像を、2つの枠で捉えましょう。左がブラウザ、つまりクライアント側。右がNode.js、つまりサーバー側です。この2つの枠には、重なり合う共通部分があります。それが、カテゴリEで学んだ変数・関数・配列・オブジェクトといった言語の基本です。一方で、それぞれに固有の能力もあります。ブラウザ側は画面を触れること、Node.js側はファイルやデータの保存先に触れること。共通の土台の上に、場所ごとの得意分野が乗っている、という構造です。
このスライドのポイント
- 左「ブラウザ（クライアント側）」／右「Node.js（サーバー側）」の2枠
- 共通部分: E章で学んだ言語の基本（変数・関数・配列・オブジェクト）
- 固有の能力: ブラウザは画面を触れる／Node.jsはファイルやデータの保存先に触れる
経費アプリで見る役割の分担
具体例で見てみましょう。経費を登録するアプリを考えます。入力された金額が正しい形式かをその場で確かめる金額チェックは、ブラウザ側のJavaScriptが担います。一方、確かめ終わったデータを実際に保存する処理は、Node.js側のJavaScriptが担います。書いている言語はどちらもJavaScriptなので、学習は一度で済みます。しかし、D-01で学んだ責任範囲は別です。画面側の確認と、サーバー側の保存は、役割がはっきり分かれているのです。
このスライドのポイント
- 例: 経費を登録するアプリ
- 金額チェック（入力が正しい形式か）＝ブラウザ側のJavaScript
- 保存処理（データを実際に残す）＝Node.js側のJavaScript
- 言語は同じなので学習は一度で済むが、D-01の責任範囲は別
技術サンプル: 1つの言語、2つの実行環境
スライドの図を見てください。種別はdiagram、目的は、ひとつの言語が2つの実行環境に分かれる様子を確認することです。上に「JavaScript（言語はひとつ）」があり、そこからブラウザで実行する枝と、Node.jsで実行する枝が伸びています。共通の土台には、E章で学んだ変数・関数・配列・オブジェクトが置かれています。読み方のポイントは、言語は共通でも、できること、つまり権限と責任が違うという点です。AIからコードをもらったら、「このコードはブラウザとNode.jsのどちらで動く前提ですか」と聞いてみましょう。
「言語」と「動かす場所」は別もの
ここで混同しやすい2つを整理します。ひとつは「JavaScriptという言語」、もうひとつは「実行環境という動かす場所」です。この2つは別ものです。言語の文法、たとえば変数の書き方や関数の作り方は、どちらの場所でも同じです。しかし、動かす場所が変われば、使える機能が変わります。画面を触る機能はブラウザだけ、保存先を触る機能はNode.jsだけ、というように、場所によって手の届く範囲が違うのです。
このスライドのポイント
- 混同しやすい: 「JavaScript（言語）」vs「実行環境（動かす場所）」
- 言語の文法（変数の書き方・関数の作り方）はどちらの場所でも同じ
- 場所が変われば使える機能が変わる（画面はブラウザだけ／保存先はNode.jsだけ）
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIからコードを受け取ったら、「これはどちらの実行環境用ですか」と必ず確認しましょう。動く場所を取り違えたコードは、そもそも動きません。また、エラーの相談をAIにするときも、どの実行環境で起きたのかを添えてください。これは、B-10で学んだバージョン情報と同じく、A-07で学んだ「現状」を伝える情報の一部です。実行環境を添えるだけで、AIの見立ての精度が上がります。
このスライドのポイント
- AIからコードをもらったら「これはどちらの実行環境用ですか」を確認する
- エラー相談時も実行環境を添える
- これはB-10のバージョンと同様、A-07で学んだ「現状」を伝える情報の一部
まとめと次回への橋渡し
最後に一問一答です。サーバー側でJavaScriptを動かす、代表的な実行環境は何でしょうか。（間）答えは、Node.jsです。30秒まとめをします。JavaScriptは言語としてはひとつですが、動く場所はブラウザとNode.jsの2系統に分かれます。共通の言語の土台の上に、場所ごとの得意分野が乗っている、と覚えてください。次回は、変数が見える範囲、つまりスコープの話へ進みます。関連資料は「Webアプリ構築 完全ワークフロー」と「AI開発ワード100」です。
このスライドのポイント
- 一問一答:「サーバー側でJavaScriptを動かす代表的な実行環境は？」→答: Node.js
- 30秒まとめ: JavaScriptは言語がひとつ、動く場所は2系統（ブラウザとNode.js）。共通の土台の上に場所ごとの得意分野が乗る
- 次回: 変数が見える範囲＝スコープへ（F-02）
- 関連資料: 「Webアプリ構築 完全ワークフロー」「AI開発ワード100」
