【JavaScript入門】これだけは知っておくべき！JavaScriptの基礎文法

皆さんこんにちは！Kotonoです。

今回はJavaScriptの基本的な文法を解説します。

この記事では

といった基本的な内容から

などといった、より発展的な内容に関してもわかりやすく解説していきます。JavaScriptの文法について知りたい方は、ぜひ参考にしてみてください。

なお、次の記事ではそもそもJavaScriptとはどんなプログラミング言語なのか、その特徴を将来性も交えて紹介しているので良ければ参考にしてください。

→ JavaScriptとは？初心者向けに特徴・できること・将来性を簡単解説

JavaScriptとは

JavaScriptの文法に関する詳しい説明の前に、まずはJavaScriptとは何か、どんな言語なのかを軽く触れておきましょう。JavaScriptはWebプログラミング言語のひとつで、主にWebサイトやWebアプリ、Webサービスなどを開発する際に利用されています。

汎用性のあるプログラミング言語であることはもちろん、プログラミング初心者でも楽しく、開発を手軽に始めることができるのも、人気の理由のひとつです。

JavaScriptの基礎文法

ではさっそく、JavaScriptでこれだけは知っておきたい！というような、基礎的な文法をご紹介します。

JavaScriptには他のプログラミング言語とは違う「JavaScript特有の文法ルール」が存在するので、プログラミング初心者だけでなく、他のプログラミング言語を勉強した事がある方もぜひ読み進めてくださいね。

変数について

どのプログラミング言語にも「変数」というものが存在し、もちろんJavaScriptでも変数を扱います。新たな変数を作成するためには「変数の宣言」を行う必要があります。変数の宣言は、基本的には以下のように行います。

var my_hensu;

上のコードでは、my_hensuという名の変数の宣言を行いました。基本的には変数の宣言時には、変数名の前にvarキーワードが必要です。この時点では、my_hensuには値が与えられていない状態です。

変数に値を代入するには、以下のように行います。

my_hensu = 1000;

上のコードでは、my_hensu に数値1000を代入しました。宣言時と同時に値を代入する事もできます。以下のコードをご覧ください。

var my_hensu = 1000;

上のコードでは、宣言と代入を一行で書くことができました。

定数について

変数は値を代入し、任意のタイミングで値が変更することができます。対して、定数は一度決まった値を変更することができません。定数の宣言は、下記のように「Const」を使って行います。

const value = 1;

定数を宣言した場合、同名の定数の宣言と定数の値の更新ができなくなります。上記の例では、「value」という定数の値は’1’のまま変わることがありません。

意図せず値が更新されることを防ぎたい場合は、定数を使うことで不具合等を減らしていけるので、使っていくと良いですよ。

データ型について

JavaScriptのデータ型とは、変数が持つ値のタイプのことです。例えば、先ほどのセクションで変数my_hensuに数値1000を代入しました。そのため、my_hensu変数のデータ型はNumberと認識されます。

また、my_hensu変数に文字列などを代入した場合、変数のデータ型はStringとなります。こうして、代入する値のタイプによって変数のデータ型が決まります。

JavaScriptに存在するデータ型は主に、基本型（プリミティブ型）と複合型（オブジェクト型）に分けられます。

基本型は、以下の5つです。

オブジェクト型は、プリミティブ型をベースに作成される配列やオブジェクトのことを指します。これらの扱いについての詳しい説明は、以下の記事を参考にしてみてください。

JavaScriptのオブジェクトはこう書け！使い方の基本を徹底解説！

更新日：2024年5月6日

関数（function）について

変数の宣言・代入やデータ型について学んだところで、関数の作成方法などについても触れておきましょう。関数はやはり、どのプログラミング言語においても必要不可欠な存在であり、初心者でも学んでおきたいことのひとつですよね。

JavaScriptで関数は「関数オブジェクト」として扱われる、複合型（オブジェクト型）のデータ型のひとつです。関数を作成するための、基本的な構文は以下の通りです。

function 関数名(引数) {

    return 関数が返す値;

}

関数名を設定する前に、functionキーワードを忘れないこと、そして関数名の後に括弧を忘れないことが大切です。関数名の後にある括弧の中には引数を指定し、引数が必要でない場合は、空欄にしておきます。

作成した関数を呼び出すには、以下のようにコードを書きます。

関数名(引数);

では実際に、関数を作成して実行してみましょう！

function myfunction(myvar) {
    return myvar*2;
}

var result = myfunction(5)

上のコードでは、関数myfunctionを作成し、引数を一つだけ指定しました。myfunctionは引数の数値を二倍にしたものを返す、簡単な関数です。

そして、変数resultにmyfunctionが返す値を保存するようにします。実際、myfunctionに与えた引数が5なので、5の二倍である10がresult変数には保存されています。

条件分岐（if-else文）について

このセクションでは、JavaScriptにおける条件分岐（if-else文）を紹介します。条件分岐は、指定した条件を満たすか満たさないかによって、処理を分けたい時に使用する構文です。

