👏

【Part1】【No.002】Reactに必要なJavaScript基礎の最低限

に公開
JavaScript
Node.js
React
初心者
frontend
tech

みなさん、こんにちは！
ペンギンエンジニアです！

前回の001（HTML/CSS編）で、「家の間取り図」の読み方は押さえました。

今回はその続きで、家具を動かす説明書にあたる JavaScript の話です。

筆者はSES現場で、未経験エンジニアがReactタスクに入っていく場面を何度も見てきました。
そこで一番多いハマり方は、HTMLの次の壁＝JavaScriptの基礎をすっ飛ばして、Reactのチュートリアルに突っ込むパターンです。

const [count, setCount] = useState(0) の左辺で「なんでカッコが2つ？」と固まる。
onClick={() => setCount(count + 1)} を見て「function がない、これは何の呪文？」と固まる。

体感としては、HTMLの壁を越えた人の、さらに半分くらいはJSの基礎で詰まっています。

Reactは"説明書（JavaScript）"を書きやすくする道具です。だから説明書の言語が分からないと、Reactも書けません。

この記事では、その「説明書の言語＝JavaScript」のうち、Reactに入るために最低限必要な部分だけを最短距離で押さえていきます。

この連載について

この記事は、連載「ゼロから始めるReact入門」の 【Part1】【No.002】 です。

  • 連載名：ゼロから始めるReact入門
  • Part：Part 1（React前の前提知識・全6本）
  • この記事：【Part1】【No.002】JavaScriptの最低限

Part 1では、HTML / CSS / JavaScript / TypeScript の基礎を6本に分けて押さえていきます。
この記事（【Part1】【No.002】）はその2本目、JavaScript基礎の土台作りです。

【Part1】【No.001】（HTML/CSS編）を読まずにここに来た方も問題なく読めますが、HTML/CSS側で不安がある方は、先にそちらを流し読みしてもらえるとスムーズかなと思います。

Part 1 全体の流れ（全6本）

通し番号 タイトル 核心メッセージ
【Part1】【No.001】 Reactを触る前に知るHTMLとCSSの最低限 HTMLは入れ物のネスト、CSSは見た目を当てる仕組み
【Part1】【No.002】（本記事） Reactに必要なJavaScript基礎の最低限 let/const、データ型、配列、オブジェクト、関数
【Part1】【No.003】 React頻出のモダンJS アロー関数・分割代入・スプレッド・テンプレートリテラル
【Part1】【No.004】 配列メソッド map / filter / reduce / find
【Part1】【No.005】 ES Modules import / export / default
【Part1】【No.006】 TypeScript超入門 JSに型を足すと何が嬉しいか

Part 1を終えると、【Part2】【No.007】〜 からは Vite + React + TypeScript で本格的なReactに入ります。
読み終わった後で「次に何が来るか」が見えていると、迷子になりにくいかなと思います。

今日の結論

先に結論から言うと、

  • 値に名前を付けるのが「変数」。書き換えないなら const、書き換えるなら let の2択でOKです。実務でも7〜8割は const で足ります
  • データには種類がある。文字列・数値・真偽値・null・undefined の5種類のプリミティブ型と、まとめて持つための配列 [] とオブジェクト {} をまず押さえます
  • 処理に名前を付けるのが「関数」。function 名前(引数) { return 値; } の形を素で書けるようにすると、次回003でアロー関数に進んだとき「同じことを別の書き方でやっているだけ」とスッと理解できます

JavaScriptは"HTMLという家具を動かす説明書"。変数で値に名前を付け、データ型で値の種類を見分け、配列・オブジェクトでまとめ、関数で処理に名前を付ける。 Reactで毎日使うこの4本柱を、モダンJSに進む前に身体に入れておきましょう。

この記事は素のJS（function 宣言ベース）で土台を作る回です。アロー関数や分割代入、スプレッド構文は次回003で扱うので、ここでは出てきません。

この記事を読むと分かること

