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

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

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

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

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

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

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

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

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

 

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

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

<script>
    function a() {

    }
</script>

↑これですね。

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

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

<script>
    function a() {

    }
    a(); // aを実行してね!
</script>

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

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

<script>
    function a() {
        alert("これは「a」という関数で呼び出されたダイアログです");
    }
    a();
</script>

function-1

 

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

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

<script>
    function a() {
        alert(10 + 10);
    }
    a();
</script>

function-2

即時関数を使ってみる

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

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

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

 

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

<script>
    (function a() {
        alert("これは「a」という関数で呼び出されたダイアログです");
    })();
</script>

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

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

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

引数を使ってみる

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

<script>
    function a(ここが引数です) {

    }
    a(上の引数に与える値とか式とかを書く);
</script>

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

<script>
    function a(hikisuu) {
        alert(hikisuu);
    }
    a("これがhikisuuの値です");
</script>

function-hikisuu

 

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

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

<script>
    function likefood() {
        alert("僕の好きな食べ物");
    }
    likefood();
</script>

function-3

 

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

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

<script>
    function likefood(salada) {
        alert("僕の好きな食べ物→" + salada);
    }
    likefood("ポテトサラダ");
</script>
  1. saladaという引数を作る
  2. “僕の好きな食べ物”の後に、saladaを足す
  3. saladaの中に”ポテトサラダ”という文字列を入れる
  4. likefoodを実行する

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

function-4

 

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

<script>
    function likefood(salada,ramen,otsumami) {
        alert("僕の好きな食べ物→" + salada + ramen + otsumami);
    }
    likefood("ポテトサラダ ","味噌ラーメン ","枝豆 ");
</script>

function-6

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

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

    var likefood = function (salada,ramen,otsumami) {
        alert("僕の好きな食べ物→" + salada + ramen + otsumami);
    };
    likefood("ポテトサラダ ","味噌ラーメン ","枝豆 ");

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

function-5

 

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

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

    var dislikefood = function (salada,ramen,otsumami) {
        alert("僕の嫌いな食べ物→" + salada + ramen + otsumami);
    };
    dislikefood("きのこサラダ ","きのこラーメン ","きのこ ");

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

    var likefood = function (salada,ramen,otsumami) {
        alert("僕の好きな食べ物→" + salada + ramen + otsumami);
    };
    likefood("ポテトサラダ ","味噌ラーメン ","枝豆 ");
    var dislikefood = function (salada,ramen,otsumami) {
        alert("僕の嫌いな食べ物→" + salada + ramen + otsumami);
    };
    dislikefood("きのこサラダ ","きのこラーメン ","きのこ ");

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

 

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

    var food = function() {
        likefood("ポテトサラダ ","味噌ラーメン ","枝豆 ") 
            +
        dislikefood("きのこサラダ ","きのこラーメン ","きのこ ")
    };

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

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

food();

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

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

    <div class="food">
        <script>
            food();
        </script>
    </div>

 

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

    <div class="food">
        <script>
            var likefood = function (salada,ramen,otsumami) {
                alert("僕の好きな食べ物→" + salada + ramen + otsumami);
            };
            likefood("ポテトサラダ ","味噌ラーメン ","枝豆 ");
            var dislikefood = function (salada,ramen,otsumami) {
                alert("僕の嫌いな食べ物→" + salada + ramen + otsumami);
            };
            dislikefood("きのこサラダ ","きのこラーメン ","きのこ ");
        </script>
    </div>

まとめ

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

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

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

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

 

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

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!