この記事では、javascriptの関数と関数式について記載する。
1. 目的
・javascriptで関数と関数式を使えるようになる。
目次
2. 関数とは
・構成要素の一つ
・様々な処理を一つにまとめて、その処理に名前を付けることが出来る。(無名のものもある。)
・目的ごとに処理を分けたり、同じ処理を複数回行う場合に、一度定義した関数を使用することでコードの削減や可読性を上げることが出来る。
参考：
・関数 - JavaScript | MDN
・function 宣言 - JavaScript | MDN
・Hoisting (巻き上げ、ホイスティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
3. 関数式とは
・関数を値として変数へ代入している式
・関数宣言は文、関数式は関数を値として扱う。
・関数宣言と違い、定義前に関数式を使用することはできない。(関数宣言は、定義前に使用可能)
参考：
・関数と宣言 · JavaScript Primer #jsprimer
・関数式 - JavaScript | MDN
3. 関数の作成(定義)方法
//function宣言での関数の作成
function 関数名(引数){
//実行する関数の内容
return returnする変数;
}
//function式での関数の作成（無名関数)
型 関数名 = function(引数){
//実行する関数の内容
return returnする変数;
}
例：
//function宣言での関数の作成
function Name(num) {
//実行する関数の内容
return 2*num;
}
//function式での関数の作成
const funcName = function(num){
return 2*num;
}
・function：関数を定義する時に使用する。
・引数：関数で使用する変数の値や、オブジェクトなど。(引き渡す値がある場合に入れる。)
・return：返り値、関数で実行した値を戻す。(戻す値などがある場合に入れる)
３. 関数の使用
//引数を渡し、戻り値がある場合。
変数 = 関数(引数);
//引数を渡して、関数を実行する。
関数名(引数);
//引数を渡し、戻り値がある場合。
変数 = 関数();
//関数を実行する場合
関数();
例：
let Num = Name(2);
・2という数値をNameという関数に引数として渡す。
・その計算結果でreturnで戻された値をNumという変数に入れている。
4. プログラムの作成(2倍にする関数の作成と実行)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2倍</title>
</head>
<body>
<p> NUM入力 <input type="text" size="15" value="300" id ="Num"></p>
<p> 2倍の算結果_関数 <input type="text" size="15" id = "ans"></p>
<p> 2倍の算結果_関数式 <input type="text" size="15" id = "ans2"></p>
<script>
let Dou2 = function(num){
return 2*num;
}
let lnum1 = parseInt(document.getElementById("Num").value);
let lans = document.getElementById("ans");
let lans2 = document.getElementById("ans2");
lans.value = Double(lnum1);
lans2.value = Dou2(lnum1);
function Double(num){
return 2*num;
}
</script>
</body>
</html>
実行結果
ーーーーーーーーーーーーーーー
NUM入力
2倍の算結果_関数
2倍の算結果_関数式
ーーーーーーーーーーーーーーー
5. 無名関数の作成(定義)方法
function(){
//実行する関数の内容
return returnする変数;
}
例：
function () {
return 2*num;
}
・これは、良くHTMLでイベントが発生した時に、実行したい動作を書くのによく使われる。
6. プログラムの作成(クリック時に2倍に計算する)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2倍</title>
</head>
<body>
<p> NUM入力 <input type="text" size="15" value="300" id ="Num2"></p>
<p> 足し算結果 <input type="text" size="15" id = "ans2"></p>
<p> 計算実行 <input type="button" size="10" id = "button"></p>
<script>
let lnum2;
let lansid2 = document.getElementById("ans2");
let lbuttonid = document.getElementById("button");
lbuttonid.addEventListener("click",function(){
lnum2 = parseFloat(document.getElementById("Num2").value);
lansid2.value = lnum2*2;
})
</script>
</body>
</html>
実行結果
ーーーーーーーーー
NUM入力
足し算結果
計算実行
ーーーーーーーーー
HTMLの基本の参考：
・HTML の基本 - ウェブ開発を学ぶ | MDN
HTMLのidとは？使い方やclassとの違いについても解説 | 侍エンジニアブログ
【HTML】id属性とは？ 使い方と特徴を解説 | ZeroPlus Media
・HTML Living Standardリファレンス
関連記事
過去の記事：
Project OKI過去のブログ一覧とか - Project_OKI’s diary
・HTML,CSS,Javascript1(環境設定：VSCodeの導入) - Project_OKI’s diary
・HTML,CSS,Javascript2(HTMLでホームページのタイトル設定と段落作成) - Project_OKI’s diary
・HTML,CSS,Javascript3(タグについて) - Project_OKI’s diary
・HTML,CSS,Javascript4(属性による機能追加について) - Project_OKI’s diary
・HTML,CSS,Javascript5(装飾：CSSの追加) - Project_OKI’s diary
