以下から v22 の Node をインストールしてください。 （2025 年 2 月現在 v22.13.1 LTS を推奨）
node -v を実行して v22.0.0 以上のバージョンが表示されれば正しくインストールできています。
まずはディレクトリに移動して、必要なライブラリをインストールします。
cd typescript/simple-mercari-web
npm ci以下のコマンドでアプリを起動させた後、ブラウザからhttp://localhost:3000/にアクセスします。
npm startSTEP4 のサーバー(Python/Go)もローカルで立ち上げておきましょう。 このシンプルな画面では、以下の二つのことができるようになっています。
- 新しい商品の登録 (Listing)
- 商品の一覧の閲覧 (ItemList)
これらは、それぞれsrc/components/Listing.tsxとsrc/components/ItemList.tsxというコンポーネントによって作られており、App.tsxから呼び出されています。
📌 サンプルコードは React で書かれていますが、React の理解は必須ではありません。なお、ビルドツールとして React の公式ドキュメントの推奨に従い、Vite を採用しています。
Listing のフォームを使って、新しい商品を登録してみましょう。この画面では、名前、カテゴリ、画像が登録できるようになっています。
STEP4 で名前とカテゴリのみで出品をする API を作った人は、typescript/simple-mercari-web/src/components/Listing.tsxを編集して画像のフィールドを削除しておきましょう。
この画面では、商品の画像が Build@Mercari のロゴになっています。http://localhost:9000/images/<item_id>.jpgを画像として指定し、一覧画面でそれぞれの画像を表示してみましょう。
この二つのコンポーネントのスタイルは、CSS によって管理されています。
どのような変更が加えられるのかを確認するため、まずItemListコンポーネントの CSS を編集してみましょう。App.cssの中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、classNameという attribute を通じて適用することができます(e.g. <div className='Listing'></div>)。
.Listing {
...;
}
.ItemList {
...;
}CSS だけではなく、各コンポーネントで return されている HTML タグも変更してみましょう。
現在のItemListでは、それぞれのアイテムが上から一つずつ表示されています。以下のドキュメントを参考に、グリッドを使ってアイテムを表示してみましょう。
📖 References
デバッグとは、プログラムの動作を確認し、問題を特定・修正するプロセスです。
Web フロントエンドでは、コードの動作を確認したい箇所にconsole.debug()を仕込むことで、実行時の値や状態を確認することができます。例えばItemList.tsxの場合：
export const ItemList = (props: Prop) => {
...
useEffect(() => {
const fetchData = () => {
fetchItems()
.then((data) => {
console.debug('GET success:', data); // ここでAPIから取得されたデータの中身を確認
...
})
.catch((error) => {
console.error('GET error:', error);
});
};
...これらのデバッグ情報は、ブラウザの開発者ツール（Chrome DevTools）で確認することができます。Chrome DevTools は以下のいずれかの方法で開くことができます：
- キーボードショートカット:
- Windows/Linux:
Ctrl + Shift + I - macOS:
Cmd + Option + I
- Windows/Linux:
- ブラウザ上で右クリックして「検証」を選択
- メニューから「その他のツール」>「デベロッパー ツール」を選択
開発者ツールの「Console」タブに、console.debug()で出力した情報が表示されます。
詳しい開発者ツールの使い方については、Chrome DevTools のドキュメントを参照してください。
本教材では React の基本的な理解を目的としているため、特定のフレームワークを使用していません。しかし、React の開発チームは実際のプロダクションレベルの Web サービスを開発する際には、以下のようなフレームワークの利用を推奨しています(Creating a React App)：
create-react-appは非推奨となることが、2025 年 2 月 14 日に正式にアナウンスされました。新規プロジェクトではcreate-react-appは使用せず、上述のような別の方法を検討することを強くお勧めします。
今後、実際に長期的にユーザーに使ってもらうことを想定したサービスの開発を担当する際は、これらのフレームワークの利用を検討しましょう。新しいサービスを作る際は、各フレームワークの特徴と作りたいサービスの要件を理解した上で、適切なフレームワークを選定することが重要です。
フレームワークの選定では、以下のような観点を考慮すると良いでしょう：
- サービスの規模と複雑さ
- パフォーマンス要件
- SEO 要件
- チームの技術スタック
- デプロイ環境