急いでいる方は･･･
- 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 に入れる
