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

##はじめに

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

##作るもの
以下のような社員情報の登録・更新・削除・検索ができるWebアプリケーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425239/7e2b03dc-7509-5921-b8dd-b362d9d94c97.png)

##記事構成

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

| No.              | 記事タイトル |
|:-----------------:|:------------------|
| 1                | [Spring Boot + Angular + MySQLでWebアプリ作成 環境構築編](https://qiita.com/k-yamada-neut/private/b099a1351c1dfa7b8af4) (本記事)|
| 2                | [Spring Boot + Angular + MySQLでWebアプリ作成 データベース編](https://qiita.com/k-yamada-neut/private/40ffc3f69b9497793e8c)  |
| 3                | [Spring Boot + Angular + MySQLでWebアプリ作成 Spring Boot編①](https://qiita.com/k-yamada-neut/private/56598999da3506e1eb7e)|
| 4                | [Spring Boot + Angular + MySQLでWebアプリ作成 Spring Boot編②](https://qiita.com/k-yamada-neut/private/c55013af9a2e93f30d84)|
| 5                | [Spring Boot + Angular + MySQLでWebアプリ作成 Angular編①](https://qiita.com/k-yamada-neut/private/939c3d043997c4b45d30) |
| 6                | [Spring Boot + Angular + MySQLでWebアプリ作成 Angular編②](https://qiita.com/k-yamada-neut/private/a424493a7a82da3f7a7d)   |
| 7                | [Spring Boot + Angular + MySQLでWebアプリ作成 CRUD編① ](https://qiita.com/k-yamada-neut/private/0ed75ecb3e1df9bffe2a)      |
| 8                | [Spring Boot + Angular + MySQLでWebアプリ作成 CRUD編②【完成】](https://qiita.com/k-yamada-neut/private/fe9a47b4df367a19a681)|


##環境
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アプリ作成】 データベース編へ](https://qiita.com/k-yamada-neut/private/40ffc3f69b9497793e8c)