React 初心者向けの、ハンズオン形式のオンライン勉強会です👋

事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します！

実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー！

❓このハンズオン勉強会についての紹介記事

👀イベントの概要

毎週開催している、２時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。

今回は、定期参加のコミュニティメンバー向けのイベントです！

➡️場所：Discord(オンライン開催）
ボイスチャンネルにて、行います！
（飛び入り参加・視聴のみも大歓迎です！）

今回のお題

対象のアプリ：
コンテンツ販売アプリ

レベル：中級〜実践

概要：
このプロジェクトでは、構築済みのアプリに対して、Playwright を用いた E2E テストを追加します。

既存のコードベースに対してテストを書くことで、
より実務的な流れを体験します。

「コンテンツ販売アプリ」のコードがない場合は、最初にGitHubからクローン（複製）できます！

学習する内容：

今回のテーマは、
Next.js/App Router における、フロントエンド E2E テスト（Playwright）です。

対象となる「コンテンツ販売アプリ」は、記事や電子書籍を有料/無料で販売・閲覧できるアプリです。

ログインや、コンテンツの購入（決済）などの機能があるため、
シンプルなUI/ページ遷移のテストから、より詳細な認証/ルート保護に関する E2E テストを確認します。

• Playwright によるフロントエンド E2E テスト
• UI/ページ遷移のテスト
• Auth.js による認証フローのテスト
• 保護されたルートの検証
• 決済フローのテスト

こんな初心者におすすめ！

• React の基本的な扱いに慣れてきた方
• Playwright や E2E テストについて学びたい方
• Next.js における自動テストに入門したい方
• React エンジニアとしての転職/就職を目指している方
• React/ Next.js を使った簡単なプロジェクトにチャレンジしてみたい方

要件：

• Node.js 環境（v18.18.0 以上）が構築されたPCが必要です
• 開発時には、Stripe のアカウント作成が必要です
• Git/ GitHub環境（アカウント）の用意
• HTML/CSS/JavaScriptの基礎知識が必要です
• Reactの基礎（Progateレベルの内容）は理解している前提の内容となっております
• Next.jsの基礎（公式チュートリアルレベルの内容）は理解している前提の内容となっております

注意事項

下記を、ご確認ください：

• 登壇者の発表を視聴する形式の、セミナーではありませんのでご注意ください。
• 実際に手を動かして、一緒に作業をするハンズオン形式のワークショップです。
• 無断欠席・遅刻は、ご遠慮ください。
• 勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。

当日のスケジュールの流れ

ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います！
（音声・チャットで、リアルタイムでリアクションや質問ができます）

その他：

• 実際は、時間内で、進めるところまでタスクを進める形になります。
• 時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします！
• なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います！！

ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです！
（進めるスピードなどの、進行に関するご意見も大歓迎です！）

参考キーワード

webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