構築

1. 開発環境の構築

JavaScript 開発環境を構築するためには、以下の手順を実行してください。

1.1. バージョンマネージャー

バージョンマネージャーを使用することで、異なるバージョンの Node.js を簡単に切り替えることができます。以下の手順でバージョンマネージャーをセットアップしてください。

1.1.1. バージョンマネージャーのセットアップ

NVM をインストールします。NVM は、Node.js のバージョンを管理するためのツールです。以下のコマンドを実行して、NVM をインストールしてください。
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0...0/install.sh | bash
```
npm をインストールします。npm は、Node.js のパッケージマネージャーです。以下のコマンドを実行して、npm をインストールしてください。
```
nvm list
nvm install lts
npm -v
```
yarn をインストールします。yarn は、npm の代替となるパッケージマネージャーです。以下のコマンドを実行して、yarn をインストールしてください。
```
npm install -g yarn
yarn -v
```
ターミナルを再起動します。

1.2. モジュールバンドラー

モジュールバンドラーを使用することで、複数の JavaScript ファイルを一つのファイルにまとめることができます。以下の手順でモジュールバンドラーをセットアップしてください。

1.2.1. モジュールバンドラーのセットアップ

package.json ファイルを作成します。以下のコマンドを実行して、package.json ファイルを作成してください。
```
npm init -y
```
-y オプションを指定することで、package.json ファイルの内容をデフォルト値で作成することができます。
Babel をインストールします。Babel は、トランスパイラの一つです。以下のコマンドを実行して、Babel をインストールしてください。
```
npm install --save-dev @babel/preset-env
```
--save-dev オプションを指定することで、package.json ファイルの devDependencies にパッケージを追加することができます。
Webpack をインストールします。Webpack は、モジュールバンドラーの一つです。以下のコマンドを実行して、Webpack をインストールしてください。
```
npm install --save-dev webpack webpack-cli
npx webpack --version
```
npx コマンドは、npm パッケージを実行するためのコマンドです。npx コマンドを使用することで、ローカルにインストールされている npm パッケージを実行することができます。
webpack.config.js ファイルを作成します。以下のコマンドを実行して、webpack.config.js ファイルを作成してください。
```
touch webpack.config.js
```

webpack.config.js ファイルに以下の内容を記述してください。

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
};

package.json ファイルに以下の内容に変更してください。
```
{
  "scripts": {
    "build": "webpack"
  }
}
```

1.2.2. モジュールバンドラーの実行

./src/sample_es.js ファイルを作成してください。

function greeting(name) {
  return 'Hello ' + name;
}

module.exports = greeting;

./src/index.js ファイルを変更してください。

var greeting = require('./src/sample_es5.js');

console.log(greeting('ES5'));

以下のコマンドを実行して、モジュールバンドラーを実行してください。
```
npm run build
```
./dist/bundle.js ファイルが作成されていることを確認してください。
./dist/bundle.js ファイルを実行してください。
```
node ./dist/bundle.js
```

1.2.3. モジュールバンドラーの設定

./src/sample_es6.js ファイルを作成してください。

class Greeting {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`Hello ${this.name}`);
  }
}

export default Greeting;

./index.js ファイルを変更してください。

var greeting = require('./sample_es6.js');
console.log(greeting('ES.));

var greet = require('./src/sample_es6.js');
var g = new greet.default('ES6');
g.say();

以下のコマンドを実行して、モジュールバンドラーを実行してください。
```
npm run build
```
./dist/bundle.js ファイルが作成されていることを確認してください。
./dist/bundle.js ファイルを実行してください。
```
node ./dist/bundle.js
```

現状では ES5のコードをそのまま出力しています。ES6に変換するためには、babel-loader を使用します。パッケージをインストールして webpack.config.js に以下のコードを変更してください。

npm install --save-dev babel-loader

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
  target: ['web', 'es5'],
};

以下のコマンドを実行して、モジュールバンドラーを実行してください。
```
npm run build
```
./dist/bundle.js ファイルが作成されていることを確認してください。
./dist/bundle.js ファイルを実行してください。
```
node ./dist/bundle.js
```

1.3. webpack-dev-server のセットアップ

webpack-dev-server を使用することで、開発中に自動的にビルドを実行し、ブラウザをリロードすることができます。以下の手順で webpack-dev-server をセットアップしてください。

1.3.1. webpack-dev-server のインストール

以下のコマンドを実行して、webpack-dev-server をインストールしてください。
```
npm install --save-dev webpack-dev-server
```

1.3.2. webpack-dev-server の設定

webpack.config.js ファイルを開き、以下の内容を追加してください。

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

1.3.3. webpack-dev-server の実行

以下のコマンドを実行して、webpack-dev-server を実行してください。
```
npx webpack serve
```
終了する場合は、Ctrl + C を押してください。
HTMLWebpackPlugin プラグインを使用して js ファイルに自動的にバンドルされた script タグを生成し、index.html に挿入できるようにします。
```
npm install --save-dev html-webpack-plugin
```

プロジェクト直下に index.html を作成してください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>
  </head>
  <body>
    <h.アプリケーション</h.
  </body>
</html>

webpack.config.js ファイルを開き、以下の内容を追加してください。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...他のWebpack設定

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
};

package.json ファイルを開き、以下の内容を追加してください。

{
  // ...他の設定
  "scripts": {
    "start": "webpack server --config ./webpack.config.js --open"
  }
}

以下のコマンドを実行して、webpack-dev-server を実行してください。
```
npm start
```

ソースマップを有効にすることで、開発中にエラーが発生した場合に、エラーが発生したファイル名と行数を表示することができます。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const env = process.env.NODE_ENV || "development";
const isDevelopment = env === "development";

module.exports = {
  mode: env,
  devtool: isDevelopment ? "source-map" : false,
...

CSSサポートを追加します。

npm install --save-dev style-loader css-loader

webpack.config.js

module.exports = {
  // ...他のWebpack設定

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                ],
            },
            {
                test: /\.css/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            url: false,
                            sourceMap: true,
                        }
                    }
                ]
            },
        ],
    },
};

style.css

html,
body {
    height: 100%;
}

body {
    margin: 10;
    padding: 10;
    font-family: -apple-system, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo, sans-serif;
    font-feature-settings: "palt"; /* プロポーショナルメトリクスを有効に */
}

index.js

import "./style.css";

1.4. 開発ツールのセットアップ

開発ツールを使用することで、開発効率を向上させることができます。以下の手順で開発ツールをセットアップしてください。

1.4.1. パッケージのインストール

以下のコマンドを実行して、開発ツールをインストールしてください。

npm install --save-dev @k2works/full-stack-lab

./index.html を以下の内容に変更します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>App</title>
  </head>
  <body>
    <h.アプリケーション</h.
    <div id="app"></div>
    <div id="app-dev"></div>
  </body>
</html>

./src/app.js を以下の内容に変更します。

console.log('app.js: loaded');
export class App {
  constructor() {
    console.log('App initialized');
  }
}

export function sum(a, b) {
  return a + b;
}

./index.js をルート直下に移動して以下の内容変更します。

import "./style.css";
import render from "@k2works/full-stack-lab";
import {sum} from "./src/app.js";

console.log(sum(1, 2));

const contents = `
## 機能名
## 仕様
## TODOリスト
`;

const mindmap = `
@startmindmap
+ root
++ right
+++ right right
*** right2
-- left
--- left left
-- left2

