JavaScriptの基本文法まとめ

おはようございます。Shotaです。

今回の記事では、Web開発に必要不可欠なプログラミング言語「JavaScript」の基本文法を一通り全部簡単に解説していきます。

なお、本記事はJavaScriptの文法に関する基本的な知識を一通り理解している人向けに書いています。詳細な説明を省いているゆえ、初心者向けには説明がわかりにくいのでご了承ください。

今回の記事を参考に、JavaScriptの基本文法についての理解を深めていただければ幸いです。

それでは早速、本題に入りましょう。

はじめてのJavaScript

JavaScriptのプログラムはWebページ上のコンソールで実行されて出力されます。

Hello world

文字列を表示するときはconsole.logを使います。

console.log('Hello JavaScript')

▼実行結果

Hello JavaScript

コメントアウト

一行の場合

// comment

複数行の場合

/*
comment
comment
*/

文字列操作

文字列は'(シングルクォーテーション)あるいは"(ダブルクォーテーション)で囲みます。

console.log('Hello JavaScript')
console.log("Hello JavaScript")

▼実行結果

Hello JavaScript
Hello JavaScript

文字同士を連結させるときには+を使います。

console.log('Hello' + 'World')

▼実行結果

HelloWorld

定数・変数

JavaScriptでは、Pythonと違って定数と変数を区別するために予約語を使います。

定数

constで定数を宣言します。

const PRICE = 100

定数は後から値を変更できません。

変数

letで変数を宣言します。この場合は後から値を変更できます。

ただし、constとletの使い分けはconstを多めに使ってどうしても必要なときにletを使うという方法が取られます。(後で値がコロコロ変わるとプログラムが読みにくいので)

変数を使った計算方法は次の通りです。

let price = 1000

// price = price + 100
price += 100

// price = price * 4
price *= 4

// price = price + 1
price++

// price = price - 1
price--

データ型

主に覚えておきたいデータ型は次の通りです。

• String(文字列)
• Number(数値)
• Undefined(定義されていない)
• Null(値がない)
• Boolean(trueとfalse)
• Obj(Pythonで言う辞書型のデータと似たようなもの)

typeofを使うと値のデータ型を判定できます。

JavaScriptは数字からなる文字列も数値に変換して演算できます。

// 文字列だが、数値型として扱われる
console.log('6' * 5)
console.log('6' - 4)
console.log('30' / 10)

// +は文字列連携で使われる
console.log('10' + 3)

▼実行結果

30
2
3
103

ただし、+のみ例外で、文字列連携として扱われます。数値計算をする場合は文字列を整数値に戻す必要があります。

比較演算子

以下のようなデータはJavaScriptでfalseとして扱われます。

• 0
• null
• undefined
• ''
• false

これら以外は全てtrueとして扱われます。

console.log(Boolean(0))
console.log(Boolean('x'))

▼実行結果

false
true

条件分岐

if文

const point = 70

if (point >= 70) {
    console.log('Passed')
} else {
    console.log('Failed')
}

▼実行結果

Passed

if文の条件と対象の式が一致していればその文の中の処理を行い、一致していなければ処理を行いません。(else文の中に表示してある場合はそちらを実行する)

const point = 55

if (point >= 70) {
    console.log('Passed')
} else {
    console.log('Failed')
}

▼実行結果

Failed

switch文

複数の条件分岐にはswitch文を使います。(Kotlinにおけるwhenと同じ)

const grade = 'A'

switch (grade) {
    case 'A' :
        console.log('You are very essential!')
        break
    case 'B' :
        console.log('You are essential.')
        break
    case 'C' :
        console.log('You are good.')
        break
    case 'D' :
        console.log('You are passed.')
        break
    case 'F' :
        console.log('Failed...')
        break
    default:
        console.log('Error')
        break
}

▼実行結果

You are very essential!

繰り返し

JavaScriptでは、繰り返し構文は以下の3つを使います。

• for
• while
• continue, break

それぞれ順番に解説していきます。

for文

グレイヴ・アクセント(`)で囲んだ中で変数を展開できる文字列をテンプレートリテラルといいます。

テンプレートリテラル内で宣言した変数は${}で展開できます。

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

▼実行結果

1: JavaScript
2: JavaScript
3: JavaScript
4: JavaScript
5: JavaScript
6: JavaScript
7: JavaScript
8: JavaScript
9: JavaScript
10: JavaScript

while文

基本構文

let hp = 100

while (hp >= 0) {
    console.log(`${hp} HP left.`)
    hp -= 19
}

▼実行結果

100 HP left.
81 HP left.
62 HP left.
43 HP left.
24 HP left.
5 HP left.

while()の中で判定処理がtrueになるまでループ処理を行います。また、whileの判定処理を後にして一度だけ最初に実行する場合はdo while()が使えます。

let hp = 100

do {
    console.log(`${hp} HP left.`)
    hp -= 19
} while (hp >= 0)

▼実行結果

100 HP left.
81 HP left.
62 HP left.
43 HP left.
24 HP left.
5 HP left.

continue, break

continue：ループ処理の中で特定の条件の場合だけ、処理をスキップさせます。

for (let i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
        continue
    }
    console.log(i)
}

▼実行結果

1
3
5
7
9

break：ループ処理の中で特定の条件の時に、ループ処理を抜けます。あとの処理は実行されません。

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

▼実行結果

1
2
3
4
5
6

関数

functionで関数を定義します。

function createMail() {
    console.log('Hello JavaScript')
}

createMail()

▼実行結果

Hello JavaScript

関数名の後ろにある()には引数を設定できます。

下のプログラムで考えると、関数を定義するときのmessageは仮の値なので仮引数、実際に関数を呼び出す時に渡されるcreateMailは実引数といいます。

function createMail(message) {
    console.log(`Hello ${message}`)
}

createMail('JavaScript')

▼実行結果

Hello JavaScript

returnを実行するとそれより下の処理は実行されないことに注意してください。

function sample(x, y, z) {
    return x * y * z
    // ここが無視される
    console.log('Hello JavaScript')
}

const arg = sample(4, 7, 8)
console.log(arg)

▼実行結果

224

関数式

関数式は、関数を定数や変数の値として代入する構文です。主に無名関数とアロー関数の2つがあります。

無名関数

// 無名関数
const sample = function (x, y, z) {
    return x * y * z
}

console.log(`${sample(7, 6, 13)}`)

▼実行結果

546

このとき定義する関数は無名関数といいます。

アロー関数

前回の関数式よりもっと簡略化できる構文があります。それがアロー関数です。

①　functionを消し、=>に置換する

const sample = (x, y, z) => {
    return x * y * z
}

②　returnしかない場合は、returnで行っている処理を=>後に移動

const sample = (x, y, z) => x * y * z

最終的には2行でまとめられます。

const sample = (x, y, z) => x * y * z
console.log(`${sample(13, 17, 23)}`)

▼実行結果

5083

さらにアロー関数は引数が一つの場合は()を省ける。

(関数式の例)

const double = function (a) {
    return a * 2
}

上記の関数に①と②を反映させると以下のようになります。

(アロー関数に変換)

const double = (a) => a * 2

③　引数が1つの場合は()を省略できるので、以下のように書き換えられます。

const double = a => a * 2

まとめ

今回の記事はJavaScriptの基本文法について一通り解説してみました。(クラスは除外)

今回の記事を参考に、JavaScriptについての理解を深めていただければ幸いです。

今回の記事はこれで終了です。

【参考サイト・資料】

qiita.com

jsprimer.net

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)