処理に名前をつける

01 / 05

同じ手順を何度も書いている

プログラムを書いていると、まったく同じ数行を何度も書きたくなる場面が出てくる。

コピーして貼ればとりあえず動く。でも直したくなったとき、貼った場所を全部直すことになる。1か所でも忘れたら、そこだけ古いまま残ってしまう。

そこで使うのが関数。処理のかたまりに名前をつけて、その名前で呼び出せるようにするしくみだよ。

02 / 05

function 名前() { 処理 } と書くと、{ } の中身に名前がつく。これが関数の定義。

定義しただけでは何も起きない。名前() と書いて呼び出すと、はじめて中身が動くよ。

function greet() {  console.log("おはよう");}greet();

実行結果

おはよう

03 / 05

一度定義しておけば、何回でも呼べる。console.log を3行並べる代わりに、呼び出しを3回書けばいい。

中身を直したくなったら、定義した1か所だけ直せば全部の呼び出しに効くよ。

function ring() {  console.log("カーン");}ring();ring();ring();

実行結果

カーン
カーン
カーン

04 / 05

関数の { } の中には、これまで習ったものを何でも書ける。繰り返しも条件分岐も入れられるよ。

何行あっても、呼び出す側から見れば名前ひとつ。中で何をしているかを気にせず使えるのが関数のうれしいところだね。

function showMenu() {  console.log("=== きょうのこんだて ===");  for (let i = 1; i <= 3; i++) {    console.log(`${i}しなめ`);  }}showMenu();

実行結果

=== きょうのこんだて ===
1しなめ
2しなめ
3しなめ

05 / 05

よくあるつまずきは、定義しただけで呼び出していないというもの。何も表示されないときは、まず 名前() の行があるか確かめよう。

名前は中身が想像できるものにするのがコツ。showMenu なら「メニューを出すんだな」と読める。

それじゃあ、定義して呼んでみよう。