この記事を読むと、なんとなくですが、

  • 変数の2種類（let / const）の使い分けと、Reactで const 中心になる理由
  • プリミティブ型5種（string / number / boolean / null / undefined）の見分け方と、typeof での確認方法
  • 配列 [] の生成・添字アクセス・push / pop、オブジェクト {} のプロパティアクセス・追加・更新
  • function 宣言での関数の書き方（引数・戻り値・呼び出し）と、console.log でのデバッグ習慣
  • それぞれの概念が Reactのどこに登場するか（state / props / イベントハンドラ等）の予告

このあたりが見えてくるかなと思います。

前提 / 全体像

この記事の動作環境は、Node.js だけです。

動作環境

  • ランタイム：Node.js v22 LTS または v24 LTS（Maintenance / Active）
  • npm / 依存ライブラリ：不要（node コマンド単体で動きます）
  • エディタ：お好みのもの（VS Code などでOK）
  • 確認時期：2026年5月時点の情報です

001ではブラウザだけで完結しましたが、002からはNode.jsを使います。
理由はシンプルで、ブラウザでJSを試そうとすると、<script> タグを書いたHTMLファイルを用意する必要があって面倒だからです。

Node.jsを入れておけば、.js ファイルを作って node ファイル名.js と叩くだけで実行できます。
Reactに進んだあとも、Node.jsはずっと使い続ける道具なので、ここで入れておくのが結局一番ラクです。

Node.js v20 LTS は2026年4月時点で EOL（サポート終了）しています。これからインストールする方は v22 か v24 を選んでください。

公式インストーラは Node.js 公式ダウンロードページ からどうぞ。
インストール手順そのものは本記事のスコープ外なので、公式ページに譲ります。

インストールできたら、ターミナルを開いて以下を確認します。

node --version
# v22.x.x または v24.x.x が表示されればOK

連載全体で使うReactは、React 19系（2024-12-05 安定版リリース）です。
ただし002の本文ではReactのコードは出てきません。あくまで「Reactで使うJS基礎」を押さえる回という位置づけです。

この記事で扱わないこと

  • アロー関数（() => {}）／分割代入／スプレッド構文／テンプレートリテラル → 次回003
  • 配列メソッド（map / filter / reduce） → 004
  • import / export → 005
  • TypeScript → 006

「全部1記事に詰め込まない」のがこの連載のスタンスです。
気になる項目があっても、そのうち該当回でちゃんと扱うので、今回は今回のスコープを淡々と進めていきます。

セクション1：JavaScriptは"HTMLという家具を動かす説明書"

まずはJavaScriptを1文で説明します。

JavaScriptは、HTMLという動かない間取り図を、動的に書き換えるための言語です。

001では、HTMLを「家の間取り図」、CSSを「内装」とたとえました。
JavaScriptはその続きで、家の中の家具を、状況によって動かす説明書だと思ってください。

たとえば「ボタンを押したらカウンターの数字が1増える」みたいな動き。
これは要するに、「ボタンという家具を押されたら、画面上のカウンター（家具）の数字を1つ進めなさい」という説明書を書いているわけです。

そしてReactは何かというと、この説明書を書きやすくするための道具です。
道具なので、土台の言語（JavaScript）が分からないと、道具だけ持ってもどう使えばいいか分かりません。

筆者がSES現場で見てきた未経験エンジニアの典型ハマりは、この土台を飛ばしてReactチュートリアルから入ってしまうパターンでした。

useState の左辺の [count, setCount] を見て「配列を作っているのかな？」と固まる。
onClick={() => ...} を見て「function のキーワードがどこにも書いてない」と困惑する。

これらはぜんぶ、Reactの問題ではなくJavaScriptの問題です。
チュートリアルでJSの基礎を解説してくれる親切な記事はあまり多くないので、結局JS入門に戻ってもらうことになります。

急がば回れ、です。
ここで一度JSの基礎を通しておくと、後のReact学習が3倍くらいスムーズになる肌感があります。

