予備知識
関数とは
複数の処理を1つのまとまりにしたものです。
関数にするメリットとして、同じような処理を何度も書かなくても関数化することで
その処理を使いまわすことができるようになります。
問題1 : 関数の書き方
「こんにちは」という文字列が返ってくる、挨拶関数を作成してみましょう。
参考ソース
function greeting () {
let message = "こんにちは";
return message;
}
書き方
function 関数名 () {}functionは関数の宣言のようなものです。
関数名は、自由に名前を決められます。
問題2 : 関数を呼び出そう
先ほど作成した関数を呼び出して、「こんにちは」をアラート表示してみましょう。
参考ソース
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
function greeting() {
let message = "こんにちは";
return message;
}
let message = greeting();
alert(message);
</script>
</html>greetingの関数は14行目のreturn messageによって、挨拶の文字列を返す関数となっています。
16行目の関数名()とすることで、「こんにちは」の文字列を返します。
問題3 : 関数を共通関数化しよう
必要ファイル：index.html、common.js、script.js
前提条件として、先ほど書いた挨拶関数をcommon.jsに書きます。
script.jsからcommon.jsに書いた、先ほどの挨拶関数を呼び出してアラート表示してみましょう。
参考ソース
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="common.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
common.js
function greeting() {
let message = "こんにちは";
return message;
}
script.js
let message = greeting();
alert(message);
なぜ、わざわざ関数を別ファイルに記載したのか
なぜ、わざわざこんなことをしたのかですがメリットがあります。
common.jsに複数画面で使用する関数を定義しておくことで、各ファイルからその関数を使いまわすことができます。
共通関数用のjsファイルを1つ作成しておくと便利に開発できます。
問題4 : 引数を渡そう
引数が「japanese」だったら「こんにちは」
引数が「english」だったら「hello」を返す関数を作成してみましょう。
参考ソース
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="common.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
common.js
function greeting(language) {
let message = "";
if (language === "japanese") {
message = "こんにちは";
}
if (language === "english") {
message = "hello";
}
return message;
}
script.js
let message = greeting("english");
alert(message);script.jsから関数を呼び出すときに、引数englishを渡しています。（japaneseでも良い）
その場合はhelloがアラート表示されます。
受け取る法の引数の名前は何でも良いです。（今回はlanguageにしました。）
渡す側の引数名と一致させる必要はありません。
引数は複数渡すことが可能です。
例 : gretting(‘引数A’, ‘引数B’, ‘引数C’)
※引数を渡す個数と引数を受け取る個数は一致させてください。
独学が難しい場合
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。
コメント