JavaScript functionとは？できることや使用例も紹介

SHARE

「JavaScript functionはどうやって使うの？」
「JavaScript functionでできることを知りたい！」
「JavaScript functionで気を付けるべきポイントを知りたい！」

この記事に訪れたあなたはこのような悩みを持っていませんか？

さまざまなコードでよく見られるJavaScript functionは、コードを見やすくするために使われるものです。

しかし実際にどのようにして使われているのかいまいちわからないので、初めて見る人はかえって混乱してしまうでしょう。

またfunctionはいくつかの注意点も存在し、上手く使わないとエラーを起こす原因にもなってしまうんですよね。

そこで今回はJavaScript functionの使い方や注意点を紹介！どのように使うのかという基礎からfunctionでできることの応用まで、サンプルコードを載せて解説します。

具体的な内容は以下の通りです。

この記事を読めば、コードが見やすくなる関数を使いこなせるようになりますよ。

JavaScript functionとは？

JavaScript functionは一連の処理をまとめた関数です。関数を作ることで、一連の処理を書かずに済みます。

具体的にどんなものなのかコードを見ていきましょう。

function Sample(n){
return n*30;
}
console.log(Sample(3));
console.log(Sample(5));
// 実行結果
90
150

1行目にあるfunctionから始まる部分が関数と言われるものです。functionを書いた後、中身で一連の処理を記述して、4行目と5行目に関数を呼び出しています。

関数の便利なところは、コードの量が多く減らせるところにあるんですね。関数を呼び出すと、関数内の処理を実行してくれます。

上記のコードは1行の処理ですが、10行を超える長いコードであっても関数を呼び出せば1行で済むんです。また関数は上記のコードのように何度も呼びだせます。

そのため関数はコード全体を見やすくし、タイプミスなどによるエラーも減らせるメリットがあるんですね。

しかし「関数が便利なのはわかったけど、どうやって作ればいいの？」と感じる人もいるでしょう。関数を作るのは少し複雑なので、関数の作成と呼びだしの2つに分けて解説しますね。

関数を定義する

関数を定義する方法はいくつかありますが、ここではそのまま宣言する方法と変数に入れて宣言する方法を紹介します。

まずそのまま宣言する方法は以下の通りです。先ほど見たコードと書き方は同じですね。

function Sample(a,b){
return a*b;
}

関数にはSampleというように、変数のように関数名をつけられます。そして()の中にあるaやbは、引き渡された値を格納する変数です。

関数は呼び出すときに、関数へ引き渡す値を設定できます。ここでは引き渡された値がaとbに格納され、中でa*bをしているんですね。

returnは返り値といって、関数内で処理した結果を返してくれます。a*bが返り値になっているので、Sample関数は引き渡された2つの値を掛け算する関数ということがわかりますね。

次に、変数に入れて宣言する方法は以下のように書きます。

let Sample = function (a,b){
return a*b;
}

仕組みはそのまま宣言する方法とほとんど変わりません。

しかし関数を宣言する前に呼びだしたとき、変数に入れて関数を宣言した場合はエラーが出るのに対し、そのまま関数を宣言した場合はエラーが起きずに実行が通ってしまいます。

コードがわかりづらくなってしまうのを防ぐために、関数は変数に入れて宣言する方がいいでしょう。

関数を呼び出す

関数が作れたら、次は呼びだしてみましょう。

呼び出し方法はとても簡単です。以下のコードを見てみましょう。

let Sample = function (a,b){
return a*b;
}
console.log(Sample(3,7));
// 実行結果
21

4行目のSample(3,7)が関数を呼び出している部分になります。()の中を見ると3と7が設定されているのがわかりますか？

この3と7が関数へ引き渡され、3はaに、7はbに格納されるんですね。

わかりやすいように書くと、以下のように1つ目の値は1つ目の変数に対応していると覚えるといいでしょう。

Sample関数はreturnで3*7が返ってきますから、上記のコードではSample(3,7)は21になり、実行結果に21と表示されるわけなんですね。

JavaScript functionでできること

functionの使い方がわかったら、次はどのように使われるのか見ていきましょう。

「functionでできることは一体どんなのがあるの？」と疑問に思いますが、実はできることが以下のようにたくさんありますよ。

  • アロー関数で書ける
  • 即実行される関数を作れる
  • 引数にデフォルト値を設定できる
  • 引数に「…」を付けて複数の引数を渡せる
  • 関数の中に関数を作れる

