Photo by
wataridori225
Reactを使うためのJavaScriptの超入門⑧（関数って何🙄❓❓②）
前回の第７回では関数について説明しました😊
🍀 ① 関数は「function」で始める。
🍀 ② 関数名やどんな処理かを書く。
🍀 ③ 「引数」を入れるとそれを使って処理が行われる。
今回は、この関数のうちの「引数」について、もう少し慣れていこうと思います🤗
前回は次のような関数を作りました😃📕
🌹「名前を入れると（引数）、「さん」をつけて返す」関数
例 「太郎」を入れる ⇒ 「太郎さん」と返ってくる。
この入れるもの（引数）は「名前」という一つの情報でした🙄
でもこの「引数」、いくつでも設定できるんです😲❗
では、
🌹①「名前」と②「年齢」と③「出身地」を入れると（引数）、
「○○さんは△△歳で□□出身です。」と返す関数を作ってみましょう😉
例 「太郎」、「30」、「北海道」を入れる
⇒ 「太郎さんは30歳で北海道出身です。」と返ってくる😲
では、コードを見てみましょう😄
<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>
<script>
function ReturnName(name, age, home){
document.write( name + 'さんは' + age + '歳で' + home + '出身です。');
}
ReturnName('太郎', 30, '北海道');
</script>
</body>
</html>
まずは、この部分を見てください😃🌹
function ReturnName(name, age, home){
document.write( name + 'さんは' + age + '歳で' + home + '出身です。');
}
前回のおさらいからです。
「ここから関数です」という決まり文句が「function」でした📕
function ReturnName(name, age, home){
そして、「ReturnName」が関数名になります✨✨
次の部分が処理でした😊
document.write( name + 'さんは' + age + '歳で' + home + '出身です。');
これは、「name + 'さんは' + age + '歳で' + home + '出身です。」という表示を行う処理になっています😉🌈
では、「name」、「age」、「home」は何でしょう🙄❓❓
これが引数（渡される値）でしたね🤗🍀
実際の処理を確認してみましょう😊✨
ReturnName('太郎', 30, '北海道');
このように、「name」、「age」、「home」として、それぞれ「太郎」、「30」、「北海道」が渡されています😉🌈
これにより、処理が実行されます🤗
document.write( name + 'さんは' + age + '歳で' + home + '出身です。');
このファイルを開くと次のように表示されます🥰
いかがでしたでしょうか❓
本日は、この辺りで終了いたします😄💌
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
