関数と引数(1)

みなさまこんにちわ。

続きまして『関数』(かんすう)とか『引数』(ひきすう)とかやっていきましょう。あ、引数は「いんすう」じゃないです。「ひきすう」と読みますので注意です。

今回からインラインで書くか、それとも外部JavaScriptファイルに書くかこちらから特に指定はしない方向でやっていきたいと思います。ご自身で書きやすい方で自由に決めてしまってください。
※ちょっと自身ないなぁという方はこちらの記事を再度読み返してみると良いかもしれません。

では話を戻しまして「まず関数ってなんなんだぜぇ」ってお話ですが、一般に関数とは引数のデータを受け取りそこから何らかの処理を行う一連の処理群のことを指します。引数とは関数実行時に渡す値の事です。

と、こんな感じで言葉で説明されてもよく分からないですよね。

なので関数の概念についてはちょっと置いておいて、先に関数を作るための記述方法を確認していきましょう。その後でこれまで勉強してきた数学の概念と照らしあわせつつ関数とはどういうものなのかみていきたいと思います。実際に書いてみると理解が早いです。

というわけでJavaScriptで関数を定義する基本的な記述は以下です。

function 関数名(引数){
    // ここに処理
}

『hoge』という関数名で関数を定義するときはこんな感じになりますね。

function hoge(){
    // ここに処理
}

では解説していきます。

まず『function』と記載します。『function』の読み方は『ファンクション』です。

そしたら半角スペースを1つ空けて『関数名』を記述します。この半角スペースに関しては半角スペースを複数記述したり、タブ文字に変更したりしても問題なく動きます。しかし、ソースが汚くなりますし全く意味がないので半角スペースを1つだけ置くようにしましょう。逆に最低1つの半角スペースは単語の区切りがなくなってしまうので必須になります。

この『関数名』のネーミングルールは変数の時と同じです。使用できる文字はUnicode(ユニコード)文字と『$』と『_』で、先頭文字に数字は使用不可とかのあれです。もし不安だったら今一度見返してみると良いかもしれません。特に大文字と小文字は別のものとして扱われるということだけミスしやすいところなので注意してください。
※変数のネーミングルールを忘れちゃった方はこちらヘ

そして関数名のとなりに『引数』を記述します。括弧『()』の部分ですね。『引数』を取る必要がない関数でも『()』は省略できません。関数を定義するときは必ず『()』を記述する必要があるということです。複数の『引数』を取る場合は『,』で区切ります。こんな感じです。

function 関数名(引数1, 引数2, 引数3){
    // ここに処理
}

そしたら波括弧『{}』を記述します。関数の処理はこの『{}』の中に書きます。

注意すべきは文のおしりに『;』を書く必要がないということです。関数定義の際は文末の『;』はいらないです。ちなみに『;』を書いてしまってもエラーにはなりません。JavaScriptでは空文が許可されていますので何も処理を行わない文として処理されます。ただし、ファイルを重くするだけで意味がないので書かないのが一般的です。

このような関数を定義する記述を『function文』(関数宣言文)といいます。

var fn = function(){
    // ここに処理
};

var fn = new Function("x, y", "return x + y");

さて、関数を定義した段階では実行されるというわけではありません。あくまでも定義しただけなので関数の中の処理は実行されません。ここ間違いやすいので要注意です。

定義した関数を実行する記述は

関数名(引数);

となります。

例えば『hoge』という関数の引数に『1』を渡して実行する場合はこうなります。

hoge(1);

引数を複数渡すときはこうです。『,』で区切ります。

hoge(1, 2, 3);

引数を渡さないで実行する場合はこうです。

hoge();

引数を渡す渡さないに関わらず『()』は必ず記述する必要がある、とのがミソです。『()』は関数を実行するトリガーのような感じですね。

と、ここまでが関数定義の方法です。なんとなくご理解いただけましたでしょうか。

ではそろそろ関数ってなんなんだぜぇってお話をしていきたいと思います。

変数の概念の解説の時と同じように数学と照らしあわせてみていきましょう。

まずこんな数式があるとします。

1 + 1 = 2

『1 + 1 = 2』というだけの式ですね。これは『2』という答えが出るだけの数式で全く汎用性はありません。これを方程式にして色々な値をとれるようにしてみましょう。

x + 1 = y

こうすると『x』に代入した値に『1』が加算されたものが『y』となる数式になりました。

簡単な数学レベルだとこの辺で「『x = 1』の場合の『y』を求めよ！」とか言われて自分で計算して答えだして丸つけてもらって「先生さよ～なら～」って感じになりますがプログラミングの世界では違った形で進めていきます。

まず数学と大きく違う点は『自分で計算をしない』という点があげられます。前にも書きましたがコンピューターに計算させる演算式を書くのがプログラマーの仕事です。

