Javascript【関数】とは？初心者向け

Javascriptの関数が分かるようになると、
WEBサイトの画面上に、自分で作った仕組で、
動きを変化を起こすことが可能になります。

ぜひともできるようになりたいところです。
ただ途中でややこしくなりがちです。ひとつひとつ理解していきましょう。

「関数」よく使う記述法

「関数」では、この以下の記述法をよく使います。
便利だからです。覚えちゃいましょう。

${ }

「ドルマーク」と「ニョロかっこ」です。

↓どう使用するのか。

console.log(name+”は”+age+”歳です”);
これでもいいのですが、記述が${ }を使用したほうが簡単ですみます。

ディスプレイには

太郎は25歳です

と出力されます。

両端を囲んでいるのはです。
文章を「」バッククォーテーションで囲みます。

私はバッククォーテーションと、'「アポストロフィ」を間違えてしまい、
約1時間ほどコードの前で右往左往した経験があります。
気をつけましょう。

「」バッククォーテーション
半角モード「SHIFT」を押しながら「＠」で出現します。

Javascript「関数」とは？

数学でもでてきました「関数」。
言葉だけ聞くと何だか難しそうなイメージがありますね。

関数はよく自動販売機として説明されます。
お金を入れる→自動販売機→ジュースが出てくる。

何かを入れて、関数を通すと、別のモノがでてくる。
そんなイメージを持つといいと思います。

Javascriptにおける「関数」というのは、
いつくか処理をまとめたものと考えることができます。
まとめた処理の中に何かを入れると、別のものが出てくる。

「関数」の定義とは？

記述はこんな感じです。

const 定数名　= function() {

　処理
　処理
　処理

};

function（）と出てきなたら、それは関数です。
function（）は関数の決まった形です。
※function：意味、関数
なんだよあの（　）と思うでしょう。後で使います。

「定数名」は自分で決めます。

実際にコードを書いてみましょう。
定数名をintroductionとして自己紹介をしてみます。

関数を使うと、function（）{ };
にょろカッコ内の処理をまとめて行うことができます。
そしてfunction（）｛　｝;を書いただけでは処理は動きません。

上記の関数なら、

introduction();

↑「関数の呼び出し」を書くことによって処理が実行されます。
応用することによって、クリックすれば動き出すなどの関数をつくることができます。

「関数の呼び出し」を書かないと関数は実行されません。

改めて説明すると、
定数「introduction」の中に関数が代入された形です。
↓
const introduction = function(){

　console.log(“こんにちは”);
　console.log(“太郎と言います。”);
　console.log(“みかんが好きです。”);

};

関数をかく。はじめは「関数の呼び出し」をかくの忘れがちです。

Javascript「アロー関数」とは？

Javascript（ES6）から出来るようになった、新しい関数の書き方です。

functionの部分を簡略化してかけるようになりました。

const introduction = function() {

　console.log(“こんにちは”);
　console.log(“太郎と言います。”);
　console.log(“みかんが好きです。”);

};

↓

const introduction = ()=> {

　console.log(“こんにちは”);
　console.log(“太郎と言います。”);
　console.log(“みかんが好きです。”);

};

「function()」→「()=>」
左のように表記することができるようになりました。
アロー関数、矢印です。

書き方は両方分かっていたほうがいいです。
すでに書かれているコードは、function()で書かれています。

Javascript関数「引数」とは？

引数（ひきすう）と読みます。
楽しかった関数が、引数の登場で少し複雑になります。

関数に謎の（ ）があったと思います。
その中に記入します。
「引数名」は自分で決めます。

簡単に言うと引数とは関数に与える追加情報のようなものです。

const 定数名 =(引数名) => {

//処理

};

定数名();

↑
「関数の呼び出し」の( );の中に入れた値が、
引数を代入され、関数の中へ入っていきます。

実際のコードを書いてみましょう。

ディスプレイには

太郎と言います。

と出力されます。

太郎の動きです。
“太郎”→　name　→　${name}
パン！パン！パン！的な感じです。

全くの同意見です。
しかし「引数」があるとうことが、
後に便利な状況を生み出すことになります。

Javascript関数「引数」を2つ使う

関数は引数を複数受け取ることもできます。
( )内の引数は「,」コンマで区切ります。
引数は左から順番に「第1引数、第2引数、…」と呼ばれます。

const introduction = (name,age) => {

　処理

};

今回なら、
第1引数がname 第2引数がage
です。

引数が2つ設定しました。
2つの情報を渡すことができます。
↓

ディスプレイには

太郎と言います。
25歳です。

と出力されます。

足し算も可能です。

ディスプレイには、

1212

と出力されます。

Javascript関数「戻り値」とは？

const addition = (number01,number02) => {

　　console.log(number01+number02);

};

addition(854,358);

先ほどの記述の「戻り値」は1212です。
この戻り値を、「return 値」と書くことで、
受け渡し元で、「戻り値」を受け取ることができます。

const 定数名 =(引数名) => {

　　return値；

};

定数名();
↑
受け渡し元

「戻り値」が出てくると複雑になって混乱を生み出す場合もあります。
1つ1つゆっくり考えれば理解できます。

個人的なイメージは
パン！パン！パン！ギューん！
ギューん！で（変化した値が元へ場所へやってきます）

ディスプレイには

10

が、表示されます。

「戻り値」として返ってきた「5＋5」の10が、元のaddition(5,5);←10に入ります。最初その感覚がなかなかつかめないと思います。

ちなみに、

addition(5,5);

const total = addition(5,5);

console.log(total);

↓記述は省略できます。

const total = addition(5,5);

console.log(total);

最初、一気にまとめてしまうと分かりにくい場合は、1つ1つ記述することをおすすめします。

Javascript関数「return」の注意事項

returnは「戻り値」を返すだけでなく「関数」の処理を終了させる性質も持ちます。そのためreturnの後にある関数内の処理は実行されません。

先ほどのコードに加えて説明するなら、

return下、｛　｝以内にあるconsole.log();は実行されません。
returnの処理の後は実行されません。

Javascript関数「スコープ」とは？

「スコープ」と言うのは適用される範囲です。
ここからここまでは有効。これ以降は無効。
関数の引数や、関数内で定義した定数や変数はその関数の中でしか使うことができません。

目で見た方が分かりやすいです。

例1↓

const introduction = () => {

　const name = “太郎”;

　〇　定数nameが有効な範囲

}

　×　定数nameが有効じゃない範囲

例2↓

const name = “太郎”;

const introduction = () => {

　〇　定数nameが有効な範囲

}

　〇　定数nameが有効な範囲

const name = “太郎”; をどこで定義したかで有効な場所は変わります。
関数内ならで定義したなら、nameは関数内でのみ有効です。
あえて関数内でのみ有効な定数をつくるなどして使います。