【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ!

マサト
書いた人 マサト
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

プログラミングをしていると、処理を1つにまとめて管理したい時や、同じ処理を使いまわしたりしたい時ってありますよね。

今回は、そんな時に使えるfunction(関数)について学習していきましょう!

この記事は下記の流れで、function(関数)について幅広く解説していきます。

【基礎】function(関数)とは?
【基礎】function(関数)の使い方
【基礎】function(関数)の呼び出し方
【基礎】function(関数)の書き方
【発展】function(関数)の引数
【発展】function(関数)の戻り値
【発展】functionのthisとは?
【発展】function(関数)のスコープについて
【発展】function(関数)をもっと活用しよう

この記事でfunction(関数)をしっかり学習して、自分のスキルアップを目指しましょう!

function(関数)とは?

function(関数)とは、様々な処理を1つにまとめて、名前をつけることができるものです。
単調な処理を1つにまとめて、どこからでも使えるように効率化するという目的でよく使われています。

1つにまとめることで、同じ処理を何度も書く必要がなくなりミスが減るうえ、別のプログラムに使いまわすことも可能になります。

また、function(関数)は値を受け取ったり、何らかの処理を行った値を返すことも可能なので、最小のコードで最大限のパワーを引き出せる力を秘めています。

効率のよいプログラミングには必須のスキルと言っても過言ではないですね。

function(関数)の使い方

functionを利用するには、一般的に関数宣言関数式コンストラクタという3種類の方法があります。

それぞれの使い方について詳しく見ていきましょう。

関数宣言で書く

1つ目は、関数宣言によって書く方法です。
一番ポピュラーな方法なので、見たことがある人も多いかもしれませんね。

これは文字通り、関数をそのまま宣言することでプログラム内で利用することができるようにする方法です。

この例では、「sample」という関数名を付けて関数宣言を行なっています。

関数名は自分で勝手に決めて良いのですが、一般的には「どんな処理をするのか?」というのが名称から推測できることが望ましいです。

例えば、何らかの値を取得するのであれば「get○○○()」、値を追加するのであれば「add○○○()」というように決めていくとよいでしょう。

関数式で書く

2つ目は、関数式(関数リテラル)によるfunctionの利用方法です。

関数を宣言する際に関数名を記述しなくても良いので、無名関数匿名関数とも呼ばれる方法になります。

この例では、関数名を指定せずにそのまま変数へ式を代入する形式で記述しているのが分かります。

実はJavaScriptの関数は、文字列や数値と同じくデータの値として存在しています。
なので、このような書き方が許されるというわけです。

コンストラクタで書く

3つ目は、コンストラクタを利用したfunctionの記述方法です。

この方法では、JavaScriptに標準で用意されているFunctionオブジェクトコンストラクタを利用して関数を定義していきます。

この例では、第1引数に引数名として「text」を指定して第2引数に処理の内容を記述しています。

あとは、「sample(‘hello’)」と記述すれば引数のtextに「hello」という文字列が格納されてコンソールログに出力されるという仕組みです。

ただし、コンストラクタを使った記述は特にメリットがなく、間違いやすいことからあまり利用されることはありません

function(関数)の書き方

この章では、もっとも基本となる関数の書き方について見ていきましょう!

主に、一般的なfunctionの作り方や標準で定義されている関数、および新しく導入されたアロー関数にについて学んでいきます。

基本的なfunctionの作り方について

前章では、functionの使い方として「関数宣言」「関数式」などを見てきました。

それでは、実際に関数を作成するときはどのように行うのかを見ていきましょう。

次のサンプル例を見てください!

これは、単純なp要素をJavaScript側で作成して画面に表示するプログラムです。

これを関数化したい場合には、適当な関数名を付与して{ }で囲んであげれば良いわけです。

この例では、「createP」という関数名を付与していますね。

これにより、以降は「createP()」と記述するだけでp要素を作成して表示することができるのです。

もちろん、HTMLタグの属性「onclick」に記述すればクリックすることで関数を実行させることもできるわけです。

アロー関数について

ES2015から導入されたアロー関数についての書き方を見ていきましょう!

アロー関数の場合は「function」キーワードを使わない代わりに、「=>」で関数を表現することができます。

例えば、次のような関数があるとします。