セクション2：変数 ― 値に「ラベル付きの箱」を用意する

ここから具体的な文法に入ります。
最初は変数です。

変数のイメージ

変数は、ざっくり言うとラベルが貼られた箱だと思ってください。
ラベルは「名前」のことだと読み替えてOKです。
箱の中に値を入れて、後から名前で呼び出せるようにする仕組み、と思ってください。

現代のJavaScriptで使うキーワードは let と const の 2つだけ です。

キーワード 再代入 スコープ Reactでの使い方
let できる ブロックスコープ 書き換えが必要なときだけ
const できない ブロックスコープ 基本これ

結論を先に書いてしまうと、const を基本にして、書き換えが必要なときだけ let の2択でOKです。
迷ったらまず const から書き始めて、再代入が必要だと分かった時点で let に変える、くらいのスタンスで大丈夫です。

実際に動かす

ここからは実物のコードで確認します。
任意のフォルダ（例：js-practice/）に 01-variables.js というファイルを作って、以下を貼り付けてください。

// 01-variables.js
// let / const の挙動デモ
// 「再代入できる／できない」を console.log で確認する

// const：再代入できない（基本これを使う）
const name = "ペンギン";

// let：再代入できる（書き換えが必要なときだけ）
let count = 0;
count = count + 1;

// const は再代入するとエラーになる（下の行のコメントを外すと TypeError になる）
// name = "ねこ"; // TypeError: Assignment to constant variable.

console.log(name);  // ペンギン
console.log(count); // 1

ターミナルで node 01-variables.js を実行すると、

ペンギン
1

と出ます。

ここでのポイントは2つです。

  • const name = "ペンギン" は、箱に "ペンギン" という文字列を入れて、name というラベルを貼った状態
  • let count = 0 は、書き換えできる箱に 0 を入れた状態で、その後 count = count + 1 で中身を 1 に書き換えている

const のほうは、コメントアウトされている name = "ねこ" を外して実行すると、TypeError: Assignment to constant variable. というエラーが出ます。
試してみると「あ、本当に書き換えできないんだ」というのが体で分かるかなと思います。

Reactとの接続予告

Reactで useState を使うと、こんな書き方をします。

const [count, setCount] = useState(0);

左辺がぜんぶ const になっているのが分かります。
理由は連載のPart 4で詳しく扱いますが、ざっくり言うと「変数自体は再代入させたくない。値の更新は専用の関数でやる」という設計だからです（更新関数は setCount のような名前で渡されます）。

const の使い方を体に入れておくと、Reactのコードが急に読みやすくなる、というのはここに繋がる話です。

セクション3：データ型 ― 値には種類がある

変数の次は、箱に入れる値の種類の話です。

プリミティブ型は5種類押さえる

JavaScriptの値には種類があり、これをデータ型と呼びます。

正式にはプリミティブ型は7種類（null / undefined / boolean / number / bigint / string / symbol）ありますが、Reactに入るまでに押さえておくべきは以下の5種類です。

型名 例 用途
string（文字列） "ペンギン" / 'こんにちは' テキスト
number（数値） 42 / 3.14 整数も小数も同じ number
boolean（真偽値） true / false はい／いいえ
null null 意図的に「ない」と決めた値
undefined undefined まだ何も入っていない

bigint と symbol は連載全体でほぼ出てこないので、今回はスキップでOKです。

実際に動かす

02-primitives.js というファイルを作って、以下を貼り付けてください。

// 02-primitives.js
// プリミティブ型5種を typeof で確認するデモ
// typeof null が "object" を返す有名な挙動も確認する

const username = "ペンギン";
const age = 30;
const isLoggedIn = true;
const selectedItem = null;
let nextValue; // 何も入れていない → undefined

console.log(typeof username);     // string
console.log(typeof age);          // number
console.log(typeof isLoggedIn);   // boolean
console.log(typeof selectedItem); // object  ← null は歴史的事情で "object" になる（注意）
console.log(typeof nextValue);    // undefined

