1. 要求

1.1. 概要

要求定義にはリレーションシップ駆動要件分析(RDRA)を使用する。

RDRAとは短時間で要件を把握することを目的とした軽量の手法。 RDRAでは、決められたアイコンを使い、アイコンとアイコン、アイコンと図を関連づけ、アイコンで表現されたモデル要素と関連のつながりから要件を説明する。

1.2. システム価値

1.2.1. 要求モデル

Diagram

1.2.2. システムコンテキスト

Diagram

1.3. システム外部環境

1.3.1. ビジネスコンテキスト

Diagram

1.3.2. ビジネスユースケース

Diagram

1.3.3. 業務フロー

Diagram

1.3.4. 利用シーン

Diagram

1.3.5. バリエーション・条件

ステータス

未着手

着手

完了

1.4. システム境界

1.4.1. ユースケース複合図

Diagram

1.5. システム

1.5.1. 情報モデル

Diagram

1.5.2. 状態モデル

Diagram

2. 構築

ソフトウェア バージョン 備考

Node.js

16.3.0

2.1. アプリケーションコンポーネント

Diagram

2.2. コンポーネントセットアップ

2.2.1. 開発関連

開発ツール
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/register
npm install --save-dev npm-run-all watch foreman cpx rimraf marked
npm install --save cross-env
touch Procfile
Webpack
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server
TypeScript
npm install --save-dev typescript ts-loader
npx tsc --init
npm install -save-dev @types/react @types/react-dom
npm install --save-dev typescript@4.5.5 jest@27.5.1 ts-jest@27.1.3 ts-node-dev@1.1.8 @types/jest
npm install --save-dev ts-node-dev@1.1.8
Cypress
npm install cypress
npmx cypress open
npm install --save-dev cypress-cucumber-preprocessor
npm install --save-dev cucumber-html-reporter

2.2.2. SPA関連

npm install --save-dev style-loader css-loader
npm install --save-dev fake-indexeddb
npm install dexie
React
npm install react react-dom
npm install --save-dev babel-loader @babel/preset-react
npm install --save-dev jest
ReduxToolkit
npm install -save @reduxjs/toolkit react-redux

2.2.3. API関連

Express
npm install --save ts-node@10.5.0 @types/express @types/cors @types/node
npm install -save axios @types/axios
npm install --save express uuid cors
TypeORM
npm install --save typeorm reflect-metadata
npm install --save better-sqlite3
Swagger
npm install --save-dev typedoc tplant
npm install -save tsoa swagger-ui-express
npm install -save @types/swagger-ui-express

2.2.4. ドキュメント関連

Asciidoctor
npm install --save-dev asciidoctor asciidoctor-kroki
TypeDoc
npm install --save-dev typedoc tplant

3. 配置

3.1. システムアーキテクチャ

Diagram

4. 開発

4.1. 仕様

Feature: やること管理

利用者として
やることを管理したい
なぜならやることを整理する必要があるからだ

  Scenario: やることを登録する
		Given "アプリケーション" ページにアクセスする
		Given "やること" を追加する
		Then "やること" が表示される
    Then ステータスが "未着手" になる
		Then  アイテム数が "1" 件になる

  Scenario: やることに期限を設定する
		Given "アプリケーション" ページにアクセスする
    Given 期限を設定する
    Then 期限が設定される
    Then ステータスが "着手" になる
    Then  アイテム数が "1" 件になる

  Scenario: やることを完了する
    Given "アプリケーション" ページにアクセスする
    Given "やること" を完了する
		Then "やること" が更新される
    Then ステータスが "完了" になる
		Then  アイテム数が "1" 件になる

  Scenario: やることを削除する
		Given "アプリケーション" ページにアクセスする
		Given "やること" を削除する
		Then "やること" が削除される
		Then  アイテム数が "0" 件になる

4.2. 設計

4.2.1. ユースケース

Diagram

4.2.2. ドメインモデル

domain model.drawio

4.2.3. アプリケーションアーキテクチャ

app architecuture.drawio

4.2.4. オブジェクトモデル

API
Diagram
SPA
Diagram

4.2.5. データモデル

Diagram

5. 運用

5.1. 開発

npm start

5.2. テスト

npm test

5.3. ビルド

npm build

5.4. デプロイ

npm run deploy

5.5. ドキュメント

npm run build:docs

6. 参照