【JAMstack ブログでテスト入門!】React/Next.js ハンズオン【② / 全2回】
はじめてのReact【2025】オンライン
2025年8月3日 07:00 ~ 09:00
オンライン Google Meet
React 初心者向けの、ハンズオン形式のオンライン勉強会です👋
事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します!
実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー!
❓このハンズオン勉強会についての紹介記事
今回のお題
作成するアプリ:
JAMstack ブログアプリ
レベル:初級〜中級
概要:
このプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。
ビルド時に静的 HTML を生成することで、従来のWebサイトより、表示速度を向上させた JAMstack ブログです。
全 2 回のシリーズについて
毎週開催している、2時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。
今回は、2時間では作りきれない、より実践的なアプリを2週(2時間×2回)で、構築します!
日程は下記を予定しています:
第1回:7/27(日) 16時〜18時
第2回:8/3(日) 16時〜18時
第2回から参加される方は、その時点までのソースコードをクローンする形で進める予定です!
学習する内容:
今回のテーマは、2つです!
Next.js と microCMS を用いた JAMstack ブログの実装
Vitest を用いたフロントエンドテスト入門
使用技術:
Vitest によるテストの実装
Testing Library/ React による DOM テスト
MSW によるAPIモック
Next.js App Routerでのプロジェクト構築
TypeScript による型チェック
Tailwind CSS を用いたスタイリング
shadcn/ui によるコンポーネントの導入
microCMS によるコンテンツの管理
この勉強会を通して、実際に運用していける Next.js ブログアプリを構築することを目指します!
こんな初心者におすすめ!
React の基本的な扱いに慣れてきた方
microCMS や JAMstack ブログの実装について学びたい方
フロントエンドテストに入門したい方
React エンジニアとしての転職/就職を目指している方
React/ Next.js を使った簡単なプロジェクトにチャレンジしてみたい方
要件:
Node.js 環境(v18.18.0 以上)が構築されたPCが必要です
開発時には、microCMS のアカウント作成が必要です
Git/ GitHub環境(アカウント)の用意
HTML/CSS/JavaScriptの基礎知識が必要です
Reactの基礎(Progateレベルの内容)は理解している前提の内容となっております
開催概要
➡️場所:Google Meet を予定(オンライン開催)
音声のみでOKです!
申し込みが完了すると「参加者への情報」という場所に、URLが表示されます。
なお、Google Meetへの参加は、Google アカウントが必要です!
➡️参加費
1500円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)
注意事項
下記を、ご確認ください:
実際に手を動かして、一緒に作業をするハンズオン形式のワークショップとして進行します。
視聴のみで参加することも、全く問題ないです!
主催者の画面・音声は動画収録されることがありますのでご了承ください。
勉強会終了後も、継続的に資料へアクセスするには、b13o.com のアカウントが必要です。
無断欠席・遅刻は、ご遠慮ください。
勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。
当日のスケジュールの流れ
ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います!
(音声・チャットで、リアルタイムでリアクションや質問ができます)
時間
内容
16:00〜16:10
最初の挨拶
16:10〜16:20
仕様確認&開発準備
16:20〜17:50
ハンズオン開始
17:50〜
終わりの挨拶など
その他:
実際は、時間内で、進めるところまでタスクを進める形になります。
時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします!
なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います!!
ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです!
(進めるスピードなどの、進行に関するご意見も大歓迎です!)
運営情報
React で、実践的なスキルチェックができる、学習のお題まとめサイト『React Road』
のハンズオンイベントです🐾
参考キーワード
webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ
3日前