MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

function(関数)を勉強したから、わかりやすく教えてみる。

   

最近、ドットインストールで「javascript」について勉強し始めました。

今まで完成されたコードを見て「あー、なるほどね」とか「はいはい、そういうことね」とか言ってたけど…

今回が始めての勉強です(わーい)

ドットインストールさんいつもありがとう!独学で頑張ってます!

functionとは何か偉そうに教えてみる

インプットしたらさ、その時点で「0」じゃなくなるわけじゃん?ということはさ、誰かに向けて偉そうに語ってもいいんだよね?

よーし、席に着けー。授業始めるぞー

なんてね。ちょっと言ってみただけです。一緒に勉強しましょ?

 

javascriptのレッスンで、「if」とか「while」とかが登場します。

それは初心者の僕でも理解できたんですが、12番目のレッスン「関数」から急に難しくなる気がします。

↑これですね。

  • functionの後の「a」は関数の名前
  • { }の中に「a」の関数で実行する処理を書く

となります。そして、「a」を実行する時は、関数の下に「a()」と書くだけ。

これが基本の形です。実行する処理はなんでもOK。

「アラートしてね!」という命令をすると、ポップアップで出てくるダイアログを表示させることもできます。

function-1

 

alertのカッコの中にあるのはただの文字列(””,”で囲まれているもの)なので、他の処理をさせることももちろん可能です。

こうすれば、10と10を計算して20を表示してくれます。ちなみに、(”10 + 10″)と書くと、「10 + 10」という文字列が表示されます。

function-2

即時関数を使ってみる

基本の形を覚えた後は、その他の形についてもすんなりと理解することができるはずです。

例えば、即時関数。これは、基本の形をただ省略しただけの関数です。

わざわざ「処理を実行してね!」という命令をしなくても、処理を実行させることができます。

 

使い方は簡単で、関数をすべてカッコで囲み、そのあとにカッコをつけるだけ。

function a()からのコードがすべて一つの関数になるので、そのあとにカッコをつければ処理が実行されるわけです。

もちろん、すでに処理が実行されているので、他に処理を実行させるための関数は必要ありません。先ほどのa()が消えてますよね?

処理を実行する関数を書かなくても、すぐに処理を実行してくれるので、即時関数です。

引数を使ってみる

ドットインストールの中で「オプション」という表現が使われているように、引数は関数のオプションみたいなものです。

引数を主体として使うこともできます。

function-hikisuu

 

この引数を使うとコードがすっきりするので、積極的に使っていきたいところです。

では、こちらの「likefood」という”僕の好きな食べ物”(文字列)を表示させる関数で引数を使ってみましょう。

function-3

 

「僕の好きな食べ物」という文字列の後に、引数を使って、いくつか好きな食べ物を表示させてみます。

使い方は、引数の名前を決めて、その引数に与える値や式を入れるだけ。ここでは文字列を入れてみます。

  1. saladaという引数を作る
  2. “僕の好きな食べ物”の後に、saladaを足す
  3. saladaの中に”ポテトサラダ”という文字列を入れる
  4. likefoodを実行する

という流れです。もちろん、ポテトサラダ以外でもOKです。

function-4

 

また、こちらの引数は、いくつも作ることができます。

function-6

無名関数(匿名関数)にする

この関数自体がデータ型なので、「var i = 0」のように、変数に入れることができます。

関数名が左にずれただけですね。簡単。一つの式になるので、最後に「;」を忘れずに。

function-5

 

なんでわざわざこんなことをするのかというと、色々と便利だからです。

例えば、先ほどの関数の他に、「僕の嫌いな食べ物」を表示する関数を作ったとします。コードはこちら。

「僕の嫌いな食べ物」が表示されました。と、ここで、好きな食べ物と嫌いな食べ物を両方表示したくなったとします。

こんな感じですべてのコードを書いてもいいんですが、これを100回使うとなると、コードがごちゃごちゃしてわかりづらいですよね。

 

でも、関数を変数に入れると、この長いコードがすっきりするんです。

「food」という変数の中に、好きな食べ物を表示する関数と、嫌いな食べ物を表示する関数を入れました。

呼び出したい時は、これまでと同じです。

これでOKですね。好きな食べ物が表示された後すぐに、嫌いな食べ物が表示されます。

このように一度変数に入れておくと、後半で必要になった時にすぐに使うことができます。

 

これをやっておかないと、こんなごちゃごちゃしたコードを使う羽目に…(ガクブル)

まとめ

functionの使い方を覚えたので、これからはフリーランスで生きていきます。

ワードプレスで使われている難しそうな関数も、なんとなくわかってきました。

面接でも「functionが使えるので月給25万円は欲しいところです」と、一歩も引かずに交渉できるよね、きっと。

よーし!次はアプリ開発だな?!(まだ早い)

 

ドットインストールで勉強するなら、こちらの記事も要チェック。

atom-1
これは便利すぎる。なぜ今まで使ってなかったんだろうか。 今までコードエディターはMac対応のBrackets(ブラ

 - プログラミング学習