JavaScriptの関数を解説

急いでいる方は･･･

• Function は、処理を一つのカタマリにする。
• 処理を小分けにすることで、メンテナンスが容易になる。

JavaScript で処理をカタマリにする

処理の塊は、関数といいます。
JavaScriptで関数を作るには、functionを使います。

処理の構造を考える

たとえば、円の面積のを求める処理を考えてみます。
円の面積は、半径 × 半径 × π ですね。

この式の中に必要なものは、半径, πです。
そのうち、πは定数ですね。
ということは、半径が分かれば面積が分かることになります。

処理をコードにする

半径 × 半径 × πを求める処理を、ソースコードにしてみましょう。

const radius = 5;   // 半径 （ここを変えると結果が変わる）
const pi = 3.14;    // π

const area = radius * radius * pi;

上記のコードでは、radiusに好きな数字を入れると、areaが求められます。
このように、一定の法則性があると処理を固めることができます。

関数で処理を固める

処理を固める方法は、function 関数名( 引数 ){ 処理の内容 }です。
急に複雑ですね。
一つずつ埋めていきましょう。

関数名は、分かりやすい名前を付ければよいです。
今回は円の面積を求めるので、calculateAreaとします。

function calculateArea( 引数 ){ 処理の内容 };

引数は、処理に前もって必要なデータです。
円の面積を求めるには、半径が必要でしたね。

その半径のデータを受け取る変数名を書きます。
今回は、radiusとします。

function calculateArea( radius ){ 処理の内容 };

処理の内容に、実際の処理を書いていきます。
計算結果は、最後にreturn 結果;と書きます。

function calculateArea(radius){
    const pi = 3.14;
    const result = const area = radius * radius * pi;
    return result;
};

これで、calculateAreaは、円の面積を求める関数になりました。

関数を使ってみる

先ほどの関数を書いたコードは、処理の中身を定義しただけです。
「radiusもらったら、こんな処理をして、こんな値を返す関数をcalculateAreaとします。」と、決めただけです。
使わないと動きません。

使い方は、関数名(引数に渡すデータ)です。

function calculateArea(radius){
    const pi = 3.14;
    const result = const area = radius * radius * pi;
    return result;
};

calculateArea(5); // radiusに 5 が入った状態で処理を実行

しかし、これでは計算だけさせて結果を受け取っていません。 結果を受け取るには、変数に入れてあげればよいです。

function calculateArea(radius){
    const pi = 3.14;
    const result = const area = radius * radius * pi;
    return result;
};

const area = calculateArea(5);
// calculateArea の radius に 5 が入って処理を実行
// return された値 (result) を area に入れる