Reactを使うためのJavaScriptの超入門⑨（関数って何🙄❓❓（戻り値））
前回の第８回では関数について説明しました😊
🌹 ①関数に渡す値のことを「引数」という
🌹 ②渡した値（引数）が処理される。
例えば、「太郎」を渡すと「太郎さん」が表示される
🌹 ③「引数」はいくつでも設定できる
次は「太郎」と入力されたら「太郎さん」と返ってくる変数を作ってみましょう🤗✨✨
それを聞くと、「あれ、それって前回やったのと同じだ」と思うかもしれません🙄
実はちょっと違い、これが大事なんです😉📕
🍀前回 「太郎」と入れると「太郎さん」が表示される
🍀今回 「太郎」と入れると「太郎さん」が返ってくる
まず、ポイントとして、
🌲「値が返ってくる」＝「画面上に表示される」 ではない
ということです😲📝
ちなみに「返ってくる値」のことを「戻り値」と言います😉🍀
では、どこに返ってくるのでしょうか🙄❓
それは、この関数自体に返ってきます⭐
ちょっとわかりにくいですね😅
ここで「名前を入力すると「さん」をつけて返す関数」を考えてみましょう（関数Aとします😊）
次のような流れになります🏃♂️
💎 ①関数Aに「太郎」を入れる
💎 ②関数Aに「太郎さん」が返ってくる
⇒ この結果、関数Aを見ると「太郎さん」となっている✨
では、実際にコードを見てみましょう🌈
<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>
<script>
function ReturnName(name){
return name + 'さん'
}
let a;
a = ReturnName('太郎');
document.write(a);
</script>
</body>
</html>
ここを見てみましょう
function ReturnName(name){
return name + 'さん'
}
この中で、特に下の部分に注目してみましょう😄📝
return name + 'さん'
この「return」は「name + 'さん'」が返ってくるという意味です😲📕
つまり、「戻り値」です📱
では、返ってくるところも見てみましょう🌹
a = ReturnName('太郎');
まずは、太字の部分を見てください😃🍀
この「ReturnName('太郎')」に「太郎さん」が返ってきます🙄📝
そして、以前のおさらいですが、このaという変数に「太郎さん」を入れています🍁（「代入」と言います）
なお、こちらも以前のおさらいですが、変数を使うには、「変数を使いますよー」という「変数の宣言」が必要でした😉🌈
そして、それは「let」を使います🍀（記事⑤です📝）
let a;
最後にここまでで、画面上に「太郎さん」が表示されるでしょうか🙄❓
ここまでですと「太郎さん」は表示されません😲❗
なぜなら変数aに「太郎さん」を入れただけだからです📝
最後に「document.write()」を行うことで、初めて画面上に表示されるのです🎶（「document.write()」については記事④です）
document.write(a);
繰り返しになりますが、「返ってくる」とは「画面上に返ってくる」ということではないんですね😉
このファイルを開くと次のように表示されます🥰
いかがでしたでしょうか❓
本日は、この辺りで終了いたします😄💌
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