// 実務での null 判定は typeof ではなく === null を使う
console.log(selectedItem === null); // true

node 02-primitives.js で実行すると、

string
number
boolean
object
undefined
true

と出ます。

typeof は、値の型を文字列で返してくれる演算子です。
typeof age だと "number"、typeof username だと "string"、という感じで使います。

typeof null === "object" という有名な罠

ここで一個、初学者が必ず一度はフリーズする挙動があります。

console.log(typeof selectedItem); // object  ← null なのに "object"

null なのに typeof の結果が "null" ではなく "object" を返すんですよね。

筆者も最初にこれを見たときは「えっ、バグ？」と画面の前で固まりました。

これは結論から言うと、JavaScript初期実装の遺産です。
MDNの typeof 演算子のページ によれば、JavaScript の最初の実装で値が「型タグ＋値」で表現されていて、オブジェクトの型タグが 0、null も NULL ポインター（0x00）として表されていたため、null も型タグ 0 を持ってしまい、結果として typeof null が "object" を返すようになった、という経緯のようです。

ECMAScriptの修正案も過去に提案されましたが、互換性のため却下されています。
つまり今後も変わらないので、これは「そういうもの」として覚えるしかないやつです。

実務での null 判定は、=== null を使うのが鉄則です。typeof で null を見ようとすると永遠に判定できないので注意してください。

02-primitives.js の最後の行で selectedItem === null が true を返しているのが、実務での正しい書き方になります。

null と undefined の使い分け

null と undefined は、どちらも「値が無い」状態を表します。
ただ慣例として、使い分けがあります。

  • undefined：まだ値を入れていない（自動でこうなる）
  • null：意図的に空にした（プログラマが書く）

ざっくり言うと、「自然の undefined、意図の null」という感じです。

let nextValue; のように、初期値を書かずに宣言した変数は、自動的に undefined になります。
一方で、const selectedItem = null; のように 書き手が null を入れるときは、「ここには今、意図的に何も入っていません」という意思表示になります。

Reactとの接続予告

Reactで useState の初期値を決めるとき、この5種類のどれを入れるかを選ぶ場面が頻繁にあります。

const [count, setCount] = useState(0);              // number
const [name, setName] = useState("");               // string
const [isLoggedIn, setIsLoggedIn] = useState(false); // boolean
const [user, setUser] = useState(null);              // null（まだログインしていない状態）

特に「まだログインしていない状態」を null で表すパターンは、Reactで頻出します。
ここで「自然の undefined、意図の null」の感覚が効いてくる、という話です。

セクション4：配列とオブジェクト ― データをまとめて持つ

「1個の変数に1個の値」では足りない場面が出てきます。
ユーザーが10人いるなら、変数を10個用意するわけにはいきません。

そこで使うのが、配列とオブジェクトです。

配列とオブジェクトの違いを1文で

1文ずつで覚えてしまいましょう。

  • 配列は「順番で取り出す」入れ物（[]、添字 0, 1, 2...）
  • オブジェクトは「名前で取り出す」入れ物（{}、プロパティ名で取り出す）

たとえ話にすると、

  • 配列＝番号順に並んだロッカー（1番ロッカー、2番ロッカー…）
  • オブジェクト＝名札の付いた引き出し（「name」の引き出し、「age」の引き出し…）

という感じです。

4-1. 配列の基本

まずは配列から。
03-array.js というファイルを作って、以下を貼り付けてください。

// 03-array.js
// 配列の生成・添字アクセス・push / pop / length のデモ
// const で宣言した配列でも、中身は push / pop で変えられることを示す

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);      // apple
console.log(fruits[2]);      // orange
console.log(fruits.length);  // 3

// push：末尾に要素を追加する
fruits.push("grape");
console.log(fruits);         // [ 'apple', 'banana', 'orange', 'grape' ]

