今さらJavaScript入門!~初心者の私と~
第4回「関数を使ってみよう!」
今回は関数についてやっていきたいと思います。
今回もalertを使うので、ご安心を。
今回もalertを使うので、ご安心を。
1.関数って何?
一応、関数について説明しておきますね。
関数というと、数学で出てくる一次関数とかを思い出す人が多いのではないでしょうか。y=ax+bとかみたいなやつです。数式を見ただけでめまいがする人もいるかもしれませんね(笑)
でも、別に数学をやるわけではないので大丈夫です。
例えばy=ax+bの場合、yとax+bの関係は何だと思います?
ええ、そうです。「=」ついてるんだから同じっていう意味です。もう少し言うと、「Y」の内容は「ax+b」だよという意味です。
なので逆に言うと、yの内容はax+bが変われば変化します。身近なことで例えると、「焼き肉といえば=カルビ」だった人が、ひょんなことから牛タンの深さに気づくと、「焼き肉といえば=牛タン」になったりするということです。
このような、「あるもの」は「こういう内容だ」という2つの塊の関係で、片方の「あるもの」は「内容の変化」で変わってしまうようなものを「関数」と言います。
関数はもともと「函数」と書かれていました。「函」は「箱」という意味なのですが、ここから関数は材料を入れると決まったものをつくる箱のようなイメージでとよく言われます。まあ、でも個人的にはあんまりピンとこないんですけどね(苦笑)
で、Javascriptでも「関数」は同じような意味を持ちます。
といっても、分かったような、分からないようなだと思うので、もうちょっと具体的に体感してみましょう。
一応、関数について説明しておきますね。
関数というと、数学で出てくる一次関数とかを思い出す人が多いのではないでしょうか。y=ax+bとかみたいなやつです。数式を見ただけでめまいがする人もいるかもしれませんね(笑)
でも、別に数学をやるわけではないので大丈夫です。
例えばy=ax+bの場合、yとax+bの関係は何だと思います?
ええ、そうです。「=」ついてるんだから同じっていう意味です。もう少し言うと、「Y」の内容は「ax+b」だよという意味です。
なので逆に言うと、yの内容はax+bが変われば変化します。身近なことで例えると、「焼き肉といえば=カルビ」だった人が、ひょんなことから牛タンの深さに気づくと、「焼き肉といえば=牛タン」になったりするということです。
このような、「あるもの」は「こういう内容だ」という2つの塊の関係で、片方の「あるもの」は「内容の変化」で変わってしまうようなものを「関数」と言います。
関数はもともと「函数」と書かれていました。「函」は「箱」という意味なのですが、ここから関数は材料を入れると決まったものをつくる箱のようなイメージでとよく言われます。まあ、でも個人的にはあんまりピンとこないんですけどね(苦笑)
で、Javascriptでも「関数」は同じような意味を持ちます。
といっても、分かったような、分からないようなだと思うので、もうちょっと具体的に体感してみましょう。
2.alert地獄を味わわせてやるぜ
前回までにやったalertのセリフを少し増やしてみます。
まず、村長のセリフに「私は村長です」を加えてみましょう。
村長なら、
▼▼▼
<button onclick="window.alert('よく来なさったな'); window.alert('ここはプログラム村だよ')";>村長</button>
▲▲▲
になります。
残りも同じ要領で変えてみてください。セリフはまったく同じで構いません。
さらに、「薬草屋」と「占い師」と「男の子」も同様の要領で追加してみてください。タグも同じ感じで書けばOKです。
前回までにやったalertのセリフを少し増やしてみます。
まず、村長のセリフに「私は村長です」を加えてみましょう。
村長なら、
▼▼▼
<button onclick="window.alert('よく来なさったな'); window.alert('ここはプログラム村だよ')";>村長</button>
▲▲▲
になります。
残りも同じ要領で変えてみてください。セリフはまったく同じで構いません。
さらに、「薬草屋」と「占い師」と「男の子」も同様の要領で追加してみてください。タグも同じ感じで書けばOKです。
どうですか?
なんか大変じゃないですか?
これにさらに10人のキャラを追加しろと言われたらどうします?
私は絶望します(笑)
ここで絶望しないように使うのが「関数」です。どういうことでしょうか?
なんか大変じゃないですか?
これにさらに10人のキャラを追加しろと言われたらどうします?
私は絶望します(笑)
ここで絶望しないように使うのが「関数」です。どういうことでしょうか?
3.関数は「まとめ」「グループ化」で使う
よく見なくても分かると思いますが、各キャラがしゃべっているセリフはみんな同じですよね。
これをまとめて書ければもっと楽になると思いませんか?
そこで使うのが関数です。
先ほども書いたように関数は、「あること」の「内容はこれだ!」と示すものです。
それを使って考えると、
「キャラのセリフ」=「『よく来なさったな』と『ここはプログラム村だよ』でアラートで出す!」
という関数がつくれそうですね。セリフ内容はあとでいくらでも変えることができます。
では、実際に関数を書いてみましょう。
よく見なくても分かると思いますが、各キャラがしゃべっているセリフはみんな同じですよね。
これをまとめて書ければもっと楽になると思いませんか?
そこで使うのが関数です。
先ほども書いたように関数は、「あること」の「内容はこれだ!」と示すものです。
それを使って考えると、
「キャラのセリフ」=「『よく来なさったな』と『ここはプログラム村だよ』でアラートで出す!」
という関数がつくれそうですね。セリフ内容はあとでいくらでも変えることができます。
では、実際に関数を書いてみましょう。
4.関数はfunctionで定義する!
関数ではfunctionというものを使って、名前と内容を決めます。
とりあえず関数の名前は「serihu」とします。
なお、名前は自由ですが、つけられないものもありますので基本的には英数字だけ使っておけばいいと思います。ただし、先頭に数字はダメなのと、コードとして使う言葉(予約語と言います)は使えません。また、大文字・小文字は区別します。
今回のセリフをまとめるコードは以下のように書きます。これは<script>~</script>の間に書きましょう。
▼▼▼
function serihu(){
window.alert('よく来なさったな');
window.alert('ここはプログラム村だよ');
}
▲▲▲
<細かく説明>
○functionは先ほどのとおり、今から関数を宣言するぜ! という意味です。
○関数名はfunctionのあとに半角スペースを入れて書きます。( )が気になると思いますが、今は使わないのでスルーで。でも書くのを忘れないでくださいね。
○その関数の処理内容は{ }の中に書きます。書き方は普通のコードと同じです。なお、{ }の後ろにはセミコロンをつけませんので注意!
○あとで読みやすいように適宜改行をしたり、行の先頭をずらしたりしましょう。私はキーボードのTabで行を右に寄せることが多いです。
関数ではfunctionというものを使って、名前と内容を決めます。
とりあえず関数の名前は「serihu」とします。
なお、名前は自由ですが、つけられないものもありますので基本的には英数字だけ使っておけばいいと思います。ただし、先頭に数字はダメなのと、コードとして使う言葉(予約語と言います)は使えません。また、大文字・小文字は区別します。
今回のセリフをまとめるコードは以下のように書きます。これは<script>~</script>の間に書きましょう。
▼▼▼
function serihu(){
window.alert('よく来なさったな');
window.alert('ここはプログラム村だよ');
}
▲▲▲
<細かく説明>
○functionは先ほどのとおり、今から関数を宣言するぜ! という意味です。
○関数名はfunctionのあとに半角スペースを入れて書きます。( )が気になると思いますが、今は使わないのでスルーで。でも書くのを忘れないでくださいね。
○その関数の処理内容は{ }の中に書きます。書き方は普通のコードと同じです。なお、{ }の後ろにはセミコロンをつけませんので注意!
○あとで読みやすいように適宜改行をしたり、行の先頭をずらしたりしましょう。私はキーボードのTabで行を右に寄せることが多いです。
これで関数は定義完了です。
5.関数を適用する
今回の場合、関数はonclickの内容として書いて使います。
今までは、
<button onclick="window.alert('よく来なさったな'); window.alert('ここはプログラム村だよ');">村長</button>
でしたが、セリフの内容とその表示方法は関数で設定したので、その関数名を指定すれば設定した処理が行われます。
なので、
▼▼▼
<button onclick="serihu()">村長</button>
▲▲▲
とします。
だいぶすっきりしましたね。
とりあえずこれで保存し、ブラウザを更新して、村長ボタンをクリックしてみましょう。
今回の場合、関数はonclickの内容として書いて使います。
今までは、
<button onclick="window.alert('よく来なさったな'); window.alert('ここはプログラム村だよ');">村長</button>
でしたが、セリフの内容とその表示方法は関数で設定したので、その関数名を指定すれば設定した処理が行われます。
なので、
▼▼▼
<button onclick="serihu()">村長</button>
▲▲▲
とします。
だいぶすっきりしましたね。
とりあえずこれで保存し、ブラウザを更新して、村長ボタンをクリックしてみましょう。
どうですか? 出ましたか?
出ていたら、おめでとうございます!
この要領で、ほかのキャラのセリフにもこの関数を適用してみてください。
出ていたら、おめでとうございます!
この要領で、ほかのキャラのセリフにもこの関数を適用してみてください。
6.訂正時にも関数は便利
関数の効果はこれだけではありません。
例えばセリフの一部を変更したいときなどです。HTMLのタグ内に直接書いていると、変更部分をいちいち直さないといけませんが、関数で定義しておけば、関数の処理内容だけ直せばあとは自動で変更が反映されます。
便利便利。
というわけで練習で、その効果も体験してみましょう。
<練習>
A
セリフの「よく来なさったな」を関数を使って、「ようこそ!」に変更しなさい。
B
「薬草屋」と「占い師」と「男の子」には別のセリフをしゃべらせることにした。この3キャラ用に新しくserihu_B関数を定義して、「これからよろしくね!」というセリフがアラートで表示されるようにしなさい。
<解答例>
A
function serihu(){
window.alert('ようこそ!');
window.alert('ここはプログラム村だよ');
}
B
(コード)
function serihu_B(){
window.alert('これからよろしくね!');
}
(HTML)
<button onclick="serihu_B()">薬草屋</button>
<button onclick="serihu_B()">占い師</button>
<button onclick="serihu_B()">男の子</button>
関数の効果はこれだけではありません。
例えばセリフの一部を変更したいときなどです。HTMLのタグ内に直接書いていると、変更部分をいちいち直さないといけませんが、関数で定義しておけば、関数の処理内容だけ直せばあとは自動で変更が反映されます。
便利便利。
というわけで練習で、その効果も体験してみましょう。
<練習>
A
セリフの「よく来なさったな」を関数を使って、「ようこそ!」に変更しなさい。
B
「薬草屋」と「占い師」と「男の子」には別のセリフをしゃべらせることにした。この3キャラ用に新しくserihu_B関数を定義して、「これからよろしくね!」というセリフがアラートで表示されるようにしなさい。
<解答例>
A
function serihu(){
window.alert('ようこそ!');
window.alert('ここはプログラム村だよ');
}
B
(コード)
function serihu_B(){
window.alert('これからよろしくね!');
}
(HTML)
<button onclick="serihu_B()">薬草屋</button>
<button onclick="serihu_B()">占い師</button>
<button onclick="serihu_B()">男の子</button>
↓
次回は、もう一つの便利な道具である「変数」を扱ってみようと思います。
ではでは!
ではでは!