覚えておくと便利なJavascriptの関数、機能

TOP
コラム
覚えておくと便利なJavascrip

はじめに

皆さんは「Javascript」と聞くとどういうイメージを思い浮かべるでしょうか。恐らくかなりの人が「Webページに動きをつける用途の言語」というイメージをお持ちなのではないかと思います。

しかし、最近のJavascriptの進化は目覚ましく、DOM操作に使われるだけではなく、他言語のようにESModuleをはじめとしたモジュールシステムも得ているため、サーバーサイド、組み込み、ライブラリを使用すればアプリ開発もJavascriptだけでできるようになっています。

本日はそんなJavascriptの便利な機能や関数を紹介したいと思います。

覚えておくと便利な関数、構文

1・アロー関数

プログラミング言語は、その言語に初めから組み込まれている「組み込み関数」の他に、関数を開発者が定義できる「独自関数」があります。

この関数の存在によって、開発者はコードを１から書く必要がなかったり、関数を定義してコードの重複を防ぐことができます。

Javascriptにおいて、独自関数を定義するには「function」キーワードで宣言するやり方の他に「アロー関数」で定義するやり方があります。これにより、他の言語にはないスッキリとした見た目の見やすい関数が定義できます。


//「function」キーワードで定義する方法

const addNumber = function (a, b) {

    return a + b;

}



// アロー関数で定義する方法

const addNumber = (a, b) => {

    return a + b;

}



// return 文しかない場合は、returnを省略できる

const addNumber = (a, b) => a + b;

いかがでしょうか。他の言語に比べてかなりスッキリとした関数が定義できます。

2・スプレッド構文

スプレッド構文を使うと、複数個ある配列などの要素を省略した構文で記述することができる便利な構文です。「...(配列)」のように記述すると、配列の要素が全て含まれた状態になります。


const sum (a, b, c) => {

return a + b + c;

}

const  numbers = [1, 2, 3];

sum(...numbers) // 6

例は、数字を足す「sum」関数と配列「numbers」を定義し、sum関数を実行している例です。引数に「...」を付けていることによって、配列の要素全てが取り出され、足されています。

3・残余構文

残余構文を使うと、「...」で指定した配列の残りの要素が全て含まれます。スプレッド構文と似ていますが、スプレッド構文は要素を「展開」するのに対して残余構文は残りの要素を「収納」するイメージです。


const numbers = (a, b, ...remainder) {

    console.log("a", a)

    console.log("b", b)

    console.log("余り", remainder)

}


numbers("one", "two", "three", "four", "five", "six")

//出力

// a, one

// b, two

// 余り, ["three", "four", "five", "six"]

例では、numbers関数で、一番目と二番目、「...」でそれ以外を引数に指定して、コンソールに出力しました。

このように、残りの要素を明示的に指定しなくても、残余構文を使えば残りの要素を簡単に指定することができるので、コードの記述量も少なく済みます。

4・分割代入

分割代入を使うと、配列やオブジェクトから値を取り出して別個の変数に代入することができます。


const object = { name: "yamada", age: "20", email: "test@gmail.com"}
const { name, age, email } = object;
console.log(name, age, email) // yamada, 20, test@gmail.com

例では、変数objectに各キーと値を入れました。次の変数name, age, emailではobjectのキーを取り出し、変数に代入しています。

これによって文が簡略化され、スッキリとした見た目にすることができます。

5・デフォルト引数

Javascriptは関数に「デフォルト引数」を設定することができるので、関数に値が渡されなかった場合のデフォルトの値を引数に渡すことができます。


const multiply = (a, b=1) => {

 return a * b;

}


multiply(5, 3) // 20

multiply(4) // 4

例では、関数multiplyの引数bにデフォルト値「1」を設定しました。そのため、例題のように引数に4しか与えられなかった場合でもデフォルト値の「1」を引数に取るため、「4×1＝4」となるわけです。

まとめ

いかがでしょうか。こうして見ると、最近のJavascriptは最近のモダンな言語にも引けを取らない多彩な表現力があることがわかりました。

皆さんも一度、Javascriptを使用してみてはいかがでしょうか。