結果はこんな感じ
sarasaraがローマ字なのは気分というか、かなにするのが面倒でそのままにしただけなので気にしないでください笑
javascriptの関数と引数
では本題です。
早速javascriptの関数と引数について解説していきます。
この辺りはプログラミング初学者の方がつまづきがちなところですので丁寧に解説していきます。
では早速冒頭で作ったコードを見ながら、いろいろ操作してそのコードの意味を考えてみましょう。
この方法は僕がよくやる学習方法です。
大まかな流れとしては以下です。
- 見本となるコードを書いて表示させる
- 色々自分で手を加えて意味を探る
- 一から自分で書いてみる
想像以上に力もつくのでめんどくさがらずお付き合いいただければと思います。
先ほどのコードに「introduce("tech")」をつけてみます。
undefined
イケメン
sarasara
というようになっているはずです。
これはtechという変数とその値が定義されていないからですね。
ポイント
undefinedが出てきた場合は ・作ってない変数を勝手に使ってないか ・スペルミスをしていないか あたりを探るといいかと思われる
ちなみに
とすると結果は
口説き
イケメン
sarasara
になります。
ではこのままintroduce("tech");をexa("tech");に変更してみます。
実行してコンソールをみてみると
Uncaught ReferenceError: exa is not defined
というエラーが出ているはずです。
今回定義されている関数はintroduceなのでそれ以外の名前で関数を作ると定義されていないぞー!と怒られるのです。
ちなみに定義されているのはこの部分ですね。
関数と引数を使う意味
上記のコードを触ってみて、どこをイジると結果が変わるのか、うまくいかないのかは少しわかってきたと思います。
この章では今回のコードの形の意味を関数と引数を使う意味も交えて説明していきたいと思います。
まずpeopleという大きなグループに箱を用意します。
今回でいうとfaceとhairになります。
箱だけ用意しておけば中身は後から好きに変えることができるのでメンテナンス性は向上します。
この箱のことを変数とプログラミングでは呼びます。
しかし箱を作ってもその箱を使って実行する処理がなければ意味はありません。
そこで関数が登場します。
関数を使うことで正義した変数を用いて特定の処理を実行することができます。
このコードの意味は大きなグループpeopleの中のfaceを表示するという処理です。
しかしこの場合だとfaceとhairを表示させたいときに
と それぞれ同じ処理を書かなければならずまた面倒になります。
プログラミングを生業とするものは常に
「同じ処理は原則まとめる」
ということを徹底するべきです。
そこでpeopleの中の何らかの要素を表示させることのできるセットを作ります。
このコードの意味は introduce("people内の箱");
を記述するだけで
みたいな書き方をせずとも同じ結果をかえしてくれるというものです。
つまりitemは箱の収集業者です。
ちなみにこの収集業者を引数といいます。
引数に入った要素は関数で使えます。
しかしこのまま実行してもこの結果は何も返ってきません。
functionで書かれた関数は 他の場所で
名前();
の処理がないと実行されないのです。
以下がその例です。
function sample() { console.log("おはよう"); }
sample();
この結果は
おはよう
です。
本題に戻ります。
つまり
を実行するためには
introduce(); の処理が必ず必要になるということです。
ではintroduce();以外を実行してみたらどうなるのでしょうか。
以下を実行してみます。
how();
結果はundefinedが返ってきます。
次にitemの存在について考えます。
以下のコードを実行するとどうなるでしょうか。
結果は
ReferenceError:itemtis not defined
で返ってきます。
functionの関数に対して箱を回収する業者を指定していないためのエラーです。
javascriptの関数と引数についてはこんな感じです。
ここからは
というようなコードを書くときの思考回路についてまとめます!
正直コードの模写などは慣れるという意味ではいいかもしれませんがコードを書くという実業務では何の意味も為しません。
どのような目的に対してどうアプローチするのかを常に意識して書くこと、既に活躍されている方がどのように考えてコードを書いているかを考えることが大事です。
今回は人別にプロフィールを出力するようなプログラムをくみたいとします。
条件としては
プロフィールは定期的に更新したいのでメンテナンス性の高いコードを書くこと
です。
以下が出力の結果となるようなプログラムを組みましょう!
たけし
21歳
65
まずは「プロフィールは定期的に更新したいのでメンテナンス性の高いコードを書くこと」を守るためにも
name=
age=
gram=
というような要素の欄は必須になることがわかります。
(値を書くだけで出力されるようになる)
そしてそれぞれを別に出力するのも面倒なので 要素のいずれかを指定したら勝手に出力されるようにしたいですね。
console.log("要素");
以上の考え方より まずは要素格納の箱を作り、該当する箱ならば出力するというコードを一つ書けばいいようにする方向性が定まります。
var People {
name:たけし;
age:21歳;
gram:65;
}
function show(target){ console.log(People[target]); }
show("name");
show("age");
gram("65");
こんな感じで記述すればOKですね!!
今回はjavascriptの引数と関数について説明しながら、実際にコードを考えるところまで取り組みました。
どんどん書いてみて使いこなせるようになっちゃいましょう!