【jQueryアプリ開発】疑似的なデータベース検索システムを制作してJavaScriptの理解を深める

JavaScript、jQuery、HTML、CSSの基礎の学習を終えた人が設計書を元にwebアプリケーションLittleDBを作成する

Ratings: 0.00 / 5.00

jQueryを使用してJavaScriptだけで、疑似的なデータベース検索システム「LittleDB」を制作する。

※phpもmysql等のDBも使用しない。

★プログラムの規模

LittleDB.jsのステップ数:1287

本講座は設計書を元に、webアプリケーションを作成する。

JavaScriptで複数のテキストファイルに記載されたJSON文字列からsearch文字列と一致する文字列を検索して取得し、Webサイト上にテーブルで表示させる。

システム設計書、アクティビティ図(activity_diagram)、シーケンス図(sequence_diagram)、

状態遷移図(state_diagram)を見ながらコーディングを行っていく。

$.ajaxメソッドで非同期通信を行ってテキストファイルの情報を取得する。

ES6(ES2015)のforEachメソッド、mapメソッド、reduceメソッド、filterメソッド、unshiftメソッドを本講座で作るWebアプリケーションでは使用します。

正規表現による文字列の操作も行う。

ややこしい処理やアルゴリズムは設計書とアクティビティ図(activity diagram)、シーケンス図(sequence diagram)、状態遷移図(state diagram)を見ながら解説を行います。

主にアクティビティ図を見ながら解説を進めます。

※画面デザインはCSSで行います。しかし、本講座ではCSSの解説はしません。

同梱物

プログラム一式

LittleDB システム設計書.pdf

アクティビティ図(activity_diagram)

シーケンス図(sequence_diagram)

状態遷移図(state_diagram)
テキストデータの定義