どうも、Keiです。
今回はJavaScriptの関数について言語化していきます。
こちらの知識が前提となります。
関数とは
特定のタスクを実行するためのコードのブロック。
いちど関数を定義することで、何度でもその関数を呼び出して同じ操作を繰り返し行うことが出来る。
こうすることで、同じコードを何度も書く必要がなくなり、整理整頓しやすい。
Webサイト上では、ボタンのクリック動作、情報の更新、フォームのバリデーション、アニメーションとインタラクティブなエフェクトなどを実装する際に用いられる。
関数の作り方 - function
関数を作るためには、まず名前を決める。
そのあとに（）を書いて、その中に関数が行う仕事を書く。
function hello() {
console.log("こんにちは！");
}
関数の使い方 - hello();
作った関数を”呼び出す”には、以下のように書く。
hello(); // 画面に「こんにちは！」と表示される
また、ちょっとした情報を受け取ることもできる。
例えば、人の名前を受け取って、その人に向けて挨拶することが出来る。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("kei"); // 画面に「こんにちは、keiさん！」と表示される
整理してみよう。
function greetの後に続く「（）」には関数が行う仕事を書く。
ということは、（name）は名前を受け取るという仕事をする意味になる。
つまり、このときgreerは、
①自分が”kei”という名前が入った入れ物を持っていると認識する
②仕事である（name）の中に持っている自分が持っている名前を入れる
③console.log内の”name”という部分がgreetによって"kei"に置き換えられる
という一連の流れで与えられた仕事を行う
もっとざっくり言うといちいち全部「こんにちは、keiさん！」と書くのが面倒なので、
「こんにちは、〇〇、さん！」の〇〇だけをとっかえひっかえすれば楽だということ。
関数は計算もできる
function add(a, b) {
return a + b;
}
let result = add(5, 3);
console.log(result); // 画面に「8」と表示される
分解して解説してみる。
①（）の中のaとbは、入れ替え自由な入れ物
② return a + b;は、aとbで足し算しろという命令
③let result = add(5, 3);でaは５、bは３に置き換えられた
④console.log(result);は、計算式の「＝」みたいなものなので答えである8を出力する
まとめ
関数は何度も変更や同じことを行う必要があることに対して、「その部分だけを変更する」仕事を与えるもの。
ちょっと待てよ…何度も同じことを行う必要があるものを楽に…？
このブログの最初の挨拶のくだりも関数で簡略化できるのでは…？
や っ て み た
function hello(name) {
console.log("こんにちは！” + "name" + " です。");
}
hello("kei");
function greet(theme) {
console.log("今回は、" + theme + "について言語化していきます。");
}
theme("JavaScriptの関数");
//こんにちは！keiです。と表示された
//今回は、JavaScriptの関数について言語化していきます。と表示された
便利いいいいいいいｲｲｲｲｲｲｲｲｲｲ！！！！！！！！！！！
