リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
前回はユーザー関数を作ってみました。今回は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[関数宣言]
-
定義方法2[変数代入]
どちらも name() で呼び出せますが、若干違いがあります。定義方法1では、関数の定義前でも後でも関数を呼びだすことができます。
それと比べて、定義方法2では、関数を変数に代入しているため、関数呼び出しはそのあとでなければできません。
どちらがよいか、ということですが究極的には好みではありますが、なれないうちは定義方法1から覚えたほうがいいとおもいます。
少々難易度が高くなってきましたが、一度定義することができれば、なんどでも使えるという利点は大きいです。
アロー関数
前述の関数の定義方法2（変数代入による定義）では、以下のように 「=>」を使って書くこともできます。
2015年6月に発行されたES6というJavaScriptの新しい規格に沿った定義方法で、「=>」の部分が矢印（アロー）のように見えるので、アロー関数と呼ばれます。
アロー関数で定義するメリットはコードを簡略化できることです。
式が1行の場合は、アロー関数を使うと {} や return を省略できます。
たとえば、tax関数の場合には、たった1行で定義することができます。
アロー関数を定義して使いこなすことは、初心者のうちは少し難しいかもしれません。
しかし、「『=>』をつかった表現は関数の定義を表している」ということを理解すると、以降のチュートリアル記事やAPIドキュメントに出てくるサンプルコードも読みやすくなるかと思います。
ぜひアロー関数を使った書き方に慣れていきましょう。
<< はじめようJavaScript第9回 JavaScriptの基本機能 関数を使う その1 | はじめようJavaScript第11回 kintone JavaScriptカスタマイズをする >>
お世話になっております。
javascriptを１から学んでおりますが、とても参考になります。
2点、他に読まれる方のためにも説明を付け足したほうが良いと思ったことがあります。（このページ内で説明が完結するものとして読んでいます。）
１．BMIの関数定義で出てくるpushについて
＞result.push(calcBMI(status[i][0], status[i][1]));
varに似た変数の定義のようなものかと思いましたが、配列の末尾に値を追加するためのものなのですね。初出だと思うので、説明が合ったほうが良いかと思いました。
２．同じ箇所、配列の中に配列が入っている部分について
＞result.push(calcBMI(status[i][0], status[i][1]));
なぜ配列の[]が連続してstatusの後に並ぶのかと思いましたが、[i]は外側の配列番号、[0]や[1]は内側の配列番号（体重と身長なので0か1しかない）を指しているのですよね。こちらも初出の考え方なので、説明が合ったほうがわかりやすいかと思いました。
失礼します。
何度も申し訳ございません。
if文の関数か－BMI計算を関数化の項目でcalcBMIを関数として定義しているのですが、
その後の計算式ではBMIとなっており、しかもcalcBMIと同様に扱われている様に感じます。
素人としては下記の様に最初の関数の定義からBMIにしておくか、計算式をcalcBMIに
するかのどちらかと思うのですが、なぜ同じ様に扱われるのでしょうか？？
function BMI(height, weight) {
// BMIを算出する（体重/身長の二乗）
var BMI = weight / (height * height);
// 条件分岐
// 〜 18.5 痩せ型
// 18.5 〜 25 標準
// 25 〜 30 太り気味
// 30 〜 肥満
if (BMI < 18.5) {
return 'あなたは痩せ型です';
} else if (BMI < 25) {
return 'あなたは標準体型です';
} else if (BMI < 30) {
return 'あなたは太り気味です';
}
return 'あなたは肥満体型です';
}
// 関数呼び出し、結果を格納
var result = BMI(1.7,90);
console.log(result);
加藤 優志 様
ご意見いただきましてありがとうございます
社内にフィードバックし改善を検討させていただきます。
I.Hayashi 様
function calcBMI(height, weight) {// BMIを算出する（体重/身長の二乗）
var BMI = weight / (height * height);
・・・・
calcBMI()は関数、BMIは変数です。同じものではありません。
BMIには、weight / (height * height)の計算結果を代入します。
calcBMI()を実行すると、次のソースコードが実行されます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーー
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います