【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑤

つるぴよ

もりけん塾に入塾しました！

[blogcard url=”https://tsurupiyoblog.com/moriken-javascript-4″]

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

マンガJavaScript第１０話 関数

「関数」出た〜苦手だなぁ

ねこまる

つるぴよ

「関数」は使いこなせるようになると、何度も同じプログラムを書かなくて良くなるから便利なんだよ！

関数の基礎知識

関数の基本的な書き方は以下の通りです

function 関数名（引数） {
  //内部処理
  return 戻り値;
 }

実際にこの書き方で関数を作ってみましょう

function han(no) {
   var res= no/2;
    return res;
 }

このプログラムを元に関数について解説していきます。

①「関数名」「引数」について
・「han」の部分が「関数名」で「no」の部分が「引数」。
・「引数」は内部処理を行う際に、外部から値を受け取るための「変数」。
・「引数」を書く（）の中には「変数名」を書く。（何もない時は空白）
・「引数」を複数使いたい時は「han(no1,no2)」のように「, (カンマ）」で区切る。
・宣言した「引数」は「関数」の中でのみ有効。

②内部処理について
・「var res = no/2;」が内部処理。
・ここでは「引数」として宣言した「no」が計算式に使われている。
・内部処理は複数行書くこともできる。

③ return「戻り値」について
・「return」は「ここで関数を終了します」という宣言である。
・「関数」は「{〜}」の末尾までくるか「return」の行が実行されると、処理を終えその「関数」が呼び出された場所まで処理が戻る。
・「関数」を書く場所はどこでもOK（呼び出される場所の前でもあとでも良い）
・「 return」の後には「関数」の「戻り値」を設定することができる
・今回の例では「return」の「戻り値」として「res」が設定されている。
・「関数」の結果として「res」の値が呼び出された場所に戻る。

関数の利用

先ほど作った関数を実際に使ってみる場合例えば以下のように書きます。

var kekka = han(16);

関数「han」を引数「( 16 )」で呼び出しています。
関数「han」の内部処理は「16÷2」なので戻り値は「8」となります。
この戻り値は「 han(16)」に戻されるので結果として変数「kekka」が「8」となります。

さらに次のように利用することもできます。

var kekka = han(16)*2;

関数「han」の結果は「8」なので、「8 *2」なので、この場合の「kekka」の値は「16」となる。

マンガの中に登場するプログラムの解説

var mojiretu;  //変数の初期化

//[関数の呼び出し]
//「関数」の「戻り値」を、変数「mojiretu」にいれる
mojiretu = getMojiretu("山田",65);

document.write(mojiretu);

//[関数]  (呼び出されるまで実行されない)
//第１「引数」を、変数「name」に入れて受け取る
//第２「引数」を、変数「score」に入れて受け取る
function getMojiretu(name,score) {
  var result = name + "の点数は" + score + "です";
  return result;  //「戻り値」(関数の結果)を戻す
}

//[関数の呼び出し]
//「関数」の「戻り値」を、変数「mojiretu」にいれる
mojiretu = getMojiretu("田中",43);

document.write(mojiretu);

処理される順番に並べてみます！

var mojiretu; //変数の初期化
mogiretu = getMogiretu("山田",65);

function getMogiretu(name"山田",score65){
 var result = name"山田" + "の点数は" + score65 + "です";
 return result "山田の点数は65です”;  //　「戻り値」(関数の結果)を戻す
}

document.write(mojiretu); //　山田の点数は65です
mojiretu = getMojiretu("田中",43);

function getMogiretu(name"田中",score43){ 
　var result = name"田中" + "の点数は" + score43 + "です"; 
　return result "田中の点数は43です”; //　「戻り値」(関数の結果)を戻す
 }

document.write(mojiretu); //　田中の点数は43です

関数の色々な作り方

関数の基本的な作り方は以下のようなものです。

function 関数名(引数) {
 //内部処理
 return (戻り値);
}

その他の関数の作り方を紹介していきます。

①「引数」を持たない「関数」の作り方

function 関数名 () {
 //内部処理
 return(戻り値)
}

②「return」に何も値を設定しない場合、「戻り値」を戻さない「関数」になる
「return」に何も値を設定しない場合は「return」自体も省略できる。

function 関数名(引数){
 //内部処理
 return();
}

③「引数」も「戻り値」もない「関数」

function 関数名(){
 //内部処理
}

少し複雑な「関数」の実例

var kekka1 = menseki(0,10); //関数「menseki」を呼び出し
var kekka2 = menseki(5,10); //関数「menseki」を呼び出し
var kekka3 = menseki(10,10); //関数「menseki」を呼び出し

document.write(kekka1 + "<br>");
document.write(kekka2 + "<br>");
document.write(kekka3 + "<br>");

 function menseki(width,height) {
   //「width」(横幅) を引数１として取得
   //「height」(高さ)を引数2として取得

   if((width <= 0) || (height <= 0)) {
   //横幅か高さが0以下なら、面積は求められないので終了
   return "error!";
  }

      var res =width* height;
      return res; //計算結果を戻して終了
    }

マンガJavaScript第１１話　スコープ

JavaScriptでは「変数のスコープ」という概念があります。

例えばプログラムが長くなってくると、「関数」と「関数」が入れ子構造になったり、同じ名前の変数がいくつも出てきたりと複雑になります。
そのため変数にはそれぞれの「有効範囲」が決められています。
その範囲のことを「スコープ」と呼びます。

「スコープ」には「グローバル」と「ローカル」の2つがあるので表にまとめてみました。

[グローバルな領域]
 var globalVar = 1; //グローバル変数
    
  function kansuu() {
  [ローカルな領域]
   var loclalVar = 0; //ローカル変数
   }
  [グローバルな領域]
  var globalVar2 = 2; //グローバル変数

「ローカル」な領域では「ローカルルール」が適用されます。

「スコープ」の動作例

実際の動作例を書いていきます

var a = 10;
document.write(a); //グローバル変数「a」の値「10」が表示される
showLocal(); //「showLocal」関数が呼び出され、
            // ローカル変数「a」の値「５」が表示される
document.write(a); //グローバル変数「a」の値「10」が表示される

 function showLocal() {
  var a = 5;
  document.write(a);//グローバル変数「a」ではなく、
                       //ローカル変数「a」の値「5」が表示される
 }

for (var i = 0; i < 10; i++){
      document.write(i + "/" + calc(i) + "<br>");
       //グローバル変数「i」の値が「0,1,2,‥」と出力される
       //その際、「calc」関数の戻り値も連結して出力される
    }

    function calc(arg) {
      //グローバル変数「i」の値を、引数「arg」として受け取っている
      var result = ""; 
      for(var i = 0;i < arg; i++) {
        //ローカル変数「i」が、「0」から「arg」未満の間、処理を行う
        result += i +",";
        //ローカル変数「i」の値「0,1,2‥」が連結されて
        //戻り値として利用される
      }
      return result;
    }

マンガJavaScript１０話〜１１話　まとめ

ここまでで学んだのは以下の内容です
・関数の基礎知識
・関数の作り方
・変数のスコープについて

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら