【高校情報Ⅰ】JavaScriptプログラミング 超入門講座 第９話（最終回） 関数
◆◆はじめに◆◆
高等学校情報Ⅰに完全準拠させた、JavaScript入門講座の９回目（最終回）です。
今回は「関数」についてです。
教員研修用教材には、JavaScriptの基礎の解説がほとんど無いので、教員の方にも参考にして頂けると幸いです。
私自身、JavaScript→若干経験有 Python→未経験 の状態で、勉強も兼ねて動画解説作成しました。
個人的な感想ですが、Pythonの方が簡単です。
以前勤めていた会社のベテランエンジニア（JavaやJavaScript得意）もPythonメチャクチャ覚えやすい（文法がシンプル）と言っていたので、
やっぱり高校で扱うのはPythonがいいと思っています。
VBAでやる学校は、先生がVBAが大好き（？）か、政治的な力関係を感じます。
◆◆動画解説◆◆
◆◆文字おこし◆◆
今日は、javascriptの関数について、学んでいこう。
関数は 英語でfunctionと言い、機能の意味なんだ。つまり、とある処理を行う命令のまとまりを ブロックに書いてまとめたものなんだ
いままで使ってきたdocument.write()という画面に表示する機能も、カッコ内にある文言を表示させる処理を纏めた関数なんだ。
この関数は自分自身で定義することもできる
たとえば、こんなプログラムがあったとしよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
document.write ("おはよう","<br>");
document.write ("こんにちは","<br>") ;
document.write ("こんばんは","<br>") ;
document.write ("おはよう","<br>");
document.write ("こんにちは","<br>") ;
document.write ("こんばんは","<br>") ;
document.write ("おはよう","<br>");
document.write ("こんにちは","<br>") ;
document.write ("こんばんは","<br>") ;
</script>
</body>
</html>よく見ると おはよう、こんにちは、こんばんはを３回繰り返しているだけだね。
ここで関数の出番だ、この挨拶の共通部分を切り出して別に定義しよう
関数 aisatu を定義してその中に
おはよう、こんにちは、こんばんは部分を切り出して記載する。
関数は functionの後に半角スペースで関数名を記載する。
その後に丸カッコをつけて、その中に引数という渡したい値を定義して、その後の波括弧内に実施する処理を記述する。
今回は特に渡す値が無いから引数無しでやっていこう。
関数名は挨拶とするね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
function aisatsu(){
document.write ("おはよう","<br>");
document.write ("こんにちは","<br>") ;
document.write ("こんばんは","<br>") ;
}
aisatsu();
</script>
</body>
</html>
と定義する。これを呼び出す場合は
aisatsu();と記述すれば呼び出せる
一度実行してみよう
ちゃんと関数内に定義した値が表示されたね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
function aisatsu(){
for(var i = 0; i < 3; i++){
document.write ("おはよう","<br>");
document.write ("こんにちは","<br>") ;
document.write ("こんばんは","<br>") ;
}
}
aisatsu();
</script>
</body>
</html>こんどは3回繰り返すためにfor文の中にいれていこう
実行してみよう。
ちゃんと３回繰り返されたね。
複雑な処理も、まとまった単位で切り出せばプログラムが見やすくなるね。
じゃあ、引数を渡すパターンで考えてみよう
金額を渡したら、消費税が返却される関数にしよう。
戻したい値のところでreturnを使うんだ。
この戻ってくる値を戻り値っていう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
//金額を渡したら、消費税が返却される関数 消費税率は8%
function keisan(nedan){
var tax = nedan * 0.08;
return tax;
}
var kekka = keisan(100);
document.write(kekka);
</script>
</body>
</html>プログラムを設計するときは、通常関数は値を返却し、その返却された値に対する ふるまいは呼び出し元で決める。
関数は消費税を返却して、出力は呼び出しもとで行うようにしよう。
JavaScript超入門講座はここまで、今までの知識を利用することでいろんなプログラムがくめるはずだから、練習を重ねていこう。
この記事が気に入ったらサポートをしてみませんか？