Spring Boot + Angular + MongoDB Rest API Tutorialをやってみた

<h1>はじめに</h1>
IT企業在籍6年目にして、開発経験がびっくりするほどないため、何か自分で作ってみたいんですけど、どういうものがいいですかねーと各方面に相談していたところ（悲しいことにアイデアはない）、ある方から「こういうのはいかがですか？」と教えていただきました。

[Spring Boot + Angular + MongoDB Rest API Tutorial](https://www.callicoder.com/spring-boot-mongodb-angular-js-rest-api-tutorial/)

英語のサイトで、2017年と少し古いのですが、
フロントエンド、バックエンド、データベースというアプリの基礎の基礎がなんとなくですがわかります。
自分はWebアプリを作ったことがないので、やっていて「こういう作業しないといけないのか」とわかっていくのが楽しかったです（大規模だとまた違うのかもしれませんが）

備忘＆今後同じことを試してみる人がいたら（いるのか？）役に立つかなぁと思い、残しておきます。

<h1>環境</h1>
* macOS Catalina
* Eclipse Version: 2020-09 (4.17.0)

<h1>手順1. Projectをつくる</h1>
[Spring Initialzr](https://start.spring.io/)を用いて、Spring Bootアプリケーションのひな型を作成しました。
多少画面が変わっていますが、手順通りにやれば特に問題ないと思います。

（参考）[Spring Initializrでアプリケーションのひな型を作成する](https://qiita.com/rubytomato@github/items/b2c0686517e1c86ceb48)

<h1>手順2. MongoDBを設定する</h1>
ローカルにMongoDBを設定しました。
MongoDB公式の手順通りにできます。
私はmacOSなので、brew使って行っています。

本当は、AWSのEC2にMongoDBをインストールして接続したかったのですが、
インストールまではできたものの、接続はできませんでした…<b>誰か教えてください（泣）</b>
公式手順：https://docs.mongodb.com/manual/tutorial/install-mongodb-on-amazon/

<h1>手順3. ToDoモデルの作成</h1>
アノテーション（@NotBlunk、@Size）でエラー。
調べたところ、pox.xmlに以下を入れると解決。

```xml:pom.xml
@Sizeの場合：
        <dependency>
           <groupId>javax.validation</groupId>
          <artifactId>validation-api</artifactId>
          <version>1.1.0.Final</version>
        </dependency>


@NotBlankの場合：
        <dependency>
          <groupId>org.glassfish</groupId>
          <artifactId>javax.el</artifactId>
          <version>3.0.1-b09</version>
        </dependency>
```

<h1>手順4. Controllerの作成</h1>
@GetMappingの
   Sort sortByCreatedAtDesc = new Sort(Sort.Direction.DESC, "createdAt");
で、エラーが出るので
   Sort sortByCreatedAtDesc = Sort.by(Sort.Direction.DESC, "createdAt");
にする。


Javaのビルドには、手順通りにMavenを使用。
Homebrewを入れているので、brew install mavenで実施。
普通にBUILD FAILUREになり、以降を参照にしてPATHなどもろもろを修正。
maven超入門：https://qiita.com/tarosa0001/items/e5667cfa857529900216

ビルド成功後、localhost:8080を見てみると、
以下のようなエラーページ（が見つからないよ、という意味のページ）が見える。
この時点ではフロントエンドを作っていないので、このままでOK。
![Screen Shot 2020-11-20 at 15.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426345/25c982c6-0fe4-0e65-df0f-e971d5b35345.png)

<h1>手順5. Controllerの作成</h1>
Angularはnode.jsを利用するため、node.jsをインストールする。
Homebrewを使用してのインストールは手順通りに。
（参考）[Angular CLI 環境作成方法（Mac環境）](https://qiita.com/koronpo/items/cc7d3a1aabb7900e1e8e)
エラーが発生した際には、以下のQiitaに助けていただきました。
（参考）[HomebrewでNode.jsをインストール＋エラーの解決方法](https://qiita.com/Dozle/items/dcb2d3e389f592a3398a)

<h1>手順6. 各種修正</h1>
以降のステップは、元サイトの手順のままでも大きなエラーがなかったため省略。
1. appを稼働させる
2. AppComponentのテンプレートを変える
3. Todoクラスを作成する（todo.ts）
4. TodoListComponentを作成する（todo-list.component.ts）
・手順通りにHttpModuleを使用すること（最新版ではHttpClientModuleを推奨されている）
5. TodoListComponentのテンプレートを作成する
6. styles.cssに追加する

一個だけ、
（参考）[AngularでCan't resolve 'rxjs/add/operator/toPromise'と言われた時の対処法](https://qiita.com/macaronista/items/bc0189e6bf047dadfc85)
が起こりました。


<h1>手順7. いよいよ！</h1>
Angluar、SpringBoot、MongoDBを起動させたところ、無事機能しました。
![Screen Shot 2020-11-20 at 9.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426345/c009f451-9f4d-802a-3a17-f7aa536ec87c.png)


<h1>手順8. おわりに</h1>
最初は手順7のときにすんなり機能してくれず、色々調べて結局原因がわからないので、一度全部ストップして、MongoDB、SpringBoot、Angularと起動させたらうまくいきました。

なんとなくではありますが、フレームワークを使うことの意味とか、フロントエンド・バックエンド・データベースのそれぞれの接続の方法とかわかったので、作ってよかったと思います。
これからも習うより慣れろで色々作ってみたいと思っています。