HOME > WEB > JavaScript > JavaScript – 基礎構文編

JavaScript – 基礎構文編

JavaScript-基礎構文

JavaScriptの初心者向けに、基礎構文を解説します。説明とともにサンプルコードも記載していますので、実際に手を動かしながら読み進めると基礎が定着すると思います。

基本的な記法

JavaScriptの基本的な記法を解説していきますので、コードを書きながら覚えていきましょう。

JavaScriptの内容を表示させる

まずは、最低限のHTMLファイルの構造を作成して<body>タグの中に<script>タグを配置します。scriptのtype属性はデフォルト値が「text/javascript」で、それ以外を指定することは基本的にないので、省略可能です。
window.alertは()内の文字列をダイアログ表示させる命令です。
ブラウザでhtmlファイルを開いてダイアログが表示されればOKです！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>

<script>
window.alert('Hello World!');
</script>

</body>
</html>

内容を表示させる方法としてconsole.logも便利なので覚えておきましょう。ブラウザーのデベロッパーツールでConsoleタブを開くと値が表示されているはずです。

<script>
console.log('Hello World');
</script>

<script>タグの位置

<script>タグの位置については、</body>タグの直前が一般的です。理由は一般的なブラウザはスクリプトの読み込みが完了するまでは、以降の描画を行なわないため、ページの途中でスクリプトがあると、読み込み速度に影響してしまうためです。

外部ファイル化

JavaScriptのコードは小規模の開発であれば、HTMLファイルに直接書いた方が良いケースもありますが、一般的には外部ファイル化して読み込むようにします。外部ファイル化するには、「js」ファイルを作成して、<script>タグのsrc属性でリンク先を指定すればOKです。外部ファイル化することで、コードの再利用や、HTMLが見やすくなるメリットがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>

<script src="js/main.js"></script>

</body>
</html>

<a>タグにスクリプト埋め込み

<a>タグのhref属性に「JavaScript:コード」を入れるとリンクをクリック時にダイアログを表示させることができます。この記法をJavaScript疑似プロトコルをいいます。

<a href="JavaScript:window.alert('Hello World!');">テキスト</a>

文の末尾にセミコロン「;」をつける

セミコロンは省略できますが、文の区切りが分からなくなるので基本的にはつけるようにします。

文字列を囲う

文字列はシングルクォーテーション「’」かダブルクォーテーション「”」で囲うようにします。

window.alert('Hello World!');

大文字と小文字は区別される

下記のコードは先頭が大文字になっており、存在しない関数を呼び出しているため、エラーになります。

Window.alert('Hello World!');

コメント

コメントはメモを残しておく時などに使います。要所要所でコードの目的などを書いておくと後で見た時に解読しやすくなったりします。
単一行の場合は先頭に「//」、複数行の場合は「/**/」を使用します。

//単一行のコメント

/*複数行の
コメント*/

変数／定数

変数を宣言して、値を代入しておくことで、いつでも変数に代入されている値を呼び出すことができます。

変数の宣言には、varを使用します。「=」は右辺の値を左辺に代入しなさいという命令です。値を入れなかった場合「undefined」という値が代入されます。

var 変数名 = 値;
var 変数名 = '文字列';

let命令

変数を宣言すためには、「var」の他に「let」を使用することができます。「let」の場合は宣言済みの変数を定義できない特徴があります。また、「let」の方が変数の有効範囲を管理しやすいため、「let」を優先して使用した方がよさそうです。

let name = '田中';
let name = '佐藤'; //既に宣言済みの変数なのでエラーが発生します。

変数の命名

変数名は、短くて内容が推測しやすいものが理想です。以下のような記法があるので、覚えておきましょう。

  • camelCase記法：先頭単語の頭文字が小文字で、それ以降の単語の頭文字が大文字
  • Pascal記法：すべての単語の頭文字が大文字
  • アンダースコア記法：単語を「_」で連結。別名「スネークケース」ともいわれます。

定数の宣言

変数の場合は、途中で中身の値を変更できますが、定数の場合は途中で変更できません。定数を宣言するためには、「const」を使用します。以下の例では、消費税の計算で定数の値に税率を入れています。

const tax = 1.10;
var price = 100;
console.log(price * tax); //結果：110

データ型

データ型はデータの種類のことで、1, 2, 3のような数値型やa, b, cのような文字列型などがあります。主なデータ型は下表の通りです。

基本型

データ型概要
数値型（number）±約4.94×10の-324乗～±約1.80×10の308乗
文字列型（string）「’」か「”」で囲まれた0個以上の文字の集合
真偽値（boolean）true（真）/false（偽）
シンボル型（synbol）シンボルを表す
特殊型（null／undefined）値が空、未定義であることを表す

参照型

データ型概要
配列（array）データの集合（インデックス番号でアクセス可）
オブジェクト（object）データの集合（名前でアクセス可）
関数（function）一連の処理の集合

リテラル

データ型に格納できる値をリテラルといいます。

数値リテラル（number）