これは単純に引数に指定した文字列をコンソールログに出力するだけの関数ですね。

これをアロー関数で記述すると以下のようになります。

「function」というキーワードが無くなり「=>」を記述しているのが分かりますね。

さらに、アロー関数では処理が1行の場合に限り{ }で囲む必要が無くなりました。

このようにワンライナーで記述できるのでよりシンプルなコードになります。

実は、もっと省略が可能で「引数」が1つだけの場合は( )を書く必要もありません。

簡単な関数であればここまで記述をシンプルにできるわけです。

ただし、引数が1つも無い場合には( )だけを記述する必要があるので注意が必要です。

function(関数)の呼び出し方

関数は宣言したあとに呼び出すことで、はじめて利用することができます。
ここでは「呼び出し」という表現を使っていますが、簡単に言えば定義した関数を実行するという意味なわけですね。

基本的な呼び出し方法や、よく使われるonclick()onload()による呼び出し方を詳しく見ていきましょう!

基本の呼び出し:関数名を指定

まずは基本的な関数呼び出しについて学習をしていきましょう、

次の例を見てください!

実行結果

この例で作成している「sample関数」は、文字列をコンソールログに出力する機能を持った関数になります。

そして、この関数を呼び出すには関数名をそのまま利用して「sample()」と記述すればOKです!

しっかりと文字列が出力されているのが実行結果からも分かりますね。

ちなみに、この呼び出し方法は関数式を使ったfunctionの場合でも同じなので忘れないようにしましょう!

クリックしたら呼び出し:onclick()

今度はHTML要素のonclick属性を使って関数を呼び出してみましょう!

onclick属性を使用することで、指定した要素がクリックされた際にfunctionを動作させることができます。

例えば、先ほど作成した関数「sample()」をonclick属性に当てはめると次のようになります。

この例では、button要素のonclick属性に関数「sample()」を指定しているのが分かりますね。
これにより、ボタンをクリックした場合のみ関数のsample()が実行されることになります。

つまり、onclick属性に指定した関数は、JavaScriptで定義されている関数を自動的に探し出して実行してくれるというわけです。

ロードしたら呼び出し:onload()

次に、onload()メソッドを使った関数の呼び出し方法を学習しましょう。

これを使うと、HTMLファイルなどのリソースがすべて読み込まれたタイミングで、任意の関数を実行することができます。

この例では、「window.onload」に関数をそのまま代入しているのが分かります。
この記述によりHTMLファイルなどが読み込まれたあとに関数が実行されるのです。

また、イベント処理の記述方法でも同じことが実現できます。

この例では、addEventListener()を使ってイベント処理を記述していますが、引数に関数の処理内容を設定しています。

どちらの書き方でも扱えるように慣れておきましょう!

function(関数)の引数

function(関数)で処理を1つにまとめられるようになってきたら、引数を指定して処理を効率化していきましょう!

ここからは、一般的な引数の利用方法を詳しく見ていきます。

functionに引数を設定する方法

まずは、引数を設定する方法を学んでいきましょう!

一般的な記述方法としてはfunction( 引数, 引数・・・ )のようにいくつでも引数を記述することができます。

この引数は、関数内で自由に扱えるようになっています。
処理の中に組み合わせて使うのが良いでしょう。

次の例を見てください!

関数sample()の引数として「name」と「age」を記述しているのが分かりますね。

あとは、この関数内で「name」と「age」を普通の変数みたいに扱うことができるようになります。

functionの引数に値を渡す方法

次に、設定した引数に何らかの値を渡す方法について学んでいきましょう!

例えば、先ほど引数として「name / age」を設定しましたが、これらに値を渡すには次のようにします。

実行結果

最後のsample()に引数を指定している箇所に注目してください!

「sample(‘太郎’, 32)」と引数を記述することで、それぞれ順番に「name / age」へ値が格納されていきます。
つまり、「name」には「太郎」という文字列が入り、「age」には「32」という数値が格納されているわけです。

これらの引数を活用すれば、実行結果のように1つの文字列として出力することも出来るのです。

引数を使えば、以下のようにさまざまな値にも応用できますよね!

実行結果

1つの関数を作るだけで、さまざまなケースに対応できるようになるのが引数の大きな特徴なのです。

functionの引数にコールバック関数を設定する

