関連記事
【開発実況シリーズ】Web日報登録システムを作る「#2 画面設計編」
2020.11.22
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#3 DB設計編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第3回ということで、前回の続きを進めていきたいと思います。
前回までは
まずは、Todoリストを確認しておきましょう。
前回は、Webアプリの画面設計が完了しました。
社員側と、管理者側でそれぞれ必要な画面をAdobeのXDというプロトタイピングツールで作成しました。
今回は、設計フェーズの後半戦「データベース設計」ですね。
それでは、早速進めていきましょう！
データベース設計
アプリで扱うデータはデータベースに保存していきます。
データベーススキルについてはカテゴリーを作ってあるので、詳しく学びたいという方は是非そちらを一通りご覧ください。
データベーススキル
https://blog.senseshare.jp/category/database/
まずは、ローカルのMySQLに新しいデータベースを作成しましょう。
そういえば、このシステムの名前をまだ決めていませんでした。
Web日報登録システムでは長ったらしいので、WoRKS（ワークス）という名前にしようと思います。
名前を先に決めておくと、ソースコードのプロジェクト名や、データベース名など迷わなくて済むので効率的です。
今回は個人的にサクッと決めてしまいましたが、通常の開発プロジェクトだと製品名は後から決まることが多いので、開発時は「開発コード」を付けることが一般的ですね。
では、この名前でデータベースを作ります。
まず、このアプリとして「どんな種類のデータが必要か」を考えます。
今回は「社員」というデータと、社員の「勤怠情報」というデータが必要ですね。
これがそのまま「テーブル」になります。
データベース設計は、画面設計を見ながら行うとやりやすいです。
各テーブルに「どんなカラムが必要か」ということを、画面設計の入力項目や、表示項目を見ながら洗い出していきます。
社員テーブルは
社員番号
パスワード
社員名
といった所ですね。
各カラムの型とサイズなどを設定し、主キーはAUTO INCREMENTで追加しておきます。
勤怠情報テーブルは
日付
出勤時間
退勤時間
休憩時間
業務内容
こちらも主キーと、さらに社員テーブルと連結するための外部キーも追加しておきます。
こういった設計はコツというかやり方があるので、慣れるとこんな感じで数分で完了します。
細かいコツや、設定値の決め方などについては、講座の方で実際に課題アプリを作りながら教えていますので、もし興味があれば参加してみてください。
完成！
ということで、データベース設計が完了しました。
今回は、2つのテーブルが出来ました。
社員テーブル（user）
勤怠情報テーブル（work）
本来、正しい英語としては社員（Employee）、勤怠（Attendance）になると思いますが、使い慣れない単語を使うと、いちいち思い出すのが面倒だったり、スペルミスをしてバグの元になったりするので、僕はこのようにシンプルで分かりやすい名前にすることが多いです。
この辺りは「正しい変数名の付け方」という記事に書いていますので、是非ご覧ください。
次回予告
最後にTodoを確認しておきましょう！
データベース設計が完了したので、これで設計フェーズは完了ですね。
次回からは、開発フェーズに入っていきます。
まずはプロジェクト基礎環境構築ですね。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