数値リテラルはさらに、整数リテラルと浮動小数点リテラルに分類することができます。整数リテラルはさらに、10進数、16進数、8進数、2進数リテラルに分類できます。

文字列リテラル（string）

文字列リテラルは、シングルクォート「’」かダブルクォート「”」で囲みます。

'Hello World'
"Hello World"

文字列に「’」か「”」を含ませる場合は使用しない方のクォートで囲うようにします。

"I'm Sato"
//「"」で囲んでいるので文字列に「'」を使用できます

文字列リテラルでは、改行などの特別な意味を持つ文字を「/ + 文字」で表現することが可能で、このような文字をエスケープシーケンスといいます。エスケープシーケンスには以下のような種類があります。

文字概要
/bバックスペース
/f改ページ
/n改行
/r復帰
/tタブ文字
//バックスラッシュ
/’シングルクォート
/”ダブルクォート

テンプレート文字列

テンプレート文字列は、文字列をバッククォート「`」で囲むようにします。こうすることで、文字列に変数の埋め込みが簡単になるので便利です。

let name = '佐藤';
let text = `こんにちは、${name}さん`;

配列リテラル

配列はデータの集合のことで、一つの変数に複数の値を代入しておくことができます。このとき代入された値のことを要素といいます。

配列はブラケット「[]」の中にカンマ区切りで値を入れていきます。このとき、先頭要素から0, 1, 2…とインデックス番号が自動的に割り当てられます。

lef color = ['red', 'blue', 'green'];
console.log(color[0]); // 0番目のredが出力される

オブジェクトリテラル

オブジェクトは名前とキーをセットで代入することができます。配列ではインデックス番号をキーとしてアクセスしますが、オブジェクトでは、文字列をキーにできるため、データの視認性が良い特徴があります。

オブジェクトリテラルの記法は以下の通りです。
{キー名:値, キー名:値…}

let person = {name:佐藤, age:30, gender:男};

オブジェクトの個々のデータをプロパティと呼びますが、以下のようにアクセスすることができます。

let person = {name:'佐藤', age:30, gender:'男'};
console.log(person.name); //結果：佐藤

関数リテラル（function）

関数とは、あらかじめ決めた処理を行ない、その結果を返すしくみのことです。また、関数を呼び出す際に入力値（引数）を与えることで異なる結果を返すように設定することができます。

演算子

演算子（オペレーター）とは、「+」,「-」,「*」,「/」のように演算を表す記号のことです。また、演算子によって処理される変数／リテラルのことを被演算子（オペランド）と呼びます。

算術演算子

四則演算をはじめとする数学的な演算を行うのが算術演算子です。

a + b  //加算
a - b  //減算
a * b  //乗算
a / b  //除算
a % b  //数値の剰余
a ** b //べき乗
++a    //前置加算
a++    //後置加算
--a    //前置減算
a--    //後置減算

加算演算子（+）

加算演算子は、オペランドのデーター型によって挙動が異なります。双方が数値の場合はそのまま加算されますが、一方が文字列であれば「+」は文字列連結演算子とみなされるため加算されずに連結されます。

console.log(1 + 1); //結果：2
console.log('1' + 1); //結果：11

インクリメント／デクリメント演算子

インクリメント演算子（++）は1を加算、デクリメント演算子（–）は1を減算します。

let x = 3;
x++;
console.log(x); //結果：4

let y = 3;
y--;
console.log(y); // 結果：2

インクリメント／デクリメント演算子は、前方に置くか後方に置くかで異なる挙動をするので注意が必要です。前方に置いた場合を前置演算、後方に置いた場合を後置演算といいます。

//前置演算
let x = 3;
y = ++x;
console.log(y); //結果：4

//後置演算
let x = 3;
y = x++;
console.log(y); //結果：3

代入演算子

代入演算子は、変数に値を代入するための演算子です。「=」は代表的な代入演算子ですが、他にも算術演算子やビット演算子と連動した複合代入演算子もあります。

演算子概要
=値を代入
+=加算した値を代入
-=減算した値を代入
*=乗算した値を代入
/=除算した値を代入
%=除算した余りを代入

代入演算子を用いた簡単な例を以下に示します。

let x = 5; x += 3 //結果：8
let x = 5; x -= 3 //結果：2
let x = 5; x *= 3 //結果：15
let x = 5; x /= 3 //結果：1.666...
let x = 5; x %= 3 //結果：2

比較演算子

比較演算子は左辺／右辺の値を比較して、結果をtrue（真）／false（偽）として返します。ifやWhileを用いた条件分岐する時などに利用することが多いです。

主な比較演算子は下表の通りです。

演算子概要
==両辺の値が等しい場合はtrue
!=両辺の値が等しくない場合はtrue
<左辺の方が小さい場合はtrue
<=左辺が右辺以下の場合はtrue
>左辺の方が大きい場合はtrue
>=左辺が右辺以上の場合はtrue
===両辺の値が等しくデータ型も同じ場合はtrue
!==両辺が等しくない、またはデータ型が異なる場合はtrue

比較演算子を用いた簡単な例を以下に示します。

let x = 5;
console.log(x == 1); //結果：false
console.log(x != 1); //結果：true
console.log(x < 1); //結果：false
console.log(x <= 1); //結果：false
console.log(x > 1); //結果：true
console.log(x >= 1); //結果：true
console.log(x === 1); //結果：false
console.log(x !== 1); //結果：true

論理演算子

論理演算子は、比較演算子と組み合わせて、条件式を結合することで複雑な条件式を表現できます。

論理演算子は下表の3つだけです。

演算子概要
&&両辺の式がともにtrueの場合はtrue
||両辺の式のうちどちらかtrueの場合はtrue
!式がfalseの場合はtrue

論理演算子を用いた簡単な例を以下に示します。

let x = 5;
console.log(x < 10 && x > 1); //結果：true
console.log(x < 10 || x > 10); //結果：true
console.log(!(x < 10)); //結果：true

制御構文

条件分岐や繰り返し処理を実行させることができる制御構文について解説していきます。

if文

if文は、「もし～であれば・・・を実行、さもなくば・・・を実行」といった条件分岐をさせることができます。

ifの構文は以下の通りです。
構文中にある中括弧「{…}」で囲まれた部分はブロックといいます。

if(条件式){
  条件式がtrueの場合に実行する処理
} else {
  条件式がfalseの場合に実行する処理
}

if文を使用した簡単な例を以下に示します。
elseの中身は条件式がfalseの場合に実行されますが、必要がなければelseのブロックはまるごと省略できます。

let x = 5;
if(x > 2) {
  console.log('xは2より大きい');
} else {
  console.log('xは2より小さい');
}
//結果：xは2より大きい

else if

else ifは、ifブロックの後に何度も繋げることができ、条件式B、条件式C…といった感じで複数の条件式を用いた多岐分岐が可能です。

else ifの構文は以下の通りです。

if(条件式A) {
  条件式Aがtrueの場合に実行する処理
} else if (条件式B) {
  条件式Bがtrueの場合に実行する処理
} else {
  すべての条件がfalseの場合に実行する処理
}

else ifを使用した簡単な例を以下に示します。

let x = 20;
if(x >= 5) {
  console.log('xは5以上');
} else if (x >= 10) {
  console.log('xは10以上');
} else {
  console.log('xは10未満');
}
//結果：xは5以上;

この例ではすべての条件式がtrueですが、一度ブロックが実行されるとそれ以降のブロックは実行されないため、2つ目のブロックは実行されません。

switch

else ifで同値演算子「==」の条件式が多くなる場合に、switch文を利用するとコードがすっきりして読みやすくなります。

switchの構文は以下の通りです。

switch(変数or式) {
  case 値A:
  変数or式 = 値Aである場合に実行する処理
  break;
  case 値B:
  変数or式 = 値Bである場合に実行する処理
  break;
  default:
  変数or式がどのcaseにも一致しなかった場合に実行する処理
  break;

defaultは省略できますが、どのcaseにも合致しなかったことを明確にするために書いておいた方がよいです。
breakは、現在のブロックから処理を脱出するための命令です。breakがない場合は、caseに合致して処理が実行された場合も、次のcaseへ進もうとするので注意が必要です。

switchを使用した簡単な例を以下に示します。

switch (signal) {
  case 'red':
    console.log('Stop!');
    break;
  case 'yellow':
    console.log('Caution!');
    break;
  case 'blue':
  case 'green':
    console.log('Go!');
    break;
  default:
    console.log('Wrong signal!');
    break;
}

while/do…while

while/do…whileは繰り返し処理（反復処理）をしたい場合に利用します。

while

whileの構文は以下の通りです。

while(条件式) {
  //条件式がtrueである場合に実行する処理
}

whileを使用した簡単な例を以下に示します。

let x = 100;
while (x > 0) {
  console.log(x);
  x -= 20;
}

xの値が0より大きい間は、中括弧「{}」内の処理が繰り返し実行されます。ここの処理でxがいずれ0以下になるような処理をしておかなれば無限ループが発生すします。無限ループが発生すると負荷が大きくなり、最悪再起動が必要になりますので注意しましょう。

do…while

do…whileの特徴が条件式を満たさなくても最低1回はループが実行される点です。

while…doの構文は以下の通りです。

do {
  //条件式がtrueである場合に実行する処理
} while(条件式)

do…whileを使用した例を以下に示します。

let x = -100;
do {
  console.log(x);
  x -= 20;
} while (x > 0);

for文

for文は指定した回数だけ繰り返し処理を実行させることができます。

for文の構文は以下の通りです。

for (初期化式; ループ継続条件式; 増減式) {
  //ループ内で実行する処理
}

forを使用した簡単な例を以下に示します。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

この例では、変数「i」が1から1ずつ増加して10を超えた段階でループから脱出します。式で用いるカウンタ変数として一般的に「i」を用いることが多いです。