見出し画像

Reactを使うためのJavaScriptの超入門⑧(関数って何🙄❓❓②)

前回の第7回では関数について説明しました😊

🍀 ① 関数は「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 + '出身です。');


このファイルを開くと次のように表示されます🥰

画像1


いかがでしたでしょうか❓


本日は、この辺りで終了いたします😄💌


なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨


そのReactについて実践的な情報共有をするオンライン勉強会12月18日(金)に開催されます😊🍀


↓ 詳しくはこちら
「Tech Stand #2 React Native」


Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨


サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