PC-LABOを試すためのJavaScript・React入門（第1回）～変数・型・条件分岐・ループ・関数～【GitHub対応】

はじめに
今回やること
実行環境
変数：constとlet
データ型
文字列に値を埋め込む
比較と条件分岐
ループ
関数とアロー関数
今回のまとめ
次回予告
1. 関連

はじめに

「Reactで学ぶ予定管理アプリ開発」では、Reactの機能が次々と登場する。ただ、つまずく原因の多くはReactそのものではなく、土台になっているJavaScriptの書き方である。

そこで、初心者の方は、この入門シリーズ（全3回）で、JavaScriptとReactの基本を押さえておこう。
第1回は、JavaScriptの最も基本的な文法を扱う。

今回やること

変数（constとlet）を使う
データ型を知る
文字列に値を埋め込む
条件分岐とループを書く
関数とアロー関数を書く

実行環境

GitHub Codespacesのターミナルで、Node.jsを使って実行する。ブラウザは使わない。

ソースコードは、次の筆者のリポジトリの01_javascript-basicsフォルダにある。

GitHub – HappyTalk10/pc-labo-js-react-intro

Contribute to HappyTalk10/pc-labo-js-react-intro development by creating an account on GitHub.

Codespacesを開いたら、ターミナルでNode.jsのバージョンを確認する。

node -v

バージョンが表示されれば準備完了である。01_javascript-basicsフォルダのbasics.jsに、以下のコードが順番に書かれている。次のコマンドで実行できる。

cd 01_javascript-basics
node basics.js

変数：constとlet

変数は値に名前をつけて入れておく箱である。JavaScriptでは主に2つの宣言を使う。

const title = "歯医者";
let count = 0;

count = count + 1;
console.log(title, count); // 歯医者 1

const：後から値を入れ替えられない
let：後から値を入れ替えられる

constの変数に再代入すると、エラーになる。

title = "会議"; // TypeError: Assignment to constant variable.

迷ったらconstを使い、値を変える必要がある時だけletにする。Reactのコードでも、ほとんどがconstである。

データ型

const n = 10;          // number（数値）
const s = "予定";      // string（文字列）
const b = true;        // boolean（真偽値）
let u;                 // undefined（値が入っていない）
const nl = null;       // null（「何もない」を明示する値）

console.log(typeof n, typeof s, typeof b, typeof u, typeof nl);
// number string boolean undefined object

typeofは型を調べる演算子である。nullがobjectと表示されるのは、JavaScriptの昔からの仕様上の癖なので、今は気にしなくてよい。

C言語と違い、型を宣言する必要はない。整数と小数も、同じnumber型として扱われる。

文字列に値を埋め込む

バッククォート（`）で囲むと、${}の中に変数や式を埋め込める。これをテンプレートリテラルと呼ぶ。

const date = "2026-10-01";
const plan = "歯医者";

console.log(`${date} の予定：${plan}`);
// 2026-10-01 の予定：歯医者

Reactでは画面に表示する文字列を組み立てる場面が多く、頻繁に使う書き方である。

比較と条件分岐

JavaScriptでは、等しいかどうかの比較に===（3つのイコール）を使う。

console.log(1 === 1);   // true
console.log(1 === "1"); // false（型が違う）
console.log(1 == "1");  // true（型を勝手に変換して比べてしまう）

==は型を自動で変換して比べるため、思わぬ結果になりやすい。===だけを使うと決めておくと安全である。

条件分岐はifで書く。

const hour = 15;

if (hour < 12) {
  console.log("午前");
} else if (hour < 18) {
  console.log("午後");
} else {
  console.log("夜");
}
// 午後

ループ

回数が決まっている繰り返しにはforを使う。

for (let i = 1; i <= 3; i++) {
  console.log(`${i}回目`);
}

配列（複数の値をまとめたもの）の中身を順に取り出すには、for...ofが便利である。

const plans = ["会議", "歯医者", "飲み会"];

for (const plan of plans) {
  console.log(plan);
}

配列の詳しい使い方は第2回で扱う。ここでは「角括弧で値を並べたものが配列」とだけ覚えておけばよい。

関数とアロー関数

関数は、処理に名前をつけてまとめたものである。

function formatPlan(date, title) {
  return `${date} ${title}`;
}

console.log(formatPlan("2026-10-01", "歯医者"));
// 2026-10-01 歯医者

同じ関数を、アロー関数という書き方でも書ける。

const formatPlan2 = (date, title) => {
  return `${date} ${title}`;
};

// 処理が return だけの場合は、波括弧と return を省略できる
const formatPlan3 = (date, title) => `${date} ${title}`;

console.log(formatPlan3("2026-10-01", "歯医者"));

アロー関数は、Reactで非常によく目にする。=>を見たら「関数だ」と読めるようになっておこう。