はじめに
先輩社員の方と一緒に業務中に自己学習の一環として簡単なTodoアプリを作成を行ったので、その記録を残します。
背景
前回記事の続きとして今回は簡単なTodoアプリを
「React.js と Spring Data REST」のチュートリアルに習って作成します。
パート 1 基本的な機能
①プロジェクト作成
spring-initializrでプロジェクト作成
| 項目 | 選択 |
|---|---|
| Project | Gradle |
| Language | Java |
| Spring boot | 2.6.6 |
| Packaging | War |
| Java | 11 |
| Dependencies | Rest Repositories,Thymeleaf,Spring Data JPA,H2 Database,Spring Web,Lombok,PostgreSQL Driver |
※EARファイル・WARファイル・JARファイルの違いや特徴について
②コマンド実行にてCRUD操作可能なアプリ作成
- @Entityをつけて管理したいデータ格納クラスを作成
- 1で作ったデータをCRUD操作するためにCrudRepositoryを継承したinterfaceを作成
- 1で作ったデータを2を実装したクラスでDB操作するために
CommandLineRunnerを継承したデータ操作用クラスを作成 -
@SpringBootApplicationをつけてアプリ起動時に呼ばれるクラスを作成
このrunメソッドから3.1で作ったRunnerが呼ばれる
ざっくり上記作業だけでcurlコマンドでCRUD操作ができるようになっていることを確認
③React.jsを用いて画面の表示
※今回はGradleを選択していてpom.xmlの存在がないので
「Spring BootアプリにCreate React Appを導入する」を参考に画面描画の準備を整える
（チュートリアルはpom.xml,package.json,webpack.config.jsに記載で準備完了）
- Create React Appを用いてフロントエンドをfrontendフォルダ配下に作成
- 1で作成したフォルダ配下の成果物をチュートリアルのjs,htmlファイルで置き換える
- 今回はrestを使いたいので、1で作成したフォルダ配下のpackage.jsonにrestを追記
- yarn install 実行で3で追加したrestも含めnode_modules配下にモジュール準備
- Create React Appで作成するとeslint入りで作成されるので.eslintrc.jsonを作成して
eslintを利用できるようにする （js解析ツールなので利用しない場合はpackage.jsonから宣言消す） - 成果物をアプリ側に転送するpostbuild.jsを作成
- yarn build実行
- アプリ側（サーバー側）から参照できる位置に成果物が置かれる
ざっくり上記作業だけでブラウザ画面で登録されているTodo内容を参照可能になっていることを確認
一旦ここまで
引き続き現在も、
・DBでデータ管理できるようにしたり
・Bulma使って見た目を良くしたり
しながらパート2以降に進んでいますが長くなるので一旦ここまで。
一緒に勉強している先輩の力がかなり大きいですが、
継続できているのが良い感触（先輩には感謝）。
引き続きまたアウトプット、なんとなくの自分なりの理解を文字で残していければと思います。