1. JavaScriptとは
この章で学ぶこと
- JavaScriptがWebサイトの中でどの役割を担っているか
- HTMLにJavaScriptを読み込ませる方法
console.log()で動作を確認する流れ
なぜJavaScriptを学ぶのか
Webページには大きく3つの役割があります。HTMLが骨組み、CSSが見た目、JavaScriptが動き。「ボタンを押したらメッセージが出る」「特定の条件で画面が暗くなる」のように、ページに動きを与えるのがJavaScript（略してJS）です。
JavaScriptを実際に動かしてみよう
JavaScriptはHTMLに直接書くこともできますが、ファイルが肥大化する(一箇所集中してしまう)ため外部ファイルに分離して使うのが基本です。これからの講座もすべてこの方法で進めます。
まずはフォルダを準備します。以下のようなフォルダ構成にしてください。
デスクトップ
└─ profact ← ここをVSCodeで開く
├─ html
│ └─ index.html
├─ css
│ └─ style.css
└─ js
└─ script.js
index.html の中身を以下にします。(コピペしちゃってOKです)
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript #1</title>
</head>
<body>
<h1>こんにちは、JavaScript!</h1>
<script src="../js/script.js"></script>
</body>
</html><script> タグは <body> の一番最後に置くのが推奨です。理由は「先にHTMLを描き終えてからJSを動かす方が表示が速い」からです。今はとりあえずここに置くか、と覚えてください。※詳しく知りたい方はメンタリングにて。
script.js には次の1行を書きます。
js
console.log('Hello World!')その後、HTMLをブラウザで開き、右クリック→「検証」→「コンソール」タブを開くと Hello World! と表示されます。
この console.log(〜) は「〜をコンソールに出力する」という命令です。これから何度も使うので、「中身の値を確認したいときの相棒」と覚えてください。
これ以降はこのjsファイルに処理を書いていき、ここのコンソールで確認するといった流れになります。
また、一般的な処理の流れとして、
- 変数を使いデータを保持する
- そのデータをわちゃわちゃいじる
- 条件によってする処理を決める
- 処理を動かす
なことをしていきます。このイメージを元にこれからの各章を学んでいきましょう。
※「ERR_ACCESS_DENIED」のようなエラーが出る場合、Macなら「システム設定→プライバシーとセキュリティ→ファイルとフォルダ」からデスクトップへのアクセス権限を付与してください。
章末チェック
- JavaScriptは Web ページの「動き」を担当する、と自分の言葉で説明できる
<script src="...">を<body>の最後に置く理由を言える- コンソールに
Hello World!を出力できる
演習
script.js を編集して、コンソールに「今日も1日がんばろう！」と表示してみましょう。表示できたら、その下にもう1行 console.log を追加し、何か適当に自分の好きな言葉を表示してください。
2. 変数と命名規則
この章で学ぶこと
- 変数が「データを入れる箱」であること
- 宣言・初期化・代入の3つの操作
- 変数名のつけ方（キャメルケース）
なぜ変数が必要か
「太郎さんに挨拶する」「花子さんに挨拶する」と同じ処理を何度も書くのは大変です。名前の部分だけ変えられるようにできればデータを一時的に入れておく箱があれば、コードがぐっとシンプルになります。これが変数です。
用語の整理
最初に3つの言葉だけ押さえます。
- 宣言：「この名前の箱を使うよ」と宣言すること
- 初期化（定義）：宣言と同時に、最初のデータを箱に入れること
- 代入：箱の中身を後から入れ替えること
変数を宣言する（let を使う）
JavaScriptの変数宣言には let（と const と var）がありますが、最初は let だけ使えばOKです。const と var の違いは別の章でまとめて解説します。
これで「name という箱に文字列『太郎』というデータが、age という箱に数値の 25 が入った状態」になりました。中身を確認しましょう。
文字列は シングルクォート ' かダブルクォート " のどちらで囲んでも構いません。本講座ではシングルクォートで統一します。
代入：箱の中身を入れ替える
代入の = は算数の「左辺と右辺が等しい」ではなく、「右辺の値を左辺の箱に入れる」という意味です。ここは最初につまずく人が多いポイントなので、「= は矢印 ← だ」とイメージしてください。
なのでage = sizeのように「右辺の変数に入ってるデータ」を「左辺の箱に入れる」ことも可能です。
変数名のルール（暗黙のルール）
変数名は基本的に自由ですが、プロジェクトやチームで実際に開発をする際は、全体で読みやすくするために決まった書き方があります。JavaScriptで一般的なのは ローワーキャメルケース（lowerCamelCase）です。
- 良い例：
userName/messageElement/totalPrice - 悪い例：
user_name（スネークケースという、Pythonでよくでてくる）／UserName（パスカルケース、クラス名で使うことが多い）／username（区切りなしで読みにくい）
最初の単語は小文字、2つ目以降の単語の頭文字を大文字にする、というイメージでOKです。
| 規則名 | 形式 | 主な用途 |
|---|---|---|
| ローワーキャメルケース | lowerCamelCase | JavaScript の変数名・関数名 |
| アッパーキャメルケース | UpperCamelCase | クラス名 |
| スネークケース | snake_case | Python など |
| コンスタントケース | UPPER_SNAKE_CASE | 定数 |
| ケバブケース | kebab-case | CSSクラス名 |
章末チェック
- 変数の「宣言」「初期化」「代入」の違いを言葉で説明できる
=が「右辺を左辺に入れる」意味であることを説明できる- ローワーキャメルケースで変数名を書ける
演習
以下の3つの変数を let で初期化してから、console.log で表示してみましょう。変数名はローワーキャメルケースで書いてください。
- あなたの名前を入れた変数
- 今年の年齢を入れた変数
- 好きな食べ物を入れた変数
3. データ型
この章で学ぶこと
- 変数に入れられる主なデータ型6種
typeofで型を確認する方法
なぜ型を知る必要があるか
「数値の 5」と「文字列の '5'」は、見た目は同じでもコンピュータにとっては別物です。これを意識しないと、足し算したつもりが'55'みたいになんか違う感じになっていた…という事故が起きます。最初に「型」の概念を押さえておくと後が楽です。
JavaScriptの主なデータ型
| 型 | 例 | 説明 |
|---|---|---|
| 数値（Number） | 25, 3.14 | 整数・小数 |
| 文字列（String） | '太郎', "Hello" | 文字の並び |
| 論理値（Boolean） | true, false | YES / NO |
| オブジェクト（Object） | { name: '太郎' } | 後の章で扱う。データの集まり |
| 未定義（Undefined） | undefined | 箱は宣言したが中身が空 |
| Null | null | 「何もない」を明示的に表す |
undefined と null の違いは、最初はどちらも「データがない」という認識でOKです。詳細は後の講座で扱います。
型を確認する typeof
「いま変数にどの型のデータが入っているか」を確認したいときに使います。うまくいかない時のチェック作業などで頻繁にお世話になる演算子です。
型変換の落とし穴
変数同士で代入すると、型ごとそのまま移ります。意図せず型が変わってしまうことがあるので注意してください。
このように、後から文字列を代入すると age の型が number から string に変わります。「変数の型は固定ではない」ことは頭に置いてください。
章末チェック
- 主要な6つの型を例とともに挙げられる
typeofで型を確認する書き方を言える- 数値の
5と文字列の'5'が別物だと説明できる
演習
3つの変数を作り、typeof でそれぞれの型を表示してみましょう。
- 整数を入れた変数
- 文字列を入れた変数
trueを入れた変数
4. 演算子
この章で学ぶこと
- 算術演算子（
+ - * / %） - 比較演算子（
== === > < >= <=） - 論理演算子（
&& || !）
なぜ演算子を学ぶか
プログラミングは結局のところ「データを計算・比較して、その結果で次の動きを決める」ことの繰り返しです。演算子は次章の制御構文（if文・for文）の必須材料になります。
算術演算子：四則演算と剰余
% は「割った余り」です。「偶数か奇数か判定する」「特定の回数ごとに何かする」など、後の制御構文と組み合わせるとよく使います。
また、演算子 + を用いるときは注意が必要で、どちらか(もしくは両方)が文字列の場合は、計算ではなく文字列の連結として働きます。
代入の省略形もあります。
a++ a-- は for 文でループ回数を進めるときに頻出します。
比較演算子：2つの値を比べる
比較演算子の結果は必ず true か false（論理値）になります。
それぞれ解説します。まず==は、二つの値が等しいときはtrueになり、等しくないときはfalseになります。似たようなもので===は、二つの値と型が等しいときはtrueになり、等しくないときはfalseになります。そのため、x === zは値は同じ5だが、形が違うためfalseになっています。
二つの値を比較する>では、左側が右より大きければtrueになり、それ以外はfalseとなります。<を使った場合はその逆です。
似たようなもので>=は、左側が右以上(右の値を含む)ならtrue、それ以外はfalseとなります。<=を使った場合はその逆です。
例えば、x < 5の場合は「xは5より小さい(5未満)か」なのでfalseとなりますが、x <= 5は「xは5以下か」なのでtrueとなります。
== ではなく === を使うのが鉄則
== は「型が違っても値が等しければ true」、=== は「型も値も両方等しいときだけ true」です。実務では '5' == 5 のような意図しない一致を防ぐため、必ず ===（と !==）を使ってください。
論理演算子：複数の条件を組み合わせる
それぞれ解説します。
AND条件にしたい(両方trueでないとtrueにならない)場合は&&を使います。これによりAND条件の判定をすることができます。
OR条件にしたい(どちらかがtrueならtrueになる)場合は||を使います。
NOT条件(論理値の逆転)をしたい場合は、その論理値の前に!を置きます。似たようなもので比較演算子で「xとyが等しくないとき」としたいときは、x != yとします。１個目の=を!にすることで、比較した結果の否定値になります。
&&（AND）：両方とも true のときだけ true||（OR）：どちらかが true なら true!（NOT）：true/false を反転
章末チェック
- 算術・比較・論理の3種の演算子をそれぞれ1つずつ例で示せる
==ではなく===を使う理由を説明できる&&と||の違いを言える
演習
変数 score に対して、以下を console.log で確認してください。
scoreが 60 以上かつ 80 未満かどうかscoreが 100 と等しいかどうかscoreを 10 で割った余りを出力
5. 制御構文
この章で学ぶこと
- 条件分岐：
if/else if/else/switch - 繰り返し：
for/while - 無限ループの避け方
なぜ制御構文が必要か
これまでのコードは「上から下に順番に実行されるだけ」でした。実際のWebアプリは条件で動きを変えたり、同じ処理を繰り返したりする必要があります。それを実現するのが制御構文です。
if 文：条件で処理を分ける
例として、点数によって評価を出すコードを書きます。
if (条件) { ... }：条件が true のときだけ{ }の中に書いた処理(複数行書いても可)を実行else if (条件2) { ... }：直前の条件が false で、条件2が true のときだけ実行else { ... }：上のすべての条件が false のときに実行
もっと複雑に書いてみると、
このようにして、条件に合わせた処理を的確に実行することができます。
switch 文：たくさんの選択肢から選ぶ
case 値:のあとにbreakを忘れると、次の case まで流れて実行されるので注意- どれにも一致しないときは
defaultに流れる
for 文：決まった回数を繰り返す
「1〜100の数字を出力」を if 文だけで書くと 100 行必要ですが、for 文なら3行で済みます。
構造はこうです。
となっていて今回の場合は、
- for文内でのみ使える変数
i =0を定義(初期化) i <= 100がtrueなら処理実行{ ~処理~ }の処理を実行i = i + 1の省略形i++: iに1を加算- iが100を超えたのでfor文を抜ける(forでの処理が終了)
このようにして「i を 1 から始めて、i <= 100 の間は処理を続け、毎回 i を 1 増やす」になります。
while 文：条件が成り立つ間ずっと繰り返す
for と動きはほぼ同じですがこちらは条件がtrueの間、永遠にループさせる時に使います。先ほどの「1~100の数字を出力して」をwhile文で書くとこのようになります。使い所としては、繰り返し回数が固定されていないとき（「条件が満たされるまで」など）に便利です。
⚠️ 無限ループに注意
while で i++ を書き忘れると、i が永遠に 1 のまま i <= 100 が true であり続け、処理が止まらなくなります。これを無限ループと呼びます。書いた直後に「ちゃんと終わるか？」を必ず確認してください。
無限ループでブラウザが固まったら、タブを閉じるなどしてプログラムを切断・終了させて再度開けばOKです。
章末チェック
- if / else if / else を使って3段階以上の分岐が書ける
- for 文の「初期化・継続条件・更新」の3要素を説明できる
- 無限ループがなぜ起きるかを言える
6. const / let / var の違い
この章で学ぶこと
letとconstの違い（再代入できるかどうか）varが非推奨である理由- 「変数」と「定数」の使い分け
なぜ3種類もあるのか
JavaScriptには歴史的な経緯で var が先にあり、後から let と const が追加されました。現在の実務では let と const だけ使うのが標準で、var は(基本的には)使いません。
3つの違い
| let | const | var | |
|---|---|---|---|
| 初期値 | あり・なし | 必須 | あり・なし |
| 再宣言（同じ名前で再度宣言） | ❌ できない | ❌ できない | ⭕ できる（これがバグを生む） |
| 再代入（中身を入れ替える） | ⭕ できる | ❌ できない | ⭕ できる |
const の使いどころ
const は「定まったもの＝定数」を作るためのものです。最初に入れた値を後から変更できません。
「あとから変えるつもりがない値」は、すべて const で書くのが推奨です。意図せず書き換えてしまう事故を防ぐためです。
let の使いどころ
ループのカウンタや、状況によって中身を入れ替える変数は let を使います。
⚠️ var は使わない
※実は、varは公式から非推奨となっています。
var は再宣言できてしまうため、「同じ名前で再度宣言してバグになる」事故が起きやすく、JavaScript公式からも非推奨です。本講座では今後 var は使いません。
章末チェック
constで宣言した変数の中身を変更しようとするとどうなるか言えるletとconstの使い分けの方針を説明できるvarを使わない理由を1つ言える
7. まとめ
この講座で身についたこと
この講座で、JavaScriptの基礎を学ぶことができました。変数と定数、データ型、演算子、制御構文といった基本的な概念を理解することで、システムチックなプログラミングへの第一歩を踏み出すことができました。
- JavaScriptが「Webページに動きを与える」言語であること
- 変数・データ型・演算子・制御構文という4大基礎
==ではなく===を使うべき理由const/let/varの違いと使い分け- 命名規則（ローワーキャメルケース）
これからは、これらの知識を基により高度なJavaScriptの機能や実践的なコーディングテクニックを学んでいきましょう。