【初心者向け】簡単にJavaScriptの関数を使う方法

JavaScriptの変数とは？

関数を学ぶ前に、まず、計算処理や文字列処理によく使われる変数についても、理解しておきましょう。変数は数学で使われる xやaのように、仮で置いてある入れもののことです。JavaScriptの変数は、数値だけでなく文字も入れることができます。

これは変数ですよ！ということをプログラムに理解させるために、宣言という準備が必要になります。宣言の仕方はこちら。

var を書くと、次に書くのは変数の名前ですよ！という意味になります。これを宣言といいます。変数の宣言のときも、終わりに* ; （セミコロン）*を忘れずに書きましょう。2行目のように、入れておきたい値を最初にセットしておくこともできます。変数を使うと、計算や処理をわかりやすく便利に書くことができますよ。

サンプルコード

<script>
<!--
//変数を使うサンプルコード

var num;    // 変数 num を宣言
var a =1;   // aに1をセットする

num = a;    // num にa(ここでは1)をセットする
num = num + a;  // num + 1 (1+1)の結果(2)をnumにセットし直す
num = num + a;  // num + 1 (2+1)の結果(3)をnumにセットし直す

document.write( num ) ; //  結果は3
// -->
</script>

HTMLファイルに貼り付けて、実行してみましょう。

JavaScriptの関数とは？

関数といえば、 y = 2x + b とか y = x²+6x + 10　などと、中学や高校で習う関数を思い出しますね。 xの値が決まれば、yの値が決まるという式です。JavaScriptの関数はちょっと違って、入力された値が決まれば　出力される値が決まるところは同じですが、functionという名前でひとまとめにされる命令や計算の処理のカタマリのことを、JavaScriptの関数と呼びます。

処理をひとまとめにするとは、どういうことでしょうか？例えるならマク◯ナルド。あなたはカウンターで注文をします。すると、厨房でなんやかんややってくれて、カウンターからハンバーガーを受け取ることができます。

関数にあてはめると、注文が引数(引数)、マク◯ナルドが関数(Function)、ハンバーガーが戻り値にあたります。関数を一度作れば、レジ打ち・調理・包装など色々やる(=計算などの処理をする)ところを意識せずに、簡単に利用できるという利点があります。

また、調理方法がかわったり材料が変わったり（=計算方法が変わったり)しても、厨房でのオペレーション(=関数の中身の計算など)だけを変更すればよいので、何回も別の箇所で利用している場合にも、コードのメンテナンスが楽になります。

そんな便利な関数を使いこなすことはJavaScriptをマスターする上で重要な第一歩です！さっそく次の章で、サンプルを書いてみましょう。

JavaScriptの関数の使い方

関数の呼び出し方

関数の呼び出し方はこちら。

引数というのは、関数に渡してあげる文字や数字のことです。

サンプル

burgershop(600);

こちら、burgershopという関数に、引数600を渡してみました。一体何が起こるのでしょうか？ 次は、呼び出される関数を作ってみましょう。

関数の作り方(処理を行う関数)

関数の書き方はこちら。

引数がない関数の場合もあります。先ほど呼び出した関数burgershopの中身を見てみましょう。

サンプル

<script>
<!--
// 自作関数のサンプル
// 引数の金額によって渡すハンバーガーの種類を変える関数です
function burgershop(money) {

    document.write("<hr>"); //HTMLの線を引くタグ
    document.write("渡したのは " + money + " 円です");  //渡した金額を表示
    document.write("<br>"); //HTMLの改行タグ


　　if(money >= 500){
        //500円以上であればこちら
        document.write("ダブルチーズバーガーです"); 
    }else{
        document.write("普通のバーガーです");  
    }

    document.write("<hr>"); //HTMLの線を引くタグ
}

// 関数呼び出し
burgershop(600);    //600円渡したとき
burgershop(400);    //400円渡したとき

// -->
</script>

