React × Tailwind × v0で始めるコンポーネント開発をしてみよう！

React × Tailwind × v0で始めるコンポーネント開発をしてみよう！技育CAMPメンター󰞹 宮野　奎太朗

はじめに 2 学生の皆さま、今回ご参加いただきありがとうございます！

はじめに 3 【名前】宮野　奎太朗 (ミヤケイ) 【出身】青森県青森市 🍎 【会社】株式会社サイバーエージェント【作っているもの】ゲーム (サーバーサイド )
【趣味】ランニング、中華料理作り【X】@38ke1 本日はよろしくお願いします！

はじめに 4 ・Web開発(フロントエンド )に興味がある方・Tailwindを使ったコンポーネント開発・Reactを使った開発

はじめに 5 今回は一緒に実務で用いている技術で実装をしてみましょう！

はじめに 6 前半のインプットタイムで今回使う技術についての説明をします

はじめに 7 後半はアウトプットタイムとして実際にコードを一緒に書いてみましょう！

はじめに 8 今回使用する技術の概要を学ぶ &使ってみるところまで目指して頑張っていきましょう 💪

今回のゴール 9 ・自分なりにコードを書いてみる・エラーで詰まる経験を得る・勉強会後もぜひアプリ開発を！

今回のゴール 10 ・自分なりにコードを書いてみる・エラーで詰まる経験を得る・勉強会後もぜひアプリ開発を！ →皆様の自走力を付けることが目的です 👍

今回のアジェンダ 11 1. Tailwindの概要、基本的な文法について 2. shadcn/uiの便利なポイント 3. v0のユースケース【インプットタイム 🌞】

今回のアジェンダ 12 1. GitHubからコードをクローン &構成解説 2. Tailwindの設定をしてみよう！ 3. shadcn/uiを使ってみよう！ 4.
v0を使ってコンポーネント開発をしてみよう！【アウトプットタイム 🌝】

はじめに 13 それでは始めていきましょう！ 🙌

1. Tailwindの概要 14 Tailwindとは？

1. Tailwindの概要 15 Tailwindとは？ →CSSフレームワークの 1種

1. Tailwindの概要 16

1. Tailwindの概要 17 CSSを簡易的に書ける構文ユーティリティクラス (utility class)

1. Tailwindの概要 18 用意されている基本構文を確認してみましょう！

1. Tailwindの概要 19 まずは以下の 3つを覚えてもらえれば OKです！ 1. Sizing 2.
Typography 3. Spacing

2. shadcn/uiの便利なポイント 20 柔軟かつカスタマイズ性が高い UIコンポーネント集

2. shadcn/uiの便利なポイント 21 1. 使いたいコンポーネントのみ入れられる 🙆 2. npmの依存関係ナシで使える 3. コンポーネントの種類が豊富

2. shadcn/uiの便利なポイント 22 どのようなコンポーネントがあるか見てみましょう！ 👀 コンポーネント一覧

3. v0のユースケース 23 Vercelが提供する生成 AIサービス

3. v0のユースケース 24 v0で何が出来る？ →shadcn/uiベースのコードを生成可能

3. v0のユースケース 25 1. shadcn/uiベースのコードを生成 2. 画像からも生成可能 3. コマンドからインポートすることも可能

26 次はアウトプットタイムです！実際に手を動かして体験してみましょう 󰳕

1 . GitHubのプロジェクトをクローンしよう 27 以下のURLにアクセスしてローカルサーバーを立ち上げましょう！ React-Hands-on-Tailwind-v0

1 . GitHubのプロジェクトをクローンしよう 28 どのようなファイル構成になっているか確認してみましょう 👀

2. Tailwindの設定をしてみよう！ 29 今回はTailwind v4.0 を使って設定してみましょう！ 1. インストールガイド 2. Upgrade
guide

3. shadcn/uiを使ってみよう！ 30 ぜひ読んでみてください 👀 1. Viteインストールガイド 2. インストール後の変更内容

4 . v0を使ってみよう！ 31 v0トップページ

チャレンジしてみよう！ 32 勉強会後、以下の内容を作ってみましょう！・リスト一覧を作成 (好きなテーマで作ってみよう！ ) ・クリック後に詳細ページへ移動・コンポーネントを組み合わせて詳細情報を表示

まとめ 33 今回は各技術を学び実際に自分の手でコードを書いていただきました 󰳕

まとめ 34 粘った経験が必ずエンジニアとしての糧になります！

まとめ 35 最後に僕の好きなキャッチコピーを紹介します 👀

まとめ 36 皆さま本日はお疲れ様でした！ 👋

React × Tailwind × v0で始める コンポーネント開発をしてみよう！