JavaScript | 第1章「JavaScriptの基礎」

全体の趣旨

この「JavaScriptの基礎」では、JavaScript（以下 JS）が何か、どんな特徴があるか、どのように学び始めればよいか、などの基本的な考え方を紹介します。まずこういう基礎的な導入を押さえてから、文法やデータ型、制御構造などを順に学んでいく構成になっています。

初心者にとって、いきなり文法をたくさん並べられても理解しにくいので、この導入部分で「JSとは何か」「どういう世界で使われるか」をまず把握するのが大切です。

主な内容とポイント

JavaScriptの基礎には、以下のようなテーマが扱われています。順を追って説明します。

基本ポイント：JavaScriptとは何か

JavaScriptの役割

• Webページを動的にするスクリプト言語：HTMLで「構造」、CSSで「見た目」を定義するなら、JavaScriptは「動き・振る舞い」や「ユーザーとのやり取り（クリック、入力など）」を制御できるツール。
• ブラウザ上で実行される：ユーザーが見るWebページの中で、その場で動くプログラムを書くことができる。
• 他の技術と協調して使われる：HTML を操作したり、CSS を変えたり、Web APIとやり取りしたりできる。

プログラミングをするための基本的な考え方

JavaScriptの基礎を学ぶには、下のような考え方をまず押さえておくといい：

補足：JavaScript の基礎的な性質

入門編の先（語彙や文法の章）で扱われる内容の基礎を、軽く触れておきます。これが理解できると、実際にコーディングを始めたときにスムーズになります。

動的・型なしの言語

JavaScript は動的型付けの言語で、変数に型を宣言する必要はありません。値を代入したときに型が決まります。
例えば：

let x = 5;     // 数値（Number）として扱われる  
x = "hello";   // 次は文字列（String）になる  

let x = 5;     // 数値（Number）として扱われる  
x = "hello";   // 次は文字列（String）になる  

この柔軟性が便利な一方で、予期せぬ型の違いによるバグが発生しやすい点には注意が必要です。

型と値

JS には主に以下のような “プリミティブ型” が存在します：

• Number（数値）
• String（文字列）
• Boolean（真偽値、true/false）
• null
• undefined
• Symbol（比較的あまり使わないが、一意性を扱う型）
• BigInt（非常に大きな整数を扱う型）

これら以外はオブジェクト（配列、関数、オブジェクトリテラルなど）として扱われます。

制御構造（if, for, while など）

プログラムの流れを制御するために、条件分岐やループといった構造が使われます。
例えば：

if (score >= 60) {
  console.log("合格");
} else {
  console.log("不合格");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

if (score >= 60) {
  console.log("合格");
} else {
  console.log("不合格");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

これらは他の多くのプログラミング言語と共通の考え方です。

関数とオブジェクト

JavaScript では関数やオブジェクトが非常に重要な役割を持ちます。関数は「処理のまとまり」を定義するもので、オブジェクトは複数の値（プロパティ）や処理（メソッド）をまとめたものです。

具体的な例を使って理解しよう

初心者にとって理解しやすいように、ごく簡単な例で見ていく。

// 変数
let age = 20;
let name = "Taro";

// 演算
let nextAge = age + 1;

// 条件分岐
if (age >= 20) {
  console.log(name + " は成人です。");
} else {
  console.log(name + " は未成年です。");
}

// 繰り返し
for (let i = 0; i < 5; i++) {
  console.log("こんにちは " + i);
}

// 関数
function greet(person) {
  console.log("こんにちは、" + person + "さん！");
}

greet(name);

// 変数
let age = 20;
let name = "Taro";

// 演算
let nextAge = age + 1;

// 条件分岐
if (age >= 20) {
  console.log(name + " は成人です。");
} else {
  console.log(name + " は未成年です。");
}

// 繰り返し
for (let i = 0; i < 5; i++) {
  console.log("こんにちは " + i);
}

// 関数
function greet(person) {
  console.log("こんにちは、" + person + "さん！");
}

greet(name);

この例で出てくるのは

• let を使って変数を定義する
• 数値・文字列の演算
• if … else による条件分岐
• for による繰り返し
• 関数の定義と呼び出し

これらは、このサイトが後の章でひとつずつ詳しく扱ってる要素。

学び始めるためのステップ・アドバイス

この入門編を読んだ後、次のようなステップで進むと理解が深まりやすいです。

1. 簡単なスクリプトを書く
   　ブラウザの「開発者ツール → コンソール」や、HTML ファイルに <script> タグで JS を書き、実行してみる。
2. 文法を学ぶ
   　変数宣言、演算子、条件分岐、ループ、関数、配列、オブジェクトなどを順に学ぶ。
3. MDN のリファレンスを活用する
   　何か調べたい文法・機能（例：Array.prototype.map、forEach、Promise など）が出てきたら、MDN のリファレンスを参照する。
4. ハンズオンで使ってみる
   　簡単なウェブページを作り、その中で JS を使ってボタンを押したら文字が変わる、画像が切り替わる、など動きを付けてみる。
5. 試行錯誤・調べることを恐れない
   　エラーが出たら原因を調べ、似た例を見つけて模倣するのが学習には有効です。

JavaScript | MDN

JavaScript (JS) は軽量でインタープリター型（あるいは実行時コンパイルされる）第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js...

developer.mozilla.org