JavaScriptの関数と基本的な書き方【JavaScriptの書き方入門】 | SkillhubAI(スキルハブエーアイ)

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

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

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

関数とは

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

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

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

JavaScriptで関数を使う

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

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

tashizan( 3, 5 );

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

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

まず、1行目。
ここではtashizanという箱(関数)に入れる材料を決めて、「あなたの持つ機能で処理してね(結果を出してね)」という指示です。 今回の場合、材料は35ですね。
file

2行目。
ここではtashizanという関数を作るよ!と宣言しています。
()内には関数内で変数のように扱える引数を設定します。
file

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

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

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

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

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