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


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

JavaScriptの学習を始めたばかりの方は、関数という言葉が出てきて、数学の勉強と混乱してしまい、困ってしまうことも多いです。今回は、JavaScriptの関数について、書き方、使い方をやさしく解説してみようと思います!今日から使ってみてくださいね。

目次
  1. JavaScriptの変数とは?
  2. JavaScriptの関数とは?
  3. JavaScriptの関数の使い方
  4. 関数の呼び出し方
  5. 関数の作り方(処理を行う関数)
  6. 関数の作り方(戻り値のある関数)
  7. 組み込み関数

JavaScriptの変数とは?

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

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

var 変数;
var 変数 = ;

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の関数と呼びます。

image

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

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

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

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

 

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

JavaScriptの関数の使い方

関数の呼び出し方

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

関数名(引数);

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

サンプル

burgershop(600);

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

 

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

関数の書き方はこちら。

function 関数名(引数) {
  処理;
}

引数がない関数の場合もあります。先ほど呼び出した関数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円未満のため、実行結果はこのようになります。

image

 

関数の作り方(戻り値のある関数)

function 関数名(引数) {
  処理;
  return 戻り値;
}

呼び出した元に何らかの値を返したいときは、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>

実行結果 image

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

 

組み込み関数

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

文字列の長さを取得する
文字列変数.length

サンプル

<script>
<!--

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

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

// -->
</script>

実行結果 image

指定した文字を探す
変数.indexOf(文字列)
戻り値:探す文字列が最初に見つかった位置。見つからない場合は-1を返す。

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

サンプル

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

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

実行結果 image

現在時刻を表示する
Date().toString();

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

サンプル

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

実行結果 image

 

確認ダイアログを表示する
confirm("表示文字列");
戻り値:true/false

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

サンプル

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

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

実行結果 image image

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

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

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

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

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

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

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

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


関連記事

のりぴよ
この記事を書いた人
のりぴよ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp