はじめに
ここでは、JavaScriptの基本的な文法をざっくりとまとめてみます。
基本的な記述方法
JavaScriptは、.jsが拡張子の外部ファイルを作成するか、HTMLファイルに<script>タグを作って記述するかのどちらかで利用することが多いです。
外部ファイルをHTMLに読み込むには、以下のようにします。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
</body>
</html>
HTMLファイル中に直接記述する場合は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
console.log("JavaScript");
</script>
</body>
</html>
文末には、セミコロン;を書くようにします（セミコロンがなくても動作しますが、書いた方が良いです）。
//以降は、その行の最後までコメントと認識され、プログラムの実行範囲から除外されます。
複数行にわたってコメントを書きたい場合は、/* */を用います。
オブジェクトの値を出力するときには、console.log()を用います。
変数とデータ型
変数は、let 変数名 = 値で宣言します。
let str = '文字列'; // 文字列
console.log(str);
let num = 12345; // 数値
console.log(num);
let isBool = true; // 真偽値
console.log(isBool);
let arr = ['Python', 'R', 'JavaScript', 'PHP']; // 配列
console.log(arr);
let obj = {'Python': 'AI', 'R': 'statistics', 'JavaScript':'web', 'PHP': 'WordPress'}; // オブジェクト
console.log(obj);
一方、定数を使いたい場合は、constを使います。
letで宣言した変数は値が更新できるのに対し、constで宣言した定数は値を更新することができません。
const str = '定数';
// str = '変数'; // 定数の値は更新できない
制御文
条件分岐
if文
if文は、if (条件) {処理}と記述します。
さらに場合分けするときは、elseやelse ifを使います。
let num = 3;
if (num == 1) {
console.log('1');
} else if (num == 2) {
console.log('2');
} else if (num == 3) {
console.log('3')
} else {
console.log('1でも2でも3でもない')
}
switch文
if文で場合分けが多くなる場合は、switch文を使うと簡単に書けます。
switch文は、switch (変数) {case 値: 処理; ・・・}と記述します。
let num = 3;
switch (num) {
case 1:
console.log('1');
break;
case 2:
console.log('2');
break;
case 3:
console.log('3');
break;
default:
console.log('1でも2でも3でもない');
break;
}
なお、breakを書かないと、条件に合った場合でも後続のcaseの処理が走ってしまうので注意が必要です。
反復処理
for文
一定回数だけ繰り返し処理を実行する（繰り返し回数があらかじめ分かっている）ときは、for文を用います。
for文は、for (var 変数名 = 初期値; 変数 <= 最大値; 変数の値の更新)と記述します。
for (let i = 1; i <= 5; i++) {
console.log(i);
}
ここで、i++となっているのは、i = i + 1すなわち反復処理を繰り返すごとに変数iを1ずつ大きくしていくことを示しています。これは、i += 1とも書けますが、変数の値を1ずつ更新していく場合は、この書き方はあまりせず、i++またはi--と書きます。変数の更新幅が1以外の場合は、i += 2のように書きます。
また、for (var 変数名 in 配列) {処理}とすると、配列の要素を一つずつ取り出すことができます。
let arr = ['Python', 'R', 'JavaScript', 'PHP'];
for (let key in arr) {
console.log(key); // キーを出力
console.log(arr[key]); // 値を出力
}
さらに、配列の代わりにオブジェクトを対象とする場合は、以下のようになります。
let obj = {'Python': 'AI', 'R': 'statistics', 'JavaScript':'web', 'PHP': 'WordPress'};
for (let key in obj) {
console.log(key); // キーを出力
console.log(obj[key]); // 値を出力
}
for (let key of arr) {
console.log(key); // キーを出力
}
while文
ある条件を満たす間だけ処理を繰り返す場合は、while文を用います。
while文は、while (条件) {処理}と記述します。
let num = 1;
while (num < 5) {
console.log(num);
num++; // 変数の値の更新
}
以下のように、do whileを使うと、必ず1回は処理が実行されます。
let num = 1;
do {
console.log(num);
num++;
} while (num < 1);
関数
関数は、function 関数名(引数){処理}とすることで作成できます。
function copyNumber(num) {
return num;
}
console.log(copyNumber(123));
以下のように書くこともできます。
let myFunc = function copyNumber(num) {
return num;
};
console.log(myFunc(123));
オブジェクト
オブジェクトは、var オブジェクト名 = {キー: 値, ・・・}とすることで作成できます。
let human = {
name: 'Yukiya',
age: 31,
introduceMyself: function() {
return 'I am ' + human.name + ' and ' + human.age + ' years old. ';
}
};
console.log(human.introduceMyself());
以下のように書くこともできます。
let human = {};
human.name = 'Yukiya';
human.age = 31;
human.introduceMyself = function() {
return 'I am ' + human.name + ' and ' + human.age + ' years old. ';
}
console.log(human.introduceMyself());
new演算子を用いることで、新しいインスタンスを作成できます。
let human = function(name, age) {
this.name = name;
this.age = age;
this.introduceMyself = function() {
return 'I am ' + this.name + ' and ' + this.age + ' years old. ';
}
};
let human1 = new human('Yukiya', 31);
console.log(human1.introduceMyself());
まとめ
ここでは、JavaScriptの基本的な文法について解説しました。
Webページのソースコードを見るときに役立ちます。