function(関数)の書き方と使い方

JavaScript
    function fizzbuzz(num) {

ちょちょちょっと待って・・・

なんか色々出てきて分からないのでfunctionの使い方を一度整理します。

functionって?

functionとは日本語で「関数」のこと。Excelとかで出てくるあれですね、あれです。

なんでfunction使うん?

functionはこの処理をしてね~と定義しておくと、何度も同じコードを書かなくてよくなります。

どうやって使うん?

よし、実際のコードを使いながら頭を整理します!

    function fizzbuzz(num) {
        if(num % 3 === 0 && num % 5 ===0) {
            return 'fizzbuzz' ;
        } else if(num % 3 === 0) {
            return 'fizz' ;
        } else if(num % 5 === 0) {
            return 'buzz' ;
        } else {
            return num;
        }
    }

私が最初理解できなかったところは特に引数(ひきすう)名を入れているこの部分です。

    function fizzbuzz(num) {

何が理解できなかったかってなんか意味が分からなかったんです。え、なんでそこに入れる?みたいな。

こちらの記事を読んで頭がすっきりしました!特に「引数を渡す」という表現が分かりやすかった。

JavaScriptで関数を使う方法【初心者向け】
JavaScriptで【関数(function)】を使う方法をプログラミング初心者向けに解説した記事です。基本的な構文だけでなく、引数や返り値の書き方も合わせて紹介。関数内で定義されている変数「ローカル変数」も解説。

追記(2021.1.27)

やっぱり分からなくなったので再度ググる・・・と、こちらの記事は引数の使い方がとても丁寧に解説されていて分かりやすかったです!

引数を使う理由が段階を経てまとまっているので分からなくなったらまた読んでみようと思います。

Webクリエイターの為の情報サイト | Web Programming Portal
当サイトはクリエイターの皆様の為の情報サイトです。初心者の方へ向けたHTML,CSS,JavaScript,PHP,Swift,Photoshopなどの解説から実装に必要な情報まで幅広く掲載しています。

function 変数名(引数名)の意味

「この変数名を処理するときにこの引数使ってね、この引数をもとにどんな処理するか考えてね」と私は読み替えました!

なので「function fizzbuzz(num)」はfizzbuzzの処理を判断するときはnumのとこに入れてる数字でどんな処理するか決めてね~ってことですね。

そのため以下のコードはnumが3と5で割り切れるなら「fizzbuzz」、3で割り切れるなら「fizz」、5で割り切れるなら「buzz」って言ってね、と。

で、そのあとのconsole.logの部分でnumの数字はこれやで~と伝えています。

    function fizzbuzz(num) {
        if(num % 3 === 0 && num % 5 ===0) {
            return 'fizzbuzz' ;
        } else if(num % 3 === 0) {
            return 'fizz' ;
        } else if(num % 5 === 0) {
            return 'buzz' ;
        } else {
            return num;
        }
    }

    console.log(fizzbuzz(15));
    console.log(fizzbuzz(1));
    console.log(fizzbuzz(5));
    console.log(fizzbuzz(9));

で、結果がこれね。

で、function使うのはなんで・・・?

これ何回も思いました。なんでわざわざややこしいことするん?と。

でもfunctionを使わなかったら最後に書いている

    console.log(fizzbuzz(15));
    console.log(fizzbuzz(1));
    console.log(fizzbuzz(5));
    console.log(fizzbuzz(9));

の部分で最初の「15」の分だけ処理してあとはスルーです。処理してくれません。毎回if関数を書いていかないといけなくなってしまいます。

めっちゃめんどくさいですね。

それを避けるために、コードをぶんぶん使いまわすためにfunctionを使います。

これくらいなんでまだ毎回書くこともできなくはないですが、本格的にコードを書いてたら無理ですね。

まとめ

functionは使いまわせてめっちゃ便利な子。

コメント

タイトルとURLをコピーしました