【JAMstack ブログでテスト入門!】React/Next.js ハンズオン【① / 全2回】

2025/02/09(日)16:00 〜 18:00 開催
ブックマーク

イベント内容

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

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

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

今回のお題

lhandson_design

作成するアプリ
JAMstack ブログアプリ

レベル:初級〜中級

概要
このプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。

ビルド時に静的 HTML を生成することで、従来のWebサイトより、表示速度を向上させた JAMstack ブログです。

全 2 回のシリーズについて

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

今回は、2時間では作りきれない、より実践的なアプリを2週(2時間×2回)で、構築します

日程は下記を予定しています:

  • 第1回:2/9(日) 16時〜18時
  • 第2回:2/16(日) 16時〜18時

React 開発の基本を、実践的に振り返りたい方におすすめです!

学習する内容

今回のテーマは、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レベルの内容)は理解している前提の内容となっております

開催概要

➡️場所:Gather(オンライン開催)
音声のみでOKです!

申し込みが完了すると「参加者への情報」という場所に、GatherのURLが表示されます。
(Gatherは、スマートフォン・PCどちらからでも、登録なしで参加することが可能です。)

Gatherは、まだそこまでメジャーなサービスではないので、
会の始めに、Gatherの操作などについて不明な点があればご説明いたします!

➡️参加費
1000円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)

注意事項

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

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

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

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

時間 内容
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, コミュニティ, もくもく会, ハンズオンワークショップ

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
情報提供元ページ(connpass)へ

新規会員登録

このイベントに申し込むには会員登録が必要です。
アカウント登録済みの方はログインしてください。



※ ソーシャルアカウントで登録するとログインが簡単に行えます。

※ 連携したソーシャルアカウントは、会員登録完了後にいつでも変更できます。

関連するイベント