Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript入門編 - 関数と引数(1)

関数と引数(1)

みなさまこんにちわ。

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

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

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

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

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

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

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

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

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

では解説していきます。

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

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

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

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

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

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

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

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

JavaScriptでの関数定義は『function文』で定義する以外の方法として『関数式』(関数定義式)というものがあります。こちらは変数に関数オブジェクトを代入するという方法です。

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

この『関数式』の記法は処理の巻き上げが行われないなどのメリットがあるので『function文』よりも一般的に使用される機会が多いです。超大手のgoogleさんの社内コーディングルールでも『関数式』で関数定義を行うように、との記載があるようです。こちらの詳しい解説は別の記事で解説します。

その他ではnew演算子を使用して関数定義する方法もあります。

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

こちらは関数の中身を文字列として処理ができるというメリットがあったりするのですが、上記のように記述が少々読みづらいという点と、JavaScriptでのnew演算子はイメージとかけ離れた振る舞いをする事が多く、昨今のJavaScriptの方向性としてnew演算子の使用をなるべく避けようという傾向があるため、この記法は使用される機会が少なめです。

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

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

関数名(引数);

となります。

例えば『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』が出力されていれば成功です。このように関数を定義すると汎用性が高い処理を構築することができます。

関数を定義する際の引数は『仮引数』(かりひきすう)、もしくは『parameter』(パラメーター)と呼ばれます。

対して関数を実行する際に渡した引数は『実引数』(じつひきすう)、もしくは『argument』(アーギュメント)と呼ばれます。単純に『引数』といったら両方の事を指す感じです。

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で関数化したりしてみると良い経験になること請け合いです。

他のほぼ全ての言語でも関数や引数という概念は存在しますが、JavaScriptでの関数は『関数オブジェクト』というオブジェクトの一種で、他の言語の関数と比べるとちょっと振る舞いが違ったりします。『オブジェクト』の概念はちょっと難しい概念になりますので入門編では割愛しますが『関数オブジェクト』という言葉は覚えておいてください。

※詳しくはこちらへ。

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

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

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

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

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

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

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

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