// pop：末尾の要素を削除する
fruits.pop();
console.log(fruits);         // [ 'apple', 'banana', 'orange' ]

node 03-array.js で実行すると、

apple
orange
3
[ 'apple', 'banana', 'orange', 'grape' ]
[ 'apple', 'banana', 'orange' ]

と出ます。

押さえるべきポイントは4つです。

  • 生成：["apple", "banana", "orange"] のように、角カッコ [] の中にカンマ区切りで値を並べる
  • 添字アクセス：fruits[0] のように、0始まりで位置指定する。fruits[2] は3番目の要素
  • 長さ：fruits.length で要素数（3つ入っていれば 3）
  • 追加・削除：push で末尾追加、pop で末尾削除

push や pop 以外にも配列を操作するメソッドはたくさんありますが、map や filter といったもっと便利なやつは次々回の004で扱います。今回は基本のこの2つに絞ります。

const なのに中身が変わる、という話

ここでひとつ、初学者の混乱ポイントNo.1を片付けておきます。

fruits は const で宣言しているのに、push で要素を増やしたり pop で減らしたりできるのは、おかしくないですか？という疑問が出てきます。

答えは、const は箱の中身を入れ替えられないだけだからです。

少し丁寧に言い直すと、const で守られているのは、

  • fruits というラベルが、どの配列を指すか

の部分だけです。
指し先の配列の中身は、別の話として変えられます（要素を増やしたり減らしたり、できます）。

MDNの const リファレンスにも、こう書かれています。

「The const declaration creates an immutable reference to a value. It does not mean the value it holds is immutable」
（const 宣言は値への不変な参照を作るが、値そのものが不変であることを意味するわけではない）

たとえ話で言うと、

  • const fruits = [...] ＝ fruits というラベルを、この特定の配列に永久に貼り付けた状態
  • fruits.push("grape") ＝ その配列の中身をいじっているだけ（ラベルが指す対象は変わっていない）

なので、const でもまったく問題なく push や pop ができてしまいます。

Reactでの注意点（予告レベル）

ただし、Reactで配列を state として扱う場合、push / pop は使ってはいけません。
これはJSの問題ではなく、Reactの仕組み上の話で、React公式ドキュメントの Updating Arrays in State にも明記されています。

筆者もSES現場で、未経験メンバーが state の配列に対して users.push(newUser) を書いてしまい、画面が更新されないと問い合わせを受けたことが何度もあります。

Reactのstate配列を更新するときは、push / pop ではなく新しい配列を作って差し替えるのがルールです。詳細は連載 Part 4 の 018 で扱うので、今は「Reactではここが変わるんだ」とだけ覚えておいてください。

4-2. オブジェクトの基本

配列の次は、オブジェクトです。
04-object.js を作って、以下を貼り付けてください。

// 04-object.js
// オブジェクトの生成・プロパティアクセス（. 記法）・追加・更新のデモ
// ブラケット記法（["プロパティ名"]）も軽く紹介する

const user = {
  name: "ペンギン",
  age: 30,
  isLoggedIn: true,
};

// . 記法でプロパティにアクセスする
console.log(user.name);       // ペンギン
console.log(user.age);        // 30
console.log(user.isLoggedIn); // true

// プロパティの追加
user.email = "penguin@example.com";

// プロパティの更新
user.age = 31;

console.log(user); // { name: 'ペンギン', age: 31, isLoggedIn: true, email: 'penguin@example.com' }

// ブラケット記法（動的なキー指定に使う）
console.log(user["name"]); // ペンギン

node 04-object.js で実行すると、こうなります。

ペンギン
30
true
{
  name: 'ペンギン',
  age: 31,
  isLoggedIn: true,
  email: 'penguin@example.com'
}
ペンギン

console.log(user) の部分は、Node v22 / v24 ではプロパティが4つ以上あると複数行表示になります。ブラウザのDevToolsだと1行で出る場合もありますが、内容は同じなので気にしなくてOKです。