そしてプログラミングの世界では何度か使う可能性のある処理を構築した場合はその処理をいつでも呼び出せるようにしておきたいと考えます。変数の時と同じですね。よく使う値は変数に入れていつでも呼び出せるようにしておくのが合理的です。関数も然りです。

というわけで先ほどの数式をJavaScriptで実装してみましょう。

処理の内容は『変数xの値に1を足した数値を変数yに代入し、その値をコンソールに出力する処理を関数として定義し、いつでも呼び出せるようにする』という感じです。

処理をいつでも呼び出して実行できる状態にしたい、ということは呼び出すための名前が必要ですね。ということでまず関数(処理)に識別するための名前をつけましょう。これが『関数名』です。

今回は『addition』という関数名で関数を定義してみます。こんな感じになりますね。まだ中身は空でございます。

function addition(){

}

引数の『()』を忘れないよう要注意です。

そして『{}』の中に処理を書きます。『変数xの値に1を足した数値を変数yに代入し、その値をコンソールに出力する』というわけなので普通に書くとこんな感じになります。

function addition(){
    var x = 1, y;
    y = x + 1;
    console.log(y);
}

加算処理がありますので一旦、変数xには数値の『1』を初期値として代入しています。これでとりあえずの形ですが関数を定義することができました。

これを実行してみると…

function addition(){
    var x = 1, y;
    y = x + 1;
    console.log(y);
}

addition();

コンソールに変数yの値がちゃんとでてきてますね、ここまでは問題なさそうです。

しかし、これではまだ汎用性が高いとはいえません。

この記述では変数xの値が常に『1』になってしまうので変数yはずっと『2』になります。関数を実行させるたびに変数xに違った値を渡すことができれば色々な結果を出すことができるのにちょっと惜しい感じです。

そこで登場するのが『引数』です。『引数』を使えばそれが実現できます。

書きなおしてみるとこんな感じです。

function addition(x){
    var y;
    y = x + 1;
    console.log(y);
}

注目すべきは変数xの記述場所です。

『()』の中に変数xが移動しています。こうすれば変数xが引数となり、関数を実行するたびに値を渡すことができるようになります。

というわけでちょっと関数を実行して実験してみましょう。引数に『10』を渡して実行してみます。

function addition(x){
    var y;
    y = x + 1;
    console.log(y);
}

addition(10);

いかがでしょうか。変数xに『1』が加算された数値がコンソールに出力される処理なので、コンソールに『11』が出力されていれば成功です。このように関数を定義すると汎用性が高い処理を構築することができます。

function addition(x){ // この『x』は関数定義なので仮引数
    var y;
    y = x + 1;
    console.log(y);
}

addition(10); // この『10』という数値は関数評価なので実引数

では練習がてらもうちょっと複雑な処理を構築してみましょう。

三角形の底辺の長さと高さを入力するとその面積をコンソールに出力してくれる関数を定義してみます。関数名は『AreaOfTriangle』にしましょう。

三角形の面積は『底辺 × 高さ ÷ 2』で求められますのでJavaScriptで記述するとこのような形になります。

// widthが底辺でheightが高さです。
function AreaOfTriangle(width, height){
    var area;
    area = (width * height) / 2;
    console.log("底辺の長さが『" + width + "』、高さが『" + height + "』の三角形の面積は『" + area +"』です");
}

文字連結と同時に計算させているのでちょっと構文が難しいかもしれません。文字連結について忘れちゃった方はこちらを参照してください。

さて、では動作チェックがてらこれを実行させてみましょう。試しに底辺『10』、高さ『5』を引数に渡して実行してみると

function AreaOfTriangle(width, height){
    var area;
    area = (width * height) / 2;
    console.log("底辺の長さが『" + width + "』、高さが『" + height + "』の三角形の面積は『" + area +"』です");
}

AreaOfTriangle(10, 5);

『25』と出力されました。OKですね。これで底辺の長さと高さを渡してあげれば面積を自動で出力してくれる処理が完成しました。宿題が楽ちんになりますね。

というわけで関数と引数の概念についてはこんな感じですがいかがでしょうか。少し難しかったかもしれません。

変数の場合は値を呼び出すものでしたが、このように関数の場合は数学で言うところの数式を呼び出すようなイメージになりますね。一連の処理をまるごと呼び出して実行できますので頻繁に使用する処理は関数としてまとめてしまえばとっても楽になります。

関数と引数の概念があまり理解できなくても処理をいっぱい書いていけば自ずと理解できるようになるかと思います。例えば数学の公式なんかを練習がてらJavaScriptで関数化したりしてみると良い経験になること請け合いです。

と長くなりましたので一旦ここで切ります。

次の記事では関数と引数に関しての注意点とか確認したり、もっと実用的な関数を作成したりしていきましょう。

これまで書いてきた『fuction文』では変数を使用する際に必ず記述するよう言われていた『あれ』がありませんでしたね。気になっている方もいらっしゃると思います。そこら辺を確認していきます。

というわけでまたお会いしましょう。ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア