![見出し画像](https://assets.st-note.com/production/uploads/images/40271252/rectangle_large_type_2_6ccdfbb217e01148957a2a1b4607c040.png?width=1200)
Reactを使うためのJavaScriptの超入門⑨(関数って何🙄❓❓(戻り値))
前回の第8回では関数について説明しました😊
🌹 ①関数に渡す値のことを「引数」という
🌹 ②渡した値(引数)が処理される。
例えば、「太郎」を渡すと「太郎さん」が表示される
🌹 ③「引数」はいくつでも設定できる
次は「太郎」と入力されたら「太郎さん」と返ってくる変数を作ってみましょう🤗✨✨
それを聞くと、「あれ、それって前回やったのと同じだ」と思うかもしれません🙄
実はちょっと違い、これが大事なんです😉📕
🍀前回 「太郎」と入れると「太郎さん」が表示される
🍀今回 「太郎」と入れると「太郎さん」が返ってくる
まず、ポイントとして、
🌲「値が返ってくる」=「画面上に表示される」 ではない
ということです😲📝
ちなみに「返ってくる値」のことを「戻り値」と言います😉🍀
では、どこに返ってくるのでしょうか🙄❓
それは、この関数自体に返ってきます⭐
ちょっとわかりにくいですね😅
ここで「名前を入力すると「さん」をつけて返す関数」を考えてみましょう(関数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によってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