JavaScriptの関数と基本的な書き方【JavaScriptの書き方入門】

変数と同じく、プログラミングをするなら知っておきたい考え方に「関数」もあります。メソッドなどと呼ばれることもあります。

関数の厳密な定義を調べると、とっても難解な話になってしまいます。
実際に動かしながら、どのようなものか感覚を掴んでみましょう。

• 関数とは
• JavaScriptで関数を使う

関数とは

関数は、何らかの機能を持った箱のイメージです。
何かをその箱に投入すると、設定された機能で別の形に変換してくれます。

例として、箱に「投入されたものを全て足す」という機能を持たせてみましょう。
これが関数tasizanです。

関数tasizanに数字の「3」と「5」を投入すると、機能が実行されて、結果である「8」という数字が出てきます。

JavaScriptで関数を使う

「投入されたものを全て足す」tasizanという箱（関数）。

これをJavaScriptで書くと、下記のようなコードになります。
test.jsの下の方に書いてみましょう。

tashizan( 3, 5 );

function tashizan( num1, num2 ) {
    const result = num1 + num2;
    document.write( result )
}

保存してブラウザで確認すると、ページ上に「Hello World8」と表示されます。
このコードで何をしているのか、順番に見ていきましょう。

まず、1行目。
ここではtashizanという箱（関数）に入れたいものを決めています。
今回の場合は3と5ですね。

2行目。
ここではtasizanという関数を作るよ！と宣言しています。
（）内には関数内で変数のように扱える引数を設定します。

今回の場合はtashizan( 3, 5 )で入れた数字が、num1とnum2の中身になります。
tashizan()の中身を入れ替えれば、num1とnum2の中身も変わります。

最後に、function { }の中括弧（波括弧）の中部分。
ここに、関数に行って欲しい処理を書きます。
tashizanがどんな機能を持った箱（関数）かを決めている部分です。

書いてあるのは変数の項目で使った式とほぼ同じですね。

この関数の作り方を表したのが、下図の構文と呼ばれるものです。
リファレンスや書籍で見たことがあるかたもいらっしゃるでしょう。

ちなみに、２つのパートは順番を逆にしても動きますよ。