押さえるべきポイントは4つです。

  • 生成：{ name: "ペンギン", age: 30 } のように、波カッコ {} の中に キー: 値 をカンマ区切りで並べる
  • アクセス：user.name のように、. 記号でつないで取り出す
  • 追加：user.email = "..." と書くだけで、新しいプロパティが追加される
  • 更新：既存のキーに代入すれば、値が上書きされる

最後の user["name"] のように、ブラケット記法でアクセスする方法もあります。
これは「キー名が変数で決まる場合」など、動的なキー指定に使うやつです。

普段は user.name のドット記法でOKで、ブラケット記法は出番が来たときに改めて、くらいの温度感で覚えておけば十分です。

Reactとの接続予告

Reactで頻出するのは、props（コンポーネントに渡すデータ）の文脈です。

<Card user={someUser} />

この user の中身が、まさにオブジェクトです。
コンポーネント側では function Card(props) { ... } で受け取り、props.user.name のようにドット記法でアクセスします。

つまり、オブジェクトの扱いが分かっていないと、Reactのpropsが読めません。
ここはPart 3の Props 回（014）でまた登場するので、楽しみにしておいてください。

セクション5：関数 ― 処理に「レシピの名前」を付ける

最後の文法トピックは関数です。

関数のイメージ

関数は、ざっくり言うと「材料を入れると、決まった手順で結果を返してくれるレシピ」です（材料が引数、結果が戻り値にあたります）。

たとえば「3 と 5 を入れたら、足し算した 8 を返してくれるレシピ」を作っておけば、後から add(3, 5) とレシピ名を呼び出すだけで 8 が返ってきます。

実際に書く

05-function.js を作って、以下を貼り付けてください。

// 05-function.js
// function 宣言で関数を定義し、呼び出すデモ
// return のある関数（add）と、return のない関数（greet）の両方を示す

// 引数を2つ受け取り、足し算した結果を返す関数
function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

// 名前を受け取り、挨拶文を出力するだけの関数（戻り値なし）
function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet("ペンギン"); // こんにちは、ペンギンさん

// return を書かない関数は undefined を返す（教材的に重要な挙動）
const greetReturn = greet("ねこ"); // こんにちは、ねこさん
console.log(greetReturn);          // undefined

node 05-function.js で実行すると、

8
こんにちは、ペンギンさん
こんにちは、ねこさん
undefined

と出ます。

3つの要素に分解する

関数を構成する要素は3つです。

  • 引数：レシピに入れる材料（add(a, b) の a と b）
  • 処理：レシピの手順（{ return a + b; } の中身）
  • 戻り値：完成品（return a + b で返される値）

add(3, 5) という呼び出しは、

  1. a に 3、b に 5 を入れる
  2. a + b を計算する（→ 8）
  3. return で 8 を返す
  4. その 8 が const result = ... の右辺として代入される

という流れになります。

return を書き忘れると undefined を返す

05-function.js の最後3行は、初学者の典型ハマりを実物で示しています。

const greetReturn = greet("ねこ"); // こんにちは、ねこさん
console.log(greetReturn);          // undefined

greet 関数は、中で console.log を呼んでいるだけで、return が書かれていません。
こういう関数を呼び出すと、戻り値は自動的に undefined になります。

つまり、const greetReturn = greet("ねこ"); を実行すると、

  • 画面には「こんにちは、ねこさん」が出る（greet の中の console.log）
  • greetReturn には undefined が入る（return がないから）

という二段構えの結果になります。

筆者はSES現場で、Reactのコンポーネントで return を書き忘れて UI が真っ白になるバグを何度も見てきました。
コンポーネント本体も中身は関数なので、return を書かないと undefined が返り、React側で描画するものが無いと判定されて画面が空になるわけです。

return を書いたかどうかは、console.log で戻り値を確認する習慣で防げます。const result = 関数(); console.log(result); のセットを口癖にしておくと、未然に防げるバグは結構多いです。

関数を変数に入れることもできる（予告レベル）

