第42回：JavaScript講座本編4「関数」
どうも、シノです。
三週間経ちましたが、講座は何も変わらず、平常運転です。
というわけで、JavaScript講座本編第4回！
今回は、ついに「関数」について解説していきますよ！！
これができると、ほんとに一気に理解度が上がっていきます。
じゃんじゃん書いて、こんなことしたいなってのを実現しちゃいましょう。
今回の目次です。
0.前回の復習
前回は、「繰り返し処理」を解説しました。
最後に出した問題、解けましたか？
再掲しましょう。
問.1から10を、一つずつ改行しながら出力してください。そのとき、偶数の下にさらに改行を1つ追加してください。
どうだったでしょうか。
解答例を、while文を使った場合、for文を使った場合それぞれで載せます。
もちろん、これ以外にも方法はあるので、前回出した表示例と一致するか確認してみてください。
while文を使った例
var a = 0;
while(a < 10){
a++;
document.write(a);
document.write("<br \/>");
if(a % 2 == 0){
document.write("<br \/>");
}
}
for文を使った例
for(var a = 1; a < 11; a++){
document.write(a);
document.write("<br \/>>);
if(a % 2 == 0){
document.write("<br \/>");
}
}なお、繰り返しってどっちを使えばいいの？って話ですが、繰り返す回数が決まっているならfor文、決まっておらず、何らかの条件で繰り返す場合はwhile文を使った方がいいでしょう。
1.そもそも「関数」って何？
さて、今回の内容です。
そもそもですが関数とは何でしょう？前回ちらっと言ってしまいましたが…（笑）
関数とは、簡単に言うと受け取った情報をもとに処理を行う塊です。
百聞は一見に如かず、とも言いますし、さっそく使い方を見てみましょう。
2.関数の使い方1「処理をまとめてみよう」
まずは、関数を定義する部分です。
function 関数名(引数){
処理する内容
}
はい、これだけです。
関数には自由に名前をつけることができます。それを関数名のところに書きます。
次の括弧の中に、「引数」とありますね。
これは、この関数を処理するために受け取った値を、どんな変数に入れておくかを書きます。
そして、中括弧の中に処理を書いていくんですね。
もちろんですが、この中にこれまで解説したような変数宣言、if文、while文、for文などもろもろ書けます。
例を見てみましょう。
function showNumber(num){
document.write("関数に入力された値は");
document.write(num);
document.write("です。");
}
この関数を実行すると、実行したところに「関数に入力された値は(引数で入力された値)です。」と表示されるわけですね。
では、これを実際に使ってみましょう。
使うときは、使いたいところに以下の記述をするだけです。
関数名(渡したい値);
簡単ですね。
例えば、上に出したshowNumber関数で5を表示したいとなると、
showNumber(5);と書けばいいことになります。
これを実行すると、「関数に入力された値は5です。」と表示されます。
もちろん、複数の引数を入力することもできます。そのときは、定義部分、渡す部分ともにコンマで区切ってください。
3.関数の使い方2「戻り値を受け取ってみよう」
さて、これだけではなんか物足りないですね。
例えば…この関数で何か計算をして、その値を持ってきたいとしましょう。
もちろん、できます。
もう一つ、関数の例を出します。2つの数字を入力して、その足し算した結果を戻してくれるようにします。
function sumNumber(a, b){
var c = a + b;
return c;
}
関数の最後に、何か見たことないものがありますね。
これは、return文といって、この後ろに書いたものを、関数を呼び出した部分に戻してあげることができます。
この、戻すものを戻り値と言います。
これを使う場合は、下のようにします。
var result = sumNumber(5, 8);はい、関数を代入するようなイメージです。
この戻り値は、書いた関数の部分にそのまま置き換わるような働きをするので、このように書くことになります。
この場合ですと、resultには13が入るんですね。
ただし、戻り値は多くて1つのみです。
実際はできるのですが…今は一つと思ってもらっていいでしょう。
複数やる場合にはここまでで解説していない内容を使います。
気になった方は調べてみましょう。投げやりとか言わないで
多くてと書きましたが、戻り値はなくてもいいです。
その場合、return文を省略すると中括弧の中に書いた処理を全部行いますし、「return;」だけ書くと、それが実行された時点で関数の処理が終了します。
繰り返しの「break;」と同じような感じですね。
4.実際に使ってみた
では、ここまでの内容を使って、2つの関数を定義して実行してみましょう。
function showNumber(num){
document.write("関数に入力された値は");
document.write(num);
document.write("です。");
}
function sumNumber(num1, num2){
var num3 = num1 + num2;
return num3;
}
var a = 5;
var b = 8;
var result = sumNumber(a, b);
showNumber(result);
実行例
どうでしょうか。
うまく表示できたら、aとbの値を変えてみてください。それによって、表示される数字も変わるはずです。
まとめ
いかがだったでしょうか。
今回は、関数の定義のしかた、使い方についてまとめました。
いつもに比べるとちょっと短いですが、とても重要な部分なのでこれくらいでいいでしょう。
次回ですが…ついに、HTMLから値を取ってこようと思います！
また、狙ったところに値を埋め込むこともしてみようかなと。
遅くなりましたが、ここまでの内容をフル活用するので、是非使えるようになっておきましょう！
更新情報はTwitterでも呟いてます。よかったら覗いていってください。
次回：HTMLとの連携(2020/1/19投稿しました！！！)
それでは。