@endmindmap
`;

const usecase = `
@startuml
left to right direction
actor "Actor" as ac
rectangle Application {
  usecase "UseCase1" as UC1
  usecase "UseCase2" as UC2
  usecase "UseCase3" as UC3
}
ac --> UC1
ac --> UC2
ac --> UC3
@enduml
`;

const ui = `
@startsalt
{+
  コレクション画面
  {+
  {
  生徒
  教員
  組
  部
  イベント
  } |
  {
    == 生徒
    { + <&zoom-in> (          )}
    {T#
    + 田尻　智裕  | 3年B組    | 野球部 写真部
    + 山田　太郎  | 3年A組    | 野球部
    + 鈴木　花子  | 3年A組    | 写真部
    }
  }
  }
----------------
  シングル画面
  {+
  {
  生徒
  教員
  組
  部
  イベント
  } |
  {
    {
      <&person> <b>田尻 智裕
    }
    {
      名前
      田尻　智裕
      組
      3年B組
      部
      野球部 写真部
      関連する生徒
      田尻　智裕 山田　太郎　鈴木　花子
    }
  }
  }
}
@endsalt
`;

const uiModel = `
@startuml
  class 部 {
    名称
    カテゴリー
    生徒数
    印刷()
    新規()
    削除()
  }
  class 生徒 {
    氏名
    成績
    印刷()
    新規()
    削除()
  }
  class 組 {
    名称
    印刷()
    新規()
    削除()
  }
  class 教員 {
    氏名
    電話番号
    印刷()
    新規()
    削除()
  }
  class イベント {
    名称
    日付
    印刷()
    新規()
    削除()
  }
  部 *-* 生徒
  部 *-- 教員
  イベント *- 教員
  生徒 --* 組
