JavaScriptの基本

この記事ではJavaScriptの基本について説明します。

YouTube Video

Hello World!の実行

JavaScript概要

JavaScriptは、ウェブ開発において最も広く使用されているプログラミング言語の1つです。主にウェブページに動的な要素を追加するために使われ、ユーザーインターフェースの操作、データの送受信、アニメーションの作成などが可能です。クライアントサイド（ブラウザ上）とNode.jsなどの技術を使ってサーバーサイドで動作することができます。シンプルで柔軟な言語であるため、初心者にも学びやすく、プロの開発者にも多く利用されています。

JavaScriptにおける変数

JavaScriptの変数は、データを格納して再利用するためのコンテナのようなものです。変数を使うことで、プログラム内で値を保持し、それを操作することができます。

変数の宣言

JavaScriptでは、変数を宣言するために3つのキーワードがあります。

• var：古くから使われている変数宣言方法ですが、スコープの扱いが複雑で注意が必要です。関数スコープに基づきます。

1var x = 10;

• let：ES6で導入され、ブロックスコープを持つ変数宣言方法です。再代入可能ですが、同じスコープで再宣言はできません。

1let y = 20;

• const：変更不可能（定数）の変数宣言に使われます。ブロックスコープを持ち、宣言後に再代入や再宣言はできません。

1const z = 30;

スコープ

変数にはスコープという概念があります。

グローバルスコープ

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• グローバルスコープはどこからでもアクセス可能な変数です。varで宣言した変数は、グローバルまたは関数スコープを持ちますが、letやconstはブロックスコープです。

ブロックスコープ

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• ブロックスコープ：letやconstで宣言した変数は、{}（中括弧）内でのみ有効です。

• {}（中括弧）の外からアクセスするとエラーになります。

関数スコープ

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• 関数スコープ：関数の内部で定義された変数や関数がその関数の外からアクセスできません。varを使って関数内で宣言した変数は、このスコープに属します。

• この例では、変数functionVarは、関数スコープ内であれば{}（中括弧）の外からでもアクセスできます。一方、変数functionScopedには、関数スコープ外からアクセスしているためエラーになります。

このようにvarで宣言した変数は関数スコープしか持たず、ブロックスコープがないため、予期しない範囲で変数が使用されるリスクがあります。値が変更されない変数にはconstを用い、通常はletを用いるようにして、varの利用は可能な限り避けることが望ましいです。

データ型

JavaScriptの変数は、さまざまなデータ型の値を格納できます。文字列を扱うためのstringや、数値を扱うためのnumberなどがあります。

主なデータ型は以下の通りです。

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• プリミティブ型：
  • number: 数値（整数や浮動小数点数）を扱います。
  • string: 文字列を扱います。
  • boolean: trueまたはfalseの真偽値を扱います。
  • null: 明示的に「何もない」値を表します。
  • undefined: 初期化されていない変数に自動的に割り当てられる値です。
  • Symbol: 一意な値を作成するためのデータ型です。

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• オブジェクト型：
  • Object: 複数のプロパティを持つデータ構造です。
  • Array: 複数の値を持つリストです。
  • Function: 関数オブジェクトです。

変数への代入と再代入

letやvarで宣言された変数は再代入が可能ですが、constは一度宣言すると再代入できません。

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

変数のホイスティング

JavaScriptでは、変数宣言はスコープの先頭に「持ち上げられる」現象があります。varで宣言された変数はホイスティングされますが、letやconstは宣言前に使用するとエラーになります。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• この場合、varで宣言された変数はホイスティングされ、変数の値が出力されます。

1console.log(b); // ReferenceError
2let b = 20;

• letで宣言された変数はホイスティングされないため、エラーになります。

変数の適切な使用法

変数を適切に使用するために以下の点を考慮できます。

• constを優先的に使用し、varの使用は避けます。
• 変数名の命名規則に従います。
  • userNameやtotalPriceのようにcamelCaseを使用できます。
  • dataやvalueなどの意味が曖昧な名前を極力避け、意味のある名前を使用すると可読性が向上します。
  • 先頭に数字は使えないため、1variableのような名前は使用できません。
