【JavaScript】3分で理解できる！function（関数）文

本ページでは、JavaScript理解のための必須知識「function（関数）」について解説します。

関数は、一言で言えば「複数の処理を１つにまとめて名前を付けたもの」と説明できます。

プログラムをコーディングしていくと、同じような処理を複数回必要とする場合がでてきます。

このようなタイミングで、当該処理を予め構造化しておいて、何度も呼び出す形で利用することができればコード全体の「構造化」と「効率化」を向上させることが可能です。

本ページでは、初心者向けにfunction（関数）の使い方を１から解説していきます。

JavaScript学習中の方は、知らないと恥ずかしい超・基本知識ですので是非最後までご覧ください。

function（関数）とは？

function（関数）は、複数の処理を１つにまとめて名前を付けたものです。

プログラムを組んでいくと、あるメッセージを表示させたり、ポップアップを表示させたり、同じような処理を何度か繰り返す必要があるシーンが出てきます。

そのような複数回出てくる処理を予め定義しておいて、必要なタイミングで呼び出すような形にすればプログラム全体の構造化が図れます。

このような形でプログラム全体を整理することは、保守性や可読性も大いに向上します。この「あらかじめ定義したロジック」がJavaScriptにおけるfunction（関数）です。

function（関数）の使い方

function（関数）を利用するためには、事前に処理内容と名前を定義する必要があります。

この章では、関数の定義方法と呼び出し方法を整理します。

function（関数）の定義

function（関数）の定義は、functionに続けて「関数名」と「引数」の指定、「処理内容の記述」から成り立ちます。パラメータを定義しない場合でも（　）は必須です。

※パラメータの利用方法については次章で解説します。

function 関数名(引数) {
～～～処理内容を記載～～～
}

サンプルコード

function test(){
  document.write( 'Hello World!' );
}

上記の例では、アラートを表示する「test」という関数を定義しています。非常にシンプルな形であるため、難しくはありません。

function（関数）の呼び出し

関数の呼び出しは、関数名を直接記述するだけでOKです。

関数名(引数);

サンプルコード(Resultを押すと結果が見えます)

See the Pen function1 by ビズドットオンライン (@BizOnline) on CodePen.

document.write()の意味

document.write()は、()の中に指定した値を画面に表示するメソッドです。

本ページで何度か出てくるメソッドですので、合わせて覚えておきましょう。詳しくはこちら。

【JavaScript】1分で理解できる！document.write－文字列の表示方法【初心者向け】

【JavaScript入門】document.write()を利用して文字列や変数の内容を表示する方法を解説します。基本的な利用方法や、HTMLタグを埋め込む方法を解説します。【すべてサンプルコード付きで解説】

it-biz.online

2020.02.06

引数の使い方

何度か「引数」という言葉が出てきました。この章では関数を理解するための重要知識「引数」について解説します。

引数は、関数にデータ（特定の値）を渡してあげる役割を担っています。

関数名(引数1,引数2,引数3・・・)と記述すればOKです。

See the Pen finction2 by ビズドットオンライン (@BizOnline) on CodePen.

上記の例では、testという関数の引数（a,b）それぞれに、「I am」「fine」という引数を渡しているようなイメージです。

渡す順番は引数を定義した順番と一致していなければなりません。

引数の数が多くなっても、このルールは変わりません。ただし、あまりにも引数の数が多い場合は関数化するのが妥当かどうか再考する余地がありそうです。

戻り値（return）

関数を理解するためのもう１つ重要な知識が戻り値です。

function sample() {
    //処理
    return 式
}

戻り値は「return」で指定します。戻り値はその名の通り、関数を実行した結果の値です。早速以下のサンプルコードを見てみましょう。

See the Pen 関数（return） by ビズドットオンライン (@BizOnline) on CodePen.

戻り値は、いわばその関数自体の値のように扱われていることが理解できるかと思います。

すなわち、「変数　＝　関数」とした場合、変数に代入されるのは関数の戻り値（return）に設定した値です。

戻り値は必ずしも必要ではありません。

ローカル変数vsグローバル変数：function（関数）のスコープ

【JavaScript入門】let/const/var－3分で学ぶ「変数宣言」

本ページでは、JavaScriptにおける変数の宣言方法について解説します。JavaScriptの変数は、他の言語と異なりちょっとだけやっかいな性質を持っています。そのため、初心者にとっては理解しづらく挫折してしまうことも少なくないでしょう。ですが、一度理解してしまえば決して難しい...

it-biz.online

2020.02.06

function（関数）で扱う変数については「スコープ（変数の有効範囲）」に注意する必要があります。この点については、初心者の方ほど誤りやすい箇所であるため、詳しく解説します。

「スコープ」というのは変数が利用できる範囲のことです。

もし、変数を「関数内」で利用する場合、その変数はその関数内でしか利用することができません。

ローカル変数

関数内で定義した変数は「ローカル変数」と呼ばれます。

以下のサンプルコードでは、ローカル変数を関数外で利用しているため、２つ目の「Hello World!」が表示されません。エラーが発生している状態です。

See the Pen finction3 by ビズドットオンライン (@BizOnline) on CodePen.

グローバル変数

対して、関数の外で定義されている変数を「グローバル変数」と呼びます。

グローバル変数であれば、関数内で参照することも可能ですし、書き換えもOKです。もちろん、関数外で宣言されているため、関数外からでも問題なく利用することが可能です。

See the Pen function4 by ビズドットオンライン (@BizOnline) on CodePen.

関数の二重定義（同名functionが存在する場合）

コードが長くなってくるとよく発生してしまうのですが、同じ名前の関数が出来上がってしまう場合があります。

このとき、JavaScriptはどのような動きをするでしょうか？

下記のサンプルコードをご覧ください。

See the Pen function(オーバーライド) by ビズドットオンライン (@BizOnline) on CodePen.

ご覧のように、結果はコードの後ろに定義した関数定義で上書きされます。

一番最後に定義したものが最新となるということを頭に入れておきましょう。

ちなみに、引数が同じ場合でも異なる場合でもこのルールは変わりません。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2022.01.13