`;

const uiInteraction = `
@startuml
  イベント_コレクション --> イベント_シングル
  イベント_シングル --> 教員_シングル
  教員_コレクション --> 教員_シングル
  教員_シングル --> 部_コレクション
  教員_シングル <-> 組_シングル
  組_コレクション --> 組_シングル
  組_シングル --> 生徒_コレクション
  生徒_コレクション --> 生徒_シングル
  生徒_シングル -> 組_シングル
  生徒_シングル --> 部_コレクション
  部_コレクション --> 部_シングル
  部_シングル --> 生徒_コレクション
@enduml
`;

const uml = `
@startuml
abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection
List <|-- AbstractList
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList
class ArrayList {
  Object[] elementData
  size()
}
enum TimeUnit {
  DAYS
  HOURS
  MINUTES
}
annotation SuppressWarnings
@enduml
`;

const erd = `
@startuml
' hide the spot
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}
entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}
entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  e1_id : number <<FK>>
  other_details : text
}
e01 ||..o{ e02
e01 |o..o{ e03
@enduml
`;

const mode = "APP"; // "UI" or "API" or "DOC"
render({ mindmap, contents, ui, uiModel, uiInteraction, usecase, uml, erd, mode });

最後に不要なファイルを削除します。

1.4.2. 開発ツールの設定

webpack.config.js を以下の内容に変更します。
```
...
  entry: './index.js',
...
```

1.4.3. 開発ツールの実行

以下のコマンドを実行して、開発ツールを実行してください。
```
npm start
```

1.5. 開発ライブラリのセットアップ

1.5.1. jQuery

jQuery とは

jQuery は、HTML ドキュメントを操作するための JavaScript ライブラリです。以下の手順で jQuery をセットアップしてください。

jQuery の設定

HTMLにタグを追加して、CDN からjQueryを読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

WebpackでローカルにインストールされたjQueryを使わないように指示する

webpack.config.js
```
module.exports = {
  // 他の設定は省略
  externals: {
    jquery: '$',
  }
}
```

Webpackで$をグローバルであるように全てのファイルに指示する

webpack.config.js

const webpack = require("webpack");
...
module.exports = {
  // 他の設定は省略
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
}

1.5.2. Lodash

Lodash とは

Lodash は、JavaScript のユーティリティライブラリです。以下の手順で Lodash をセットアップしてください。

Lodash の設定

HTMLにタグを追加して、CDN からLodashを読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" referrerpolicy="no-referrer"></script>

WebpackでローカルにインストールされたLodashを使わないように指示する

webpack.config.js
```
module.exports = {
  // 他の設定は省略
  externals: {
    jquery: "$",
    lodash: "_",
  },
}
```

Webpackで_をグローバルであるように全てのファイルに指示する

webpack.config.js

module.exports = {
  // 他の設定は省略
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.$": "jquery",
      _: "lodash",
      "window._": "lodash",
    }),
  ],
}

1.5.3. Loadsh/fp

Loadsh/fp とは

lodash/fp は、Lodash の関数型プログラミング版です。以下の手順で lodash/fp をセットアップしてください。

Loadsh/fpの設定

HTMLにタグを追加して、CDN からlodash/fpを読み込む

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js" integrity="sha512-CVmmJBSbtBlLKXTezdj4ZwjIXQpnWr934eJlR6r3sUIwUV/5ZLa4tfI5Ge7Dth/TJD0h79X0PGycINUu1pv/bg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    window.fp = _.noConflict()
  </script>

1.5.4. Moment.js

Moment.js とは

Moment.js は、日付と時刻を操作するための JavaScript ライブラリです。以下の手順で Moment.js をセットアップしてください。

Moment.js の設定

HTMLにタグを追加して、CDN からMoment.jsを読み込む

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>

WebpackでローカルにインストールされたMoment.jsを使わないように指示する

webpack.config.js

module.exports = {
  // 他の設定は省略
  externals: {
    jquery: "$",
    lodash: "_",
    moment: "moment",
  },
}

Webpackでmomentをグローバルであるように全てのファイルに指示する

webpack.config.js

module.exports = {
  // 他の設定は省略
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.$": "jquery",
      _: "lodash",
      "window._": "lodash",
      moment: "moment",
      "window.moment": "moment",
    }),
  ],
}

2. バックエンドアプリケーション開発環境の構築

Javaアプリケーション開発環境を構築するためには、以下の手順を実行してください。

2.1. データベースのセットアップ

2.1.1. Docker のインストール

DockerDesktop をインストールしてください。
以下のコマンドを実行して、データベースをセットアップしてください。
```
docker-compose up -d
```

2.2. Javaのセットアップ

2.2.1. パッケージのインストール(Windows)

Scoop を使います。以下のコマンドを実行して、Java をインストールしてください。
```
scoop search openjdk
scoop bucket add java
scoop install openjdk
java --version
```

2.2.2. パッケージのインストール(Mac/Linux)

SDKMAN を使います。以下のコマンドを実行して、Java をインストールしてください。
```
curl -s "https://get.sdkman.io" | bash
source "~/.sdkman/bin/sdkman-init.sh"
sdk install java
java --version
```

2.3. アプリケーションフレームワークのセットアップ

2.3.1. SpringBoot とは

SpringBoot は、Java で Web アプリケーションを開発するためのフレームワークです。以下の手順で SpringBoot をセットアップしてください。

2.3.2. SpringBootのインストール

Spring BootCLIのインストール(Windows)

Scoop を使います。以下のコマンドを実行して、Java をインストールしてください。
```
scoop bucket add extras
scoop install springboot
```

Spring BootCLIのインストール(Mac/Linux)

SDKMAN を使います。以下のコマンドを実行して、Java をインストールしてください。
```
sdk install springboot
spring --version
```

2.3.3. SpringBootのセットアップ

以下のコマンドを実行して、SpringBootをセットアップしてください。

spring init --dependencies=web,data-jpa,thymeleaf,h2,security,lombok,validation,actuator,devtools --name=<APPNAME> --package-name=<COM.GROUP.APP> --build=gradle --type=gradle-project

2.3.4. パッケージの設定

JIGのセットアップ

JIGとは、Javaのコードでの設計を支援するツールです。以下の手順でJIGをセットアップしてください。

以下の手順でbuild.gradleにJIGをセットアップしてください。

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.4'
	id 'io.spring.dependency-management' version '1.1.6'
	id 'org.dddjava.jig-gradle-plugin' version '2024.7.2' // (1)
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'org.postgresql:postgresql'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
}

tasks.named('test') {
	useJUnitPlatform()
}

JIGのプラグインを追加します。

以下のコマンドを実行して、JIGを実行してください。
```
./gradlew jigReports
```

JIG-ERDのセットアップ

JIG-ERD とはざっくりなER図を出力します。以下の手順でJIG-ERDをセットアップしてください。

以下の手順でbuild.gradleにJIG-ERDをセットアップしてください。

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'org.postgresql:postgresql'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
    testImplementation 'com.github.irof:jig-erd:latest.release' // (1)
}

src/test/java/com/example/sms/Erd.java ファイルを作成してください。

@SpringBootTest
public class Erd {

    @Test
    void run(@Autowired DataSource dataSource) {
        JigErd.run(dataSource);
    }
}

jig.properties ファイルを src/test/resources に作成してください。

flywayのセットアップ

flywayとは、データベースのマイグレーションを支援するツールです。以下の手順でflywayをセットアップしてください。

以下の手順でbuild.gradleにflywayをセットアップしてください。

buildscript {
	dependencies {
		classpath("org.flywaydb:flyway-database-postgresql:10.14.0")
	}
} // (1)

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.4'
	id 'io.spring.dependency-management' version '1.1.6'
	id 'org.dddjava.jig-gradle-plugin' version '2024.7.1'
	id "org.flywaydb.flyway" version "10.7.2" // (2)
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'org.postgresql:postgresql'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
    testImplementation 'com.github.irof:jig-erd:latest.release'
	implementation 'org.flywaydb:flyway-core:10.15.0' // (3)
	runtimeOnly 'org.flywaydb:flyway-database-postgresql:10.14.0' // (4)
}

tasks.named('test') {
	useJUnitPlatform()
}

flyway {
	url = 'jdbc:postgresql://localhost:5432/mydb'
	user = 'root'
	password = 'password'
	locations = ['classpath:db/migration/postgresql']
	cleanDisabled = false
} // (5)

flywayのプラグインを追加します。
flywayのライブラリを追加します。

/src/main/resources に以下の以下の設定を追加します。

application.properties

spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:app;MODE=PostgreSQL
spring.datasource.username=sa
spring.datasource.password=sa
spring.h2.console.enabled=true
spring.jpa.hibernate.ddl-auto=validate
spring.jpa.properties.hibernate.forma_sql=true
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
spring.flyway.enabled=true // (1)
spring.flyway.locations=classpath:/db/migration/h2 // (2)

flywayを有効にします。
flywayのマイグレーションファイルの場所を指定します。

application-postgresql.properties

spring.datasource.url=jdbc:postgresql://localhost:5432/mydb
spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=validate
spring.jpa.properties.hibernate.forma_sql=true
spring.sql.init.encoding=UTF-8
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
spring.sql.init.mode=always
spring.jpa.open-in-view=true
spring.flyway.clean-disabled=false
spring.flyway.enabled=true // (1)
spring.flyway.schemas=public // (2)
spring.flyway.locations=classpath:/db/migration/postgresql // (3)

flywayを有効にします。
flywayのスキーマを指定します。
flywayのマイグレーションファイルの場所を指定します。

マイグレーションはアプリケーション実行時に自動で実行されます。

MyBatisのセットアップ

MyBatisとは、ORマッピングツールです。以下の手順でflywayをセットアップしてください。

以下の手順でbuild.gradleにMyBatisをセットアップしてください。

buildscript {
	dependencies {
		classpath("org.flywaydb:flyway-database-postgresql:10.14.0")
	}
}

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.4'
	id 'io.spring.dependency-management' version '1.1.6'
	id 'org.dddjava.jig-gradle-plugin' version '2024.7.1'
	id "org.flywaydb.flyway" version "10.7.2"
	id 'de.undercouch.download' version '4.0.1' // (1)
	id "com.thinkimi.gradle.MybatisGenerator" version "2.4" // (2)
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

sourceSets {
	main {
		resources.srcDirs = ["src/main/java", "src/main/resources"]
	}
} // (3)

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'org.postgresql:postgresql'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
    testImplementation 'com.github.irof:jig-erd:latest.release'
	implementation 'org.flywaydb:flyway-core:10.15.0'
	runtimeOnly 'org.flywaydb:flyway-database-postgresql:10.14.0'
	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3' // (4)
	testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.3' // (5)
}

tasks.named('test') {
	useJUnitPlatform()
}

flyway {
	url = 'jdbc:postgresql://localhost:5432/mydb'
	user = 'root'
	password = 'password'
	locations = ['classpath:db/migration/postgresql']
	cleanDisabled = false
}

// MyBatis Generator Task
configurations {
	mybatisGenerator
}

configurations {
	mybatisGenerator
}

mybatisGenerator {
	verbose = true
	configFile = 'src/main/resources/autogen/generatorConfig.xml'
    mybatisProperties = ['key1': "value1", 'key2': "value2"]

download {
	ext.postgres = file("${downloadTaskDir}/jdbc/postgresql-42.7.4.jar")
	src('https://jdbc.postgresql.org/download/postgresql-42.7.4.jar')
	dest(postgres)
	overwrite = false
}

// optional, here is the override dependencies for the plugin or you can add other database dependencies.
dependencies {
	mybatisGenerator 'org.mybatis.generator:mybatis-generator-core:1.4.0'
	mybatisGenerator 'org.postgresql:postgresql:42.7.4'
}

mybatisProperties = ['jdbcUrl'        : 'jdbc:postgresql://localhost:5432/mydb',
					 'jdbcDriverClass': 'org.postgresql.Driver',
					 'jdbcUsername'   : 'root',
					 'jdbcPassword'   : 'password',]
}
// (6)

MyBatis Generatorのダウンロードタスクを追加します。
MyBatis Generatorのタスクを追加します。
リソースファイルの場所を指定します。
テスト用のライブラリを追加します。
MyBatis Generatorの設定を追加します。

以下の手順で`resources/autogen/generatorConfig.xml`を作成してください。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <context id="PostgresTables" targetRuntime="MyBatis3">

        <!-- スキーマ情報を取得する DB への接続設定 -->
        <jdbcConnection
                driverClass="${jdbcDriverClass}"
                connectionURL="${jdbcUrl}"
                userId="${jdbcUsername}"
                password="${jdbcPassword}">
        </jdbcConnection>

        <!-- 日付、時刻はJSR310で出力 -->
        <javaTypeResolver>
            <property name="useJSR310Types" value="true" />
        </javaTypeResolver>

        <!-- SELECT 結果等を格納するドメインモデルを生成する設定 -->
        <!-- targetProjectには、プロジェクトフォルダも含めることに注意 -->
        <javaModelGenerator targetPackage="com.example.sms.model" targetProject="sample-project/src/main/java">
            <property name="trimStrings" value="true" />
        </javaModelGenerator>

        <!-- SQL 設定が記述された XML を生成する設定 -->
        <sqlMapGenerator targetPackage="com.example.repository" targetProject="sample-project/src/main/resources">
        </sqlMapGenerator>
        <!-- マッパークラスを生成する設定 -->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.example.repository" targetProject="sample-project/src/main/java">
        </javaClientGenerator>

        <!-- コードを生成するテーブルを指定 -->
        <!-- 全テーブルの場合は"%" -->
        <table schema="public" tableName="%"
               enableSelectByExample="false"
               enableDeleteByExample="false"
               enableUpdateByExample="false"
               enableCountByExample="false">
            <property name="useActualColumnNames" value="false"  />
        </table>

    </context>
</generatorConfiguration>

springdoc-openapi-uiのセットアップ

build.gradle に以下の設定を追加してください。

...
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	runtimeOnly 'org.postgresql:postgresql'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
    testImplementation 'com.github.irof:jig-erd:latest.release'
	implementation 'org.flywaydb:flyway-core:10.15.0'
	runtimeOnly 'org.flywaydb:flyway-database-postgresql:10.14.0'
	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3'
	testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.3'
	implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.1.0' // (1)
}
...

springdoc-openapi-uiの依存関係を追加します。

src/main/java/com/example/sms/infrastructure/_configuration に SpringDocConfiguration.java を追加してください。

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import io.swagger.v3.oas.models.servers.Server;
import io.swagger.v3.oas.models.servers.ServerVariable;
import io.swagger.v3.oas.models.servers.ServerVariables;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.ArrayList;
import java.util.List;

@Configuration
public class SpringDocConfiguration {
    String TITLE = "SMS REST API";
    String VERSION = "1.0.0";

    @Bean
    public OpenAPI springDocOpenApi() {
        ServerVariables serverVariables = new ServerVariables();
        ServerVariable variable = new ServerVariable();
        variable._default("localhost:8080");
        variable.description("Base server url");
        serverVariables.addServerVariable("serverUrl", variable);

        List<Server> servers = new ArrayList<>();
        servers.add(new Server().url("http://{serverUrl}").variables(serverVariables).description("HTTP server"));
        servers.add(new Server().url("https://{serverUrl}").variables(serverVariables).description("HTTPS server"));

        return new OpenAPI().servers(servers).info(new Info().title(TITLE).version(VERSION));
    }
}

src/main/resources の設定ファイルに以下の設定を追加してください。

application.properties

# swagger-ui custom path
springdoc.swagger-ui.path=/swagger-ui.html
springdoc.packages-to-scan=com.example.sms.presentation.api
springdoc.paths-to-match=/api/**

application-postgresql.properties

# swagger-ui custom path
springdoc.swagger-ui.path=/swagger-ui.html
springdoc.packages-to-scan=com.example.sms.presentation.api
springdoc.paths-to-match=/api/**

JWTのセットアップ

JWT とは、JSON Web Token の略で、認証情報を JSON 形式でエンコードしたトークンです。以下の手順で JWT をセットアップしてください。

build.gradle に以下の設定を追加してください。

	implementation 'io.jsonwebtoken:jjwt-api:0.12.3'
	runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.12.5'
	runtimeOnly 'io.jsonwebtoken:jjwt-jackson:0.12.5'

受入テストのセットアップ

Cucumber とは、BDD（振る舞い駆動開発）を支援するツールです。以下の手順で Cucumber をセットアップしてください。

build.gradle に以下の設定を追加してください。

	testImplementation 'io.cucumber:cucumber-java:7.18.0'
	testImplementation 'io.cucumber:cucumber-java8:7.18.0'
	testImplementation 'io.cucumber:cucumber-junit:7.18.0'
	testImplementation 'io.cucumber:cucumber-spring:7.18.1'
	implementation 'commons-io:commons-io:2.16.1'
	testImplementation group: 'org.junit.vintage', name: 'junit-vintage-engine', version: '5.11.0-M1'

アーキテクチャルールのセットアップ

ArchUnit とは、アーキテクチャルールをテストするためのツールです。以下の手順で ArchUnit をセットアップしてください。

build.gradle に以下の設定を追加してください。

	testImplementation 'com.tngtech.archunit:archunit:1.2.2'
	testImplementation 'com.tngtech.archunit:archunit-junit5:1.2.2'

ページネーションのセットアップ

Mybatis-PageHelper とは、ページネーションをサポートするためのツールです。以下の手順で Pageable をセットアップしてください。

build.gradle に以下の設定を追加してください。

	implementation 'com.github.pagehelper:pagehelper-spring-boot-starter:2.1.0'

3. フロントエンドアプリケーション開発環境の構築

Reactアプリケーション開発環境を構成するためには、以下の手順を実行してください。

3.1. Reactのセットアップ

3.1.1. Viteのセットアップ

Viteとは、Reactの開発環境を構築するためのツールです。以下の手順でViteをセットアップしてください。

以下のコマンドを実行して、Viteをインストールしてください。

npm create vite@latest
...
> npx
> create-vite

√ Project name: ... app
√ Select a framework: » React
√ Select a variant: » TypeScript

cd app
npm install
npm run dev

3.1.2. テスト環境のセットアップ

Jestのセットアップ

Jestとは、JavaScriptのテストフレームワークです。以下の手順でJestをセットアップしてください。

以下のコマンドを実行して、.babelrc ファイルを追加してください。

npm install --save-dev @babel/preset-env @babel/preset-react @babel/preset-typescript

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

以下のコマンドを実行して、Jestをインストールしてください。

npm install --save-dev jest ts-jest @types/jest jest-environment-jsdom@latest @testing-library/react@latest @testing-library/jest-dom@latest @testing-library/user-event@latest jest-dom jest-environment-jsdom jest-transform-css identity-obj-proxy

jest.config.cjs ファイルを作成してください。

module.exports = {
    moduleFileExtensions: [
        "js",
        "ts",
        "tsx"
    ],
    testMatch: [
        "**/src/**/*.test.ts",
        "**/src/**/*.test.tsx"
    ],
    roots: [
        "<rootDir>/src"
    ],
    preset: "ts-jest",
    testEnvironment: "jest-environment-jsdom",
    transform: {
        '^.+\\.jsx?$': 'babel-jest',
        '^.+\\.tsx?$': 'babel-jest',
        '\\.css$': 'jest-transform-css',
    },
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js",
    },
};

package.json ファイルに以下の設定を追加してください。
```
"scripts": {
"test": "jest"
},
```
tsconfig.app.json ファイルに以下の設定を変更してください。
```
    "noUnusedLocals": false,
```

App.tsx ファイルを修正します

import { useState } from "react";
import "./App.css";
import React from "react";

function App() {
    const [count, setCount] = useState(0);

    return (
        <>
            <h1>React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </button>
                <p>
                    Edit <code>src/App.tsx</code> and save to test HMR
                </p>
            </div>
        </>
    );
}

export default App;

App.test.tsx ファイルを作成してください。

import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import App from "./App";
import React from "react";

test("Renders the main page", () => {
    render(<App />);
    expect(true).toBeTruthy();
});

以下のコマンドを実行して、テストを実行してください。
```
npm run test
```

3.2. 追加パッケージ

3.2.1. Reactコンポーネントのセットアップ

以下のコマンドを実行して、コンポーネントをインストールしてください。
```
npm install react-router-dom react-modal @types/react-modal react-spinners react-tabs react-icons
```

4. データベース開発環境の構築

TypeScriptでデータベース開発環境を構成するためには、以下の手順を実行してください。

4.1. TypeScriptのセットアップ

4.1.1. Viteのセットアップ

Viteとは、Reactの開発環境を構築するためのツールです。以下の手順でViteをセットアップしてください。

以下のコマンドを実行して、Viteをインストールしてください。

npm create vite@latest
...
> npx
> create-vite

√ Project name: ... db
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

cd db
npm install
npm run db

4.1.2. テスト環境のセットアップ

Jestのセットアップ

Jestとは、JavaScriptのテストフレームワークです。以下の手順でJestをセットアップしてください。

以下のコマンドを実行して、Jestをインストールしてください。
```
npm install --save-dev typescript jest ts-jest @types/jest
```

jest.config.cjs ファイルを作成してください。

module.exports = {
    moduleFileExtensions: [
        "ts",
        "js"
    ],
    transform: {
        "^.+\\.ts$": ["ts-jest", { tsconfig: "tsconfig.json" }]
    },
    testMatch: [
        "**/**/*.test.ts"
    ]
};

package.json ファイルに以下の設定を追加してください。
```
"scripts": {
"test": "jest"
},
```

Prismaのセットアップ

Prismaとは、JavaScript製ORMです。

以下のコマンドを実行して、Prismaをインストールしてください。
```
npm install prisma --save-dev
```

.env ファイルを設定してください。

DATABASE_URL="postgresql://root:password@localhost:5432/mydb?schema=public"

以下のコマンドを実行して、Prismaを初期化してください。
```
npx prisma init
```
開発に必要なパッケージをインストールしてください。
```
npm install --save-dev tsx dotenv
```

package.json にデータベースタスクを追加します.

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "jest",
    "db:migrate": "prisma migrate dev",
    "db:generate": "prisma generate",
    "db:seed": "prisma db seed",
    "db:show": "prisma studio",
    "db:migrate:create-only": "prisma migrate dev --create-only"
  },