• グローバル変数を多用すると、スコープが曖昧になりバグの原因になるため、できるだけ利用を避けます。

まとめ

• var: 古い変数宣言方法で、関数スコープを持ちます。
• let: ブロックスコープで、再代入可能な変数です。
• const: ブロックスコープで、再代入ができない変数（定数）です。
• データ型に応じた変数を使い分け、スコープに注意することが大切です。

JavaScriptのエスケープ文字とは

エスケープ文字とは、通常の文字列リテラル内で特別な意味を持つ文字を表現するための方法です。JavaScriptではバックスラッシュ \ を使用して、特定の文字をエスケープすることで、文字列に特殊な効果を与えたり、制御文字を含めたりすることができます。エスケープ文字は、文字列に改行やタブ、引用符などを含める際に役立ちます。

エスケープ文字の使用例

以下に、エスケープ文字を使用したサンプルコードをいくつか紹介します。

ダブルクォートとシングルクォートのエスケープ

文字列内でダブルクォートやシングルクォートを表現する際には、エスケープ文字を使います。

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

バックスラッシュをエスケープ

バックスラッシュ自体を文字列に含めるには、\ をエスケープします。

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

改行やタブのエスケープ

長い文字列を見やすくするために、改行やタブを挿入することができます。

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Unicode文字のエスケープ

Unicodeエスケープシーケンスを使用することで、特定の文字を16進数のコードで表現できます。

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

注意点

エスケープの多用は可読性を損なう

エスケープ文字を過剰に使用すると、コードの可読性が低下することがあります。特に長い文字列では、エスケープ文字を慎重に使用することが重要です。

テンプレートリテラルを考慮する

JavaScriptでは、バッククォートを使用したテンプレートリテラルを用いることで、エスケープ文字を使用せずに改行や埋め込み表現が可能です。

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

まとめ

エスケープ文字は、文字列内で特別な文字や制御文字を表現するために不可欠です。シングルクォートやダブルクォートをエスケープしたり、改行やタブを追加したりすることで、より柔軟な文字列を作成できます。ただし、エスケープ文字を多用しすぎると、コードが読みにくくなるため、必要に応じてテンプレートリテラルの活用も考慮しましょう。

JavaScriptのバージョン

JavaScriptには、ECMAScript（ES）という標準仕様があります。この標準に基づいてJavaScriptが進化しています。以下に主要なバージョンの簡潔な説明を示します。

• ES3（1999年）

  最初に広く採用されたバージョンです。基本的な構文と機能が確立されました。

• ES5（2009年）

  strict modeの導入や、Array.prototype.forEach、Object.keysなどの新しい機能が追加されました。

• ES6 / ES2015（2015年）

  JavaScriptの大きなアップデートが行われました。let、const、arrow functions、classes、promises、modulesなど、現代的なJavaScriptの基盤となる多くの機能が導入されました。

• ES7 / ES2016（2016年）

  Array.prototype.includesやExponentiation Operator（**）が追加されました。

• ES8 / ES2017（2017年）

  async/awaitが導入され、非同期処理がよりシンプルに書けるようになりました。

• ES9 / ES2018（2018年）

  非同期イテレータや、Rest/Spread Propertiesなどが追加されました。

• ES10 / ES2019（2019年）

  flatMapやObject.fromEntriesなどが追加されました。

• ES11 / ES2020（2020年）

  Optional Chaining（?.）やNullish Coalescing Operator（??）が追加され、コードがシンプルかつ安全に書けるようになりました。

• ES12 / ES2021（2021年）

  String.prototype.replaceAllやPromise.anyなどが追加されました。

• ES13 / ES2022（2022年）

  Array.prototype.atやクラスのprivateフィールド (#field)などが追加されました。

• ES14 / ES2023（2023年）

  Array.prototype.toSortedやSymbol.prototype.descriptionなどが追加されました。

• ES15 / ES2024（2024年）

  Promise.withResolversによるPromiseの簡単な管理、リサイズ可能なArrayBufferなどが追加されました。

現在のJavaScriptは毎年更新されており、最新バージョンでも新しい機能が追加されています。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video