JS が動く順番を意識する
JS が動く順番を意識する とは
JavaScript が上から下へどう動くかを意識して、配列をログ風文字列に組み立てよう。本レッスンでは、JS が動く順番を意識する の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
コードは上から下へ動く
JavaScript の基本ルールは、ものすごく単純です。「書いた順に、上から下に向かって実行される」。たったこれだけ。最初はあたりまえに思えますが、実はこのルールをきちんと意識できるかどうかが、初心者と中級者の分かれ目だったりします。
JavaScript
const a = 1; // 1 行目: a に 1 を入れる
const b = a + 2; // 2 行目: a を使って b を作る (b = 3)
const c = a + b; // 3 行目: a と b を使って c を作る (c = 4)
console.log(c); // 4 行目: c の値を表示するJavaScript のエンジンは、この 4 行をきっちり順番に処理します。2 行目 を実行する時点で a の値は確定していて、3 行目 を実行する時点で b の値も確定している、という前提でコードを書きます。
プログラミング初心者がよくやる間違いが、「下に書いてある関数を上から呼べると思っている」「同じ変数が複数の場所で書き換わって混乱する」など、実行順序を見失うパターンです。順番を意識する習慣は、デバッグの一番の武器になります。
関数の中身は「呼ばれたときに」動く
関数は定義した瞬間ではなく、呼ばれた瞬間 に中身が実行されます。これが理解できると、いろんな謎が一気に解けます。
JavaScript
console.log("A");
function greet() {
console.log("B"); // この行は greet() が呼ばれたときに実行される
}
console.log("C");
greet();
console.log("D");このコードを実行すると、画面には A C B D の順番に出ます。function greet() { ... } は「greet という関数を定義するだけ」で、中の console.log("B") はまだ実行されません。greet() を呼んだ瞬間にようやく B が出ます。
実行順序を図で見る
上のコードがどう実行されていくか、図で追ってみましょう。
関数の定義は「準備」、関数の呼び出しが「実行」、と覚えてください。greet が定義されているだけのときは中身は動かず、greet() と書いて初めて中の処理が走ります。
配列をログ風文字列に組み立てる
もう少し実践的な例で、実行順序を意識する練習をしてみましょう。配列の中身を 1 行ずつ並べた文字列を組み立てる、というシナリオです。
JavaScript
const names = ["Alice", "Bob"];
let log = "";
log = log + "[1] " + names[0] + "\n"; // log = "[1] Alice\n"
log = log + "[2] " + names[1] + "\n"; // log = "[1] Alice\n[2] Bob\n"
console.log(log);log という変数を空文字で始めて、1 行ずつ追加していくと、最終的に複数行の文字列ができあがります。代入の右辺は 代入する前の値 を使うので、log = log + "..." という書き方が成り立ちます。
「右辺を計算する → 左辺に代入する」が代入のルールです。だから
let x = 0; x = x + 1;と書くと、まず右辺のx + 1(= 1) が計算され、それがxに代入される、という流れになります。
\n 改行とエスケープ
文字列の中で改行を入れたいときは、\n というエスケープシーケンスを使います。\ (バックスラッシュ) と n の 2 文字ですが、文字列の中では「改行 1 文字」として扱われます。
JavaScript
const multiLine = "1 行目\n2 行目\n3 行目";
console.log(multiLine);
// => 1 行目
// 2 行目
// 3 行目テンプレートリテラル (` で囲む) なら改行をそのまま入れられますが、プラス + 連結や JSON 文字列など、\n が便利な場面もまだまだ多いです。
よくある間違い
実行順序まわりでよくある落とし穴を 3 つ紹介します。
- 変数を使う前に定義していない —
console.log(x); const x = 1;のように、宣言の前に使うとReferenceErrorになります。「上から順」のルールを守りましょう - 関数の中で外の変数を変えたつもりで変わっていない — 関数の中で
letやconstで再宣言すると、外の変数とは別物になります。スコープという概念で第 6 章でじっくり扱います \nを/nと書く — エスケープシーケンスは\(バックスラッシュ) が必須です。/ではただの 2 文字として扱われ、改行になりません
実行順序がわからなくなったら、
console.log("step 1")のような目印をいくつも入れて、どの順番で表示されるかを確認してみましょう。「動きを見える化」するのがデバッグの基本です。
やってみよう
それでは課題に挑戦しましょう。formatList という関数を作って、配列をログ風の文字列に整形します。
- 引数
items(文字列の配列) を受け取る - 空の文字列
logから始めて、items[0]items[1]の順に追加していく - 各行は
"[番号] 値\n"の形 (番号は 1 から始まる) - 最後にできあがった文字列を
returnする
formatList(["Alice", "Bob"]) は "[1] Alice\n[2] Bob\n"、formatList(["Tokyo", "Osaka", "Kyoto"]) は "[1] Tokyo\n[2] Osaka\n[3] Kyoto\n" を返します。空配列なら空文字 "" を返してください。
ヒントとしては、for ループでまだ習っていない場合は、配列の長さに応じて手で 1 行ずつ書き足しても OK ですが、for ループを使うとどんな長さでも対応できます。for 文は第 5 章で本格的に学びますが、ここで一足先に触れておくと、後の章がスムーズになります。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 第1章まとめクイズ で、JavaScript が上から下へどう動くかを意識して、配列をログ風文字列に組み立てよう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 実行順序 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 実行順序 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- 関数名は
formatList、引数は配列itemsの 1 つ - 各要素を
"[番号] 値\n"形式に整形して連結する (番号は 1 始まり) - 戻り値は連結された 1 本の文字列
入出力例
test-cases.txt
formatList(["Alice","Bob"]) → "[1] Alice
[2] Bob
"
formatList(["Tokyo","Osaka","Kyoto"]) → "[1] Tokyo
[2] Osaka
[3] Kyoto
"
formatList(["Solo"]) → "[1] Solo
"
formatList([]) → ""