現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

JavaScriptの関数について

投稿日:2019年4月18日 更新日:

function() {
    ▲
}

★・・・関数名
♦・・・引数【省略可】
▲・・・定義する内容

    プログラムの中で繰り返し行われる計算や作業をまとめ、何度でも繰り返し使えるようにしたものを関数と言います。JavaScriptでは、あらかじめ用意されている関数のほかに、ユーザが独自に関数を定義できます。一度関数として定義しておけば、簡単に一連の処理を呼び出して実行させることができます。
    関数は次のように定義します。

スポンサーリンク

関数名

functionに続けて任意の関数名を命名規則に沿って指定します。その関数が、どのような処理を行っているのかがわかりやすい名前を付けておくとよいでしょう。

引数

    引数とは関数内での処理に必要な数値や文字列などの情報で、この引数の値を変えれば同じ関数でも処理結果を変えることができます。処理に引数が必要な場合は、渡された引数を関数が呼び出された時に受け取るための変数を()内に指定します。「,」(カンマ)で区切れば複数の引数を指定可能です。引数が必要ないときは、空のままにしておきます。

定義する内容

    関数で実際に定義する内容は{ }の間に記述します。関数の中から他の関数を呼び出すこともできます。
    次の関数msg2はダイアログを表示した後、関数msg3を呼び出すという2つの動作を行うものとして定義されます。

function msg2() {
    alert(“この関数はonclickによって呼び出されました。”);
    msg3();
}

return

    returnは関数の処理を終了し、呼び出し元に処理を返します。returnの後に値(戻り値)を指定すると、呼び出し元にその値を返すことができます。

スポンサーリンク
function myFunc() {
    alert(“OK”);
    return 1;
}
i = myFunc(); //iには1が入る

関数の呼び出し

    functionは関数を定義するだけなので、スクリプトが読み込まれただけでは実行されません。実際に動作させるにはイベントやほかの関数によって関数が呼び出される必要があります。これを関数の呼び出しと言い、関数名()のように記述します。

JavaScript

function msg1() {
    alert(“ページをロードすると関数msg1が呼び出されます。”);
}
function msg2(a) {
    alert(“ボタンをクリックすると関数msg2が呼び出されます。\n引数は ” + a + ” です。”);
    msg3();
}
function msg3() {
    alert(“関数msg3は関数msg2の内部から呼び出されます。”);
}

HTML

<body onload=”msg1()”>
    <form id=”sample_form”>
        <input type=”button” value=”Click!” onclick=”msg2(2)” />
    </form>
</body>

    サンプルではまずページの読み込みが完了したとき(onloadイベント発生時)に関数msg1が実行されます。ボタンがクリックされたときには関数msg2が実行されます。関数msg2の中では関数msg3の呼び出しが行われるので、続けて関数msg3が実行されます。

スポンサーリンク

-基礎
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptとは?特徴と歴史について

    Webシステム開発の現場など、Webページを扱う場合には触る機会も多いJavaScript。何年も触っていなかったので、久しぶり過ぎて忘れている事が多い …

JavaScriptの繰り返し制御

break 処理から抜け出す continue 繰り返し処理の先頭に戻る スポンサーリンク 繰り返し処理や分岐処理から抜け出す構文です。 スポンサーリンク

JavaScriptでHTMLの要素を扱うDOMについて

スポンサーリンク

Ajaxについて

最近JavaScriptが再度注目を集めている理由のひとつに、Googleマップ(ビューの移動や縮尺の変更、衛星写真への切り替えを行う際、地図の再読み込みを必要としない機能を持つ)やGoogleサジェ …

JavaScriptをHTML要素内に直接記述する方法

    JavaScriptをWebページに組み込むには次の方法があります。 ・HTML文書内に記述する方法 ・外部ファイルに記述して読み込む方法 ・HTML要 …