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

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

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

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

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

JavaScript初心者におすすめの 無料プログラミングサイト3選

	1位：侍テラコヤ	2位：Progate	3位：ドットインストール
サイト名
学べる内容	JavaScript、HTML/CSS、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど	JavaScript、HTML/CSS、PHP、Ruby、Python、Java、Go、Git、SQL など	JavaScript、HTML/CSS、Ruby、Python、Java、C言語 など
質問 相談サポート
練習問題の数
特徴	現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能	環境構築をしなくても学べる イラスト付きのスライド式教材　　　スマホアプリでも学べて手軽	レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる
詳細	公式サイト	公式サイト	公式サイト

これからJavascriptのスキルを向上させていきたい方に向けて、おすすめのJavascript学習サイト16選を別で紹介しているので、そちらもぜひ参考にしてみてください。

Javascriptのおすすめ学習サイト16選！選ぶコツや注意点を解説

更新日：2024年3月1日

function(関数)とは？

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

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

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

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

function(関数)の使い方

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

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

関数宣言で書く

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

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

function sample() {

    //ここに処理を書いていく

}

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

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

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

関数式で書く

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

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

var sample = function() {

    //ここに処理を書いていく

}

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

コンストラクタで書く

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

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

var sample = new Function('text', 'console.log(text)');

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

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

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

プログラミング初心者は学習サイトを登録するのがおすすめ

初心者が効率的にプログラミングを学習するには、プログラミング学習サイトを使うのがおすすめです。

無料で使用できるものであれば、余計な費用をかけることなく効率的に勉強することができ、他の人よりも早くスキルアップすることが可能になります。

無料で現場で活躍しているプロのエンジニアに相談ができる学習サイトなどもあるため、気になった方はぜひ利用してみるとよいでしょう。

function(関数)の書き方

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

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

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

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

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

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

var p = document.createElement('p');

p.textContent = 'Hello World';

document.body.appendChild(p);

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

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

function createP() {
  var p = document.createElement('p');

  p.textContent = 'Hello World';

  document.body.appendChild(p);
}

この例では、「createP」という関数名を付与していますね。これにより、以降は「createP()」と記述するだけでp要素を作成して表示することができるのです。

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

アロー関数について

ES2015から導入されたアロー関数についての書き方を見ていきましょう。アロー関数の場合は「function」キーワードを使わない代わりに、「=>」で関数を表現することができます。

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

var myFunc = function(name) {
  console.log(name);
}

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

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

var myFunc = (name) => {
  console.log(name);
}

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

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

var myFunc = (name) => console.log(name);

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

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

var myFunc = name => console.log(name);

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

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

var myFunc = () => console.log('太郎');

function(関数)の呼び出し方

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

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

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

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

次の例を見てください！

function sample() {
    var text = 'Hello World';
    
    console.log( text );
}

//functionを呼び出す
sample();

実行結果

Hello World

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

そして、この関数を呼び出すには関数名をそのまま利用して「sample()」と記述すればOKです。しっかりと文字列が出力されているのが実行結果からも分かりますね。

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

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

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

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

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

<button onclick="sample()">ボタン</button>

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

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

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

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

window.onload = function() {

    console.log( 'Hello World' );

}

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

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

window.addEventListener('load', function() {

    console.log('Hello World');

})

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

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

function(関数)の引数

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

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

functionに引数を設定する方法

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

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

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

次の例を見てください！

function sample(name, age) {
    
    //この中に記述する処理で引数「name」「age」が使える
    
}

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

functionの引数に値を渡す方法

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

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

function sample(name, age) {

    console.log(name + 'さんの年齢は' + age + 'です！');

}

//引数に値を渡す
sample('太郎', 32);

実行結果

太郎さんの年齢は32です！

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

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

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

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

sample('太郎', 32);
sample('花子', 27);
sample('三郎', 22);

実行結果

太郎さんの年齢は32です！
花子さんの年齢は27です。三郎さんの年齢は22です。

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

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

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

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

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

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

