【Javascript】functionを使って独自の関数を作成する
Javascriptには関数という機能があります。今回は「function」という機能を使って関数を作成してみようと思います。
そもそも関数とは
関数とは、複数の処理をひとまとめにした、いわば処理の集まりです。メソッドとも呼ばれることもあるようですね。
プログラム処理を記述していると、同じ処理を何度も使用したりすることもあり、その際何度も同じものを記述しているととても時間がかかります。見た目も非常に長くなり、複数人でプロジェクトを組んでいる場合に、難解なものになりがちです。
そんな時、同じ処理を一つの関数と定義し、この関数一言を記述すれば、定義した処理全てを実行してくれる機能が関数としての役割です。
Javascript言語で、あらかじめ用意されたものもあれば、functionという機能を使い、独自の関数を定義することも可能です。
function 関数の定義（宣言）
基本的な構文として、以下の形で宣言します
|
1 2 3 4 5 6 7 |
<script> function 関数名( 引数1,引数2… ) { 実行される処理; return 返り値; } </script> |
関数名の後にくる（ ）の中には「引数」を入れることができます。引数とは関数に渡して、処理の中でその値を代入して処理を行うことができる値です。
必要がなければ引数は使用しなくてよく、また必要がある時は必要な分だけ「,」で区切ることで複数の引数を扱うことができます。また処理後の結果を、呼び出し元で取得したい場合は、returnという構文を用いて、その後に戻り値として呼び出し元へ返しています。
実際にfunctionを用いて関数を作成してみる
今回は簡単な「消費税込み」の値段を計算するプログラムを作成してみたいと思います。
それではHTMLを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>税込み価格ファンクション</title> </head> <body> <secition> <p id="output1">ここを書き換える</p> </secition> <script> 'use strict'; function total(price){ const tax = 0.1; return price = price + price * tax ; } document.getElementById('output1').textContent = '新発売のゲームの値段は' + total(6000) + '円（税込）です'; </script> </body> </html> |
今回のプログラムでは「total」という関数を用いて計算を行い、その処理の結果を「output1」のidをもつ要素に書き換えて出力します。
早速functionで宣言を行い、処理の設定を行います。
|
1 2 3 4 |
function total(price){ const tax = 0.1; return price = price + price * tax ; } |
関数名は「total」、引数は「price」を設定し、処理の中で「const tax = 0.1」という、消費税10％にあたる数値を設定します。その後返り値を用いて計算後の数値を呼び出し元に渡しています。ここまでが関数の定義と処理の内容設定になります。
次に、この関数を呼び出し部分を見てます。
|
1 |
document.getElementById('output1').textContent = '新発売のゲームの値段は' + total(6000) + '円（税込）です'; |
「document.getElementById(‘output1′).textContent」という構文で、「output1」というidを持つ要素のテキストを書き換えなさいという命令がだされています。そして書き換える内容が「’新発売のゲームの値段は’ + total(6000) + ‘円（税込）です’」という部分です。この中でtotal(6000)が関数の呼び出し部分になります。引数に6000という値が設定され、この6000が、関数の処理内容である「price + price * tax ;」、つまり「6000 + 6000 * 0.1」、6600という値が呼び出し元に返される仕組みです。
私もまだまだプログラム初心者であり、自由自在に関数を取り入れることはできませんが、この辺りはプログラムの基礎的な部分らしいのできっちり抑えておきたいところです。この基礎的なところを今後応用に活かせていけたらなぁ…
さて今回はここまでです、お疲れ様でした(・ω・)ノシ
