第 10 回 JavaScript の基本機能 関数を作る その 2
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
前回はユーザー関数を作ってみました。
今回は for 文と if 文を組み合わせて、さらに便利な関数を作っていきたいと思います。
関数を使いこなせるようになれば何度も同じことを書く必要がなくなるので便利です。
前回の記事 に関数とは何かということを書いていますので、必要な方は復習してから今回の章を試してみてください。
以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。
if 文の関数化 - BMI 計算を関数化
第 5 回の記事 では、if 文の例として BMI 計算を題材にしました。
サンプルの下記コードを関数化してみましょう。
https://jsfiddle.net/kintone/27vhnxuj/6/
関数のキモは、「何を入力して」「何を出力する(もしくはどういう処理をする)」かということに尽きます。
第 5 回のコードでは、if 文内で console.log()
を使っていましたが、関数は return
で結果を返すとすっきり書けることが多いです。
なるべく「何を入力して」「何を出力するか」ということを意識しながら関数を定義しましょう。
- 入力:身長(数値), 体重(数値)
- 出力:体型診断(文字列)
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/w5cumdpn/4/
for 文の関数化 - すべての数値に消費税をかける関数
前回の記事でも消費税計算の関数は書きましたが、for 文を駆使していっぺんにデータを処理する関数を定義しましょう。
たくさんの値を処理するには、配列を使うのが適していますので、入力・出力ともに配列を活用します。
- 入力:消費税が加算されていない金額(配列)
- 出力:消費税が加算された金額(配列)
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/tvm3L7ou/5/
if 文と for 文の関数化組み合わせ - 関数の中から別の関数を呼び出す
関数の中から関数を呼び出すことも可能です。
先に上げた BMI 判定関数を、消費税を計算する関数と同様、配列で処理できるようにしてみます。
- 入力:身長と体重(配列)
- 出力:判定結果(配列)
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/85L4v6kr/19/
関数の定義方法
関数の定義方法は大きく分けると 2 つあります。
利用はどちらでも好みで大丈夫ですが、両方とも Web の記事などでみかけることになると思うので説明しておきます。
-
定義方法 1:関数宣言
1 2 3
function name() { // 処理内容 }
-
定義方法 2:変数代入
1 2 3
const name = function() { // 処理内容 };
どちらも name()
で呼び出せますが、若干違いがあります。
「定義方法 1」では、関数を定義する前と後のどちらでも関数を呼び出すことができます。
|
|
それと比べて、「定義方法 2」では、関数を変数に代入しているため、関数呼び出しはそのあとでなければできません。
|
|
どちらがよいかは究極的には好みではありますが、なれないうちは「定義方法 1」から覚えたほうがいいと思います。
少々難易度が高くなってきましたが、一度定義できれば、何度でも使えるという利点は大きいです。
アロー関数
前述の関数の「定義方法 2」(変数代入による定義)では、以下のように =>
を使って書くこともできます。
2015 年 6 月に発行された ES6 という JavaScript の新しい規格に沿った定義方法で、=>
の部分が矢印(アロー)のように見えるので、アロー関数と呼ばれます。
|
|
アロー関数で定義するメリットはコードを簡略化できることです。
式が 1 行の場合は、アロー関数を使うと {}
や return
を省略できます。
たとえば、tax 関数の場合には、たった 1 行で定義できます。
|
|
アロー関数を定義して使いこなすことは、初心者のうちは少し難しいかもしれません。
しかし、「=>
をつかった表現は関数の定義を表している」ということを理解すると、以降のチュートリアル記事や API ドキュメントに出てくるサンプルコードも読みやすくなるかと思います。
ぜひアロー関数を使った書き方に慣れていきましょう。