関数とは、ある一定の処理を書き、呼び出し、使い回せるようにすることです。
何度も使うと考えられる処理は、使いまわせるように関数化が便利です。
- 渡された数字に50足して表示させる
- ポップアップ画面を表示する処理を関数化する
- クリックし対象を一瞬震わせる処理を関数化しておく
ある数字に対して「ドル」と語尾につけるという処理を関数化したら。
渡した数字に対して「ドル」がつけられて返ってきます。
個別で処理を書き、自由に呼び出すことができます。
他の処理から呼び出して、何度も使い回すことが可能です。
同じような処理を、別のソースコードごとに何度も書く必要がなくなるでしょう。
例えば、パスワードを作り出す関数を作ったとします。
1度作っておけば、呼び出すだけで実行できます。
2度と同じ処理を書く必要はありません。
このように個別に頻出の関数を作っておき、あとで使い回せます。
関数が存在することにより、より効率的な書き方が出来るようになるのです。
今回は、プログラミングを効率化する「関数」を習得していきましょう。
ミッションの内容
今回のミッションは、少し難しいかもしれません。
わからなくても、時間をかけて、挑戦してみてください。
まず、ミッションの確認をしましょう。
その後、ソースコードの解説を読みながら進めてください。
基本は、ボタンを押すと「名前と年齢」を表示させる、という処理です。
ただ、表示するまでの過程を2つに分けました。
1つめはinputからお名前と年齢を入力して、alertでデータ表示させる形。
2つめは最初から表示されているデータを取得してalertで表示させる形です。
関数がどこに使われているかというと、データを表示させるalertです。
2つ処理があるからと言って、2回、alert表示の処理を書いているわけではありません。
alertで表示する形は同じです。
関数で１つにまとめ、各所から呼び出せるようにしています。
いちいち同じ処理を2回書くのは面倒くさいですからね。
名前と年齢をalertする関数を1つだけ作り、2つの処理から呼び出しているのです。
処理の流れは下記になります。
- input要素から名前と年齢を取得する ( またはhtml要素から取り出す )
- alertで名前と年齢を表示させる関数にデータを渡す
- 関数がデータをalertで表示させる
なかなか再現できない場合は、下記のファイルをダウンロードしてみてください。
ソースコードの解説
これまでよりも、少し複雑です。
まず、htmlはこのようになっています。
<!--自分でhtmlに入力するフォームです。-->
<div style="background:#f4f4f4;margin-bottom:20px;padding:25px;">
<h2>パターン1</h2>
<input type="text" class="namedata" placeholder="お名前" />
<input type="text" class="agedata" placeholder="年齢" />
<button class="data1">表示する</button>
</div>
<!--予め決められたデータが入ったエリアです。-->
<div style="background:#f4f4f4;padding:25px;">
<h2>パターン2</h2>
<div><span class="namedata2">ささき</span>氏</div>
<div><span class="agedata2">24</span>歳</div>
<button class="data2">表示する</button>
</div>
htmlの用意ができたら、alertで表示する関数を作ってみましょう。
//関数showDataにnameとageを送って使うと、、
function showData(name,age){
//alertで名前と年齢を表示します。
alert(name+"さんの年齢は"+age+"歳です！");
};
関数は必ずfunctionからはじまります。
functionの隣にある文字 ( showData ) は関数の名前で、自由につけることができます。
呼び出す時に使いますので、わかりやすい名前をつけてみましょう。
関数の「機能」を表す名前だと、より分かりやすいですよね。
今回は、データを表示するだけなので、showDataとしています。
showDataの隣にある ( name,age ) は、変数です。
nameという変数に「名前」を入れ、ageという変数に「年齢」を入れます。
すると、function(関数)にデータを渡せるので、alertで表示できます。
function外部で定義された変数は、そのままだと関数内で使えません。
このように「値を渡してあげて」はじめて使うことが可能です。
あとはalertでデータを表示させてみましょう。
こうして作られた関数は、いつでも呼び出すことができます。
さっそく、名前と年齢を取得する処理を作り、呼び出してみてください。
難しく構える必要がありません。
関数以外は今までやってきたことだけです。
//.data1をクリックすると、、
$(".data1").click(function(){
//.namedataの内容をnameに取得します。
let name = $('.namedata').val();
//.agedataの内容をageに取得します。
let age = $('.agedata').val();
//それらを関数に渡します。
showData(name,age);
});
「.data1」をクリックすると、input要素から名前と年齢を取得します。
ここに関しては、過去にやっているので省略します。
新出なのはshowData(name,age);です。
これで、関数を呼び出しているんですね。
今回作った関数は「名前と年齢を受け取って表示」です。
先程作った「nameとageをalertで表示させる」という処理が呼び出されます。
変数nameとageにデータを入れたあと、呼び出してみましょう。
無事「〜〜さんの年齢は〜〜〜歳です」と表示されるはずです。
なんとなく、使い方はご理解いただけたでしょうか？
もう1つ、処理を書いていきます。
関数の良いところは「使い回し」です。
別の処理からも呼び出してみましょう。
//.data2をクリックすると、、
$(".data2").click(function(){
//.namedata2のテキストをnameに取得します。
let name = $('.namedata2').text();
//.agedata2のテキストをageに取得します。
let age = $('.agedata2').text();
//それらを関数に渡します。
showData(name,age);
});
上記の処理は、もともとHTMLに書いてあるデータを取得して表示させています。
.namedata2のテキストをnameにいれ、.agedata2をageに入れます。
その後は一緒で、showDataを呼び出して、alertで表示させます。
このように関数はある一定の処理をまとめ、使い回せる時に便利です。
開発の際はだいぶ重宝しますので、ぜひ使いまわしてみてください。