初心者必見！JavaScriptの基本概念をわかりやすく解説

JavaScriptはウェブ開発において不可欠なプログラミング言語の一つです。この記事では、JavaScriptの基礎について初心者にも理解しやすいように説明します。JavaScriptを学ぶことで、ウェブページに動きのある要素を追加できるようになります。例えば、画面スクロールに応じて動的にclassを追加したり、クリックに応じてコンテンツを表示したりすることができます。

JavaScriptとは?

JavaScriptは、ウェブページに動きを加えるために使われるプログラミング言語です。HTMLとCSSと組み合わせて使用され、ウェブサイトの構造、スタイル、動作をそれぞれ担当します。HTMLがウェブサイトの骨組みを構築し、CSSが見た目を整えるのに対し、JavaScriptはウェブサイトに動きを与えます。
有名なJavaScriptライブラリの一つにjQueryがありますが、JavaScriptの基礎を学ぶ際にはライブラリやフレームワークを使わずに純粋なJavaScript（バニラJavaScriptとも呼ばれます）の基礎をしっかりと学び、プログラミングの基本的な原理とJavaScriptの動作を理解することが重要です。すぐに使う事情がある方は、比較的扱いが簡単なjQueryから学ぶのも一つの手かもしれません。

変数

プログラミングにおいて、変数や定数はデータを格納するための容器のようなものです。
JavaScriptでは、変数を宣言するためにletとconstの二つのキーワードがあり、それぞれ異なる用途と特性を持っています。

letとconstの選択は、変数の使用目的に応じて行うことが重要です。値が変更される予定のない変数にはconstを、値が変更されうる変数にはletを使用すると良いでしょう。

let

letキーワードは、値が変更可能な変数を宣言するために使用します。つまり、letで宣言された変数には、後から新しい値を代入することが可能です。例えば、

let age = 25;
age = 26; // ageの値を更新できる

この例では、ageという名前の変数をletで宣言し、最初は25という値を割り当てています。その後、ageに26という新しい値を代入しています。このように、letで宣言された変数は、プログラムの実行中に値の更新が可能です。

const

一方、constキーワードは、値が変更不可能な定数を宣言するために使用します。constで宣言された変数には、一度値を割り当てると、その後その値を変更することはできません。例えば、

const birthYear = 1995;
birthYear = 1996; // エラーが発生する

この例では、birthYearという名前の定数をconstで宣言し、1995という値を割り当てています。その後、birthYearに1996という新しい値を代入しようとすると、JavaScriptはエラーを発生させます。これは、constで宣言された変数の値は変更不可能であるためです。

データ型

JavaScriptには、数値、文字列、boolean値（trueまたはfalse）、オブジェクトなど、さまざまなデータ型があります。例えば、

let message = "Hello, World!";
let number = 42;
let isActive = true;

このコードでは、messageに文字列、numberに数値、isActiveにboolean値をそれぞれ格納しています。

boolean値とは？

文字列、数値は分かりやすいですが、boolean値というのは馴染みがない語かと思います。
boolean値とは、プログラミングにおいて非常に基本的かつ重要な概念です。
boolean値は、真（true）または偽（false）の2つの値のいずれかをとるデータの型で、条件の成立や判定の結果を表すのに使います。このシンプルさが、プログラミングにおける強力なツールとなります。

boolean値の用途

boolean値は、以下のような多くの場面で使用されます。

1. 条件判断
   プログラム内で条件分岐を行う際に、特定の条件が真（true）か偽（false）かを評価するために使います。例えば、ある数値が特定の範囲内にあるかどうかを判定する際にboolean値が用いられます。
2. 制御フローの管理
   プログラムの実行フローを制御するために、if文やwhileループなどの制御構造にboolean値が使用されます。これにより、特定の条件下でのみコードブロックを実行することができます。
3. フラグの使用
   プログラム内で特定の状態を記録するために、フラグとしてboolean値が使われることがあります。例えば、ユーザーがある操作を完了したかどうかを示すためにtrueまたはfalseを設定することができます。

boolean値の例

実際にJavaScriptでのboolean値の使用例を見てみましょう。

let isAdult = true; // 成人かどうかを表すboolean値
let isOpen = false; // 何かが開いているかどうかを表すboolean値

// boolean値を使った条件判断
if (isAdult) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}
// boolean値を使った条件判断
if (isOpen) {
    console.log("開いています。");
} else {
    console.log("閉じています。");
}

このコードでは、isAdultとisOpenという2つの変数にboolean値を設定しています。その後、if文を使ってこれらの値に基づいて異なるアクションを実行しています。
このように、boolean値は、プログラム内での判断や状態管理を行うための非常にシンプルで効率的な方法を提供します。この基本的な概念を理解し、適切に使用することで、より複雑なプログラミングタスクに取り組む基礎を築くことができます。

イベントリスナー

話を戻して、JavaScriptの解説の続きです。
JavaScriptでは、イベントを使用してユーザーの操作に反応できます。例えば、ボタンがクリックされたときや、キーボードが押されたときなどです。イベントリスナーを使用して、これらのイベントに対する反応を設定できます。

document.getElementById("myButton").addEventListener("click", function() {
    showAlert("ボタンがクリックされました！");
});

このコードは、IDがmyButtonの要素がクリックされたときにアラートを表示します。

関数

JavaScriptの関数は、特定のタスクを実行するためのコードのブロックです。JavaScriptでは、functionを使って関数を定義します。例えば、このlogMessage()という関数が実行されると、コンソールに”Hello!”と表示されます。

function logMessage() {
    console.log("Hello!");
}

関数は、コードの再利用性を高め、複雑なプログラムをより管理しやすくするのに役立ちます。
関数だけを書いた状態ではまだタスクは実行されないため、この関数はイベントリスナーを使って呼び出す必要があります。

イベントリスナーを使って関数を呼び出すには

イベントリスナーを使って、ボタンがクリックされたときにlogMessage関数を実行させます。イベントリスナーは、特定のイベント（この場合はクリック）が指定された要素（id=”myButton”の要素）に対して発生した際に、関数を呼び出す命令です。

function logMessage() {
    console.log("Hello!");
}
document.getElementById("myButton").addEventListener("click", logMessage);

一つのイベントで複数の関数が発火する際は、以下の書き方を用います。

function logMessage() {
    console.log("Hello!");
}
function showAlert() {
    alert("ボタンがクリックされました！");
}
document.getElementById("myButton").addEventListener("click", function() {
    logMessage(); // ここに関数を入れる
    showAlert(); // ここに関数を入れる
    // 必要に応じて関数を増やせる
});

click イベントが発生したときに、無名関数が実行され、その中で showAlert() と logMessage() の両方の関数が順番に呼び出されます。
複数の関数を一つのイベントに紐付けたい場合の一般的なアプローチで、使う関数が一つしかない場合でも使うことができるのでこちらを覚えていたほうが柔軟性に使えるでしょう。

まとめ

JavaScriptは、ウェブ制作において非常に重要な言語です。この記事で紹介した基礎的な概念を理解することで、より複雑なプログラミングに挑戦する準備ができます。
JavaScriptの学習は、実践を通じて最も効果的に進めることができるため、小さなステップから始めて徐々にスキルを磨いていくことをお勧めします。