「はじめてのReact」チュートリアル学習コミュニティ
0から「React 完全に理解した」状態になるための、学習コミュニティです。定期開催のハンズオンや、もくもく会など、ゆるく交流しながら Re...開催予定のイベント
【フルスタック Next.js 開発入門！】初心者向けハンズオン勉強会【③ / 全3回】
オンライン
「はじめてのReact」チュートリアル学習コミュニティが次に開催するイベントはこちら
参加枠
1人／定員6人
初学者参加枠【先着順】1,500円 (クレジット払い)
0人定員3人
初学者参加枠（当日PayPay払い）【先着順】1,500円 (現金払い)
1人定員3人
| 参加枠 | 申込形式 | 参加費 | 参加者 |
|---|---|---|---|
初学者参加枠 | 先着順 | 1,500円(クレジット払い) | 0人 / 定員3人 |
初学者参加枠（当日PayPay払い） | 先着順 | 1,500円(現金払い) | 1人 / 定員3人 |
基本情報
- 日時
- 〜
- 開催形式
- オンライン
イベント内容
React 初心者向けの、ハンズオン形式のオンライン勉強会です👋
事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します！
実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー！
今回のお題
作成するアプリ：
民泊アプリ
レベル：実践編
概要：
このプロジェクトでは、Airbnb のような「民泊」シェアアプリを構築します。
宿泊施設を所有する人（ホスト）が、自宅やスペースを登録し、
旅行者（ゲスト）がそれらの施設を予約できるプラットフォームです。
全 3 回のシリーズについて
毎週開催している、２時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。
今回は、２時間では作りきれない、より実践的なアプリを3週（2時間×3回）で、構築します！
Next.js を用いたフルスタックアプリのプロトタイプとして、様々な形で応用ができる構成になっています。
日程は下記を予定しています：
- 第１回：5/4（日） 16時〜18時
- 第２回：5/11（日） 16時〜18時
- 第３回：5/18（日） 16時〜18時
（全３回を予定していますが、進捗によっては全２回で完成する場合もあります。）
学習する内容：
今回のテーマは、Next.js アプリでのフルスタックアプリケーション開発です。
基本的な、コンポーネント設計、ルーティング、状態管理を始め、
API 連携、DB 操作などについて、確認してください。
使用技術：
- Next.js 15 App Router
- Clerk による認証機能
- Supabase によるデータベースの活用
- Supabase Storage による画像アップロード
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
こんな初心者におすすめ！
- React の基本的な扱いに慣れてきた方
- プラットフォーム・UGC アプリの開発について学びたい方
- Next.js におけるデータベース/APIを用いた実装に入門したい方
- React エンジニアとしての転職/就職を目指している方
- React/ Next.js を使った簡単なプロジェクトにチャレンジしてみたい方
要件：
- Node.js 環境（v18.18.0 以上）が構築されたPCが必要です
- Git/ GitHub環境（アカウント）の用意
- HTML/CSS/JavaScriptの基礎知識が必要です
- Reactの基礎（Progateレベルの内容）は理解している前提の内容となっております
- Next.jsの基礎（公式チュートリアルレベルの内容）は理解している前提の内容となっております
- その他、ハンズオン中には、利用するサービスへのユーザー登録が必要です。
開催概要
➡️場所：Google Meet を予定(オンライン開催）
音声のみでOKです！
申し込みが完了すると「参加者への情報」という場所に、URLが表示されます。
なお、Google Meetへの参加は、Google アカウントが必要です！
➡️参加費
1500円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)
注意事項
下記を、ご確認ください：
- 実際に手を動かして、一緒に作業をするハンズオン形式のワークショップとして進行します。
- 視聴のみで参加することも、全く問題ないです！
- 登壇者の発表（LT）を視聴する形式の、セミナーではありませんのでご注意ください。
- 無断欠席・遅刻は、ご遠慮ください。
- 勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。
当日のスケジュールの流れ
ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います！
（音声・チャットで、リアルタイムでリアクションや質問ができます）
| 時間 | 内容 |
|---|---|
| 16:00〜16:10 | 最初の挨拶 |
| 16:10〜16:20 | 仕様確認＆開発準備 |
| 16:20〜17:50 | ハンズオン開始 |
| 17:50〜 | 終わりの挨拶など |
その他：
- 実際は、時間内で、進めるところまでタスクを進める形になります。
- 時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします！
- なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います！！
ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです！
（進めるスピードなどの、進行に関するご意見も大歓迎です！）
参考キーワード
webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ
お問い合わせ
開催グループ
主催