ここで1行だけ予告します。

JavaScriptには、関数を変数に代入する書き方もあります。

const add = function (a, b) {
  return a + b;
};

これを 関数式 と呼びます。
今回扱った function 宣言 と「ほぼ同じこと」を、別の形で書いているだけ、という関係です。

次回003で扱うアロー関数は、この関数式の短縮記法にあたります。
今は中身を理解しなくてOKで、「関数の書き方には別パターンがあって、003で覚える」とだけ押さえておいてください。

003に進んだとき、「アロー関数は別物ではなく、関数の書き方を短くしただけ」という感覚で読めるのが今回の到達点です。

Reactとの接続予告

Reactでは、ありとあらゆる場面で関数が出てきます。

  • コンポーネント本体：function App() { return <h1>...</h1>; } のように、コンポーネントはぜんぶ関数
  • イベントハンドラ：<button onClick={handleClick}> の handleClick も関数
  • カスタムフック：useXxx という名前の関数として自作

React公式の Your First Component ページにも、「React コンポーネントは通常のJavaScript関数」と書かれています。
だから関数の書き方が分かっていないと、Reactは1ミリも書けません。

ここまで来れば、Reactのコードを開いたときに「ああ、ぜんぶ関数だな」とパッと見える状態になっているはずです。

セクション6：コメントと console.log

文法トピックは前のセクションで終わりです。
最後に、書きながら値を確認する道具を押さえておきます。

コメントの書き方

JavaScriptには、コメントの書き方が2種類あります。

// 1行コメント（// のあとに書く）

/*
  複数行コメント
  スラッシュ＋アスタリスクで開いて、アスタリスク＋スラッシュで閉じる
  説明を長く書きたいときに使う
*/

1行で済むメモは //、複数行にわたるなら /* ... */、で使い分けます。

ひとつだけ注意点として、JSのブロックコメントはネストできません（入れ子にできません）。
/* ... /* ... */ ... */ と書くと、最初の */ でコメントが閉じてしまい、構文エラーになります。CSSと違うクセなので、コメントの中で別のコメントを書こうとしないようにしてください。

console.log

06-console-log.js を作って、以下を貼り付けてください。

// 06-console-log.js
// コメント記法（// と /* */）と console.log の使い方をまとめたデモ
// console.log は値を覗くデバッグ用。本番コードには残さないのが鉄則

const name = "ペンギン";
const count = 1;

// 値を1つだけ出す
console.log(name); // ペンギン

// 複数の値をカンマで並べてまとめて出すこともできる
console.log(name, count); // ペンギン 1

// 文字列の中に値を埋め込むには + でつなぐ（テンプレートリテラルは次回003で扱う）
console.log("名前は " + name + " です"); // 名前は ペンギン です

node 06-console-log.js で実行すると、

ペンギン
ペンギン 1
名前は ペンギン です

と出ます。

console.log は、値を画面に出す道具です（ターミナルまたはブラウザのコンソールに出力されます）。
Reactを触っているときも、Node.jsだけ動かしているときも、デバッグの第一手として使うやつなので、今のうちに手に馴染ませておくと後がラクです。

console.log は本番コードには残さないのが鉄則です。デバッグが終わったら必ず削除する、というのをチーム規約レベルで決めている現場が多いです。

筆者もSES現場では、デバッグ用に仕込んだ console.log("userId:", userId) を消し忘れたままリリースして、レビューで指摘された経験があります。
本番サイトのDevToolsを開いたら社内デバッグログがずらずら見えている、という状態は地味に格好悪いですし、人によってはセキュリティ的にも気を遣います。

中には Lint ルール（no-console）で機械的に弾く設定にしているチームもありますが、まずは自分の手で消す習慣から始めるのがオススメです。これだけでレビューで指摘される回数が一段減るかなと思います。

001で触れたDevToolsの Console タブも、ブラウザで動くJSの console.log を見るための場所です。Nodeだとターミナル、ブラウザだとDevToolsのコンソール、という棲み分けになります。

