はじめてのJavaScript⑮ 「function命令」

##1. はじめに
本記事では、JavaScriptの
「function命令」
について記載する。
##2. function命令とは？
:::note
様々な処理を1つにまとめて、名前をつけることができるもの。
:::
:::note
単調な処理を1つにまとめて、どこからでも使えるように効率化するという目的でよく使用される。
:::
:::note
1つにまとめることで同じ処理を何度も書く必要がなくなりミスが減るうえ、別のプログラムに使いまわすことも可能になる。
:::
##3. 構文
構文は以下のようになる。

index.js

index.js

function 関数名 (引数1、引数2、...) {
  //任意の処理
  return 戻り値
}

###構文の補足 :::note alert 引数とは、関数の呼び出し元から、関数へ値を渡すときに使う特別な変数のこと。 ::: :::note alert 戻り値とは、関数から関数呼び出し元へ返す値のこと。 ::: ##4. 例題 例題の内容は、過去に記載した記事より参照→[はじめてのJavaScript⑭ 「関数」 5.例題](https://qiita.com/Stack_up_Rising/items/0c2cc32de31a2c35a552#5-%E4%BE%8B%E9%A1%8C)より

###例題の内容
例題は「四角形の面積を計算する関数」というテーマで進めていく。

四角形の縦の長さと横の長さを引数に渡すと、四角形の面積(縦×横)を計算して、値を返す関数を作る。

作った関数を使って、高さ3m、横幅5mの四角形の面積を求め、コンソールへ出力する。

※単位は㎡とする。(単位の出力は不要)

---

###四角形の面積を計算する関数をfunction命令で書く

index.js

index.js

function getRectangle(height, width) {
  return height * width;
}
console.log(getRectangle(3, 5));

上記構文に関して、順を追って解説していく。 ####function getRectangle(height, width) :::note warn 下記リンクにgetRectangleという関数の表記がある。 キャプションをその中に描画する矩形を取得する という役割。 ::: [GetRectangle メソッド](https://docs.grapecity.com/help/pluspak-winforms-8/GrapeCity.Win.PlusPak.v80~GrapeCity.Win.Containers.CaptionFormat~GetRectangle.html) ####return height * width; :::note warn 引数には高さを表すheightと横幅を表すwidthを指定する。 ::: :::note warn returnの内容は、四角形の面積を求める式と同様に縦×横で記述する。 ::: ####console.log(getRectangle(3, 5) :::note warn コンソールへ出力し、getRectangle内の引数へそれぞれ値を与える。 :::

---

###function命令の読み解き方 fanction命令の構文は、以下のように読み解く。

コンソールへ出力した値をfunction内の引数にそれぞれ代入し、returnの部分で四角形の面積を求める計算式で返してあげる。

---

###デベロッパーツールでの検証 縦3と横幅5の面積は15㎡となるはずなので、  正しく15と出力することができた。 ##5. おわりに 次項:[はじめてのJavaScript⑯ 「関数リテラル」](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057)に続く。