最新！JavaScript入門講座ー関数の基本をわかりやすく解説！

プログラムにはあるまとまった機能を簡単に使いまわしたい、ということが多々あります。こういったときは関数というものを定義して使用します。
こうすることで、何度も何度も同じことを書きまくる必要がなくなります。

また、関数はそれだけではなくコードを見やすくするという側面もあります。初心者の方は一つの鬼門になりうるかもしれません。

この記事では、関数の基本をわかりやすく解説していきます。

本記事のペルソナ

関数について学びたい方
コードを関数化したい方
プログラミング初学者の方

第19回配列の繰り返し

第21回引数と返り値

関数の解説
1. 関数とはなにか？
2. 基本的な関数の例
まとめ
参考文献

関数の解説

関数とはなにか？

まずは、関数について解説していきます。
関数とは、任意のコードの塊で自分で定義することが可能です。繰り返し実行したい機能を関数化させることで、何回でも呼び出して繰り返し実行させることができます。

また、関数化させることによってコードも何をしているのか見えるようになります。これは、コードが長くなればなるほど効果が増します。皆さんが今後開発していくことになると、必ず出てきます。

書き方の例

function 関数名(){
実行したい処理;
実行したい処理;
実行したい処理;
実行したい処理;
….
}

関数名();

上の例が関数の一番基本的な書き方です。functionは予約後で関数を定義するときにつけます。その中に、実行したい処理を書いていきます。
その後、関数呼び出しを行います。JavaScriptでは、ただ関数を定義しただけでは実行はされません。実行するには、呼び出す必要があります。それが最後の部分です。

基本的な関数の例

では、実際のサンプルを見ていきましょう。

let railway = ["東急電鉄","京王電鉄","小田急電鉄","京成電鉄","東武鉄道","西武鉄道"];

function printRailway(){
    for(let i = 0;i < railway.length;i++){
        console.log("------------------");
        console.log(`私鉄会社 No.${i+1} : ${railway[i]}`);
        console.log("------------------");
    }
}

printRailway();

$ node func.js

------------------
鉄道ランク 1 : 東急電鉄
------------------
私鉄会社 No.1 : 東急電鉄
------------------
------------------
私鉄会社 No.2 : 京王電鉄
------------------
------------------
私鉄会社 No.3 : 小田急電鉄
------------------
------------------
私鉄会社 No.4 : 京成電鉄
------------------
------------------
私鉄会社 No.5 : 東武鉄道
------------------
------------------
私鉄会社 No.6 : 西武鉄道
------------------

実行するとこのようになります。処理全体を関数にし、呼び出しをすることで関数が実行されます。

function draw(){
    console.log("|\\");
    console.log("| \\");
    console.log("|  \\");
    console.log("|   \\");
    console.log("|    \\");
    console.log("|     \\");
    console.log("|      \\");
    console.log("|       \\");
    console.log("|        \\");
    console.log("|         \\");
    console.log("|          \\");
    console.log("|           \\");
    console.log("--------------");
    console.log("");
}

for(let i = 0;i < 5;i++){
    draw();
}

$ node func.js

|\
| \
|  \
|   \
|    \
|     \
|      \
|       \
|        \
|         \
|          \
|           \
--------------

|\
| \
|  \
|   \
|    \
|     \
|      \
|       \
|        \
|         \
|          \
|           \
--------------

|\
| \
|  \
|   \
|    \
|     \
|      \
|       \
|        \
|         \
|          \
|           \
--------------

|\
| \
|  \
|   \
|    \
|     \
|      \
|       \
|        \
|         \
|          \
|           \
--------------

|\
| \
|  \
|   \
|    \
|     \
|      \
|       \
|        \
|         \
|          \
|           \
--------------

続いては三角形をコンソールへ表示するコードです。このようなコードを何回も書くのは面倒ですよね？そういったときに、それ専用の関数を作れば、いつでも呼び出すだけで同じ処理を行うことができます。

一度作ればあとは使いまわせる、これも関数のメリットです。