functionの引数には、別の関数を設定することも可能です。

この別の関数を引数に設定すると、関数の処理が終了したあとに引数へ設定した関数を実行させることができます。

これにより、順番に実行したい関数を記述することが可能で、例えば時間の掛かるサーバーからの情報を取得したあとに別の処理をしたい場合などに便利です。

次のサンプル例を見てください。

この関数「testFunc()」の引数には「callback」という関数を記述しており、setTimeout()の最後に実行するようになっていすまよね?

これにより、2秒経過後に引数へ設定していた関数が実行されるというわけです。

このコールバック関数の仕組みについては、次の記事で基本から応用まで体系的にまとめているのでぜひ参考にしてみてください!

function(関数)の戻り値

関数は戻り値を設定することで、関数内で処理した結果を返すことが可能になります。

そこで、一般的に使われるreturn文を利用したプログラミング手法について見ていきましょう!

return文の書き方

関数内にreturn文を記述することで、任意の値を返すことができます

「値を返す」と言ってもイメージしにくいかもしれませんね。
これは簡単に言うと、何らかの処理をした結果を「プログラムに伝える」ことです。

例えば、次の例を見てください。

実行結果

この例では、「multiply()」に2つの引数が設定されており、実行時に数値を当てはめています。
処理の内容としては、引数「num1」「num2」を掛け算してからreturnしているだけですね。

ここでreturnを記述するだけで、掛け算をした結果を返すようになります。

その証拠に、console.log()の中で関数をそのまま実行していますが、実行結果には掛け算の結果が出力されています。

つまり、関数が実行されたあと、処理内容の結果をconsole.log()へ伝えているわけですね。

戻り値を使って条件分岐する

return文を活用するとif文などの条件式にも応用することが可能です。

例えば、先ほど作成した「multiply()」を使って試してみましょう!

実行結果

先ほど作成した「multiply()」は2つの引数を掛け算した結果を返す関数でしたよね?
そこで、IF文の条件式にmultiply()をそのまま当てめることで、「10 > 5」という条件式と同じになるわけです。

このようにreturn文を使えば、関数を普通の値として活用できるようになるので応用範囲が広くなるのです。

このreturn文について、さらなる活用事例やサンプルコードを次の記事でも詳しく解説しているので、ぜひ参考にしてみてください!

>>returnの使い方と戻り値・falseのまとめ!

functionのthisとは?

JavaScriptで扱うthisは、関数を利用する時に注意点するべきポイントがあります。

関数とメソッドでthisの意味が異なるので、ここで改めて詳しく見ていきましょう!

関数内におけるthisの値

まず最初にfunction(関数)内でthisを使ってみましょう!

次の例を見てください!

実行結果

この例では、「sample1()」関数を作成してその中へさらに別の関数「sample2()」を作成しています。

それぞれの関数内でthisの中身をコンソールに出力していますが、どちらもグローバルオブジェクト(Windowオブジェクト)になっていますね。

つまり、関数内のthisはデフォルト状態ではグローバルオブジェクトが格納されているわけです。

メソッド内におけるthisの値

今度は、オブジェクト内で作成する関数(メソッド)thisを使ってみましょう!

次の例を見てください。

実行結果

この例では、objというオブジェクトを作成し、その中に「myObj」という関数(メソッド)を作成しています。

①のthisはWindowオブジェクトですが、②のthisは作成したobjオブジェクト自身であることが分かりますね。

つまり、オブジェクト内ではfunction(関数)の中と外でthisの中身が変化するのです。

thisの中身の変化については、さまざまなコード例による検証結果やFormにおける挙動の解説などを下記の記事で紹介しています。
こちらも参考にしてみてください!

>>thisの意味と使い方を初めて学ぶコツまとめ!

アロー関数におけるthisの値

今度は、アロー関数を使った場合のthisがどのような値になるのかも合わせて見ておきましょう!

結論から先に言うと、アロー関数のthisは定義した時点のスコープを引き継ぐという特性があります。

これを解説するために、以下のサンプル例を見てください。

実行結果

この例では、オブジェクトの外と中に「name」という変数を定義しているのが分かりますね。

この状態で一般的なfunctionを使って「name」を出力するメソッド「myFunc()」と、アロー関数を使って「name」を出力するメソッド「myFunc2()」を実行してみます。