500円以上渡されたら、ダブルチーズバーガーが貰える関数burgershopを作りました。 引数で判別をするために、ifという条件分岐の構文を使っています。

関数を作った後、関数を呼び出す文を書いています。引数が600のときは500円以上、400円のときは500円未満のため、実行結果はこのようになります。

関数の作り方（戻り値のある関数）

呼び出した元に何らかの値を返したいときは、returnのあとに戻したい値を書きます。これを、戻り値(もどりち)や返り値(かえりち)と呼びます。

サンプル

<script>
<!--
// 戻り値のある関数のサンプル
// 引数の金額によって渡すハンバーガーの種類を変えて、お釣りを返す関数です
function burgershop(money) {

    var oturi;

    document.write("<hr>"); //HTMLの線を引くタグ
    document.write("渡したのは " + money + " 円です");  //渡した金額を表示
    document.write("<br>"); //HTMLの改行タグ

　　if(money >= 500){
        //500円以上であればこちら
        document.write("ダブルチーズバーガーです"); 
        oturi = money - 500;
    }else{
        document.write("普通のバーガーです");
        oturi = 0;  
    }

    document.write("<br>"); //HTMLの改行タグ

    return oturi;   //戻り値にお釣りをセット

}

// 関数呼び出し
var oturi_kingaku;      //お釣り金額

//600円のとき
oturi_kingaku = burgershop(600);
document.write("おつりは " + oturi_kingaku + " 円です");

//400円のとき
oturi_kingaku = burgershop(400);
document.write("おつりは " + oturi_kingaku + " 円です");

// -->
</script>

実行結果

さきほどの関数に修正を加えて、お釣りを戻り値にする関数を作りました。500円以上の金額を渡すとお釣りが計算され、500円未満だとおつりが0円と表示されます。

組み込み関数

JavaScriptでは、一般的によく使われる機能があらかじめ関数として用意されています。覚えておくと、とても便利ですよ。いくつか紹介しますね！

文字列の長さを取得する

サンプル

<script>
<!--

var mojiretu = "おはよう";
var mojiretu2 = "Goodmorning";

document.write ( mojiretu +" は、" + mojiretu.length + "　文字です<br>");
document.write ( mojiretu2 +" は、" + mojiretu2.length + "　文字です<br>");

// -->
</script>

実行結果

指定した文字を探す

文字列変数の中に、探す文字列が何文字目に含まれているかを調べます。ちなみに、文字は先頭から0,1,2・・・と数えますので注意してくださいね。

サンプル

<script>
<!--
// 水行末が寿限無の何文字目に登場するか調べる
var mojiretu = "寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末";
var num = mojiretu.indexOf("水行末");

document.write(mojiretu + "<br>");
document.write("水行末　は " + num + "　番目に出現"); 
// -->
</script>

実行結果

現在時刻を表示する

Dateは日付と時間を扱うことのできる命令のあつまりです。toString関数を使うと、日付を文字列として取り出すことができます。

サンプル

<script>
<!--
document.write(Date().toString());
// -->
</script>

実行結果

確認ダイアログを表示する

OKとキャンセルのボダンが表示される、確認のダイアログを出すことができます。

サンプル

<script>
<!--
var kakunin = confirm("どちらを押しますか？");

if(kakunin==true){
    document.write("OKが押されました");
}else{
    document.write("キャンセルが押されました");
}
// -->
</script>

実行結果

他にもたくさんの関数や処理が用意されています。色々と試してみてくださいね！

JavaScript学習にはこちらもおすすめ！

ゼロから始めるJavaScript講座Vol01　JavaScriptの基礎知識

知識ゼロから優しく学べる連載講座です！

基礎から抑える！初心者のためのJavaScript入門

入門者が理解しておきたい基礎情報がギュギュッと詰まったボリュームのある記事！

【レベル別】JavaScriptの初心者・中級者向け学習書籍まとめ全7冊

是非読んで欲しいJavaScript書籍。体系立てて学べます！