JavaScript

javascriptの関数と引数

2019年12月15日

 
javascriptの関数と引数がわかんねぇ!!
という方も多そうなので今日はjavascriptの関数と引数について紹介しようと思います。
 
 
今回はこんなコードを用意しました。
 
 
var people={
    face:"イケメン",
    hair:"sarasara"
}
function introduce(item) {
    console.log(people[item]);
}
introduce("face");
introduce("hair");
 
 

結果はこんな感じ

 

sarasaraがローマ字なのは気分というか、かなにするのが面倒でそのままにしただけなので気にしないでください笑

 

javascriptの関数と引数

では本題です。

早速javascriptの関数と引数について解説していきます。

この辺りはプログラミング初学者の方がつまづきがちなところですので丁寧に解説していきます。

てんし君
大丈夫!僕も最初はチンプンカンプンだった!

 

では早速冒頭で作ったコードを見ながら、いろいろ操作してそのコードの意味を考えてみましょう。

この方法は僕がよくやる学習方法です。

大まかな流れとしては以下です。

 

  1. 見本となるコードを書いて表示させる
  2. 色々自分で手を加えて意味を探る
  3. 一から自分で書いてみる

 

想像以上に力もつくのでめんどくさがらずお付き合いいただければと思います。

先ほどのコードに「introduce("tech")」をつけてみます。

 

var people={
    face:"イケメン",
    hair:"sarasara"
}

function introduce(item) {
    console.log(people[item]);
}
 
introduce("tech");
introduce("face");
introduce("hair");
 
 
実行してコンソールを見てみましょう。
 

undefined
イケメン
 sarasara

というようになっているはずです。

これはtechという変数とその値が定義されていないからですね。

 

ポイント

undefinedが出てきた場合は ・作ってない変数を勝手に使ってないか ・スペルミスをしていないか あたりを探るといいかと思われる

 

ちなみに

var people={
    face:"イケメン",
    hair:"sarasara",
    tech:"口説き"
}

function introduce(item) {
    console.log(people[item]);
}
 
introduce("tech");
introduce("face");
introduce("hair");

 

とすると結果は

口説き
イケメン
 sarasara

になります。

 

ではこのままintroduce("tech");exa("tech");に変更してみます。

実行してコンソールをみてみると

 

Uncaught ReferenceError: exa is not defined

というエラーが出ているはずです。

今回定義されている関数はintroduceなのでそれ以外の名前で関数を作ると定義されていないぞー!と怒られるのです。

ちなみに定義されているのはこの部分ですね。

 

function introduce(item) {
    console.log(people[item]);
}

 

関数と引数を使う意味

 

上記のコードを触ってみて、どこをイジると結果が変わるのか、うまくいかないのかは少しわかってきたと思います。

この章では今回のコードの形の意味を関数と引数を使う意味も交えて説明していきたいと思います。

 

 
var people={
    face:"イケメン",
    hair:"sarasara"
}

 

function introduce(item) {
    console.log(people[item]);
}

 

introduce("face");
introduce("hair");
 
 

まずpeopleという大きなグループに箱を用意します。

今回でいうとfaceとhairになります。

 

箱だけ用意しておけば中身は後から好きに変えることができるのでメンテナンス性は向上します。

この箱のことを変数とプログラミングでは呼びます。

 

しかし箱を作ってもその箱を使って実行する処理がなければ意味はありません。

そこで関数が登場します。

関数を使うことで正義した変数を用いて特定の処理を実行することができます。

 

introduce(console.log(people.face));
 
 

このコードの意味は大きなグループpeopleの中のfaceを表示するという処理です。

しかしこの場合だとfaceとhairを表示させたいときに

 

introduce(console.log(people.face));
introduce(console.log(people.hair));
 

と それぞれ同じ処理を書かなければならずまた面倒になります。

プログラミングを生業とするものは常に

「同じ処理は原則まとめる」

ということを徹底するべきです。

 

そこでpeopleの中の何らかの要素を表示させることのできるセットを作ります。

 

function introduce(item) {
    console.log(people[item]);
}

 

このコードの意味は introduce("people内の箱");

を記述するだけで

 

introduce(console.log(people.face));
introduce(console.log(people.hair));

 

みたいな書き方をせずとも同じ結果をかえしてくれるというものです。

 

つまりitemは箱の収集業者です。

ちなみにこの収集業者を引数といいます。

引数に入った要素は関数で使えます。

しかしこのまま実行してもこの結果は何も返ってきません。

functionで書かれた関数は 他の場所で

 

名前();

の処理がないと実行されないのです。

 

以下がその例です。

function sample() { console.log("おはよう"); }

sample();

 

この結果は

おはよう

です。

 

本題に戻ります。

つまり

function introduce(item) {
    console.log(people[item]);
}

を実行するためには

 

introduce(); の処理が必ず必要になるということです。

 

ではintroduce();以外を実行してみたらどうなるのでしょうか。

以下を実行してみます。

 

function introduce(item) {
    console.log(people[item]);
}

how();

 

結果はundefinedが返ってきます。

 

次にitemの存在について考えます。

 

以下のコードを実行するとどうなるでしょうか。

 
var people={
    face:"イケメン",
    hair:"sarasara"
}

 

function introduce() {
    console.log(people[item]);
}

 

introduce("face");
introduce("hair");
 

 

結果は

ReferenceError:itemtis not defined

で返ってきます。

functionの関数に対して箱を回収する業者を指定していないためのエラーです。

 

javascriptの関数と引数についてはこんな感じです。

 

ここからは

 
var people={
    face:"イケメン",
    hair:"sarasara"
}

 

function introduce(item) {
    console.log(people[item]);
}

 

introduce("face");
introduce("hair");
 

というようなコードを書くときの思考回路についてまとめます!

 

正直コードの模写などは慣れるという意味ではいいかもしれませんがコードを書くという実業務では何の意味も為しません。

 

どのような目的に対してどうアプローチするのかを常に意識して書くこと、既に活躍されている方がどのように考えてコードを書いているかを考えることが大事です。

 

今回は人別にプロフィールを出力するようなプログラムをくみたいとします。

条件としては

プロフィールは定期的に更新したいのでメンテナンス性の高いコードを書くこと

です。

 

以下が出力の結果となるようなプログラムを組みましょう!

たけし

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の引数と関数について説明しながら、実際にコードを考えるところまで取り組みました。

どんどん書いてみて使いこなせるようになっちゃいましょう!

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-JavaScript

S