セクション7：ここまでがReactのどこに繋がるか

最後に、今回学んだことがReactのどこに繋がるかを1枚の図で整理します。

全体の見取り図

[変数 const/let]      ← stateの定義、props受け取り、ローカル変数
       ↓
[プリミティブ型]      ← stateの初期値、props の型
       ↓
[配列 / オブジェクト] ← stateの中身、props経由のデータ
       ↓
[関数]                ← コンポーネント本体、イベントハンドラ、カスタムフック

セクション2〜5でやったことが、そのままReactの中で使われます。

  • 変数（const）→ const [count, setCount] = useState(0) の左辺
  • プリミティブ型 → state の初期値（useState(0) / useState("") / useState(false) / useState(null)）
  • 配列・オブジェクト → state の中身、props で渡すデータ
  • 関数 → コンポーネント本体、イベントハンドラ

Reactのチュートリアルに出てくる単語のうち、純粋にReact固有なのは useState や useEffect などフック数個で、残りはぜんぶJavaScriptです。
言い換えると、JSが分かっていれば、Reactの新しさはフックという少しの追加機能だけになります。

今回学んだ素のJSは、連載全体の土台です。次回003で短縮記法（アロー関数・分割代入・スプレッド）を覚えると、Reactで毎日見るコードがだいたい読めるようになります。

まとめ：Reactに必要なJavaScript基礎の最低限

最後に、タイトルの問い「Reactに必要なJavaScript基礎の最低限」にちゃんと答えておきます。

筆者の答えは、

  • 変数は const 基本・必要なときだけ let の2択。実務でも7〜8割は const で足りる
  • プリミティブ型は5種類押さえれば十分：string / number / boolean / null / undefined。typeof null === "object" は仕様の歴史的事情、null 判定は === null で
  • 配列 [] は順番、オブジェクト {} は名前で取り出す入れ物。const でも中身はいじれることに注意（Reactのstateでは別ルールが入る）
  • 関数は function 名前(引数) { return 値; } の素の形をまず押さえる。return を書き忘れると undefined が返るので、console.log で確認する習慣を

です。

本記事で扱った内容は、MDNの該当ページに詳しい情報があります。
深掘りしたい方は、そちらも合わせてどうぞ。

ただ、連載を進めるだけならこの記事で紹介した範囲で十分です。
まずは6本の .js ファイルを自分の手で動かしてみるところから始めてみてください。

読むだけより、手を動かすほうが3倍くらい早く身につきます（筆者の体感）。
本記事のコードは 2026-05-11 / Node.js v24.13.0 で実行検証済みなので、安心して写経してOKです。

次の記事

次回予告

次の003では、React頻出のモダンJSを扱います。

  • アロー関数（(a, b) => a + b）：今回の function 宣言の短縮形
  • 分割代入（const { name } = user; / const [a, b] = arr;）：オブジェクトや配列を一気にバラす書き方
  • スプレッド構文（{ ...obj } / [...arr]）：オブジェクト・配列をコピーする書き方

これらはReactで毎日見る書き方です。今回の素のJSが土台になっているので、今日の内容に手応えがないうちは003に進まないほうが、結果的に近道だと思います。

前の記事 / 次の記事

Part 1全体の流れは、冒頭の「この連載について」セクションの表をご参照ください。

それでは、次の記事でまたお会いしましょう！
ペンギンエンジニアでした。

株式会社 ONE WEDGE

https://onewedge.co.jp/

株式会社ONE WEDGEは、Webシステム開発・SES・AI/DX支援を行うIT企業です。
生成AIを活用した業務効率化や次世代システム開発にも注力しており、企業の課題解決だけでなく、エンジニア一人ひとりの成長にも本気で向き合っています。
また、技術は「一人で学ぶもの」ではなく、「仲間と成長するもの」だと考え、社内外でのコミュニティづくりにも力を入れています。

Discussion