こんにちは 、コーダーの Shige です。
今回は、JavaScriptの基本的な文法を解説します。

この記事では、

1.JavaScriptとは
2.JavaScriptの基礎文法
2.変数やデータ型
3.関数（function）
4.条件分岐やループ処理

JavaScriptの文法を詳しく解説していきますので、参考にしてみてください.

JavaScriptとは

JavaScriptの文法を学び始める前に、ますはJavaScriptとは何か、どんなプログラム言語なのかを軽く紹介しておきます。
JavaScriptは主にWebブラウザの中で動くプログラミング言語のひとつで、Webサイトを操作したら表示が書き換わったり、Webサイトのサーバーと通信してデータを取得したり、サイトだけでなく、WebアプリやWebサービスなどを開発する際にほとんど利用されています。さらにjQueryをはじめとした便利なライブラリやフレームワークがあります。
また、Node.jsというサーバー側のアプリケーションを作る仕組みでも利用されており、かなり幅広く汎用性があるプログラミング言語です。

Javaとの違い

JavaScriptは、ほかのプログラミング言語「Java」と同じく「Java」が付きますが、まったく異なる言語です。
主な違いは以下の通りです。

JavaScriptの基礎文法

ここでは、これだけはしっておきたい！基礎的な文法をご紹介します。

変数

プログラミング言語には、文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする変数という機能があります。
新たな変数を作成するためには、「変数の宣言」を行う必要があります。

var price;

上のコードでは、priceという名の変数の宣言を行いました。基本的には変数の宣言時には変数名の前に、varキーワードで変数を宣言します。変数は英数字、$、_のみ。数値から始まらないのがJavaScriptの記述のルールです。
この時点では、priceには値が与えられていない状態ですので変数に値を代入するには、以下のように行います。

price = 1000;

上のコードでは、price に数値1000を代入しました。

宣言時と同時に値を代入する事もできます。以下のコードをご覧ください。

var price = 1000;

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

変数を使った計算方法については以下の通りです。

var price = 500;
// price = price + 100
price += 100;
// price = price * 2
price *= 2;
// price = price + 1
price++;
// price = price - 1
price--;

定数

変数は値を代入し、任意のタイミングで値が変更することができます。
対して、定数は一度決まった値を後から変更することができませんし、再代入もできません。

定数の宣言は、下記のように「Const」を使って宣言を行います。

const price = 1;

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

意図せず値が更新されることを防ぎたい場合に、定数を使うことでプログラムの不具合を減らしていけるということが、定数を使用するメリットです。

データ型

プログラミング言語には文字列、数値、真偽値といった値の型が存在します。 これらの値の型のことをデータ型と呼びます。
JavaScriptのデータ型とは、変数が持つ値のタイプのことです。
先ほど変数priceに数値を1000を代入しましたので、price変数のデータ型はNumber(数値)と認識されます。
また、price変数に文字列などを代入した場合、変数のデータ型はString(文字列)となります。
このように、代入する値のタイプによって変数のデータ型が決まります。

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

基本型は以下5つです。
・数値（Number）
・文字列（String）
・trueやfalseなどの真偽値（Boolean）
・値が定義されていない（undefined）
・値がそもそもない（null）

typeofメソッドを使うと、値がどのオブジェクトかを判定できます。

console.log(typeof 'Hello'); // string
console.log(typeof 5); // Number
console.log(typeof true); // boolean
console.log(typeof undefined); // underfined
console.log(typeof null); // object

オブジェクト型の詳しい説明は、別の記事で紹介させていただきます。

関数（function）

JavaScriptでは関数は「関数オブジェクト」として扱われる、複合型(オブジェクト型)のデータ型のひとつです。
関数はfunctionを使って定義します。

function 関数名(引数) {
    return 関数が返す値;
}

引数を使う

関数名の後にあるカッコの中には引数を指定し、引数が必要でない場合は、空欄にしておきます。

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

関数名(引数)

実際に、関数を作成して実行してみました。

function price(value) {
    return value*2;
}

var result = price(5)

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

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

条件分岐 (if文)

if文使った条件分岐を使うことで、指定した条件を満たすか満たさないかによって、処理を変更したいときに使用する構文です。if文は次のような構文が基本形となります。

if (条件式) {
    実行する文;
}

条件式の評価結果がtrueであるならば、 実行する文 が実行されます。

else文

var price = 1000;
var result;

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

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

ループ処理

プログラミングでは、同じ処理を繰り返すシチュエーションというのは頻繁にありますが、同じコードを繰り返す書く必要はありません。ループやイテレータを使い、反復処理として同じ処理を繰り返し実行できます。

様々なタイプのループ処理が存在しますが、この記事では、while文のみ説明します。
whileループ文は次のような構文が基本形となります。

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

指定した条件が満たされている間は、カッコ{}の中の処理が実行される仕組みになっています。最初から最初から条件式がfalseである場合は、何も実行せずWhile文は終了します。

while文の実行フロー
1.条件式 の評価結果がtrueなら次のステップへ、falseなら終了
2.実行する文を実行
3.ステップ1へ戻る

whileループ文を使用してコードを書いてみました。

var x = 0;
while ( x > 10){
    x = x + 1;
}

上のコードでは、変数xが10より小さいうちは、 xの値に1を足していく、という処理を書きました。実際、 xの値は0なので、while文の条件に当てはまります。
xの値が10まで上がるまでの10回、カッコ{}の中の処理が繰り返されるという構文です。
ループ処理の文法はwhile文以外にもたくさんありますので、別の記事で紹介させていただきます。

コメント

コメントはプログラムとして評価されないため、ソースコードの説明やメモを書くために利用されています。
コメントの書き方には、一行コメントと複数行コメントの2種類があります。

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

「// 」を先頭に記述することで行末までコメントとして扱われます。

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

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

まとめ

知っておきたい！JavaScriptの基本的な文法をご紹介しました。
冒頭でも紹介したとおり、JavaScriptは世界中ほとんどのWebサイトで使われており、ホームページ制作でも「ポップアップウィンドウ」や「画像スライドショー」などで使われています。需要も多く将来性が高い言語だと言われています。
文法はこの記事だけでは紹介しきれないほどたくさんありますので、これからも順次、発信していきたいと思います。
ぜひ参考にしてみてください。

Webサイト制作のご依頼、ご相談等お気軽にお問い合わせください！