スポンサードリンク

重複部分を関数にする

プログラミングでは「同じコードは書かない」という考え方が重要です。同じコードがプログラム中に何回も使われる場合は、まとめて1つの関数(function ファンクション)にして、関数名で呼び出すことを考えてみましょう。

前回までに作成したJavaScriptのプログラムでも重複して書かれている部分があります。追加、更新、削除のたびに以下のコードを呼び出していましたね。この部分を関数にしてみましょう。

  document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";

JavaScriptにはあらかじめ用意されている関数と、ユーザーが自分で定義できる関数があります。今回はユーザー定義関数を作る方法を学びます、

【1】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。


var database;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  document.getElementById("txtPrefCd").onblur = function (){blur(this);}
  document.getElementById("txtPrefCd").onfocus = function (){focus(this);}
  document.getElementById("txtPrefName").onblur = function (){blur(this);}
  document.getElementById("txtPrefName").onfocus = function (){focus(this);}
  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}

  dbConnect();
  dataDisplay();
}


function dbConnect() {
  //データベースに接続する関数
  database = new ActiveXObject("ADODB.Connection");
  database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
  alert("データベースに接続しました。");
}


function dbClose() {
  //データベースを切断する関数
  database.Close();
  database = null;
  alert("データベースを切断しました。");
}


function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}


function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}


function dataDisplay() {
  //データを表示する関数
  var mySql = "select * from T01Prefecture order by PREF_CD";
  var recordSet = database.Execute(mySql);

  var tempHtml="";
  document.getElementById("dataDisplay").innerHTML = "";

  while (!recordSet.EOF){
    tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
    recordSet.MoveNext();
  }

  document.getElementById("dataDisplay").innerHTML = tempHtml;
  recordSet.Close();
  recordSet = null;
}


function dataInsert() {
  //データを追加する関数
  with (document.form1) {
    var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
  }
  sqlDisplay(mySql);
  database.Execute(mySql);
  dataDisplay();
  alert("追加しました。");
}


function dataUpdate() {
  //データを更新する関数
  with (document.form1) {
    var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
  }
  sqlDisplay(mySql);
  database.Execute(mySql);
  dataDisplay();
  alert("更新しました。");
}


function dataDelete() {
  //データを削除する関数
  with (document.form1) {
    var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
  }
  sqlDisplay(mySql);
  database.Execute(mySql);
  dataDisplay();
  alert("削除しました。");
}


function sqlDisplay(_mySql) {
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}



【解説】

まず新たにsqlDisplay()という関数を作りました。SQL文を画面に表示するだけの関数です。

function sqlDisplay(_mySql) {
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

あとは何度か出てくる以下の部分を
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
sqlDisplay(mySql);に置き換えるだけです。

関数を呼び出す時に引数として変数mySqlを指定しています。mySqlにはSQL文が文字列として入っていますので、SQL文を渡していることになります。

呼び出された関数 sqlDisplay(_mySql){省略} は「_mySql」で値を受け取っています。「mySql」の値が「_mySql」に渡されたと考えてください。変数名は両方とも「mySql」にすることも違う名前にすることもできます。今回はわざと「_」(アンダーバー)を付けて区別しました。

変数にはもともと有効範囲があります。変数mySqlは呼び出し元の関数内でしか有効ではありませんので、呼び出し先の関数では改めて変数を定義する必要があります。だから同じ名前でも違う名前でもかまわないのです。

・mySqlは dataInsert() {省略} 内で有効
・_mySqlは sqlDisplay(_mySql){省略} 内で有効


今回の場合は1行のプログラムですので、関数にしたメリットをあまり感じないかもしれません。しかし例えば100行のプログラムを1行の関数名だけで呼び出せるとしたらどうでしょう?プログラムが簡単になることが想像できると思います。

もう一つ関数にするメリットがあります。修正があった時に一箇所だけの変更で済むということです。

実はこれまでも自分で作った関数を使っていました。データを表示する時 dataDisplay() という関数を呼び出していましたね。もし関数にしていなかったら、追加、更新、削除のたびに同じプログラムを書かなければならなかったのです。

スポンサードリンク






JavaScript初心者入門講座TOPへ