— javascript, tutorials — 1 min read
前回は難しかったですね。
オブジェクトに関してはなんども繰り返し説明しますので、現時点ではモヤモヤしていて大丈夫です。そのうちその霧が晴れます。
グローバルオブジェクト、スコープ、this
などについてはぼんやり「そんなのあるんだな〜」くらいに考えておいてください。
+JavaScript道場:五日目 / オブジェクトの解説続き
さて、今日は関数です。
function
(関数)オブジェクトは、()
で実行可能なオブジェクトまずは上記二つの記事を読んでみてください。内容がすっと理解できる人は、この先を読む必要はありません。 MDNを読んで理解できない箇所は積極的に質問してくださいね!
関数の定義は function
キーワードと、それに続く以下の内容で構成されます。
{ }
でくくる$
と _
が使えるなど。1// hogeという名前の関数を定義する2// 処理を`定義`しただけなので、実際に呼び出すまでは実行されない3function hoge() {4 // 実際の処理を書く5}6 7// fugaという名前の関数を定義する8// 処理を`定義`しただけなので、実際に呼び出すまでは実行されない9function fuga() {10 // 実際の処理を書く11}12 13hoge() // hoge という名前の関数を呼び出す14fuga() // fuga という名前の関数を呼び出す
関数を定義しておくと、名前を指定して何度でも繰り返し実行できます。
関数は、処理(コンピュータへの命令)を記述したメモです。このメモの通りに動作してね!というコンピュータへの依頼は、メモとは別に行います。これが、関数の「定義」と「実行」の違いです。
関数は一度定義
すれば何度でも繰り返し使える
1hoge() // hoge という名前の関数を呼び出す(実行する)2hoge() // hoge という名前の関数を呼び出す(実行する)3hoge() // hoge という名前の関数を呼び出す(実行する)
( )
の中に書く,
で区切る1// consoleで試してみよう2 3function square (number) {4 return number * number;5}6 7square(5) // 「5」が引数 「5」は関数内では number という名前がついている8square(12) // 「12」が引数 「12」は関数内では number という名前がついている
1function sayHello (name, age) {2 return "hello, " + name + "さん 年齢は" + age + "です"; // `+`記号で文字列を結合できる3}4 5sayHello("松田", 34) // "hello, 松田さん 年齢は34です"
関数は、小さな別のプログラムです。何か一連のまとまった処理をさせます。 他にもプログラムを読みやすくしたり、なんども使うコードを簡単に呼び出せるようにするためのものです。
よく、関数の説明で下記のようなコードを見ます。
1// 関数のサンプルコード12 3function add(num1, num2) {4 return num1 + num25}6 7add(1, 2) // 3と出力される
心のツッコミ(普通に足し算したらええやん!?)
1// 関数のサンプルコード22 3function hoge() {4 console.log("hello")5}6 7hoge() // "hello"と出力される
心のツッコミ(普通にconsole.logしたらええやん!?)
こんなサンプルコードを見たら、 「このコードにいったい何の意味があるのだろう?」 と思うでしょう。関数の書き方はわかるけど、役割なに?
実際、このコードには意味がありません。
関数の定義の仕方の説明としては意味があっても、何を関数にするか?という疑問には答えてくれません。
関数を定義するということ、関数に名前をつけるということはアプリケーションの設計そのものです。 意味がある関数を定義し、意味ある関数名をつけることがアプリケーションの設計の始まりです。
「歯を磨く」という言葉には
という一連の動作が期待されています。
毎朝、子供に
1「おはよう!学校行く前に2 1. 歯ブラシを水で濡らし3 2~9 (省略)4 10. 口を水で濯ぐ5してね!」
と言うのはしんどいので、「歯を磨きなさい」で済ませたいですよね。 この一連の動作に名前をつけて置くと楽チンです。それが関数です。
ちゃんと動作するコードです。電子レンジだとすると・・・
1// console で動作を確認しよう2 3var いも = { "名前": "サツマイモ", "味": "美味しい", "重さ(g)": 200, "温度": 20 }4var ココア = { "名前": "森永", "味": "とても美味しい", "重さ(g)": 180, "温度": 10 }5 6var 電子レンジ = {7 "チンする": function (温めるもの) {8 // 注:現実世界では上昇温度は`温め時間`と`温める食材の質量`に比例する9 温めるもの.温度 += 100 // 温度を + 100 する10 return 温めるもの11 }12}13 14電子レンジ.チンする(いも)15電子レンジ.チンする(ココア)16 17console.log({いも})18console.log({ココア})
プログラム中で呼び出された関数が呼び出し元に対して渡す値のこと。
関数は return
で値を返します。
1// 戻り値を利用したプログラムの例2function add(num1, num2) {3 return num1 + num24}5 6var num = add(3, 5) // return された結果が 変数: num に格納される7 8console.log(num) // 8
()
で実行可能なオブジェクト関数の「参照」と「実行の違い」を覚えてください。
1console.log // 参照2console.log("hello") // 実行
1var hoge = console.log // オブジェクトの参照を `hoge` という変数にセット2hoge("こんにちは!!") // console.log("こんにちは!!") と同じ
こちらに回答して下さい!
https://forms.gle/6PriBUPMiiEhBG817
下記の情報をデータとして表現すると・・・?
プロパティ名(春のチーズケーキ(さくら味)3個入) | プロパティ値 |
---|---|
名前 | 春のチーズケーキ(さくら味)3個入 |
名称 | 洋菓子 |
内容量 | 3 |
原材料名 | チーズ, 小麦粉, 砂糖, バター, 水飴, サクラペースト, 液鶏卵, 食塩, 香料, 安定剤(ローカスト), 着色料(コチニール、赤キャベツ), 酸味料, (原材料の一部にゼラチンを含む) |
賞味期限 | 2016.04.24 |
保存方法 | 直射日光、高温多湿を避けて涼しい場所で保存してください。 |
販売者 | 名称: 株式会社 資生堂パーラー NKS 住所: 東京都中央区銀座8-8-3 |
お客様窓口 | 0120-4710-04 |
このケーキの情報をJavaScriptのコードで表すと?
1var cake = {2 "名前": "春のチーズケーキ(さくら味) 3個入",3 "名称": "洋菓子",4 "内容量": 3,5 "原材料名": [6 "チーズ", "小麦粉", "砂糖", "バター", "水飴", "サクラペースト",7 "液鶏卵", "食塩", "香料", "安定剤(ローカスト)", "着色料(コチニール、赤キャベツ)", "酸味料",8 "(原材料の一部にゼラチンを含む)"9 ],10 "賞味期限": "2016.04.24",11 "保存方法": "直射日光、高温多湿を避けて涼しい場所で保存してください。",12 "販売者": {13 "名称": "株式会社 資生堂パーラー NKS",14 "住所": "東京都中央区銀座8-8-3"15 },16 "お客様窓口": "0120-4710-04"17}
次回はこちら JavaScript道場:7日目 / 関数について❷