それぞれどのように使われるのか、サンプルコードを載せて解説しますね。

アロー関数で書ける

基本、関数はfunctionという文字を付けて記述しますが、アロー関数で記述すれば、もっと楽に関数を作成できます。

「アロー関数って何？」と疑問に思う人もいるでしょうから、以下のコードを見ていきましょう。

let Sample = (a,b) => {
let kekka = a*b;
return kekka;
}
console.log(Sample(3,7));
// 実行結果
21

1行目で宣言した関数に=>が記述されているのがわかりますか？これがアロー関数と呼ばれるものです。

値を受け取る変数のとなりに=>を付けると、関数として動いてくれるんですね。呼び出すときは先ほどと変わらず関数名を記述すれば呼びだせますよ。

特に1行だけの処理は{}が、値を受け取る変数が1つだと()が不要になります。つまり以下のコードのようにすっきりした形で記述できるんですね。

let Sample = a => console.log(a*2);

短い処理で終わるような関数はアロー関数で書くのをおすすめします。ただしreturnで値を返すような関数は{}が必要なので、注意してくださいね。

即実行される関数を作れる

関数には、宣言して定義した時に実行されるものもあります。即時関数とも呼ばれますね。
どんな関数なのか、以下のコードを見ていきましょう。

let Sample = function(a,b){
return a*b;
}(3,7);
console.log(Sample);

関数の宣言は変わったところはありません。しかし処理の後の部分を見てみると、(3,7)が記述されていますね。

実は(3,7)の部分で実行がされています。これが即時関数と呼ばれるもので、呼び出し時には関数名だけを記述すれば21が返ってくるわけなんですね。

呼びだすときの値の設定部分が関数の後ろにくっついたと考えればよいでしょう。

引数にデフォルト値を設定できる

「関数に値を設定しなくても処理してほしい！」と思うことってありませんか？関数にはデフォルト値が設定できますよ。

let Sample = function(a=3,b=7){
return a*b;
}
console.log(Sample());
console.log(Sample(4,8));
// 実行結果
21
32

上記のコードを見ると、関数の引数部分にaに3が、bに7が入っていますね。関数が呼び込まれた時に、そのデフォルト値が入った状態で処理してくれます。

つまり1回目のconsole.logには21が出力されるんですね。

一方、通常通り呼び出し時に値を設定する事もできます。2回目のconsole.logでは4がaに、8がbに入るので32が出力されました。

気を付けて欲しい点は、bだけを任意の値で処理したい時にSample(,8)と記述するとエラーが起きてしまいます。引数に何も書かないことはできないので、Sample(3,8)としましょう。

変数に「…」をつけて複数の引数を渡せる

関数は作成した時点で引数の数は決まってしまいます。そのため、「どのくらいになるかわからないけど、複数の引数を渡したい！」と思うことがありますよね。

そんな時は可変長引数を使いましょう。以下のコードを見てください。

let Sample = function(…a){
console.log(a);
}
Sample(1,2,3,5,7);
// 実行結果
[ 1, 2, 3, 5, 7 ]

関数の引数部分を見ると「…」が変数aの前についているのがわかりますか？

変数に「…」を付けることで可変長変数として扱えるようになり、複数の引数を渡せるようになります。

上記のコードでは1,2,3,5,7の5つを設定していますね。そして関数内で引き渡されるaを出力すると実行結果のように配列として表示されます。

引き渡された値を1つずつ使いたい場合はfor文で回せばいいわけなんですね。

関数の中に関数を作れる

実は関数の中にも関数を作れてしまうんです。以下のコードを見てください。

let Sample = function(a,b){
let Tashizan = function(c,d){
return c+d;
}
return Tashizan(a,b)ab;
}
console.log(Sample(3,7));
// 実行結果
210

少し複雑になっているので細かく見ていきますね。まずは関数Sampleに3と7が渡されます。

次にreturnに関数Tashizanがありますが、ここでも3と7がわたされていますね。関数Tashizanで10が返ってきますから、console.logには10と3と7をかけた210が返ってきました。

このように関数の中にも関数を入れた処理が行えますので、かん数の中が長くなる場合に有効でしょう。

また自分自身の関数を呼び出すこともできます。以下のコードを見てみましょう。

let Sample = function(a,b){
if(ab < 100) return Sample(a+b,b); return ab;
}
console.log(Sample(3,7));
// 実行結果
119

