どうも！LSSです！！
適当に間をあけながらの「はてなブログで始める！JavaScript超入門！」、今回は第四回となります。
このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニッチな趣旨でお送りしておりますｗ
なお、前回までは、
第一回
第一章 Hello World
第二章 変数を使ってみよう！
第三章 計算ぐらいしておこうか
第二回
第四章 ifによる分岐
第五章 ifのもうひとつのしきたり
第三回
第六章 乱数で遊んでみよう！
という内容でお送りしました。
第七章 関数を作って、呼び出してみよう
前回、第六章の途中で作った、↓のコード
<div id="hello"></div>
<script>
hello.innerHTML=1+Math.floor(Math.random()*6);
</script>
から始めます。
はてなブログの「HTML編集」画面に上記のコードをコピペして、「プレビュー」画面を開いてみてください。
↑こんな感じの結果になります。
（この画像では「４」が出ていますが、サイコロなので１～６のどれかの数字が出てくる事になります。）
hello.innerHTML=1+Math.floor(Math.random()*6);
を実行した結果、
「hello」というID名をつけた部分（DIVタグ）の中身を、1～6のランダムな整数に書き換えたために、こういう結果になっています。
さて、早速ですが、この一行のコードを「関数」にしてみます。
<div id="hello"></div>
<script>
function saikoro(){
hello.innerHTML=1+Math.floor(Math.random()*6);
}
</script>
↑のように、一行のコードの前後を
function saikoro(){
と、
}
で挟んでしまいます。
この状態でプレビューすると…
…サイコロが出てこなくなってしまいました。
これは、
function saikoro(){
hello.innerHTML=1+Math.floor(Math.random()*6);
}
という内容に書き換えた事により、
「saikoroという名前の関数を定義し、その処理内容を『hello.innerHTML=1+Math.floor(Math.random()*6);』って事にする」
という意味に変わってしまい、「関数を用意するだけして利用していない」ために、何も画面に変化が起きないまま終わってしまっているからです。
という事で、今度はこの用意したsaikoroという関数を呼び出す部分を書き足します！
<div id="hello"></div>
<script>
function saikoro(){
hello.innerHTML=1+Math.floor(Math.random()*6);
}
saikoro();
</script>
↑のように、
saikoro();
と書き足しました。
これで、プレビュー画面を開くと…？
↑再び、サイコロとして機能復活しましたね^^
関数にしなくても実行できてたのに、なんでわざわざ関数にするの？
という疑問が出てくると思いますので、駆け足ですが、関数化のメリットを感じる一例を作ってみます！
<div id="hello"></div>
<script>
function saikoro(){
hello.innerHTML=1+Math.floor(Math.random()*6);
}
saikoro();
</script>
<p><a href="#" onclick="saikoro();">サイコロを振り直す</a></p>
<p><a href="#" onclick="saikoro();">サイコロを振り直す</a></p>
という一行を、<script>タグの外側に追記しました。
これで、プレビュー画面に切り替えると…？
↑このように「サイコロを振り直す」というリンクが出てきます。
これをクリックすると、
↑プレビュー画面を開き直さなくても、数字が変わりました！
何度でも、クリックするたびにサイコロを振り直せ（数字が変化し）ます！！
aタグにonclickオプションをつけ、その内容を、
saikoro();
としました。
「saikoroという関数を呼び出す」という意味になります。
このように、aタグにオプションをつける事でも、JavaScriptを実行する事ができますが、そのオプションの中に長ったらしいコードを書かずに済む、というのが関数のメリットのひとつ。
他に、aタグじゃなくても、コード内の複数個所で同じ処理を組み込みたい時。
関数（function）に処理をまとめておくと、
「関数名で呼び出すだけで、その中身を実行したのと同じ事になる」
というメリットがあります^^
関数の書式（作り方）
function 関数名(引数名){
処理
}
のように書きます。
今回は「引数」についての説明は省きます。
今回のコードは
function saikoro(){
hello.innerHTML=1+Math.floor(Math.random()*6);
}
でしたが、これは
「saikoroという名前の関数を作ります。処理内容はhello.innerHTML=1+Math.floor(Math.random()*6);です。」
という意味になります。
これをコード内に書いておくと、
saikoro();
と書くだけで、
hello.innerHTML=1+Math.floor(Math.random()*6);
が実行されるんですね^^
まだ一行だけなので、たいして有難みがありませんが、何十行にもなるようなコードの場合、それを繰り返し書かずに済む、ってのが大きな手間の削減になります！
関数のイメージ
「下請け・アルバイト」のようなもの、と思うとイメージしやすいかも知れません。
これまで
自分が全部やっていた仕事（<script>タグ内に直接書いていたコード）を、
アルバイトのsaikoro君（saikoroと名付けた関数）に覚えてもらって、
「『saikoroくーん』って呼んだら、教えた仕事をやってね」（saikoro();で処理が実行される）
という仕組みを作るイメージですね。
あとがき
久々のJavaScript超入門でした。
ちょっと駆け足ぎみだったかもですね^^;
最後の「関数のイメージ」のアルバイトの例えだけでも伝わったら御の字ですｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