JavaScriptでは、以下のように条件分岐を行います。

var my_hensu = 1000;
var result;

if (my_hensu < 5000) {
    result = true;
}
else {
    result = false;
}

上のコードでは、変数my_hensuの値が5000以下であれば、変数resultにtrueを代入します。反対に、5000以上であれば変数resultにfalseを代入します。この場合、my_hensuの値が1000なので、resultにはtrueが保存されました。

ループ処理について

では次に、ループ処理について解説します。プログラミングにおいて、同じ処理を繰り返すシチュエーションというのは頻繫にあります。

様々なタイプのループ処理が存在しますが、この記事では「JavaScriptの基礎文法」を紹介しているので、while文のみ説明します。whileループ文の基本的な構文は、以下の通りです。

while (条件){
    複数実行する処理;
}

こうすることで、指定した条件が満たされている間は、括弧{}の中の処理が実行される仕組みになっています。では実際に、whileループ文を使用してコードを書いてみましょう。

var my_hensu = 10;
while (my_hensu > 5){
    my_hensu = my_hensu - 1;
}

上のコードでは、変数my_hensuが5より大きいうちは、 my_hensuの値に1を引いていく、という処理を書きました。実際、 my_hensuの値は10なので、while文の条件に当てはまります。

my_hensuの値が5まで下がるまでの5回、括弧{}の中の処理が繰り返されます。JavaScriptの他のループ文については、以下の記事を参考にしてみてくださいね。

【JavaScript入門】for文のループ処理はこれで完璧! for-in / for-of / forEach文も徹底解説！

更新日：2024年5月6日

プロパティについて

プロパティとは、オブジェクトが持つ属性のことです。そもそもオブジェクトとは何かが分からない方もいるかと思いますが、JavaScriptでは「オブジェクト指向」という思想の元様々なモノをオブジェクトとして扱います。

まずオブジェクトを作成する方法ですが、オブジェクトリテラル（{}）というものを使用して作成します。

var オブジェクト名= {};

上記の構文では、プロパティを持たない空のオブジェクトを作成しました。初期値としてプロパティを持つオブジェクトを作成する場合は、オブジェクトリテラル（{}）の中にキーと値を:（コロン）で区切って記述します。

var human = {
name: '侍',
age: 20,
job: 'エンジニア',
};

「human」という名前のオブジェクトが「name」「age」「job」というプロパティを持っています。上記のように複数のプロパティを定義するには、それぞれのプロパティを,（カンマ）で区切って記述します。

プロパティにアクセスする方法は、ドット記法（.）とブラケット記法（[]）の2種類があります。

// ドット記法で参照
console.log(human.name);
// ブラケット記法で参照
console.log(human[‘name’])

上記の記述では、どちらも「name」プロパティの値である「’侍’」が実行結果になります。記述方法は、基本的に簡単なドット記法を使うと良いとされています。

オブジェクトは作成後に値を変更・追加・削除できる性質があります。プロパティの値を変更する場合は、変数と同じように代入することが設定できます。

human.age = 25
console.log(human.age);

プロパティの追加は、作成したいプロパティ名に値を代入します。追加するオブジェクトに、指定したプロパティ名がない場合は自動で追加されます。

human.country = ‘japan’

ただし、プロパティを初期化時以外に追加してしまうと、そのオブジェクトがどのようなプロパティを持っているかがわかりにくくなります。できる限り作成時以外は、新しいプロパティを追加しないほうが好ましいでしょう。

プロパティの削除は、「delete」演算子の記述で可能です。具体的には、「delete」の後に削除したいプロパティを指定するだけ。

delete human.country

コメントについて

プログラムの注釈（メモ）等のコメントをコード部分に入れたい場合は「// 」を先頭に記述することで行末までコメントとして扱われます。

特に初心者の内は、自分が書いたコードが何をしているかコメントしておくとより理解が深まるので積極的に書いていくと良いでしょう。

num = 5;   //numに5を代入

複数行コメントしたい場合は「/*」～「 */」で囲むことでコメント化が可能です。

/*
var x = 5;
var y = 10;
*/

JavaScriptの文法チェック方法

プログラムを書いている最中、構文の間違った書き方などで文法ミスをしてしまうことがありますよね。プログラムの些細なミスでもエラーが発生してしまうので、

なんて場合は、オンラインの構文チェックツールなどが便利です。書いたコードをコピー＆ペーストするだけで、文法ミスがあれば指摘してくれるので、プログラマーとしては助かりますよね。

オンラインのツールは複数存在するので、「JavaScript 文法 チェッカー」などと検索してみて、色々試してみましょう。そして、自分でどれが使いやすいか見極めてみてくださいね。

まとめ

この記事で「JavaScriptの基礎文法」をご紹介しました。JavaScriptの文法はもちろんこれだけではありませんが、これだけは絶対知っておきたい！というものだけを集めたので、ぜひ参考にしてみてください。みなさんも、この記事を通してJavaScriptの文法に関する知識をどんどん増やしていってくださいね！