はじめに

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

Spring Boot + Angular + MongoDB Rest API Tutorial

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

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

環境

macOS Catalina
Eclipse Version: 2020-09 (4.17.0)

手順1. Projectをつくる

Spring Initialzrを用いて、Spring Bootアプリケーションのひな型を作成しました。
多少画面が変わっていますが、手順通りにやれば特に問題ないと思います。

（参考）Spring Initializrでアプリケーションのひな型を作成する

手順2. MongoDBを設定する

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

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

手順3. ToDoモデルの作成

アノテーション（@NotBlunk、@Size）でエラー。
調べたところ、pox.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>

手順4. Controllerの作成

@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。

手順5. Controllerの作成

Angularはnode.jsを利用するため、node.jsをインストールする。
Homebrewを使用してのインストールは手順通りに。
（参考）Angular CLI 環境作成方法（Mac環境）
エラーが発生した際には、以下のQiitaに助けていただきました。
（参考）HomebrewでNode.jsをインストール＋エラーの解決方法

手順6. 各種修正

以降のステップは、元サイトの手順のままでも大きなエラーがなかったため省略。
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'と言われた時の対処法
が起こりました。

手順7. いよいよ！

Angluar、SpringBoot、MongoDBを起動させたところ、無事機能しました。

手順8. おわりに

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

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

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