【JavaScript】JavaScriptの基礎復習7 関数化してみる【簡単コピペ】

JavaScriptなどプログラム言語で使われる関数。プログラムにおける関数とは

与えられた文字や数値に対し、定められた処理を行って結果を返す機能のこと。

となってます。なので、たとえば今まで文字を表示するのに「document.write」や「innerHTML」を使って書いてきました。それを自分で関数作成することで、プログラムの簡素化や見やすいコードにすることができます。また、関数化することでメンテナンスや変更がしやすくなるメリットもあると思います。活用することも多いので、絶対に覚えておきたい項目だったりします。

ということで、今回は関数化にチャレンジ。

前回のコードを使ってみます

var a = 1;
if (a != 0) {
    console.log("ゼロ以外ですよ");
} else {
    console.log("ゼロですよ");
}
var b = 1;
if (a == 0 && b == 1) {
        console.log("and条件一致！");
}
if (a == 0　|| b == 1) {
    console.log("or条件一致!");
}

前回は条件分岐とコンソールログ、アラートでしたね。

コンソールログ(console.log)を関数化してみよう

関数はfunction(){};で作成（定義）する

関数化するにあたって、関数の書き方を覚えましょう。ベースとなる書き方は

function 関数の名前(関数が受け取る値・文字などの入れ物){
    関数の実行内容
};

という感じになります。

簡単に解説すると

関数の名前

関数の名前は、自分で名付けることができます。ただし、コンピュータが元々すでに使っている名前（命令など）を使うことはできないので注意しましょう。

関数が受け取る値・文字などの入れ物

パラメータといわれる部分。関数の実行内容で受け取った数値や文字を使用することができるのは、ここで設定してあげているから。逆にいうと、実行内容に数値や文字を使わない場合は、この入れ物部分はカラでも問題なかったりします。

関数を使うには

関数を使う場合は

関数の名前(関数に渡したい文字や数値)

と書きます。このあたりは実際にコンソールログの関数化で書いてみるので、今はさらっと読んでもらえばOKです。

コンソールログを関数化

では、上記の書き方に従って関数化してみたいと思います。関数の名前は「output」、受け取る入れ物は「text」という名前としました。

function output(text){
    console.log(text);
};

関数化はこれで完了です！　簡単ですね。で、この関数を使う場合は

output(表示したい内容);

と書きます。先ほどの解説で書いた文字よりも、こっちの方が実感できるんじゃないでしょうか？　さて、これを前回のコードに組み込んでみましょう。

var a = 1;
if (a != 0) {
    output("ゼロ以外ですよ");
} else {
    output("ゼロですよ");
}
var b = 1;
if (a == 0 && b == 1) {
    output("and条件一致！");
}
if (a == 0　|| b == 1) {
    output("or条件一致!");
}

function output(text){
    console.log(text);
};

無事、同じ結果がでました。ちなみにchromeでのコンソールの出し方については

【JavaScript】JavaScriptの基礎復習6 条件分岐 if とコンソールログ、アラートダイヤログ【簡単コピペ】

JavaScriptといいつつ、まだそれ以前の「プログラミングの基礎」という感じも否めないですが、この辺もおさえておかないといけない...

tks-kan.com

で確認してくださいね。

関数の実行内容をalertに変更してみる

関数化したときの利点に、メンテナンスのしやすさがあります。ということで、今回はそれをやってみましょう。タイトル通りにコンソールログからアラートに変更してみます。といっても内容は簡単！

function output(text){
    alert(text);
};

これだけです。ね、変更やメンテナンス簡単でしょ？

内容をinnerHTMLに変更、さらに改行も処理に加える

次にページ上に表示するようにしてみましょう。innerHTMLを使用してみます。

function output(text){
    var a = document.getElementById('ele');
    var t = a.innerHTML;
    t += text + "<br>";
    a.innerHTML = t;
};

無事できました。このように、関数の実行内容は複数行書いてもOKですし、中で「a」や「t」のように入れ物を用意することもできます。つまり、関数の中にプログラムを書いて複雑な処理ができるわけです。関数の中身については、今までやってきたもので作られているので復習がてら確認してみてくださいね。

まとめ

今回は関数についてでした。このように何度も使われる処理を関数化してしまうことで、コードの簡素化やメンテナンスのしやすさにつながります。是非、覚えて今後のプログラミングに生かしてくださいね。最後にコードを載せておきますので、いつも通りコピペでどうぞ！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JavaScript</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="ele"></div>
    <script>
    var a = 1;
    if (a != 0) {
        output("ゼロ以外ですよ");
    } else {
        output("ゼロですよ");
    }
    var b = 1;
    if (a == 0 && b == 1) {
            output("and条件一致！");
    }
    if (a == 0　|| b == 1) {
        output("or条件一致!");
    }

    // function output(text){
    //  console.log(text);
    // };

    // function output(text){
    //  alert(text);
    // };

    function output(text){
        var a = document.getElementById('ele');
        var t = a.innerHTML;
        t += text + "<br>";
        a.innerHTML = t;
    };

    </script>
</body>
</html>