はじめに
JavaScriptは動的型付け言語で、ウェブサイトに対話性を追加するプログラミング言語です。
このページでは、JavaScriptの基本的な構文について、プログラムの最低限の知識を知っていることを前提に解説します。
javascriptとは？
JavaScriptは主にウェブサイトを作るために使われるプログラミング言語です。
ボタンをクリックしたときのイベント発生など、ウェブサイトに対話性を追加します。
また、文法は比較的簡単で、初心者でも短期間で基本的なコードを書くことができます。
特徴
JavaScriptはインタプリタ型の言語であり、ブラウザが直接コードを解釈して実行します。
これにより、迅速な開発とテストが可能です。そして、JavaScriptはChromeやFirefoxといったブラウザ上で動作するプログラミング言語です。
対してPythonなどの一般的なプログラミング言語は通常PC上で動作します。
また、JavaScriptは動的型付け言語であり、変数の型は実行時に決定されるため、柔軟なコードを書くことができます。
たとえば、以下のプログラムのように同じ変数に異なるデータ型の値を割り当てることができます。
//java
let data = 10; // 数値型
console.log(typeof data); // 出力は"number"
data = "JavaScript"; // 10が入った変数に文字列を代入
console.log(typeof data); // 出力は"string"
//JavaScriptでは自動的に変数のデータ型を決定・変換する。
動的型付けは便利な機能ですが、デメリットもあります。例えば、「01」という値を文字列として扱いたかったが、数値型に変換され「1」として演算されてしまうなど、 意図しないデータ型変換が行われてしまうことがあるため注意が必要です。
変数、定数、配列
変数はlet、定数はconstの後に任意の名前を指定することで宣言します。プログラム中に変更する予定がある場合は変数、
変更させたくない場合は定数を使用します。定数を再代入しようとするとエラーが発生します。配列は複数の値を格納するためのデータ構造です。
変更の予定がある場合はlet、変更させたくない場合はconstを使用して定義します。
また、JavaScript は大文字と小文字を区別します。 xyzはxYzとは異なる変数です。
//java
// 変数宣言
let x = 10; //★末尾にはセミコロンをつける
let y = 20;
let array = [1, 2, 3, 4, 5]; // 配列(変数)
x = 30; // 上書き可能
console.log(x); // 出力は30
// 定数宣言
const PI = 3.14;
const TAX_RATE = 0.08;
const array = [1, 2, 3, 4, 5]; // 配列(定数)
PI = 3.14159; // エラー(定数は誤って再代入することを防ぐ)
変数の値の確認
consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。
主に出力の確認や不具合の原因特定などのデバックに使用されます。
以下のようなjavascriptファイルを読み込ませたhtmlを開き、consoleから確認できます。
//java
let x = 0;
let y = [1, 2, 3];
console.log(x);
console.log(typeof x);
console.log(y);
型
JavaScriptでは基本となるデータ型が6つあります。 それぞれのデータ型には、それぞれの特徴があります。
| # | データ型 | 説明 |
|---|---|---|
| 1 | 数値(Number) | 整数や浮動小数点数を含む幅広い数値を扱うことができるデータ型 |
| 2 | 文字列(String) | 文字列など、テキストデータを扱うためのデータ型 |
| 3 | 真偽(Boolean) | true（真）またはfalse（偽）のいずれかの値を取る型 |
| 4 | 未定義(Undefined) | 変数が宣言されたが、まだ値が割り当てられていないときの型 |
| 5 | 空(Null) | 意図的に変数に「値がない」ことを示すために使われる型 |
| 6 | シンボル(Symbol) | この型を持つ値は「シンボル値」とすることができる |
Symbol型はES6で追加されたデータ型で、一意の識別子を生成するために使用されます。 たとえ同じ説明で複数のシンボルを作ったとしても、それらは異なる値です。説明は何にも影響を与えません。 オブジェクトのプロパティ名に衝突が起こる可能性がある場合、Symbolを使うことで固有のプロパティを作成できます。 特に、他の開発者やライブラリとの統合を行う際、別のプロパティ名が衝突するリスクを避けることができます。
//java
let x = Symbol("a"); //()内は説明
let y = Symbol("a");
alert(x == y); // 出力はfalse(偽)となる。つまり、xとyは等しくない
条件文
JavaScriptでの条件分岐処理は他の言語と同様にif文を使用します。
if文は条件式が真の場合に処理を実行します。条件式が偽の場合は処理をスキップします。
また、else文やelse ifを使用することで、最初の条件式が偽の際の処理を書くこともできます。
//java
//
let x = 10;
if （x > 5） { //()内には条件式を記述
console.log("xは5より大きいです"); //条件が真の場合に実行
} else if (x == 5) { //2つ目の条件式
console.log("xは5です"); //2つ目の条件が真の場合に実行
} else {
console.log("xは5より小さいです"); //2つの条件が偽の場合に実行
}
論理演算子
| # | 記述 | 説明 |
|---|---|---|
| 1 | A && B | A、Bが両方とも真であれば実行される |
| 2 | A || B | AまたはBどちらか一方でも真であれば実行される |
| 3 | !A | Aが偽であれば実行される |
繰り返し処理
繰り返し処理もほかの言語と同様、for文やwhile文を使用する。
for文
for文は指定した条件が偽となるまで処理を繰り返します。
//java
let total = 0; // totalの初期値は0
for (let i = 0; i < 10; i++) { //iが10未満の間繰り返す 処理終了後にiに1を加算
total += i + 1; // 1から10の値をtotalに加算する
}
console.log(total); // 出力は55
while文
while文は指定した条件が偽となるまで処理を繰り返します。
//java
let x = 0;
let total = 0;
while (x < 10) {
total += x + 1;
x += 1; //処理終了後にxに1を加算
}
console.log(total); // 出力は55
関数
関数を用いることで、複数の処理をひとまとまりにできます。 関数の定義はfunctionキーワードを使用します。
//java
let x = 10;
let y = 20;
function add(a, b) { // 関数の定義
return a + b; // aとbを足した値を返す
}
console.log(add(x, y)); // 出力は30
関数は関数式によって作成することもできます。 関数式は変数に関数を代入することで作成します。
//java
let x = 10;
let y = 20;
const add = function (a, b) { // 関数式 関数に変更の予定はないためconstを使用
return a + b;
};
console.log(add(x,y)); // 出力は30
オブジェクト
オブジェクトは複数の値をひとまとめにして扱うためのデータ構造です。変数や定数では値を1つしか格納できませんが、 オブジェクトを使用することで複数の値を格納することができます。c言語の構造体に似ています。 オブジェクトはキーと値のペアで構成され、キーを指定することで値を取得できます。
//java
const person = { // オブジェクトの定義
name: "山田太郎", // キー: 値
age: 20,
gender: "男性"
};
console.log(person.name); // 出力は"山田太郎"
console.log(person); // 画像のような出力となる
また、JavaScriptではあらかじめ定義されたオブジェクトが存在し、定義せずに利用することができます。 例えばWindowオブジェクトはブラウザのウィンドウのプロパティを表し、ページの高さや幅を取得することができます。