JavaScriptの基本

JavaScriptとは

JavaScriptは、Web開発で広く使用されるプログラミング言語です。
ブラウザ上で動作し、HTMLやCSSと連携して動的なWebサイトを作成できます。
また、ブラウザとテキストエディタがあれば、特別な環境構築をせずに手軽に扱うことができます。
さらに、Node.jsなどの実行環境を利用することで、サーバ上でも動作し、バックエンドの開発にも用いられます。

変数とデータ型

変数

変数とは、データ（値）を保存するための箱のようなものです。プログラムの中で、数値や文字列などの情報を一時的に保存し、後で使うことができます。

変数の宣言と種類

宣言	特徴
var	古い方法。再宣言・再代入が可能。関数スコープ。
let	再代入が可能。ブロックスコープ。
const	再代入不可。ブロックスコープ。

スコープ

スコープとは、変数が有効な範囲のことです。JavaScriptでは主に以下の2種類のスコープがあります。

スコープの種類	有効範囲	適用される変数
関数スコープ	関数内のみ有効	var
ブロックスコープ	{}（ブロック）内のみ有効	let、const

データ型

データ型とは「プログラムで扱う値の種類」を定義したものです。
例えば、「数値」と「文字列」は違う種類のデータなので、それらを適切に処理するために区別する必要があります。

データ型	説明	例
Number	数値（整数・小数）	42, 3.14
String	文字列（テキスト）	"Hello", 'World'
Boolean	真偽値（true/false）	true, false
Undefined	値が未定義	let x;（x は undefined）
Null	値が存在しない	let y = null;
Array	複数の値を順番に保持	[1, 2, 3, "hello"]
Object	キーと値のペアのデータ	{ name: "Alice", age: 25 }
Function	関数（コードのまとまり）	function greet() {}

// 文字列（String）
var name = "太郎";
// 数値（Number）
let age = 25;
// 真偽値（Boolean）
const isStudent = true;
// 配列（Array）
let arr = [1, 2, 3, "hello"];
// オブジェクト（Object）
let obj = { name: "Alice", age: 25 };

ログ出力

JavaScriptのログ出力はconsole.logを使用します。
console.log は、JavaScriptで デバッグのために値を出力する 標準的な方法です。
開発者ツールの「コンソール」にメッセージを表示できます。

// 「Hello World!!」と出力される
console.log("Hello World!!"); 

コメント

コメントとは、コードの説明やメモを書き込むための部分 であり、JavaScriptの実行には影響しません。 他のプログラマーや自分が後でコードを理解しやすくするために使います。

// これはコメントです。
// コメントを残すだけでなく、処理も無効かできます。

/**
 * これはもコメントです。関数ヘッダーでよく使用します。
 */

条件分岐

条件分岐とは、特定の条件によって処理を変えること です。
例えば、ユーザーがログインしているかどうかで表示を変えたり、数値によって異なる処理を実行できます。

if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}

ループ処理

ループ（繰り返し処理）とは、同じ処理を複数回実行するための構文 です。
例えば、配列の要素を順番に処理したり、特定の条件を満たすまで処理を繰り返すのに使います。

for (let i = 1; i <= 5; i++) {
    console.log("カウント: " + i);
}

関数

関数とは、特定の処理をひとまとまりにして、再利用できるようにしたもの です。
同じ処理を何度も書かずに済み、コードを効率的に管理できます。

function greet(userName) {
    return "こんにちは、" + userName + "さん！";
}
console.log(greet("太郎"));

イベントリスナー

イベントリスナー（Event Listener）は、ユーザーの操作（クリック、キー入力、マウス移動など）に応じて処理を実行する仕組みです。addEventListener メソッドを使うことで、イベントを検知し、特定の処理を実行できます。

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

イベントタイプ	説明
click	要素がクリックされたとき
dblclick	要素がダブルクリックされたとき
mousedown	マウスボタンが押されたとき
mouseup	マウスボタンが離されたとき
mousemove	マウスが動いたとき
mouseover	マウスが要素上に来たとき
mouseout	マウスが要素から離れたとき
keydown	キーが押されたとき
keyup	キーが離されたとき
keypress	キーが押されたとき（非推奨）
input	入力フィールドの値が変更されたとき
change	フォーム要素の値が変更されたとき（確定時）
focus	要素にフォーカスが当たったとき
blur	要素のフォーカスが外れたとき
submit	フォームが送信されたとき
dragstart	ドラッグが開始されたとき
drag	要素がドラッグされている間
dragend	ドラッグが終了したとき
drop	ドロップが発生したとき