ITコラム

プログラミングノウハウ

2017.11.29

#JavaScript入門

JavaScript【 function 】～関数の作り方

関数は、プログラムで行う処理を記述して一つのまとまりにしたもので、JavaScript では、function というキーワードを使って記述します。
今回は、プログラムの中核をなす関数の作り方を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 関数とは
2. onClick で関数を呼び出す
3. onload 時に関数を呼び出す

1. 関数とは

関数は、プログラムで行う処理を記述して一つのまとまりにしたものです。

例えば、実行ボタンをクリックした際に入力値の合計額を計算するようなプログラムは、次のように組み立てます。

入力値を全て加算する関数を作成
　↓
実行ボタンクリック時に、作成した関数を呼び出す

上記のように関数を作成すると、実行ボタンが複数の場所に設置された場合でも、各実行ボタンのクリック時に同じ関数を呼び出せば良いことになります。
　
　
関数は、一連の処理を記述するものもありますが、サイトの中で共通する処理を記述した関数を作成して、必要な各場面で使い回すようなものもあります。

プログラムが大きくなると、同じ内容の処理をあちこちで行うことがありますが、その都度同じ処理を記述すると、長くて読みづらいプログラムになってしまいます。

そのような場合には、同じ処理を 1 つの関数で定義して、必要に応じてその関数を呼び出すという形で記述すると、プログラムがシンプルで読みやすくなります。
また、処理内容に変更が生じた際にも、修正が 1 カ所で済むという運用上のメリットもあります。

同じような処理が何度も出てくる場合は、関数の記述方法を工夫して、シンプルで運用し易いプログラムを考えることが重要です。
　
　
JavaScript では、function キーワード使って、関数を次のように記述します。

function　関数名(引数1, 引数2, ...) {

　　//処理内容

　　return　返り値;
}

function キーワードに続けて、任意の関数名を記述します。

関数を呼び出す際に関数で使用する値を渡したい場合は、カッコ内に引数を指定します。
引数は数に制限がなく、複数の引数を指定する場合は、カンマ（ , ）で区切って指定します。

引数を指定しない場合は、関数名の後に空のカッコを記述します。

また、関数を実行して処理を行った結果、呼び出し元に必要な値を返したい場合は、return というキーワードを使って、返り値を記述します。
特に返り値がない場合は、return の記述は不要です。

▲目次へ戻る

2. onClick で関数を呼び出す

function キーワードを使って作成した関数は、必要な場所で呼び出して使用します。

ボタンをクリックしたタイミングで JavaScript の関数を呼び出す場合は、HTML の input 要素内で、次のように記述します。

<input　type="button"　onClick="関数名()">

input 要素の OnClick 属性に、関数名を指定します。
　
　
下のサンプルは、ボタンがクリックされた時にアラートでメッセージを表示するプログラムです。

表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function disp() {
    alert("表示ボタンがクリックされました！");
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="button" value="表示" onClick="disp()">　　
</div>

上のサンプルを少し変えて、引数のある関数を呼び出します。

各表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function disp(arg) {
    alert(arg + "ボタンがクリックされました！");
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <div style="display:inline-flex;">
        <input type="button" value="表示１" onClick="disp('表示１')">　　　
        <input type="button" value="表示２" onClick="disp('表示２')">　　　
        <input type="button" value="表示３" onClick="disp('表示３')">　　　　　
    </div>
</div>

　
関数も、引数を 1 つ指定して定義しています。
「 arg 」は引数名で、任意に名付けます。

そして、「 onClick=”disp2(‘表示１’)” 」として関数を呼び出しています。

「表示１」が引数として関数に渡す値です。
文字列のため、引用符で囲んで記述します。

ここでは、関数を指定するためにダブルコーテーション（ ” ）を使用しているので、シングルコーテーション（ ‘ ）で囲んでいます。
（ダブルコーテーションとシングルコーテーションが逆になってもOKです。）

▲目次へ戻る

3. onload 時に関数を呼び出す

Webページを読み込むタイミングで JavaScript の関数を呼び出す場合は、onload イベントやaddeventlistener イベントを使用します。

HTML の body 要素内で、次のように onload イベントを記述すると、Webページが表示される時に関数を呼び出すことができます。

<body　onload="関数名()">

　
また、script 要素内で、次のように addeventlistener イベントを記述しても、同様に関数を呼び出すことができます。

window.addEventListener('DOMContentLoaded', function() {

    //処理内容

});

下のサンプルのテキストボックスには、Webページが表示された時の日時データが表示されています。

　
ソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {

    document.getElementById("dat").value = new Date();
});
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat">　
</div>

日時データの取得については、JavaScript【 Date 】１～Dateオブジェクトで日付を取得をご参照下さい。

▲目次へ戻る