Reactを使うためのJavaScriptの超入門⑦（関数って何🙄❓❓①）
前回の第６回ではオブジェクトについて説明しました😊
①オブジェクトはいろいろな要素が入った集合体です。
例 A保育園
🍀年少クラス ⇒ さくら組
🍀年中クラス ⇒ もも組
🍀年長クラス ⇒ たんぽぽ組
②それぞれの要素は「プロパティ」と呼ばれます。
本日は関数について説明していきます🤗
関数はある処理を行うためのプログラムのかたまりです📕
具体的にイメージをしていきましょう🌈
🍀 例１ ある数字をいれたら、その２倍が返ってくる処理
入れる数字 １ ⇒ 返ってくる数字 ２
入れる数字 100 ⇒ 返ってくる数字 200
🍀 例2 名前をいれたら、「さん」をつけて返してくれる
入れる文字 太郎 ⇒ 返ってくる文字 太郎さん
入れる文字 花子 ⇒ 返ってくる文字 花子さん
では、この例2の「さん」を返してくれる処理を作ってみましょう🥰
<!DOCTYPE html>
<html lang= "ja">
<head><title>タイトル</title></head>
<body>
<script>
function ReturnName(name){
document.write( name + 'さん');
}
ReturnName('太郎');
</script>
</body>
</html>
この部分に注目してみましょう🤗✨
function ReturnName(name){
document.write( name + 'さん');
}
関数の構造は
function 関数名 (引数){
処理
}
となっています🙄🍀
なんだか難しそうですが、一つずつ見ていくのでご安心ください😄📝
まずは「function」についてです🌹
function 関数名 (引数){
こちらは関数を作るよーという決まり文句です⭐
ちなみに「function」は「機能、はたらき」という意味です😄🍀
決まり文句なので覚えてしまいましょう😃📕
続いて、関数名です😉
function 関数名 (引数){
function ReturnName(name){
こちらの「ReturnName」は私が適当に名前をつけただけです😊
なので、「ReturnSanName」や「SanName」など、わかれば何でも大丈夫です😄🌹
続いて、引数の前に「処理」を見てみましょう。
function 関数名 (引数){
処理
}
document.write( name + 'さん');
この関数は「 name + 'さん'」を表示するという処理を行います😉🍀
（document.write( )についてご不明な場合は④の記事をご覧ください😊）
では、ここで、「name」とは何でしょう？それが、引数です🙄
function ReturnName(name){ ← この「name」の部分
少しずつイメージをつかんでいきましょう😄📕
まずは、IT用語辞典からです✨
引数とは、プログラム中で関数やメソッド、サブルーチンなどを呼び出すときに渡す値のこと。渡された側はその値に従って処理を行い、結果を返す。（以下、省略）
まだまだイメージが湧きにくいですね😅
この部分を見てください😄🌲
ReturnName('太郎');
こちらは「ReturnName()」という関数を実行している部分になります😲🌹
これはこの関数に「太郎」という文字を渡しているところになります💌
渡された「太郎」という「name」は次の処理が実行されます🍀
document.write( name + 'さん');
結果、このファイルを開くと次のように表示されます😉⭐
まさに、「太郎」を入れたことで、「さん」をつけて、「太郎さん」と返されているのです😊✨✨
いかがでしたでしょうか❓❓
本日は、この辺りで終了いたします😄💌
なお、このJavaScriptを発展させ、「React」を使うと、より高度なWebアプリを作ることができるようになります🤗✨✨
そのReactについて実践的な情報共有をするオンライン勉強会が12月18日（金）に開催されます😊🍀
↓ 詳しくはこちら
「Tech Stand #2 React Native」
Reactによってどんなことができるのだろう❓とご興味をもたれた方、参加費は無料ですので、ぜひぜひ参加してみてください🤗✨✨
いいなと思ったら応援しよう！
