JavaScriptで大きく躓いた関数をミキサーで表してみた

愛と勇気のいいとこ取り

EROエンジニアのきのピーです。

この記事は、未経験からエンジニアになり、入社2年目で年収600万円を達成するまでの道を書いたブログです。

今回はJavaScriptで大きく躓いた事です。

これまでやっていたHTMLやCSSって、上から順に書いた通りに動いてたんで、書けば書くほど良かったんです。

ただ、JavaScriptになると一気に違いました。

関数とか数学用語が出て来て、意味が分からんくなりました。

そして、速攻で躓きました。

そもそも関数って何だか分かりますか？

芸術大学出身の僕には何のことかさっぱりです。

以下の記事で言ってることが分かりやすかったですが

【中学数学】関数とは何ものなのか？？〜意味と定義を5分でふりかえる〜 | Qikeru：学びを楽しくわかりやすく

関数とは「何かをぶち込んだら何かがでてくるマシーンみたいなもの」です。

上記の意味を意識しておくだけで全然理解が違ったと思います。

せっかくなんで「ミキサー」でミックスジュースを作る関数を作って見ようと思います。

let mixer = function(water, fruits_1, fruits_2, fruits_3,){
       let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
       return mixjuice;
  }
mixer('500mlの','オレンジ', 'りんご', 'パイナップル');

かなり素人くそい関数ですけど、最初はね。こんなもんで良いと思います。

ミキサーの中に「水、フルーツ1、フルーツ2、フルーツ3」を入れると

500mlのミックスジュースが出て来る関数です。

意味を一つずつ解説して行きます。

最初に関数を書きます。

let mixer = function()

functionはミキサー本体と思ってください。

さて、ミックスジュースに必要なものは、まずは水ですよね。

let mixer = function(water)

水だけでは、ミックスジュースは出来ないから

フルーツを3つ足します。

let mixer = function(water, fruits_1, fruits_2, fruits_3)

これで、入れる物（引数）が完成です。

ミックスジュースという事なんで全て足します。

let mixer = function(water, fruits_1, fruits_2, fruits_3,){
       let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
  }

functionの後に{}が付きましたが、ミキサーを動かした時の処理を書きます。

メチャクチャ適当ですが、とりあえず全部足してます。

さて、ミックスジュースが一応出来ましたが、まだミキサーの中にミックスジュースが入ったままです。

ミキサーからミックスジュースを出す（返す）には「return」が必要です。

let mixer = function(water, fruits_1, fruits_2, fruits_3,){
       let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
       return mixjuice;
  }

これでミックスジュースを出す（返す）関数が出来ました。

上記の関数の定義はマニュアルを記載したようなもので、実際には動いてません。

動かすには、実際に水と果物を入れます。それが以下です。

mixer('500mlの','オレンジ', 'りんご', 'パイナップル');

これをJavaScriptのconsole.logで見てみると

「500mlのオレンジりんごパイナップルのミックスジュース」って文言がConsoleで出て来ます。

※こんな感じ

文字列をくっつけただけの関数ですが、こんな感じで関数（何か出て来るマシーンみたいなもの）が出来ます。

僕は、超絶ハイパー頭が悪いので、returnの使い方が半年以上出来ませんでし。（アホすぎる。。）

今でも関数を使うのは、相当に悩んでいますが、昔よりかはマシになっている気がします。

次回はJavaScriptで作って遊んだソースコードを紹介します。

それでは、グッドブラック！