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

SQlite

フレームワークのExpressをつかって簡単なアプリケーションを作成できるようになりました

ただ、それだけではまだまだアプリケーションを作ることはできません

というのも、これまで作ってきたアプリケーションは、あらかじめ作られたhtmlファイルを読み込んで表示するだけのアプリケーションです

厳密にはサーバーサイドでejsファイルをレンダリングして表示しているわけですが、やっていることは普通のWebサイトによる情報の閲覧だけです

Webアプリケーションっていうと、

  1. ログイン(ログアウト)がある
  2. 何らかの情報の書き込みがある
  3. 新しい情報の読み込みがある
  4. 情報の更新がある
  5. 情報の削除ができる

このようなイメージですよね…

これを実現するためにはもう一つ必要な要素があります

それは

「データベース」です

ということで、「データベース」を利用したWebアプリケーションを作成していきたいと思います

とはいえ、データベースについてはあまり詳しく説明しません

まずはデータベースを使ってどんなことができるかがわかる簡単なWebアプリケーションを作成して、必要に応じてデータベースの勉強をしていきたいと思います

データベースを準備しよう

何はともあれ、データベースが必要です

今回自分が採用したのが

SQLite3です

SQLite3はローカル保存型のデータベースですので扱いが簡単です

先ほども述べましたが、あくまでメインはWebアプリケーションの開発です

サーバー型のデータベースの利用についてはまた別の機会に学習していきたいと思います

準備や今回のシリーズで勉強できることを動画にまとめています

学習の参考にしてください

SQLite3を準備しよう

SQLite3はオープンソースのデータベースプログラムです

以下のアドレスで公開されています

またダウンロードかと思われた方もいるかもしれません

実は、Node.js にはSQLite3にアクセスするためのパッケージが用意されていますのでダウンロードしてインストールする必要はありません

ただ、SQLite3はデータベースとしての機能しかないため、データベースの作成や編集は通常であればコマンドから行うことになります

…そうなるとやはり少しだけ難しそうなイメージが付きまといますよね

そんなあなた(わたし)に便利なツールがあったのです

「DB Browser for SQLite」というフリーウェアです

こちらは以下のアドレスで公開されていますので、ダウンロードしてインストールをしましょう

ということで、インストールして起動しましょう

データベースの構造

あまり詳しく説明はしないと述べましたが、最低限のことは確認しておきましょう

データベースの基本構造はこのようになります

データベース

これがデータベースを保存する場所です

データベースを利用する際にまず作成します

SQlite3はデータベースのファイルを作成することになります

ちなみに、サーバー型の場合はサーバー内にデータベースの場所を作ることになります

テーブル

テーブルとは、データの内容を定義したものです

いくつかのデータを組み合わせてデータベースは作られますので、その組み合わせの設定がテーブルになります

例えば顧客管理のデータベースがあったとすると、ID・氏名・住所・電話番号というデータを管理することになります

このように、どういったデータを保存するのかを設定したのがテーブルです

カラム

テーブルで管理する項目一つずつをさして「カラム」といいます

上の顧客管理のデータベースの例でいうと、ID・氏名…といった項目のことです

レコード

一つのカラムに着目した場合、そのカラムによって横並びに紐づけされたデータの集まりがレコードです とがんばって説明しようとしてみたものの、言葉だけでは難しいですね

顧客管理のデータベースでいうと

「キクさんのデータ ID(1)・氏名(Kiku Jiro)・住所(Japan)・電話番号(×××)」・・・これが一つのレコードです

データベースではレコードを検索して閲覧したり、追加したり、更新したり、削除したりして利用することになります

フィールド

カラムとほぼ同じです

表形式のデータを考えた場合、

その表の列名がカラムです

一つのレコードに注目してある列の値をみるときは項目名となりフィールドです

B列全体、要するに列名はカラム名 カラム名は氏名になる

Kiku Taroだけに着目すると、列名ではなく項目名になりフィールド名 フィールド名は氏名になる

ということで、結果的にどちらもこの場合氏名のことを指しているので同じことを表していることになります

まとめると、列全体は列名カラムでレコードを単一に絞ると項目名フィールドとなる

ただし、あまり区別する必要はないので、今後あまり気にしないようにします

カラムとフィールドはほぼ同じ意味なので区別しようとするとかえって混乱しそうなので、あまり気にせずで問題ないでしょう

ということで、ここまでがデータベースの基本構造です

データベースを作成しよう

では、実際にデータベースを作成してみましょう

先ほどインストールしたDB Browserを起動してください

たぶんそのままだと言語が英語になっていると思うので、気になる人は日本語に設定しましょう

メニューバーの編集を押すと設定とあるのでそこをクリック

すると全般というタブがあるので、そこを選んで言語をJapaneseにしましょう

これで日本語になります

では、データベースを作成してみましょう

新しいデータベースをクリックしてください

ファイル名を付けて保存をしましょう

アプリケーションを作成する場合は同じフォルダに保存しましょう

ということで、ExpressGeneratorでアプリケーションを作成しておなじフォルダにデータベースを作成しましょう

先にデータベースを作った場合は、あとでデータベースをアプリケーションを作成するフォルダに移動させましょう

これでデータベースファイルが作成されました

テーブルを作成しましょう

顧客管理のテーブルを作成しましょう

イメージはこんな感じです

では、テーブルを作成をクリックしてください

すると、テーブルの定義の編集画面になります

この画面で

①テーブル名をいれ

②フィールドとなっていますの設定

※DB Browser上ではカラムという表現はなく、フィールドとなっていますので、フィールドで説明をしていきます

テーブル名をいれ(例はkokyakuData)フィールドのタブの「追加」を押します

フィールド名(ID・氏名・メールアドレス・年齢)と各フィールドの設定を入れていきましょう

まずはIDから

名前にid データ型は数字ですのでINTEGERです

では、その後に来るチェックボックスの確認をしておきましょう

NNはNOT NULLの略です

これがチェックされていると、空データは受け入れないということです

PKはPrimaryKey(主キー)の略です

PKいわゆる主キーはデータの識別に使います

顧客データなどでデータを検索して更新などをする際に例えば氏名で検索すると

同姓同名の人がいるかもしれません

そうなるとどのデータの更新をするのか区別ができません

そこで、IDのような重なりのない主キーをつくってそこでデータの区別をして一つのレコードのみを扱うということができるのです

データベースを作る際は主キーは必ず設定しましょう

AIはAUTOINCREMENTの略です

IDのように、重なりのない主キーを作成する際は、自動で番号を振ってくれるAUTOINCREMENTを設定しましょう

これによってレコードを新しく追加する際にID番号は自動で順番に1.2.3と数字が振られることになります

UはUNIQUE、要するに一意であるという設定です

他と重なりがないということです

PKの場合はそもそも重なりがない前提ですので設定の必要はありません

その他で重なりがないデータにはUNIQUEを設定しましょう

ということで、IDの設定ができましたので残りの氏名・メールアドレス・年齢についても設定しましょう

二つ目以降のフィールドも「追加」をクリックして作成していきましょう

設定は以下の通り

これでデータベースのテーブルが一つできました

OKを押して保存しておきましょう

テーブルにデータを入れていこう

では作成したテーブルにデータをいれていきましょう

データ閲覧のタブを選択して、新しいレコードを現在のテーブルに追加をしていきます

赤で囲んだところをクリックするとレコードの追加ができます

こんな感じになります

保存をしておきましょう

データベースが作成できましたので次回からExpressをつかってデータベースにアクセスしていろいろできるようにしていきたいと思います

動画の前半部分がブログの内容です

コメント

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