目次-フロントエンド:Next.js バックエンド SpringBoot ネットスーパーのクローンサイト【随時更新】

# 概要
今作っている、ネットスーパーのクローンサイトに関する記事の目次です。
進捗としてはまだ途中です。


# 技術スタック
フロントエンド：TypeScript,React,Next.js、Varcel
バックエンド:Java,SpringBoot,AWS
フロントエンドとバックエンドはREST-APIで通信しています。


# qiita記事目次
日付|記事名|追記|
----|-----------------------------------------|-------
2022-07-01|[［エラー］SpringBoot 　@Autowiredでエラー　原因はSpringコンテナの未登録](https://qiita.com/RYA234/items/885a01636e1fc80e08df)|状況に応じてコンストラクタインジェクションも使えるようしよう
2022-07-04|[IntelliJ→CodeSpace移行メモ　SpringBoot](https://qiita.com/RYA234/items/4e2a3390f1723e236da4)|
2022-11-30|[SpringBoot Pagenationをテストコード書いてからプロダクトコードを実装する](https://qiita.com/RYA234/items/edce52641b062260dd29)| RESTAPIで初めて実装した奴
2022-12-05|[SpringBoot でテスト駆動開発　ドメインはECショップで注文情報を作成する部分](https://qiita.com/RYA234/items/0ff4915fc600a894ad4d)|
2022-12-06|[Jest React TypeScript 環境構築](https://qiita.com/RYA234/items/5c2604d54c7c1c3551cf)|時期尚早だった。プロダクトコードある程度書けないと難しいと実感。
2022-12-07|[Jest React TypeScript　ボタンの色をテストコードで評価する](https://qiita.com/RYA234/items/ad28a8250e1b8a625961)|同上 
2022-12-08|[Jest React TypeScript デバッグツール　logRoles](https://qiita.com/RYA234/items/c8d1f5d378e39dd64d03)|同上
2022-12-11|[SpringBoot  コントローラの単体テストでエラー　原因は@WebMvcTestの引数不足](https://qiita.com/RYA234/items/914c6900d9a4b7fad35b)| 
2022-12-12|[Jest React TypeScript toBeChecked()を使ってボタンとチェックボックスの状態をテストする](https://qiita.com/RYA234/items/83482c01dfbd7895b846)|時期尚早
2022-12-13|[Jest React TypeScript でボタン押下の挙動をテストする](https://qiita.com/RYA234/items/14bdce587dbcf7eab032)|時期尚早
2022-12-14|[jest react typescript チェックボックスのラベルを探す](https://qiita.com/RYA234/items/3bb809d4882a917d81da)|時期尚早
2022-12-15|[jest react typescript descriptionの使い方](https://qiita.com/RYA234/items/e4936a85b6c9beb5638c)|時期尚早
2022-12-16|[Jest React TypeScript popoverのテスト](https://qiita.com/RYA234/items/cc78a5435f9ed2a2ff6c)|時期尚早
2022-12-17|[[症状]github codespaces でブラウザのプレビュー使えず　原因はCookieがブロックされてたため](https://qiita.com/RYA234/items/eeb21c29c0a365161a4c)|
2022-12-18|[ローカル環境下でSpringBootのRestApiをNextjsから叩く 結論：Contollerクラスに@CrossOrigin付与して解決](https://qiita.com/RYA234/items/8dce28c3e80eb00bba6c)|　初めて直面したCORS関係のエラー 今回はバックエンド側(SpringMvc)の問題だった模様　
2022-12-26|[SpringBoot Nextjs 認可が必要なapiにアクセスできない　原因はSpringSecurityの設定](https://qiita.com/RYA234/items/bef61d03304f095a3791)|CORS関係のエラー 前回はSpringMvc今回はSpringSecurity…この二つのプラグインは領域が重複しているから見分けがつかん
2022-12-27|[axios ローカル環境でapiにアクセスできない AxiosError: connect ECONNREFUSED　解決　URIのドメイン名をIPアドレス表記にする](https://qiita.com/RYA234/items/1585418b978a12d0fbdb)| 最初CORSの関係だと疑ったから時間かかった　問題の切り離しが難しい
2022-12-28|[axiosでGET Method呼び出し　Springboot restApi](https://qiita.com/RYA234/items/12db8652771f9d86fdcd)|
2022-12-29|[TypeScript  string ｜ null →string の型変換　型アセーションを使う](https://qiita.com/RYA234/items/c8f2fa4dad8218bac592)|TypeScriptの型の厳しさに苦労していた記憶
2022-12-30|[認可認証の実装　フロントエンド:nextjs 　バックエンド:SpringSecurityのjwt認証 ](https://qiita.com/RYA234/items/c41632ef5101f0db0b5d)|
2023-01-0|[フロントエンド: react axios バックエンド：SpringBoot JWT認可方式のCRUD処理　検証](https://qiita.com/RYA234/items/d3bc85af93bf16153346)|
2023-01-1|[フロントエンド:react バックエンドSpringboot RestApi　ページネーション実装](https://qiita.com/RYA234/items/53461419199f69f69538)|
2023-01-1|[バック：SpringBoot フロント:React ページネーション付き商品一覧機能を実装する](https://qiita.com/RYA234/items/0a35579a7cbb075a7e73)|
2023-01-1|[next.js　ページのレンダリングについて CSR SSG ISR SSRの実装方法と動きの確認](https://qiita.com/RYA234/items/d87aa0d0286f8da18d81)|
2023-01-1|[nextjs SSGとSSRのdynamicPage　実装　動きの確認](https://qiita.com/RYA234/items/047edf0904ad17ef2d4b)|
2023-01-1|[next.js  StoryBookの導入で詰まった点　画像(jpgファイル)とcss(styled-jsx)の有効化](https://qiita.com/RYA234/items/0b040132532ea71580f4)|
2023-01-2|[SpringBoot  SwaggerUI（JWT SpringSecurity付）の実装](https://qiita.com/RYA234/items/365fa7d440f0addfa294)|
2023-01-2|[SpringBoot Repository層の単体テスト　H2データベースを使うときの設定](https://qiita.com/RYA234/items/50575a6dc2a73ff876d9)|
2023-01-2|[[エラー]SpringBoot Repository UPDATE文の単体テストが成功しない　原因@Modifyingの引数が不足していため。](https://qiita.com/RYA234/items/9733ab90e4f6a2ce8d10)|
2023-01-3|[Next.jsにJestを導入する](https://qiita.com/RYA234/items/85d2ba14a9632d982713)|
2023-02-0|[React useContextとuseStateを使ってnumber型の配列を制御する](https://qiita.com/RYA234/items/ae1ff4f78dcef3cb74eb)|
2023-02-0|[React useContextとuseStateを使って型定義した配列を制御する](https://qiita.com/RYA234/items/87dfeefddb4f90c372d3)|
2023-02-1|[フロントNext.js バックエンドSpringBootRESTAPIで買い物カゴ実装](https://qiita.com/RYA234/items/31550ce4b50b4fd8f01e)|
2023-02-1|[SpringBoot Rest-Apiメール認証付きユーザー登録機能の実装](https://qiita.com/RYA234/items/ecf37fdc2e080b1127f8)|
2023-02-1|[フロントNext.js バックSpringBoot　商品一覧から商品を選択して買い物カゴに加える動きを実装する](https://qiita.com/RYA234/items/0297aa890cf2d32b3213)|hook化した動的配列の処理に手を焼いた記憶。この辺りからReactのHookを使って適切にレンダリングできるようになった。
2023-02-1|[バック：SpringBoot  フロント:Next.js　メール認証付きユーザー登録機能を実装](https://qiita.com/RYA234/items/e7f00fd5a242acb36981)|
2023-02-2|[フロントNext.js　バックSpringBoot　カテゴリーメニューを実装する](https://qiita.com/RYA234/items/c276302404ba46e77eb0)|
2023-02-2|[MySQLの設定を簡略化するために、SpringBootにDockerを導入する 　CodeSpaces上でも動くことを確認](https://qiita.com/RYA234/items/f35f09204477ab20ddb6)|
2023-02-2|[バック：SpringBoot RestApiにStripeを導入する　１．支払いインテントを作るまで](https://qiita.com/RYA234/items/d8f0b04aa5dff0589b28)|



# githubのURL
フロントエンド：

https://github.com/RYA234/ecshop_front_react

バックエンド：

https://github.com/RYA234/springboot-ecshop-rest-api


# 参考資料

## バックエンド側(SpringBoot Java)
評価はA>B>C（主観なんで）
Aが一番良いです。

名称|感想|評価
------------------------------------------------|---|-------
[Spring Boot E-Commerce Ultimate Course](https://www.udemy.com/course/spring-boot-e-commerce-ultimate/)|SpringBootでECショップを作る講座。客が商品を一覧するところから、従業員が商品を出荷する所まで網羅しており、ECショップのほぼすべての機能を収めている。しかしフロントエンドはthymeleafが使われているからそのままは使えなかった。講座は80時間超|B
[Testing Spring Boot App with JUnit, Mockito & Testcontainers](https://www.udemy.com/course/testing-spring-boot-application-with-junit-and-mockito/)|SpringBootのテストコードの講座。わかりやすいし、ソースコードもあるから分かりやすい。テストの苦手意識がなくなった。講座時間は8時間程度|A
[Building Real-Time REST APIs with Spring Boot - Blog App](https://www.udemy.com/course/building-real-time-rest-apis-with-spring-boot/learn/lecture/35754898?start=30#overview)|SpringBootでRESTAPIで作る講座。Dockerの導入、AWSのデプロイ方法といったSectionがあるから良い。講座時間は30時間程度|A
後悔しないためのSpring Boot 入門書：Spring 解体新書（第2版） 著 田村達也 |始めて触ったSpringBoot関係の本。良くないです。以下の2点で後悔してます。1.thymeleafで書かれている。今どきフロントエンドとはAPIで繋いでいるのにThymeleafを使っているのがわからない。実務と乖離しすぎている。一応APIの項目もあるけどちょっとしかない。2.MyBatisを使っている。初心者だったら素直に簡単なSpringDataJpa使ったほうがいいのでは？最近でた本でこれはちょっときつい|C
JUnit実践入門 著 渡辺修司|JUnitの本。Junitの入門書であってSpringBootのテストコードの入門書ではないのが注意点です。これだけ読んでもSpringBootのテストコードを書くのは難しいです。Android(Java or Kotlin)でテストコードを書きたいって場合も難しいです。SpringBootの単体テストの書き方をUdemyで習得する→JUnitで不明点があるからこの本で補強するってのが良い使い方だと思います。最初に手を出すと苦労します。（経験談）|B



## フロントエンド側(TypeScript Next.js React)

名称 | 感想|評価
----|-----|----
りあクト！ 著 大岡由佳|Reactの歴史的流れを説明してるのが良かった。特に印象に残ったのは状態管理の歴史（Flux→Redux→Hook）、CustomHookでロジックとUIを分離することですね。これからReact始める人にとってかなり有益な本。|A|
動くWebデザインアイディア張 著 久保田涼子|よく見かけるWebデザインを網羅している本。Webサイトも有り簡単に確認できるのも良いポイント。ただJQueryで書かれているため減点。自分でReactで実装する練習も良いかもしれないですね。|B
TYpeScriptととReact/Next.jsでつくる実践Webアプリケーション開発 著 手島拓也|Next.jsとReactでWebアプリケーションを作る本。あらゆることを網羅しており、出し惜しみをしてない感が伝わって好きですね。特に良いと思ったのがコンポーネント設計とユニットテストの実例があるからとても良い。テストが書かれている本は少ないから為になります。レベルとしては難しくReact初めたばかりの人はキツイです。|A
フロントエンド開発入門 著 安達稜|フロントエンドエンジニアとして必要なスキルを知ることができる本。チーム開発、他領域のエンジニアとの協調方法の項目が勉強になりました。フロントエンドの仕事のススメ方を知らない自分にとっては有益な本でした。|A
[Testing React with Jest and React Testing Library (RTL)](https://www.udemy.com/course/react-testing-library/)|JestとReactTestingLibraryの講座。コンポーネントの単体テストがメインです。注意点としては、テストしやすいプロダクトコードの書き方は教えてないことです。私の場合、プロダクトコードもロクに書けてない時に受講したのであまり効果的ではなかったです。体感だとcustomHookでUIとロジック部分を分けれる位になったら始めたほうが妥当です。。講座時間8時間|B
[Testing Next.js Apps with Jest, Testing Library and Cypress](https://www.udemy.com/course/nextjs-testing/)|Next.jsアプリケーションのテスト方法全般を紹介している講座。講座時間8時間|B