JavaScript：お手伝いしているプログラミングスクールで聞かれた質問【functionって何？】

JavaScript：お手伝いしているプログラミングスクールで聞かれた質問【functionって何？】

プログラミングスクールの生徒さんといろいろお話している中で出てきた『よく理解できなかった事』について、この際まとめておこうの第二弾。
具体的にはこんな内容です。

functionは処理をひとまとめに管理する記号

どう表現するのがベストなのか悩みましたけど、初心者向けに「わかりやすさ」を重視するなら多分こうでしょう。
「ここからここまでが1セットね」というマークです。下のようなスクリプトがわかりやすい例でしょう。

let num = 0;
console.log(test());

num = 1;
console.log(test());

num = 2;
console.log(test());

function test(){
  if (num == 1){
    num = 10;
  }else if(num == 2){
    num = 20;
  }else{
    num = 30;
  }
  return(num);
}

ログには順番に 30 /10 /20 が記載されます。
2行目では num = 0 の時にfunction test() を実行しているので function test(){}内のelseが通って30を返し...とそれぞれが動いた結果です。
functionを一切使わないで書こうとするとこんな形になります。

let num = 0;
if (num == 1){
  num = 10;
}else if(num == 2){
  num = 20;
}else{
  num = 30;
}
console.log(num);
num = 1;
if (num == 1){
  num = 10;
}else if(num == 2){
  num = 20;
}else{
  num = 30;
}
console.log(num);
num = 2;
if (num == 1){･･･以下略

numの変わる数だけfunctionの中身を書いていくなんて大変ですよね。
なので、functionを使って『オリジナル関数セット』を作成し色んな所で使いまわします。

function以外にもある関数セット

functionは自分で組み立てる関数セットですが、JSにはあらかじめ動作が登録されている関数セットもあります。

num = [0,1,2];
for(let n of num){
 if (n == 1){
   num = 10;
 }else if(n == 2){
   num = 20;
 }else{
   num = 30;
 }
 console.log(num);
}

例えば上のようなfor文などがこれにあたります。具体的に言うと、forという関数には次の動作が指示されています。

ちなみに、同じ回答をするコードをforeach関数で記載するとこんな感じになります。

num.forEach(function(n){
  if (n == 1){
    num = 10;
  }else if(n == 2){
    num = 20;
  }else{
    num = 30;
  }
  console.log(num);
});

functionで作成したオリジナル関数はそれを利用するファイルに書かなくてはいけない？

いえ、そんなことはありません。
プログラミングは基本的に様々なモジュールを作ってそれを色んな所で使いまわせるように設計していきます。

同じコードを何回も書くのも大変ですし、その書いたコードにエラーが発生した場合の修正となれば更に大変になります。
そうならないように、同じ動作をまとめた『オリジナル関数セット＝function』なのですから同一ファイル内に記載していなくても呼び出して使うことができます。

import { test } from './module'

let num = 1;
console.log(test());

1行目がmodule.js内に記載されているtestというfunctionを利用することの宣言です。

追加解説

for という命令はJSにプリセットされた関数であるため「どこからでも」呼び出すことができます。
一方で、functionで記載された命令はオリジナルであるためJSは「どこにあるか」を指示してもらわないと探し出せません。この【場所を指示する行為】が1行目のimport文になります。
同一ファイル内は基本的な検索場所なのでimportする必要はありません。

functionはどこに書いてもいい？

function内に記載したfunctionなど特殊な物を除き、基本的にはどこに書いても大丈夫です。
ただし「アッチにソレ、コッチにアレ」という状態ではコードの管理が大変になるのでルールを作る事が多いです。
自分ルールの時もありますし、チーム内ルールである事もあります。

例えば、私ルールではfunctionはjsファイルの後半か独自関数専用ファイル内に「何のコードか」の説明書きとともにまとめて配置しています。後半に書くか専用に書くかは使いまわせる範囲により選択しています。

num = 1;
console.log(test());

num = 2;
console.log(test());

//そのほかＪＳを読み込んだ時に実行するスクリプトをツラツラと記載...
  .
  .
  .

/* --------------------
 * numの値に対して適切な変換値を返す
 * --------------------*/
function test(){
  let ans;
  if (num == 1){
    ans = 10;
  }else if(num == 2){
    ans = 20;
  }else{
    ans = 30;
  }
  return(ans);
}

functionが存在しないJavaScriptファイルの動作

JavaScriptに限らずですが、プログラミング言語は基本的に上から順に処理されていきます。
functionで関数にした命令については【呼び出す】という動作をセットしない限り実行されません。
※Vue.jsでは『'test' is defined but never used (test関数使ってないよ) 』なんてメッセージが出てきて怒られます。

まとめてみるとこんな感じです。
■ function 関数

■ function なしパート

まとめ

functionについては「便利にまとめておく独自関数」という理解でいいと思います。

その他JavaScriptについて受けた質問については個々まとめて行きます。