JavaScript引数無し関数の書き方　呼び出し方法　

関数を取り上げますが、はじめてプログラムを学習する方はわかりずら概念かもしれませんので戻り値や引数などの項目は扱いません。ただし命令文を一つの関数にまとめておくとその関数を使いまわしができて便利なので呼び出し方法や記述方法を掲載するにとどめます。

関数の書き方呼び出し

簡単な関数を記述して呼び出してみましょう。冒頭でも書きましたこのページでは引数や戻り値はあつかいません。

関数の記述

関数には書き方があります。

関数名や引数はなんでもかまいませんが、予約語はNGです、日本語を使うことはできますが普通は半角文字を使います。変数の命名方法と同じです。

//関数の記述例
function clk() {
//処理したい文章
document.getElementById("lb").textContent = "関数が実行されました。";
}

上記は関数名が「clk」実行したい文章が「 document.getElementById(“lb”).textContent = “関数が実行されました。”;」です。

関数を呼び出す

関数はそのままだと実行されませんので呼び出す必要があります。

htmlファイルのbody内に下記のコードを記入してブラウザで表示してみてください。

 <button>ボタン</button>
<label id="lb">関数が実行されるとココの文字列が変更される</label>
<script>
//関数の記述例
function clk() {
//処理したい文章
document.getElementById("lb").textContent = "関数が実行されました。";
} 
</script>

サンプル（別窓）

ボタンをクリックするとラベルの部分の文章が変更されます。「onclick=”clk()”」が呼び出し文です。

関数のなかに呼び出し文を記入する方法もあります。

下記の例は関数「arato()」を関数「clk()」から呼び出しています。

<button>ボタン</button>
<script>
//関数の記述例
function clk() {
//関数arato()を呼び出す
arato();
}
function arato() {
alert("関数clk()から呼び出されました");
} 
</script>

サンプル（別窓）

ボタンをクリックすると関数clk()が呼び出されて関数arato()を実行しています。

同じコードを2度書くな！

関数の使い方ですが同じ処理をする場合は必ず一つの関数で済ませるようにします。

下記のように書きます。

<button>ボタン1</button><br>
<button>ボタン2</button><br>
<button>ボタン3</button>
<script> 
function clk() {
alert("ボタンがクリックされました"); 
} 
</script>

サンプル（別窓）

「ボタン1」と「ボタン2」「ボタン3」をクリックすると3回同じアラートが出現します。関数は「clk()」だけです。

下記は悪い例です。

<button>ボタン1</button><br>
<button>ボタン2</button><br>
<button>ボタン3</button>
<script>
function clk1() {
alert("ボタンがクリックされました");
}
function clk2() {
alert("ボタンがクリックされました");
}
function clk3() {
alert("ボタンがクリックされました");
} 
</script>

全部同じ処理をしていますが関数が3個あります。これだと何か変更があった場合3箇所とも修正しなければなりません。このような書き方はNGです。同じコードを2度書くなですよ

以上関数の簡単な使い方を解説しました。はじめてプログラミングする方にとっては少し理解が難しい分野になるかもしれません。慣れるまで我慢してください。

諦めるとおわっちゃいますので…

このページは以上で終了です。

お疲れ様でした！