上記のコードではまず3と7が引き渡されますが、a*bが21なのでもう一度関数Sampleが実行されます。

再度Sampleが実行された時の引数は3+7=10と7なので、a*bは70になりもう一度関数Sampleを実行していますね。

3回目のSampleでは引数が17と7なので、a*bが119になりconsole.logに119としてかえってきました。

上記のコードのような関数はコールバック関数と呼ばれます。自分自身を呼ぶ関数は使うことはほとんどないので「こんな関数もあるんだ」という感覚で問題ありません。

JavaScript functionを使った使用例

関数はアロー関数など便利な機能がたくさん備わっています。しかしそれらすべてを使いこなすのはとても大変なことです。

そのため実際にfunctionを使った使用例を見ながら学習していきましょう。「どうやってコードを書けばいいのかわからなかった…」と感じた人は、サンプルコードをよく見て学習してみてください。

使用例1：「Hello!」を表示させるアロー関数を作る

最初は「Hello!」を表示させるアロー関数を作りましょう。

関数の中身は「Hello!」を表示させる処理を記述すればよいので、console.logすれば良さそうですね。よって関数に渡す変数もいりません。

いざアロー関数を記述しようとしたとき、「あれ？」と感じた人はいるのではないでしょうか？

アロー関数は関数に渡す変数の右に=>を記述するので、変数が無い場合はどうすればいいのかわからなくなりますよね。

変数のない関数をアロー関数で書くにはどうしたらいいのか、以下のコードを見てみましょう。

let Sample = () => console.log("Hello!");
Sample();
// 実行結果
Hello!

アロー関数の変数部分は()と書かれています。変数のないアロー関数は()で記述すればいいというわけなんですね。

呼び出し時も、変数が無いので()のみで問題ありません。

使用例2：複数の戻り値を返す関数を作る

次は複数の返り値で返せる関数を作りしましょう。今回は2つの数を足した数、引いた数、かけた数を返り値にする関数を作成します。

通常関数の返り値は1つまでしか指定できません。return部分を複数の変数に指定した場合、1つ目の変数しか返ってこなかったりエラーが出たりします。

1つの返り値で複数の変数を得るにはどうしたらいいのでしょうか？実現するには配列を使いましょう。

let Sample = (a,b) => {
let list = [a+b,a-b,a*b];
return list;
}
let kekka = Sample(3,7);
console.log(kekka);
// 実行結果
[ 10, -4, 21 ]

関数の中を見ると配列listを使っていますね。0番目には足した数、1番目には引いた数、2番目には掛けた数にしてreturnすることで、呼び出したときに1つの返り値で3つの変数を返せました。

このように複数の変数を返したいと思ったときは、配列を使うといいですよ。

使用例3：ボタンをクリックすると「Hello!」を表示させる

次はボタンを配置し、クリックすると「Hello!」を表示させてみましょう。

ボタンはbuttonタグで表示でき、属性にonclickをつけるとクリックしたときの処理を実行する関数名を指定できるんですね。

以上を踏まえて作成したコードは以下になります。

<button id="func" onclick="printHello()">click</button>

<script>
function printHello(){ document.write("Hello!"); }
</script>

実行画面を見るとボタンをクリックしたとき、しっかりと画面に「Hello!」が表示されましたね。

buttonタグに指定した関数名をJavaScript内で記述してあげることで、ボタンをクリックしたときの動作が可能になります。ボタンを押したときの処理はよく使われるので覚えておくといいでしょう。

JavaScript functionの注意点

関数はとても便利な機能ですが、使い方を間違えると表示がおかしくなってしまう、コードが見づらくなってしまうなどを引き起こしてしまいます。

より関数を使いこなせるように以下の2つには気を付けておきましょう。

  • 引数の数は定義時と呼び出し時で違ってもエラーは起きない
  • 関数名は日本語を避け、わかりやすいものにする

それぞれなぜ気を付けるべきなのかを合わせて解説していきますね。

注意点1：引数の数は定義時と呼び出し時で違ってもエラーは起きない

関数には、呼び出す側と受け取る側で変数の数を一致させるのが基本です。もし呼び出す側と受け取る側で変数の数が違った場合、どうなるのでしょうか？

let Sample = (a,b) => {
let list = [a,b];
return list;
}
let kekka = Sample(3);
console.log(kekka);
// 実行結果
[ 3, undefined ]

