データベースを使ったアプリケーションを作ろう①-2

Node.js

前回の記事で、SQlite3のデータベースのファイルを作成しました

今回はそのデータベースにアクセスするプログラムをNode.js のExpressを使って作成していこうと思います

Expressをつかってデータベースにアクセスしよう

ということでExpressをつかっていきます

一から作るのは面倒なのでExpressGeneratorを使います

ターミナルで

express -v ejs sample01app

としてアプリケーション名sample01appでプロジェクトを作成します

そして、同じフォルダ内にDBBrowserでデータベースを作成しす

SQlite3のパッケージをnpm でインストールしよう

では、ExpressでSQLiteにアクセスするために「SQlite3」のパッケージをインストールしましょう

ターミナルを開いてコマンドを実行しましょう

npm install sqlite3

あとは、どんどんコードを書いていきましょう

テンプレートファイルとスクリプトを書きましょう

まずはテンプレートファイルの作成です

viewフォルダーにあたらしいejsファイルを作成しましょう

自分は今回alldata.ejsというファイルを作成しました

コードは以下の通りです

テーブルタグで表を作っています

レコードの数だけデータを並べるために、for文を使っています

今回扱うデータはオブジェクトの配列になるので、

オブジェクトの配列のデータを一つずつ並べています

<% var obj = content[i] %>でレンダリング時に受けとったオブジェクトをobjという変数にi番目のデータを格納しています

for文ですのでiの値がどんどんプラスされていき、レコードの数だけデータが並ぶ形になります

例えば、<td class=”id”><%= obj.id %></td>で、オブジェクトのidを抽出しています

このあたりはオブジェクト形式の配列を理解しておく必要があります

続いて、スクリプトです

まず、モジュールをロードします

今回新しく利用するのはSQlite3のモジュールです

const sqlite3 = require(‘sqlite3’); ということでここでロードしています

あとは

const db = new sqlite3.Database(‘sample01data.db’); 

これでデータベースのオブジェクトを作成しています

引数にはデータベースのファイル名を入れましょう

アプリケーションのフォルダ内にない場合はルートを書く必要がありますが、今回は同じフォルダ内にデータベースがあるので、ファイル名だけでOKです

そして、7行目以降でルーティングの処理をしています

serializeシリアライズとは

ルーティングの処理の中で最初に行っているのが、データベースオブジェクトのシリアライズです

db.serialize(()=>{ }) この引数の中の関数の中でデータベースの処理を行います

そうすることで、データベースのクエリを順番に実行するようになります

要するに、同時に複数の処理をしないためにこのような書き方をするわけです

今回のような単体でしかクエリを実行しない場合は気にする必要はないのですが、複雑な処理をしようとした場合は、同時に行うと不具合が生じるばあいがあります

そこで、このdb.serialize(関数)の処理を行い、非同期でのデータベースの処理を行います

レコードの取得を行おう

つづいて

db.all(“select * from customerData”,(err,rows)=>{処理})

でデータベースからデータを抽出してデータの処理を行っています

db.all(クエリ,関数);で処理をします

db.allはデータすべてをまとめて取り出すことができます

“select * from customerData”の部分がクエリです

SQLについては今回は詳しく説明しませんが、

*(アスタリスク)にするとすべてのデータということになります

これによってデータベースのcustomerDataのすべてのデータを条件なしで抽出してそれを第2引数のrowsの中に各レコードのデータをオブジェクトにしたものが入るわけです

あとは、このデータをレンダリング時にテンプレートに受け渡してWebページに表示することになります

最後に本体のapp.jsを修正しましょう

まだこのままだとルーティングの処理が完了していません

最後にapp.jsに修正を加えます

alldata.jsをモジュールとしてロードしてアドレスへ割り当てる処理を追加します

9行目のvar alldataRouter = require(‘./routes/alldata’)

25行目のapp.use(‘/alldata’, alldataRouter);を追加してルーティングの処理が完成します

これでプログラムを起動して、localhost:3000/alldataにアクセスすると次のような画面が表示されます

今回は検索もなくすべてのデータを抽出しただけです

次回以降で検索をしたり、新しいレコードを追加したりと順次機能を付け加えていきたいと思います

顧客管理はちょっと題材として重たい内容だったので動画の中身はもう少しライトな内容となっていますが、学べる知識は同じです

ぜひ、動画も参考になさってください

コメント

  1. Hiroyuki Naito より:

    最初画面に顧客データがまったく表示されず、半分訳のわからないままソースをながめていたら、
    下記に気づき修正したら無事に顧客データが表示されました。

    前回作成したデータベースのTable名とemailのフィールド名がソースでは違っていました。

    alldata.js
    9行目:customerData→kokyakuData

    alldata.ejs
    22行目:mail→email

    データベースが扱えるようになるのは、自分でも大きな進歩だと思います。
    今後ともよろしくお願いいたします。

    • Kikujiro より:

      こんにちは。
      ありがとうございます。
      ご指摘いただいたところは修正いたしました。

      アプリケーションにおいてデータベースは相当重要だとおもいます。
      これからもよろしくお願いします。

  2. HNaito より:

    少し文法的に引っかかってしまったので、質問させていただきます。

    alldata.ejsの17行目のiの値をで表示させると確かに0, 1, 2が入っていますが、

    を見たときには、変数iにはcontentオブジェクトが順番に入っていくと思っていました。

    データベースのレコードの場合は、この構文でいつもレコード番号が得られると思って
    いいのでしょうか。

    • Kikujiro より:

      for in はinの後ろに入るデータの形式によって扱いが変わります
      // 配列 [{…},{…},{…}]
      const data=
      [{ id: 1, name: ‘Kiku Jiro’, mail: ‘maru@examlpe.com’, age: 35 },
      { id: 2, name: ‘Kiku Taro’, mail: ‘sankaku@example.com’, age: 30 },
      { id: 3, name: ‘ABC DEF’, mail: ‘marusankaku@example.com’, age: 25 }]
      // オブジェクト {…, …, …}
      const object = { id: 1, name: ‘Kiku Jiro’, mail: ‘maru@examlpe.com’, age: 35 }

      for (var i in data) { // 配列の場合は i は 0から1ずつ増える
      console.log(i)
      }
      for (var i in object) { //オブジェクトの場合 iに入るのはインデントではなく、オブジェクトの中身が順に入っていく
      console.log(i)
      }
      これを試してもらうとわかると思いますが、inの後ろが配列の場合はiに入るのは0,1,2…とインクリメントされた数字が入ります。
      inの後ろがオブジェクトの場合はオブジェクトの中身が順に入っていく形になります。

  3. HNaito より:

    間違って次回のサンプルコードの質問をしてしまいましたが、

    ご教示いただいたサンプルコードで、配列のインデックスが取得されることを確認いたしました。
    またalldata.jsにconsole.log(rows)を追加して、データベースから取得したレコードが配列の形で格納されることも確認できました。

    丁寧なご説明でとても助かりました。ありがとうございます。

タイトルとURLをコピーしました