JOURNAL

【JS超入門 第3回】関数は『自動販売機』!hoge()のカッコと引数の衝撃、そして組み込み関数の威力

プログラミングを学んでいると、誰もが必ず一度は「うわっ、そういうことか!!」と鳥肌が立つ瞬間があります。

それが今回お話しする『関数(かんすう)』『引数(ひきすう)』、そして最初から用意されている便利ツール『組み込み関数』の秘密です!ここを理解すると、プログラミングの世界が一気に100倍おもしろくなります。

当時、「こんな物が最初から用意されているんかい!」と、ツッコミをした記憶があります!(全部自分で考えないといけないと思っていたので…。)

関数って何?正体は「魔法の自動販売機」

コードを見ていると、英語の後ろにかならず ()(かっこ)がついていますよね。たとえば alert()drawKuji() などです。

おバカな私は、この関数の意味と()の意味を理解するのに、随分時間がかかりトンでもない遠回りをした記憶があります…。

この 英語の後ろについている () こそが「関数(命令・道具)」の目印 です!

関数とは、ひとことで言うと「材料を入れたら、中で仕事をして、結果を出してくれる自動販売機(またはジューサー)」です。

【関数の仕組み】
() の中に材料を入れる(これを「引数(ひきすう)」と呼びます)
② 関数の中で、決められたお仕事(計算や加工)をする
③ できた結果が出てくる!(これを「戻り値(もどりち)」と呼びます)

関数のイメージ
▲ 関数のイメージ

「引数(ひきすう)」を理解したときの衝撃!

たとえば、アラートを出す alert() という関数を見てみましょう。

  • alert("こんにちは!") と書くと、画面には「こんにちは!」と出ます。
  • alert("大吉が出たよ!") と書くと、画面には「大吉が出たよ!」と出ます。

「あっ! () の中に渡した文字(材料)によって、機械の動きが変わるんだ!」と気づいた瞬間、プログラミングの霧がサーッと晴れていきます。カッコの中身は、機械に渡す「材料(パラメータ)」だったのです。

実際は、引数の概念の理解からは、少々厄介になってきます。苦労しました。ただ、そこさえ乗り越えれば、見える景色も変わりますがとにかく無理をしないで、分からない場合でもOKです、とりあえずは最初にお話しした、「分からなかったら、すっ飛ばして進めてください!」を貫いて進んでくださいね!

全部自分で作らなくていい!「組み込み関数」という最強の味方

ここからが、初心者が一番驚くポイントです。

プログラミングを始めたばかりの人は、「サイコロを振る仕組みも、時計を動かす仕組みも、ぜんぶ自分が1から数学の式を書いて作らなきゃいけないの……?」と思いがちです。

でも、安心してください。そんな必要はまったくありません!

JavaScriptには、世界中の天才プログラマーたちが作った「超便利な魔法の自動販売機」が、最初から何百個も無料で用意されています。これを『組み込み関数(くみこみかんすう)』と呼びます。

組み込み関数の例①:サイコロを振ってくれる `Math.random()`

「0から1までの間で、適当な小数をパッと出して!」とお願いできる魔法の関数です。

let dice = Math.random(); // 0.384729... みたいなランダムな数字が勝手に出る!

組み込み関数の例②:小数を切り捨ててくれる `Math.floor()`

サイコロで出た細かい小数を、キレイな整数(0, 1, 2, 3...)に丸めてくれる関数です。

let number = Math.floor(3.8); // 小数が切り捨てられて、キレイな「3」になる!

かなり言い過ぎかもしれませんが、何かをごにょごにょ作るのも必要ですが、如何にこの準備されている関数を使いこなすというのが、プログラミングの肝でもあります!

冒頭👆でお話した、「こんな物が最初から用意されているんかい!」というのは、まさにこのことだったのです。

簡単言うと、一般的に、「あっ、これがしたい!」と思った際に、それを一瞬にして実現できる仕組みのほとんどは、すでに準備されていると思っていてください。一から何かを作る必要は、ほぼありません。先駆者の天才の方々が、すでに準備してくれていますので!

引数のイメージ
▲ 引数定義方法について

合体!4つのおみくじからランダムに1つ選ぶ神ワザ

この2つの組み込み関数を組み合わせるだけで、たった1行で「0番〜3番の引き出しをランダムに選ぶサイコロ」が完成します!

// 0〜3(おみくじの引き出しの数)の中から、ランダムに1つの番号を選ぶ
let randomIndex = Math.floor(Math.random() * 4);

// ランダムに選ばれた番号の引き出しを開ける!
let result = kuji[randomIndex];

どうでしょう?難しそうな「ランダム抽選」が、最初から用意されている関数を2つ使っただけで、あっという間にできてしまいました!

プログラミングが上達する一番の極意

「やりたいことがあれば、まず『それをやってくれる便利な関数が最初から用意されていないか?』を調べること!」

これこそが、プロのエンジニアが一番大切にしている知恵です。自分で車輪を一から作るのではなく、用意されている素晴らしい道具(組み込み関数)をたくさん知って、上手に組み合わせること。それがプログラミングの本当の楽しさです。

第3回のまとめ

  • 関数 hoge():材料を入れて動かす魔法の自動販売機。
  • 引数(ひきすう)() の中に入れる材料のこと。
  • 組み込み関数Math.random() のように、最初から用意されている便利ツール。
  • 全部自力で作ろうとせず、便利な関数をどんどん使い倒そう!

次回は、「もし大吉が出たら特別な大当たりメッセージを出す」という『条件分岐(if文)』と、ボタン一発で一気に10回おみくじを引く『ループ(for文)』をマスターします。いよいよゲームらしくなってきますよ!