【Spring Boot + Angular + MySQLでWebアプリ作成】 環境構築編

##はじめに

社内勉強会や実際の業務でSpring BootやAngularを使用して、1年間で学習した総まとめとしてSpring Boot + Angular + MySQLでWebアプリケーションを作成する過程を記事にします。

##作るもの
以下のような社員情報の登録・更新・削除・検索ができるWebアプリケーションを作成します。

##記事構成

以下のような構成で進めていきます。

No.	記事タイトル
1	Spring Boot + Angular + MySQLでWebアプリ作成 環境構築編 (本記事)
2	Spring Boot + Angular + MySQLでWebアプリ作成 データベース編
3	Spring Boot + Angular + MySQLでWebアプリ作成 Spring Boot編①
4	Spring Boot + Angular + MySQLでWebアプリ作成 Spring Boot編②
5	Spring Boot + Angular + MySQLでWebアプリ作成 Angular編①
6	Spring Boot + Angular + MySQLでWebアプリ作成 Angular編②
7	Spring Boot + Angular + MySQLでWebアプリ作成 CRUD編①
8	Spring Boot + Angular + MySQLでWebアプリ作成 CRUD編②【完成】

##環境
Windows 10
Eclipse 2019
Visual Studio Code
Spring Boot v2.4.1
Node JS 10.16.2
Angular 9.1.13
Maven
###データベース
MySQL 8.0.21
###DBアクセスフレームワーク

DBアクセスにはDomaを使用します。
###Doma2
↓公式より引用

Doma 2 には以下の特徴があります。
・注釈処理を使用して コンパイル時 にコードの生成やコードの検証を行う
・データベース上のカラムの値を振る舞いを持った Java オブジェクトにマッピングできる
・2-way SQL と呼ばれる SQL テンプレートを利用できる
・Java 8 の java.time.LocalDate や java.util.Optional や java.util.stream.Stream を利用できる
・JRE 以外のライブラリへの依存が一切ない

Domaには1系と2系がありますが、今回はDoma2を使用します。
https://doma.readthedocs.io/en/2.19.2/

##開発環境構築

開発に必要なソフトウェアをインストールします。

###Eclipseインストール
以下を参考にインストールします。
https://sukkiri.jp/technologies/ides/eclipse/pleiades_install.html

###Visual Studio Codeインストール
以下を参考にインストールします。
https://sukkiri.jp/technologies/devtools/vscode_win.html
日本語化はこちら
https://rfs.jp/sb/vsc/vsc-japanese.html

###NodeJSインストール
以下よりNode JS バージョン10.16.2をダウンロードします。
https://nodejs.org/ja/download/releases/
インストール手順は以下を参考にしてください。
https://qiita.com/Masayuki-M/items/840a997a824e18f576d8

###Angularインストール
コマンドプロンプトを開き以下のコマンドを実行します。

npm install -g @angular/cli@9

以下コマンドを実行し、Angularがインストールされたことを確認します。

ng version

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.13
Node: 10.16.2
OS: win32 x64

Angular: 9.1.13
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.13
@angular-devkit/build-angular     0.901.13
@angular-devkit/build-optimizer   0.901.13
@angular-devkit/build-webpack     0.901.13
@angular-devkit/core              9.1.13
@angular-devkit/schematics        9.1.13
@ngtools/webpack                  9.1.13
@schematics/angular               9.1.13
@schematics/update                0.901.13
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

###MySQLインストール
以下を参考にインストールします。
バージョンはどれでも問題ないです。
rootユーザのパスワードはrootに設定します。
https://qiita.com/ponsuke0531/items/176a158ea4db3714adda

【Spring Boot + Angular + MySQLでWebアプリ作成】 データベース編へ