JavaScriptでコーディングを行なっていく中では、同じ処理や似たような処理を使いたくなる場面が多々発生します。
その時に、同じコードや似たコードをコピペで使い回していると
- 記述量が多くなって、ファイルを読み込むのに必要な時間が増える
- 処理に変更があったときに、全て書き換えないといけない
- そもそもコピペが手間
などの問題が発生してしまいます。
今回は、そんな問題を解決するために生まれた「関数」というものについて解説していきます。
目次
関数とは
関数は一言で表すと「一連の処理をまとめたもの」で、複数の処理を「名前付きの機能」としてまとめたものです。
例えば、犬の芸で「お手」というものがあります。犬の芸とは言い換えると、犬に対して命令を与えることです。
犬に、「お手」という命令を出すと次のように一連の動作を行います。
- 片手をあげても大丈夫な体勢をとる
- 片手を持ち上げる
- 片手を主人の手の上に置く
- 主人にドヤ顔をキメる
つまり、「お手」と命令を出すと、以上４つの一連の動作（処理）を実行できるというわけです。
例えるなら犬に対しての芸が、機械に対しての関数と言えるでしょう。
関数の基本
関数が「一連の処理をまとめたもの」ということのイメージは身についたと思います。
それでは次に、実際の書き方について説明していきます。
基本構成と扱い方
関数を使うには、次の３つが必要です。
- 関数の定義
- 関数の中身の処理を記述
- 関数の呼び出し
それぞれ詳しくみていきます。
関数の定義
関数の名前には半角英数字を使います。英語で命名することが多いです。
関数名の後には ( ) を忘れずにつけてください。
function 関数名() {
}関数の中身の処理を記述
{ }の中に関数の処理を記述していきます。
ただし、ここで書いた処理はそのままだと実行されません。関数の処理を実行するためには、後述する「呼び出し」を行う必要があります。
function 関数名() {
//一連の処理をここに記述する
}関数の呼び出し
作成した関数を実行します。
これによって、一度作成した関数を複数の箇所で使うことができるようになります。
//関数の作成
function 関数名() {
//一連の処理をここに記述する
}
//関数の呼び出し
関数名();この３段階を踏むことで、複数の箇所で同じ処理を実行することが可能となるわけです。
さらに理解を深めるために、使用例を見ていきます。
使用例
function example() {
console.log('Hello World.');
}
example(); //「Hello World.」と表示される
example(); //もう一行、「Hello World.」と表示される「Hello World.」という文字を表示させる関数を作りました。
これで、example( )と書くだけで、関数の中に書いた処理を、好きなところで好きなだけ発生させることができます。
今回は、関数内に書いた処理がたった一行ですが、複雑な処理でも同じことができます。
引数
次は「引数（ひきすう）」について扱っていきます。
引数とは「関数を呼び出した時に、関数内の処理を書き換えられる枠」のことを言います。
この存在によって、「同じ処理を複数箇所で実行する」だけでなく、「似た処理（一部だけ変化のある処理）を複数箇所で実行する」ことが可能になります。
実際に見ていきましょう。
基本構文と扱い方
引数にも次の３段階があります。
- 関数の定義の時に、引数を設定
- 関数の処理を書く中で、引数を使用
- 関数の呼び出しの時に、引数に渡す値を入れる
それぞれ詳しく見ていきます。
引数を設定
引数の定義を行います。複数の引数を設定する場合は、,（カンマ）を使って区切ります。
function 関数名(引数) {
}
//複数の引数を使う場合
function 関数名_02(第1引数, 第2引数, 第3引数) {
}関数の処理を書く中で、引数を使用
関数の中では通常の、定数や変数のように扱うことができます。
function 関数名(引数) {
//引数を使用した処理を記述する。
console.log(引数);
}
//複数の引数を使う場合
function 関数名_02(第1引数, 第2引数, 第3引数) {
//複数の引数を使用した処理を記述する
console.log(第1引数);
console.log(第2引数);
console.log(第3引数);
}引数に渡す値を入れる
関数を呼び出す際、( )の中に、引数に入れたい値を入れていきます。
これを「引数を渡す」といいます。複数の引数を使う場合は、呼び出し先でも,（カンマ）を使って区切ります。
function 関数名(引数) {
//引数を使用した処理を記述する。
}
//複数の引数を使う場合
function 関数名_02(第1引数, 第2引数, 第3引数) {
//複数の引数を使用した処理を記述する。
}
関数名(引数に渡す値);
関数名_02(第1引数に渡す値, 第2引数に渡す値, 第3引数に渡す値);使用例
// 税込み価格を計算する関数
function tax(price) { //引数に「price」を設定した、「tax」という名前の関数
let taxedPrice = price * 1.1; //priceに渡された値に1.1をかけて、税込み価格を計算
taxedPrice = Math.floor(taxedPrice); //計算結果の端数を切り捨て
console.log('税込み価格：' + taxedPrice + '円'); //結果を表示
}
tax(100); //引数priceに「100」を渡す
//「税込み価格：110円」と表示される
tax(123); //引数priceに「123」を渡す
//「税込み価格：135円」と表示される税込み価格を計算する関数を作ってみました。
こちらは、引数priceに税抜き価格を渡すと、税込み価格が端数切り捨てで表示されるような関数になっています。
このように、
- 関数の定義の際に、引数を設定
- 関数の処理を書く中で、引数を使用
- 関数の呼び出しの際に、引数に渡す値を入れる
をおこなうことで、引数を用いた関数の作成と利用ができるわけです。
引数を複数使用した例も見ていきましょう。
function checkBMI(weight, height) { //引数「weight」「height」を設定
let valueBMI = weight / height**2;
console.log('BMI値：' + valueBMI);
let judge;
if(valueBMI < 18.5) {
judge = '痩せ型'
} else if(valueBMI < 25) {
judge = '普通体重'
} else {
judge = '肥満'
}
console.log('判定：' + judge);
}
checkBMI(72, 1.72); //引数「weight」に72、「height」に172を渡す
//「BMI値：24.34」「判定：普通体重」と表示される
checkBMI(90, 1.85); //引数「weight」に90、「height」に185を渡す
//「BMI値：26.3」「判定：肥満」と表示されるこちらは、身長と体重からBMI値と肥満度の判定を行っています。
「身長」と「体重」という複数の変化項目がある場合、上記のようにして複数の引数を設定します。
引数は、「必ず使わないといけない」というわけではなく、あくまでオプションとして必要な時に必要な分使うものです。そのため、関数の( )が空のまま関数を定義したり、呼び出して使うことも普通にあります。
引数を使いこなして、便利な関数を作れるようになりましょう。
おまけ：引数のデフォルト値の設定
引数には「デフォルト値」を設定することができます。
つまり、関数の呼び出しをする際、関数名( )に渡す引数を入れない場合に、渡される引数を設定することができるわけです。
デフォルト値を設定するときは、関数を定義する際に次のように設定します。
function 関数名(引数名 = デフォルト値) {
//関数の処理内容
}
//複数の引数を使う場合
function 関数名_02(第1引数 = デフォルト値01, 第2引数 = デフォルト値02, 第3引数) {
}デフォルト値を設定するものと設定しないものを両立させることもできます。
これは、頭の片隅に入れておく程度で問題ありません。
返り値
次に、「返り値（戻り値）」というものについて扱っていきます。
返り値の処理とは一言で表すと「関数で処理した後の結果を、値として返す」ことです。
実際に見ていきましょう。
基本構文と扱い方
値を返すためにはreturnを使います。
function 関数名() {
//値を使用した処理をここに記述する
return 値;
//return以降の処理は実行されない
}return以降に書いた処理は実行されません。使用例をみるとわかりやすいです。
使用例
// 税込み価格を計算を返す
function tax(price) {
let taxedPrice = price * 1.1;
taxedPrice = Math.floor(taxedPrice);
taxedPrice = '税込み価格：' + taxedPrice + '円'; //結果をtexedPriceに代入
return taxedPrice;
}
tax(123); //「税込み価格：135円」という値として返される（表示はされない）
console.log(tax(123)); //「税込み価格：135円」と表示されるtax(123);と呼び出した段階では、処理の結果が存在するだけで、表示はされません。ここでのtax( );は、あくまで「taxedPriceの結果を返した値」としてしか存在していないのです。
つまり、その値を表示する、値を使ってさらに計算する、など、呼び出し先で扱いを変えることができるわけですね。
関数式
ここまで紹介した次のような書き方は、「関数宣言」と呼ばれる書き方です。
//関数宣言
function 関数名() {
//一連の処理をここに記述する
}
関数名();しかし、関数宣言にはある弱点があるため（後述します）、「関数式」と呼ばれる書き方が生まれました。
次は、関数式について説明していきます。
基本構文と扱い方
関数式では、関数を変数のように定義します。
処理の書き方や呼び出し方、引数の扱いは、先ほどまで説明した関数宣言の書き方と同じです。
//関数式
const 関数名 = function () {
//一連の処理をここに記述する
}
関数名();関数式で定義した関数の呼び出しは、関数の定義よりも下でしか行えません。
関数宣言との違い
関数式が生まれた理由の一つとして、関数宣言の「何度でも上書きできてしまう性質」があります。
example(); //「01」と表示される
function example() {
console.log('01');
}
example(); //「01」と表示される例えば、example( )という関数を用意して処理を書くと、その前後で呼び出せば書いた処理が実行されます。
では、今度は違う処理を書いた同じ名前の関数example( )を用意するとどうなるでしょう。
example(); //「02」と上書きして表示される
function example() {
console.log('01');
}
example(); //「02」と上書きして表示される
function example() { //同じ名前の関数宣言をする
console.log('02');
}
example(); //「02」と表示されるこのようにして、一つ目に書いたexample( )の処理は上書きされてしまい、どこで呼び出しても下に書いた方が反映されてしまいます。
このようにして上書きが行われてしまうと、関数が想定と違う動きをして機能しなくなったりと、厄介なことになります。
実際の開発では、どの名前の関数が使われているかを全て把握することが難しいので、上書き不可能な定数のconstを使うことで上書きを防止しているわけです。
アロー関数
関数式の書き方の一つに、「アロー関数」という書き方があります。
いくつか制限はありますが、基本的には関数式を簡略化した書き方だと思って大丈夫です。
基本構文と扱い方
書き方としては、関数式のfunctionという文字が消えて、矢印のような=>が追加されます。
//関数式
const 関数名 = () => {
//一連の処理をここに記述する
}
関数名();使用例
次の二つは、同じ役割と結果を示す関数です。
//関数式での書き方
const tax = function (price) {
let taxedPrice = price * 1.1;
taxedPrice = Math.floor(taxedPrice);
console.log('税込み価格：' + taxedPrice + '円');
}
tax(123);
//アロー関数での書き方
const tax = (price) => {
let taxedPrice = price * 1.1;
taxedPrice = Math.floor(taxedPrice);
console.log('税込み価格：' + taxedPrice + '円');
}
tax(123);結論として、関数は基本的にアロー関数で書いてあげるのが良いでしょう。
加えて基本的な書き方も知っていれば、参考サイトのコードの解読に役立ちます。
まとめ
今回は、関数というものについて扱ってきました。
関数と聞くと、難しそうですが、使ってみて理解してしまえば、とても便利な機能です。
関数の仕組みや引数の概念などは他のプログラミング言語にも出てきますので、使いながら理解を深めていきましょう。
