本ページでは、JavaScript理解のための必須知識「function（関数）」について解説します。
関数は、一言で言えば「複数の処理を１つにまとめて名前を付けたもの」と説明できます。
プログラムをコーディングしていくと、同じような処理を複数回必要とする場合がでてきます。
このようなタイミングで、当該処理を予め構造化しておいて、何度も呼び出す形で利用することができればコード全体の「構造化」と「効率化」を向上させることが可能です。
本ページでは、初心者向けにfunction（関数）の使い方を１から解説していきます。
- JavaScriptにおける「function（関数）」とは何か？
- function（関数）の定義方法と呼び出し方
- function（関数）とのパラメータのやり取りについて
- 関数のスコープについて―ローカル変数と外部変数
JavaScript学習中の方は、知らないと恥ずかしい超・基本知識ですので是非最後までご覧ください。
スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。
SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！
飲み会1回分以下の料金で継続的なスキルアップを。
Freeks(フリークス)月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。
ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）
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()は、()の中に指定した値を画面に表示するメソッドです。
本ページで何度か出てくるメソッドですので、合わせて覚えておきましょう。詳しくはこちら。
引数の使い方
何度か「引数」という言葉が出てきました。この章では関数を理解するための重要知識「引数」について解説します。
引数は、関数にデータ（特定の値）を渡してあげる役割を担っています。
関数名(引数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（関数）のスコープ
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を体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