実行結果を見ると、アロー関数の場合はオブジェクト内で定義された「name」の値を出力しているのが分かります。

つまり、アロー関数が定義された時点の「name」はオブジェクト内になるので、こちらのスコープが引き継がれたというわけです。

function(関数)のスコープについて

function(関数)で扱う変数は「スコープ」に注意する必要があるので、合わせて紹介しておきます。

そもそも「スコープ」というのは変数が利用できる範囲のことで、関数内で宣言した変数と関数外で宣言した変数では扱える範囲が異なるのです。

次のサンプル例を見てください!

実行結果

この例では、変数「num1」が関数外で宣言されており、変数「num2」が関数内で宣言されている点に注目してください。

関数「sample()」を実行するとコンソールログに「num1」の値が出力されます。

「num1」は関数外で宣言された変数ですが、関数内でも利用できることが分かりますね。

逆に関数内で宣言された「num2」は関数外で利用しようとしてもエラーになることが分かります。

つまり、関数内で宣言された変数は関数内でしか利用できず、関数外で宣言された変数は関数内でも利用できるというわけです。

function(関数)をもっと活用しよう

ここまでの知識だけでも、function(関数)を十分使いこなすことができますが、より使いこなせるよう、さらに知識を深めていきましょう。

関数をより活用していくためにargumentsというものについて解説していきます。

argumentsとは?

argumentsは、関数を実行する際に自動で生成されるオブジェクトです。
配列と同じように、添字と値で構成されています。

argumentsを活用することで、関数の引数を制御できるうえ条件分岐を行うことも可能です。

argumentsに格納されている引数を取得

JavaScriptの引数は、1つしか設定されていないにも関わらず、複数の引数を指定しても実行エラーになりません。

次の例を見てください。

実行結果

「sample()」には1つの引数が設定されていますが、実行時に3つの文字列(引数)を指定していますよね?
しかし、実行結果を見るとエラーになっておらず、自動的に1つ目の引数を使って実行しているのが分かります。

ほかにも、まったく引数を当てはめずに実行しても「undefined」になるだけでエラーにはなりません

これは、function(関数)が呼び出された時に自動で生成されるargumentsオブジェクトのおかげなのです。

次のコード例を見てください!

実行結果

この例では、「sample()」関数の中でargumentsオブジェクトをコンソールログに出力しています。

実行結果を見ると、sample()を実行した時に指定した3つの引数が配列として格納されているのが分かりますね。

このように、自動で生成されたargumentsオブジェクトには引数の値が格納されているという点を覚えておきましょう!

argumentsを使った条件分岐

argumentsオブジェクトを応用すると、引数を意図的に操作することができます。

例えば、引数をまったく指定しなかった時にエラーメッセージを表示したければ次のようになります!

実行結果

この例では、1つだけの引数を取るsample()という関数を定義しています。

しかし、実行する時に何も引数を指定していないのでargumentsオブジェクトの中身は空っぽですよね?
そこで、中身の値を確認するために「arguments.length」とすれば、結果が「0」になります。

「0」はIF文などので条件式で利用するとfalseという意味になるので、引数の有無による条件分岐が可能になるというわけです。

まとめ

今回は、JavaScriptにおけるfunction(関数)について学習しました!

最後に、重要なポイントをもう1度おさらいしておきましょう。

・function(関数)は関数宣言・関数式・コンストラクタという3種類の利用方法がある
・関数名をそのまま利用することで呼び出し(実行)を行うことができる
・引数を設定することで多彩なケースに対応できる関数を作成できる
・戻り値(return文)を利用することで何らかの処理を行った結果を返すことができる
・関数とメソッド内におけるthisはそれぞれ意味が異なる
・関数が実行される時に自動生成されるargumentsオブジェクトには引数の値が格納されている
・関数のブロック内で宣言、定義した変数は使用できる範囲に制限がある

上記内容を踏まえて、ぜひ自分でもプログラムを繰り返し書いてみて積極的に取り入れるようにしてみましょう!

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーランスをされている市川友哉さん。33歳で、プログラミングを学び始め、4ヶ月という短い期間でフリーランスエンジニアとして独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。
疑問や質問などあればお気軽にどうぞ!
お問い合わせフォーム