Skip to content

Commit 4dc16c6

Browse files
YadaYukiYadaYuki
authored
feat: update frontend training contents (#247)
## What - Migration create-react-app -> Vite-based SPA - Not changed main UI & Logic, just did some refactoring: - Integrate Linter & Formatter - Applied Lint & Format for all files 🙏🏻 - Codebase organization ( migrated data fetching related logic to `src/api/index.ts`) - Minor changed trainign materials - Confirmed to work with `[email protected]`, `[email protected]`, and `[email protected]` ## Why - De facto deprecation of create-react-app 😢 - facebook/create-react-app#13072 - reactjs/react.dev#5487 - When creating production-level applications, [it is recommended to use frameworks like **Next.js/Remix/GatsyBy/Astro**](https://react.dev/learn/start-a-new-react-project). - However, these frameworks involve too many considerations beyond UI implementation, such as hosting methods and rendering techniques (CSR/SSR/SSG), making them unsuitable for educational purposes in build education. → In Build training course, we decided to use **Vite-based Simple SPA** ## CHECKS ⚠️ Please make sure you are aware of the following. - [ ] **The changes in this PR doesn't have private information
2 parents a6eafa2 + 33acaac commit 4dc16c6

34 files changed

+3129
-27124
lines changed

‎document/07-frontend.en.md‎

Lines changed: 76 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,134 @@
11
# STEP7: Implement a simple Mercari webapp as frontend
22

3-
43
## 1. Build local environment
5-
Install Node v20 from below.
6-
(20.11.0 LTS is recommended as of Jan 2024)
4+
5+
Install Node v22 from below.
6+
(v22.13.1 LTS is recommended as of Feb 2025)
77

88
https://nodejs.org/en/
99

1010
If you would like to install multiple versions of Node, use [nvs](https://github.com/jasongin/nvs).
1111

12-
Run `node -v` and confirm that `v20.0.0` or above is displayed.
12+
Run `node -v` and confirm that `v22.0.0` or above is displayed.
1313

1414
Move to the following directory and install dependencies with the following command.
15+
1516
```shell
1617
cd typescript/simple-mercari-web
1718
npm ci
1819
```
1920

2021
After launching the web application with the following command, check your web app from your browser at [http://localhost:3000/](http://localhost:3000/).
22+
2123
```shell
2224
npm start
2325
```
2426

2527
Run the backend servers in Python/Go as described in Step3.
2628
This simple web application allows you to do two things
29+
2730
- Add a new item (Listing)
2831
- View the list of items (ItemList)
2932

30-
These functionalities are carved out as components called `src/components/Listing` and `src/components/ItemList`, and called from the main `App.tsx`.
33+
These functionalities are carved out as components called `src/components/Listing.tsx` and `src/components/ItemList.tsx`, and called from the main `App.tsx`.
3134

3235
:pushpin: Sample code is in React but the knowledge of React is not necessary.
3336

34-
### (Optional) Task 1: Add a new item
35-
Use the listing form to add a new item. In this screen, you can input name, category and an image for a new item.
37+
## (Optional) Task 1: Add a new item
3638

37-
If your API from STEP3 only accepts name and category, modify `typescript/simple-mercari-web/src/components/Listing/Listing.tsx` and delete the image field.
39+
Use the listing form to add a new item. In this screen, you can input name, category and an image for a new item.
3840

41+
If your API from STEP3 only accepts name and category, modify `typescript/simple-mercari-web/src/components/Listing.tsx` and delete the image field.
3942

40-
### (Optional) Task 2. Show item images
43+
## (Optional) Task 2. Show item images
4144

4245
In this screen, item images are all rendered as Build@Mercari logo. Specify the item image as `http://localhost:9000/image/<item_id>.jpg` and see if they can be displayed on the web app.
4346

47+
## (Optional) Task 3. Change the styling with HTML and CSS
4448

45-
### (Optional) Task 3. Change the styling with HTML and CSS
4649
These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specified in `App.css` and they are applied by `className` attribute (e.g. `<div className='Listing'></div>`).
50+
4751
```css
4852
.Listing {
49-
...
53+
...;
5054
}
5155
.ItemList {
52-
...
56+
...;
5357
}
5458
```
55-
Try editing the HTML tags returned in each component and see how the UI changes.
5659

60+
Try editing the HTML tags returned in each component and see how the UI changes.
5761

58-
### (Optional) Task 4. Change the UI for ItemList
62+
## (Optional) Task 4. Change the UI for ItemList
5963

6064
Current `ItemList` shows one column of items sequentially. Use the following reference to change this style into a grid system where multiple items are displayed in the same row.
6165

62-
6366
**:book: References**
6467

6568
- [HTML basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
6669

67-
6870
- [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
6971

70-
7172
- [Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
7273

7374
---
7475

75-
### Next
76+
## Tips
77+
78+
### Debugging
79+
80+
Debugging is the process of checking the operation of a program, identifying problems, and fixing them. In web front-end development, debugging can be performed using the following methods:
81+
82+
By inserting `console.debug()` at the points in the code where you want to check the operation, you can verify the values and states at runtime. For example, in `ItemList.tsx`:
83+
84+
```typescript
85+
export const ItemList = (props: Prop) => {
86+
...
87+
useEffect(() => {
88+
const fetchData = () => {
89+
fetchItems()
90+
.then((data) => {
91+
console.debug('GET success:', data); // Check the contents of the data retrieved from the API here
92+
...
93+
})
94+
.catch((error) => {
95+
console.error('GET error:', error);
96+
});
97+
};
98+
...
99+
```
100+
101+
This debugging information can be checked using the browser's developer tools (**Chrome DevTools**). Chrome DevTools can be opened in any of the following ways:
102+
103+
- Keyboard shortcuts:
104+
- Windows/Linux: `Ctrl + Shift + I`
105+
- macOS: `Cmd + Option + I`
106+
- Right-click on the browser and select "Inspect"
107+
- From the menu, select "More tools" > "Developer tools"
108+
109+
The information output by `console.debug()` will be displayed in the "Console" tab of the developer tools.
110+
111+
For detailed instructions on how to use the developer tools, refer to the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/open?hl=en).
112+
113+
### Build Production-Ready App by using Framework
114+
115+
This material aims to provide a basic understanding of React, so it does not use any specific frameworks. However, the React development team recommends using the following frameworks when developing actual production-level web services ([Creating a React App](https://react.dev/learn/creating-a-react-app)):
116+
117+
- [Next.js (App Router)](https://nextjs.org/docs)
118+
- [React Router (v7)](https://reactrouter.com/start/framework/installation)
119+
120+
:warning: As a point of caution, **it has been [officially announced on February 14, 2025](https://react.dev/blog/2025/02/14/sunsetting-create-react-app) that [`create-react-app`](https://github.com/facebook/create-react-app), which is introduced in many React materials, will be deprecated**. For new projects, it is strongly recommended to consider methods other than using `create-react-app`.
121+
122+
In the future, when you are responsible for developing services intended for long-term use by users, consider using these frameworks. When creating a new service, it is important to understand the characteristics of each framework and the requirements of the service you want to create, and select the appropriate framework.
123+
124+
When selecting a framework, it is good to consider the following perspectives:
125+
126+
- Scale and complexity of the service
127+
- Performance requirements
128+
- SEO requirements
129+
- Team's technology stack
130+
- Deployment environment
131+
132+
## Next
76133
77-
[STEP8: Run frontend and API using docker-compose](08-docker-compose.en.md)
134+
[STEP8: Run frontend and API using docker-compose](08-docker-compose.en.md)

‎document/07-frontend.ja.md‎

Lines changed: 88 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,134 @@
1-
# STEP7: Webのフロントエンドを実装する
1+
# STEP7: Web のフロントエンドを実装する
22

33
## 1. 環境構築
4-
以下からv20のNodeをインストールしてください。
5-
（2024年1月現在20.11.0 LTSを推奨）
64

7-
https://nodejs.org/en/
5+
以下から v22 の Node をインストールしてください。
6+
（2025 年 2 月現在 v22.13.1 LTS を推奨）
87

9-
複数のバージョンをインストールしたい場合は[nvs](https://github.com/jasongin/nvs)を推奨します。
8+
https://nodejs.org/en/
109

11-
`node -v` を実行して `v20.0.0` 以上のバージョンが表示されれば正しくインストールできています。
10+
`node -v` を実行して `v22.0.0` 以上のバージョンが表示されれば正しくインストールできています。
1211

1312
まずはディレクトリに移動して、必要なライブラリをインストールします。
13+
1414
```shell
1515
cd typescript/simple-mercari-web
1616
npm ci
1717
```
1818

1919
以下のコマンドでアプリを起動させた後、ブラウザから[http://localhost:3000/](http://localhost:3000/)にアクセスします。
20+
2021
```shell
2122
npm start
2223
```
23-
サーバー(Python/Go)もローカルで立ち上げておきましょう。
24+
25+
Step3 のサーバー(Python/Go)もローカルで立ち上げておきましょう。
2426
このシンプルな画面では、以下の二つのことができるようになっています。
27+
2528
- 新しい商品の登録 (Listing)
2629
- 商品の一覧の閲覧 (ItemList)
27-
28-
これらは、それぞれ`src/components/Listing`と`src/components/ItemList`というコンポーネントによって作られており、`App.tsx`から呼び出されています。
2930

30-
:pushpin: サンプルコードはReactで書かれていますが、Reactの理解は必須ではありません。
31+
これらは、それぞれ`src/components/Listing.tsx`と`src/components/ItemList.tsx`というコンポーネントによって作られており、`App.tsx`から呼び出されています。
32+
33+
:pushpin: サンプルコードは [React](https://react.dev/versions) で書かれていますが、React の理解は必須ではありません。なお、ビルドツールとして [React の公式ドキュメントの推奨](https://react.dev/learn/building-a-react-framework#step-1-install-a-build-tool)に従い、[Vite](https://github.com/vitejs/vite) を採用しています。
34+
35+
## (Optional) 課題 1. 新しい商品を登録する
3136

32-
### (Optional) 課題1. 新しい商品を登録する
33-
Listingのフォームを使って、新しい商品を登録してみましょう。この画面では、名前、カテゴリ、画像が登録できるようになっています。
37+
Listing のフォームを使って、新しい商品を登録してみましょう。この画面では、名前、カテゴリ、画像が登録できるようになっています。
3438

35-
STEP3で名前とカテゴリのみで出品をするAPIを作った人は、`typescript/simple-mercari-web/src/components/Listing/Listing.tsx`を編集して画像のフィールドを削除しておきましょう。
39+
STEP3 で名前とカテゴリのみで出品をする API を作った人は、`typescript/simple-mercari-web/src/components/Listing.tsx`を編集して画像のフィールドを削除しておきましょう。
3640

41+
## (Optional) 課題 2. 各アイテムの画像を表示する
3742

38-
### (Optional) 課題2. 各アイテムの画像を表示する
39-
この画面では、商品の画像がBuild@Mercariのロゴになっています。`http://localhost:9000/image/<item_id>.jpg`を画像として指定し、一覧画面でそれぞれの画像を表示してみましょう。
43+
この画面では、商品の画像が Build@Mercari のロゴになっています。`http://localhost:9000/image/<item_id>.jpg`を画像として指定し、一覧画面でそれぞれの画像を表示してみましょう。
4044

41-
### (Optional) 課題3. HTMLとCSSを使ってスタイルを変更する
42-
この二つのコンポーネントのスタイルは、CSSによって管理されています。
45+
## (Optional) 課題 3. HTML と CSS を使ってスタイルを変更する
4346

47+
この二つのコンポーネントのスタイルは、CSS によって管理されています。
48+
49+
どのような変更が加えられるのかを確認するため、まず`ItemList`コンポーネントの CSS を編集してみましょう。`App.css`の中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、`className`という attribute を通じて適用することができます(e.g. `<div className='Listing'></div>`)。
4450

45-
どのような変更が加えられるのかを確認するため、まず`ItemList`コンポーネントのCSSを編集してみましょう。`App.css`の中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、`className`というattributeを通じて適用することができます(e.g. `<div className='Listing'></div>`)。
4651
```css
4752
.Listing {
48-
...
53+
...;
4954
}
5055
.ItemList {
51-
...
56+
...;
5257
}
5358
```
54-
CSSだけではなく、各コンポーネントでreturnされているHTMLタグも変更してみましょう。
5559

60+
CSS だけではなく、各コンポーネントで return されている HTML タグも変更してみましょう。
5661

57-
### (Optional) 課題4. アイテム一覧のUIを変更する
58-
現在の`ItemList`では、それぞれのアイテムが上から一つずつ表示されています。以下のレファレンスを参考に、グリッドを使ってアイテムを表示してみましょう。
62+
## (Optional) 課題 4. アイテム一覧の UI を変更する
5963

64+
現在の`ItemList`では、それぞれのアイテムが上から一つずつ表示されています。以下のドキュメントを参考に、グリッドを使ってアイテムを表示してみましょう。
6065

6166
**:book: References**
6267

63-
- [HTMLの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics)
68+
- [HTML の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics)
6469

65-
- [CSSの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
70+
- [CSS の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
6671

6772
- [グリッドレイアウトの基本概念](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
6873

6974
---
7075

71-
### Next
76+
## Tips
77+
78+
### デバッグ
79+
80+
デバッグとは、プログラムの動作を確認し、問題を特定・修正するプロセスです。
81+
82+
Web フロントエンドでは、コードの動作を確認したい箇所に`console.debug()`を仕込むことで、実行時の値や状態を確認することができます。例えば`ItemList.tsx`の場合：
83+
84+
```typescript
85+
export const ItemList = (props: Prop) => {
86+
...
87+
useEffect(() => {
88+
const fetchData = () => {
89+
fetchItems()
90+
.then((data) => {
91+
console.debug('GET success:', data); // ここでAPIから取得されたデータの中身を確認
92+
...
93+
})
94+
.catch((error) => {
95+
console.error('GET error:', error);
96+
});
97+
};
98+
...
99+
```
100+
101+
これらのデバッグ情報は、ブラウザの開発者ツール（**Chrome DevTools**）で確認することができます。Chrome DevTools は以下のいずれかの方法で開くことができます：
102+
103+
- キーボードショートカット:
104+
- Windows/Linux: `Ctrl + Shift + I`
105+
- macOS: `Cmd + Option + I`
106+
- ブラウザ上で右クリックして「検証」を選択
107+
- メニューから「その他のツール」>「デベロッパー ツール」を選択
108+
109+
開発者ツールの「Console」タブに、`console.debug()`で出力した情報が表示されます。
110+
111+
詳しい開発者ツールの使い方については、[Chrome DevTools のドキュメント](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。
112+
113+
### Build Production-Ready App by using Framework
114+
115+
本教材では React の基本的な理解を目的としているため、特定のフレームワークを使用していません。しかし、React の開発チームは実際のプロダクションレベルの Web サービスを開発する際には、以下のようなフレームワークの利用を推奨しています([Creating a React App](https://react.dev/learn/creating-a-react-app))：
116+
117+
- [Next.js (App Router)](https://nextjs.org/docs)
118+
- [React Router (v7)](https://reactrouter.com/start/framework/installation)
119+
120+
:warning: 注意点として、**多くの React の教材等で紹介されている[`create-react-app`](https://github.com/facebook/create-react-app)は非推奨となる**ことが、2025 年 2 月 14 日に[正式にアナウンス](https://react.dev/blog/2025/02/14/sunsetting-create-react-app)されました。新規プロジェクトでは`create-react-app`は使用せず、上述のような別の方法を検討することを強くお勧めします。
121+
122+
今後、実際に長期的にユーザーに使ってもらうことを想定したサービスの開発を担当する際は、これらのフレームワークの利用を検討しましょう。新しいサービスを作る際は、各フレームワークの特徴と作りたいサービスの要件を理解した上で、適切なフレームワークを選定することが重要です。
123+
124+
フレームワークの選定では、以下のような観点を考慮すると良いでしょう：
125+
126+
- サービスの規模と複雑さ
127+
- パフォーマンス要件
128+
- SEO 要件
129+
- チームの技術スタック
130+
- デプロイ環境
131+
132+
## Next
72133
73-
[STEP8: docker-composeでAPIとフロントエンドを動かす](08-docker-compose.ja.md)
134+
[STEP8: docker-compose で API とフロントエンドを動かす](08-docker-compose.ja.md)

‎typescript/simple-mercari-web/.env.development‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_BACKEND_URL=http://localhost:9000
2+
VITE_FRONTEND_URL=http://localhost:3000

‎typescript/simple-mercari-web/.gitignore‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2-
3-
# dependencies
4-
/node_modules
5-
/.pnp
6-
.pnp.js
7-
8-
# testing
9-
/coverage
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
109

11-
# production
12-
/build
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
1314

14-
# misc
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
1519
.DS_Store
16-
.env.local
17-
.env.development.local
18-
.env.test.local
19-
.env.production.local
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
2025

21-
npm-debug.log*
22-
yarn-debug.log*
23-
yarn-error.log*

‎typescript/simple-mercari-web/.vscode.example/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
3+
}

‎typescript/simple-mercari-web/.vscode.example/settings.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"editor.defaultFormatter": "esbenp.prettier-vscode",
3+
"editor.formatOnSave": true,
4+
"editor.codeActionsOnSave": {
5+
"source.fixAll.eslint": "explicit"
6+
}
7+
}

0 commit comments

Comments
 (0)