上記のコードは受け取った変数を配列にして出力しています。受け取る側の変数は２つありますが、呼び出すときは1つしかありませんね。

しかしエラーは起きずに、2つ目の変数はundefinedとして受け取りました。では受け取る変数を1つにして、呼び出すときに2つの変数を設定した場合はどうなるのでしょうか？

let Sample = (a) => {
let list = [a];
return list;
}
let kekka = Sample(3,7);
console.log(kekka);
// 実行結果
[ 3 ]

実行してみると、1つ目の変数しか表示されました。2つ目の変数は無視されてしまったのがわかりましたね。

一見便利そうに見えますが、エラーを起こさないために、引数部分がおかしくなっていることに気づかない可能性もあります。

関数を作成するときは、呼び出しと受け取り部分で引数の数が一致しているかをよく確かめておきましょう。

関数名は日本語を避け、わかりやすいものにする

次は以下のコードを見てください。

function a(a,b){ … }
function list_sort(list){ … }

2つの関数があることがわかりますね。この2つの関数はそれぞれどんな処理がされているのか予想できますか？

2つ目の関数はlist_sortと記述されていることから、「配列の順番を変える処理をするのかな？」と予想できそうですよね。

ですが、1つ目の関数はaとしか書かれていないので、どんな処理かわかりません。

関数名を付けるときはlist_sortのように「どんな処理がされているのか？」をわかるように付ける必要があるんですね。

aのような関数名だとコードを見返すときに、「ここはどんな処理がされているんだ？」と分かりづらくなってしまいます。

また関数名に日本語を入れるのも避けましょう。utf-8など日本語対応がされていないツールではエラーが起きてしまうからです。

JavaScript functionを学習する方法

ここまでfunctionの使い方や注意点を解説してきましたが、「もっと関数に慣れておきたい！」と思う人もいるでしょう。

そんなあなたは以下の方法で学習するといいですよ。

  • 本で学習・勉強する
  • サイトで学習・勉強する

それぞれ学習するときのポイントを合わせて解説しますね。

本で学習・勉強する

JavaScriptを一通り学習したいあなたには本で学習する方法がおすすめです。参考書ならfunctionについてはもちろん、その他JavaScriptを学べます。

参考書一冊でJavaScriptを学べるようになるのはとても魅力的ですね。パソコンが使えないような場所では、参考書を持ち込んで読むこともできますよ。

学習するポイントは行き詰った時に助けてくれるサポーターをみつけること。

もし自分で考えてもわからなくて挫折しそうになったときも、教えてくれる人がいるとすぐにかいけつできて効率よく学習ができるんですね。

JavaScriptのおすすめ参考書は以下の記事で紹介しています。「どんな参考書を購入したらいいのかわからない…」と困っている人や悩んでいる人はぜひ参考にしてみてください。

→ 【2021年最新】Javascriptおすすめ学習本・参考書13選！初心者から経験者まで

サイトで学習・勉強する方法

サイトならあなたが困っている内容を、重点的に解説しているサイトを見つけられます。

例えば「アロー関数で記述する方法が忘れてしまった…」と困ったときは、ネットで調べればすぐに出てきます。参考書とは違い、自分が知りたいことをすぐに知れるのはとてもうれしいですね。

またJavaScriptを一通り学べるサイトもいくつかあります。中でも特におすすめするサイトは以下の3つです。

これらのサイトは環境構築から関数までJavaScriptを幅広く学べるので、参考書を購入するのが面倒だと感じる人にはおすすめの方法といえるでしょう。

無料で学習ができてしまうので、お金がかかる心配もいりませんよ。

まとめ

今回はJavaScript functionについて解説しました。

関数はコードがすっきりし、とても見やすくなる便利な機能です。しかしいくつかの注意点があり、それらは意識して気を付けるようにしたり、絶対に避けたりする必要がありましたね。

もしそれらの注意点を守らなかった場合、せっかくコードを見やすくしてくれるはずの関数の役割が十分に発揮しなくなってしまいます。

それどころか、コードを読む人にとって複雑なコードになってしまうんですね。

関数は使い方によってコードの読みやすさが大きく変わってしまうので、コードを読む人の気持ちになって関数を作成できるように心がけましょう。

前の記事

フリーランスに国民健康保険は必須！種類や自分にあう保険の選び方…

次の記事

プログラマーの種類とは？職種別に年収や必要なスキルを徹底比較