function testFunc(callback) {
 
    setTimeout(function() {
        console.log('testFuncが実行されました');
        callback();
    }, 2000)
 
}

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

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

function(関数)の戻り値

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

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

return文の書き方

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

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

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

function multiply( num1, num2 ) {

    return num1 * num2;

}

console.log( multiply(5, 2) );

実行結果

10

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

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

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

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

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

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

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

if( multiply(5, 2) > 5) {

    console.log( '5よりも大きい' );

}
else {

    console.log( '5よりも小さい');

}

実行結果

5よりも大きい

先ほど作成した「multiply()」は2つの引数を掛け算した結果を返す関数でしたよね？

そこで、IF文の条件式にmultiply()をそのまま当てめることで、「10 > 5」という条件式と同じになるわけです。

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

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

functionのthisとは？

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

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

関数内におけるthisの値

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

次の例を見てください！

function sample1() {
    console.log( this );  //①のthis
    
    function sample2() {

        console.log( this );  //②のthis

    }
    sample2();
}

sample1();

実行結果

Window {stop: function, open: function, alert: function…}
Window {stop: function, open: function, alert: function…}

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

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

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

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

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

次の例を見てください。

var obj = {
    text: 'hello',
    obj: this,  //①のthis

    myObj: function() {

        return this;  //②のthis

    }
}

console.log( obj.obj );
console.log( obj.myObj() );

実行結果

Window {stop: function, open: function, alert: function…}
Object {text: "hello", obj: Window, myObj...}

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

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

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

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

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

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

アロー関数の特徴として、自身のthisを持たないため、定義された瞬間のスコープのthisをキャプチャするという性質があります。

以下のサンプル例を通して、この挙動を確認してみましょう。

var name = '太郎さん';

var obj = {
  name: '田中さん',

  myFunc: function() {
    console.log(this.name);
  },
  
  myFunc2: () => console.log(this.name)
}

obj.myFunc();  // 田中さん
obj.myFunc2(); // 太郎さん

この例では、グローバルスコープとオブジェクト内の両方でnameという変数が定義されています。

myFunc()を実行すると、通常の関数として定義されているため、この関数のthisはobjオブジェクトを指します。そのため、「田中さん」と出力されるのです。

一方で、myFunc2()はアロー関数で定義されており、この関数のthisはアロー関数が定義された時点のスコープのthis、すなわちグローバルオブジェクトをキャプチャしています。そのため、グローバルスコープで定義されたnameの値「太郎さん」が出力されます。

これにより、アロー関数におけるthisの挙動と通常の関数におけるthisの挙動の違いがわかります。

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

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

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

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

var num1 = 10;

function sample() {
  var num2 = 100;
  
  console.log(num1);
}

sample();

console.log(num2);

実行結果

10

num2 is not defined

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

関数「sample()」を実行するとコンソールログに「num1」の値が出力されます。「num1」は関数外で宣言された変数ですが、関数内でも利用できることが分かりますね。

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

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

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

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

argumentsとは？

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

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

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

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

次の例を見てください。

function sample( text ) {

    console.log( text );

}

sample( 'リンゴ', 'バナナ', 'メロン' );

実行結果

リンゴ

「sample()」には1つの引数が設定されていますが、実行時に3つの文字列（引数）を指定していますよね？

しかし、実行結果を見るとエラーになっておらず、自動的に1つ目の引数を使って実行しているのが分かります。

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

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

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

function sample( text ) {
    
    console.log( arguments );  // argumentsオブジェクトを出力

}

sample( 'リンゴ', 'バナナ', 'メロン' );

実行結果

Arguments(3) ["リンゴ", "バナナ", "メロン",…...]

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

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

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

＼　現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る

argumentsを使った条件分岐

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

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

function sample( text ) {
    
    if( !arguments.length ) {
        console.error( '引数を指定してください！' );
    }
    
}

sample();

実行結果

引数を指定してください！

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

しかし、実行する時に何も引数を指定していないのでargumentsオブジェクトの中身は空っぽですよね？

そこで、中身の値を確認するために「arguments.length」とすれば、結果が「0」になります。

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

まとめ

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

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

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