目次
JavaScriptとは
JavaScriptは、ウェブブラウジングの際にアプリケーションに動的な機能を提供するために開発されたプログラミング言語です。HTMLとCSSとともに、ウェブページの見た目や振る舞いを制御するための3つの主要な技術の1つです。JavaScriptはブラウザ上で実行され、様々なデバイスやオペレーティングシステムで利用できます。
JavaScriptの基本構文
変数とデータ型
JavaScriptには、データを格納するための変数があります。変数は、let キーワードを使用して宣言されます。また、定数（変更できない変数）は、constキーワードを使用して宣言されます。
let name = "John";
const pi = 3.14159;JavaScriptには以下のような主要なデータ型があります。
- 文字列（String）
- 数値（Number）
- 真偽値（Boolean）
- オブジェクト（Object）
- 配列（Array）
- Null
- Undefined
演算子
JavaScriptには、以下のような基本的な演算子があります。
- 算術演算子（+、-、*、/、%）
- 比較演算子（==、===、!=、!==、>、<、>=、<=）
- 論理演算子（&&、||、!）
let sum = 10 + 20;
let isEqual = (5 == "5");
let isStrictEqual = (5 === "5");制御構造
JavaScriptでは、以下のような制御構造を使用して、コードの実行フローを制御することができます。
- if文
- switch文
- forループ
- whileループ
- do-whileループ
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}
for (let i = 0; i < 10; i++) {
console.log(i);
}関数とスコープ
関数は、特定のタスクを実行するコードのまとまりです。JavaScriptでは、関数は function キーワードを使用して定義されます。関数は、再利用可能であり、コードの繰り返しを避けることができます。また、関数は引数を受け取り、値を返すことができます。
function greet(name) {
return "Hello, " + name;
}
console.log(greet("John"));スコープは、変数がどこからアクセスできるかを決定する範囲です。JavaScriptには、グローバルスコープとローカルスコープの2種類のスコープがあります。グローバルスコープに宣言された変数は、どこからでもアクセスできますが、関数内で宣言された変数は、その関数の中でのみアクセスできます。
let globalVar = "I am global!";
function exampleFunction() {
let localVar = "I am local!";
console.log(globalVar);
console.log(localVar);
}
exampleFunction();
console.log(globalVar); // OK
console.log(localVar); // ErrorオブジェクトとJSON
JavaScriptのオブジェクトは、キーと値のペアを持つデータ構造です。オブジェクトは、データのまとまりや構造を表現するのに便利です。オブジェクトは、リテラル表記法（{}）を使用して作成することができます。
let person = {
name: "John",
age: 30,
greet: function() {
return "Hello, " + this.name;
}
};JSON（JavaScript Object Notation）は、データ交換のための軽量なデータ形式で、オブジェクトと非常によく似ています。JSONは、JavaScriptのオブジェクトリテラル構文をベースにしており、簡単にオブジェクトへ変換できます。
{
"name": "John",
"age": 30
}配列
JavaScriptの配列は、順序付けられたデータのコレクションです。配列は、リテラル表記法（[]）を使用して作成することができます。配列内の要素には、添字（インデックス）を使ってアクセスします。また、配列には様々なメソッドが用意されており、要素の追加、削除、検索などができます。
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
fruits.push("orange");
fruits.splice(1, 1);DOM操作
DOM（Document Object Model）は、ウェブページの構造を表現するためのプログラミングインターフェースです。JavaScriptを使ってDOMを操作することで、ウェブページの要素を追加、削除、変更することができます。DOM操作は、ウェブページの動的な振る舞いやインタラクティビティを実現するために使用されます。
以下は、よく使われるDOM操作の例です。
- 要素の選択
- 属性の変更
- 要素の追加・削除
- イベントリスナーの追加・削除
let element = document.querySelector("#myElement");
element.style.backgroundColor = "blue";
let newElement = document.createElement("div");
element.appendChild(newElement);
element.addEventListener("click", function() {
alert("Element clicked!");
});
element.removeEventListener("click", functionName);イベントとイベントリスナー
イベントは、ウェブページ上で発生するさまざまなアクションを表します。例えば、クリック、マウスオーバー、キー押下などです。イベントリスナーは、特定のイベントが発生したときに実行される関数です。
JavaScriptを使って、イベントリスナーを要素に追加することができます。これにより、ユーザーの操作に応じてウェブページが動的に変更されるようなインタラクティブな機能を実現することができます。
以下のコードは、#myButtonというIDを持つHTML要素（ボタン）を選択し、その要素に対してクリックイベントリスナーを追加しています。このイベントリスナーは、ボタンがクリックされたときに実行される無名関数（またはアロー関数）を定義しており、この関数はアラートダイアログを表示します。アラートダイアログには「Button clicked!」というメッセージが表示されます。このコードは、ウェブページ上の対象となるボタンがクリックされたときに、ユーザーにフィードバックを提供するために使用されます。
let button = document.querySelector("#myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});非同期処理とPromise
JavaScriptはシングルスレッドであり、一度に1つのタスクしか処理できません。しかし、非同期処理を利用することで、ウェブページがフリーズせずに複数のタスクを同時に処理するような挙動を実現できます。非同期処理は、例えばサーバーからデータを取得する場合やタイマーを使った処理などでよく使われます。
Promiseは、JavaScriptの非同期処理を扱うためのオブジェクトです。Promiseは、非同期処理が成功したか失敗したかに応じて、resolve または reject の状態になります。これにより、非同期処理の結果に基づいて、さらに処理を行ったりエラーをハンドリングしたりすることができます。
以下のコードは、非同期処理を行うgetDataという関数を定義しています。この関数は、Promiseを返します。この例では、setTimeout関数を使って1秒後にresolveを呼び出し、"Data received!"というメッセージを渡しています。これは、通常サーバーからのデータ取得など、実際の非同期処理を模倣しています。
getData()関数を呼び出すと、Promiseが返されます。その後、.thenメソッドを使って、Promiseが成功した場合（resolveが呼ばれた場合）に実行されるコールバック関数を定義します。このコールバック関数では、data（この場合は"Data received!"）をコンソールに出力します。また、.catchメソッドを使って、Promiseが失敗した場合（rejectが呼ばれた場合）に実行されるエラーハンドリングのコールバック関数を定義します。この例では、エラーが発生した場合にエラーメッセージをコンソールに出力します。ただし、この特定のコード例ではエラーは発生しません。
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received!");
}, 1000);
});
}
getData().then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});モジュール
JavaScriptのモジュールは、コードを再利用可能な部品に分割するための機能です。モジュールを使用することで、コードの構造を整理し、保守性や可読性を向上させることができます。モジュールは、import と export のキーワードを使って、他のファイルと共有できます。
例えば、以下のようにモジュールを定義し、関数や変数をエクスポートすることができます。
// myModule.js
export function greet(name) {
return "Hello, " + name;
}
export const pi = 3.14159;そして、別のファイルで import を使用して、エクスポートされた関数や変数を利用できます。
javascriptCopy code// app.js
import { greet, pi } from "./myModule.js";
console.log(greet("John"));
console.log(pi);
クラスと継承
JavaScriptはプロトタイプベースのオブジェクト指向言語ですが、ES6（ECMAScript 2015）から、クラス構文が導入されました。クラスは、オブジェクトの設計図のようなもので、プロパティとメソッドを持つことができます。また、クラスを使って継承を実現することができます。これにより、コードの再利用や抽象化が可能になります。
以下のコードは、AnimalとDogという2つのクラスを定義しています。Animalクラスは基本クラスで、コンストラクタ（constructor）を使って名前（name）を設定し、speakメソッドを定義しています。speakメソッドは、動物の名前と共に "makes a noise." というメッセージをコンソールに出力します。
DogクラスはAnimalクラスを継承しており、extendsキーワードを使ってAnimalクラスからプロパティやメソッドを継承しています。Dogクラスは、speakメソッドをオーバーライド（上書き）しており、犬の名前と共に "barks." というメッセージをコンソールに出力します。
最後に、Dogクラスのインスタンス（オブジェクト）を生成し、名前を "Rex" に設定しています。dog.speak()メソッドを呼び出すと、オーバーライドされたDogクラスのspeakメソッドが実行され、"Rex barks." というメッセージがコンソールに出力されます。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + " makes a noise.");
}
}
class Dog extends Animal {
speak() {
console.log(this.name + " barks.");
}
}
let dog = new Dog("Rex");
dog.speak(); // Rex barks.まとめ
この記事では、JavaScriptの基礎を説明しました。JavaScriptはウェブページに動的な機能を提供するためのプログラミング言語で、HTMLとCSSと共にウェブ開発の主要な技術の1つです。
ここまで記述した概念と機能を理解し、活用することで、ウェブページにインタラクティブな機能を追加し、効果的なウェブアプリケーションを構築することができます。JavaScriptの基礎を習得することは、ウェブ開発のスキルを向上させる上で重要なステップです。今後も学習を続けるきっかけになれると幸いです！
今後も、ITやDX、投資等に関する人生を豊かにして自由な時間を増やせるような情報を発信していきますので是非お楽しみに！
↓ オススメ記事 ↓
Flutter入門 - 基礎から始める美しいクロスプラットフォームアプリ開発
