React開発者が語るモダンフロントエンドの基礎とNext.js入門

『プロフェッショナルWebプログラミング React』の出版を記念し、著者4名が登壇。Reactをこれから学びたい方を対象に、ReactとNext.jsの基礎を解説いただきます。

「リアルタイム視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

React開発者が語る ― モダンフロントエンドの基礎とNext.js入門

Reactはコンポーネント指向による効率的な開発スタイルと、大規模プロジェクトにも対応できる拡張性、世界的に活発なコミュニティに支えられ、現在、最も人気のあるフレームワークの一つです。

これからReactを始めたい方を対象に、現役フロントエンドエンジニアがReactとNext.jsの基礎をわかりやすく解説します。

『プロフェッショナルWebプログラミング React』の出版を記念して開催。モダンフロントエンド開発を学びたい方、書籍の内容に興味をお持ちの方、本を購入いただいた方にもおすすめのセミナーです。

Leaning Next.js App Router

2022年にリリースされた Next.js 13には「App Router」という新しいルーティングシステムが導入されました。

「App Router」はこれまでとは異なるアプローチでWebアプリケーションの体験を向上させようとしています。

本セッションでは「App Router」がこれまでのReact / Next.js とどのように違うのか、また、どのようなメリットがあるのかを解説します。

Reactステート管理の基本原則

Reactアプリの複雑さは多くがステートに由来します。本セッションでは、なにをステートとして持ち、持たないのか、ステートをどこに位置づけるのか、ステートの変化をどのように扱うのかという三つの基本軸を、実務で使えるコンパクトな原則として整理します。判断の軸を持つことで、読みやすく、変更に強く、バグが生まれにくいReactコードを書けるようになります。

Reactのソフトウェア開発における役割

近年、Webアプリケーション開発においてReactは事実上の標準となり、多くのプロジェクトで採用されています。本セッションでは、単なるフロントエンドライブラリに留まらないReactの役割について掘り下げます。

UI構築の効率化だけでなく、状態管理、パフォーマンス最適化、保守性・拡張性の担保といった観点でどのようにReactが活用されているのかを解説します。さらに、Next.jsとの組み合わせによるフルスタック開発や、実務における設計判断のポイントも紹介します。

DOM操作から脱却！Reactでつくるコンポーネント思考

フロントエンド専門の人だとすでに馴染みのなくなったjQueryかもしれないですが、「jQueryなら触れるけど、Reactはまだよく分からない…」という方に向けた入門セッションです。

jQueryではDOMを直接操作して要素を書き換えるのが基本ですが、Reactでは「状態」と「コンポーネント」を使い、イベントをきっかけにUIを自動で切り替える仕組みを採用しています。

本セッションでは、クリックや入力フォームの操作といったおなじみの処理を例に、jQueryでの書き方とReactでの書き方を比較。コンポーネントを作る流れやイベントの記述方法を、シンプルなサンプルを通じて解説します。

『プロフェッショナルWebプログラミング React』

現在のWeb開発に欠かせないJavaScriptライブラリ／フレームワークのなかでも、最も人気を集めているのがReact。『プロフェッショナルWebプログラミング React』は、最新バージョンであるReact19に対応した、プロを目指す方のためのReact入門書です。

• PART 1　Reactの基本を学ぶ
  • CHAPTER 1　Reactを始める準備
  • CHAPTER 2　Reactの第一歩
  • CHAPTER 3　ステート・副作用・メモ化
  • CHAPTER 4　グローバルステート
• PART 2　Reactで実際にWebページを作る
  • CHAPTER 5　TODOアプリを作ってみよう
  • CHAPTER 6　Next.js

イベント概要

YouTube Liveでライブ配信します。

• 開催日：2025年12月12日（金） 14:00 - 16:00
• 形式：オンライン（YouTube Live）
• MC：鷹野 雅弘（スイッチ）
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit
• 協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
• 協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会）

お申し込みと参加費

• リアルタイムの視聴は無料です。
• 参加にはお申し込みが必要です。受け付けは終演時刻まで。

フォローアップ（アーカイブ）

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

• アーカイブ動画
• スライド
• リンク集や補足
• サンプルファイルなど（プログラムにより）

フォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

• アーカイブ動画の視聴期限はありません。ずっと見られます。
• 法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の3つの方法があります。いずれかを選択なさってください。

• 終演時刻まで：Doorkeeper
• 終演時刻以降：STORES
• サブスクを登録する

Doorkeeperの場合、終演時刻にメールをお送りしています。メールの送信元は、info@doorkeeper.jp です。 メールに依存しないSTORESやサブスクであれば、メール関連のトラブルから開放されます。

領収書

個人向けのチケットは領収書発行していません。
インボイス対応の領収書は、次のチケットのみ対応します。

• 個人／フリーランス（スライド、アーカイブ視聴付き） ※経費として
• 法人（スライド、アーカイブ視聴付き）

NotionからPDFをダウンロードしてご利用ください。

• 「法人（スライド、アーカイブ視聴付き） 」のチケットを購入いただいている場合のみ、記名入りの領収書に対応いたします。フォームからご連絡ください。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

• チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
• 「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。

https://youtube.com/live/g7PGQq2BQbU?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

配信トラブルでURLが変更になることがあります。その場合、次のようにお知らせします。

• Twitter（現「X」）
• 配信が停止したYouTubeプログラムのコメント欄

YouTube関連

• YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
• スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
• 質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

• スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#React入門）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
• 終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

• 120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
• サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
• 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかなど、チェックなさってください。
• スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
• ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
• 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
• 若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。

オンライン椅子ヨガ

本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 開演前
• 休憩時間（適宜）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

サブスク

CSS Nite、DTP Transitのオンラインセミナーのアーカイブをリーズナブルに、また、管理しやすく利用いただけるように「サブスク」（定額サービス）をご用意しています（Circleというサービスを利用しています）。

• 3ヶ月ごと：35ドル
• 年パス：130ドル

年間で60回近く開催されますので、1本あたり400円を切る計算です。

• サブスク対象イベントのリスト

アーカイブ動画だけでなく、スライドのダウンロードも可能ですので、ざっと内容を把握しておきたい場合にも適しています。また、自分のペースで手元のスライドPDFを見ながらの視聴が可能です。

サブスクの登録方法

次の手順でお申し込みください。

1. Circleでユーザー登録（自動返信メールを確認して完了です）
2. Stripeで決済

• 3ヶ月ごと：35ドル
• 年パス：130ドル

協力企業のご紹介

本イベントには、下記の企業の協賛、協力をいただいています。

• 文賢（ブンケン）～文章をより良くするための推敲・校閲・校正支援ツール
• デジ革（一般社団法人デジタル経営革新協会） ネットとAIで経営に貢献できる人材になる
• JILLA（日本イラストレーション協会）　文芸美術国保への加入や交流会などメリットいっぱい
• tr-tant 仕事を割り振っても次から次へ仕事が舞い込む繁忙期にデザイナーの混み具合が見えるデザイナー専用タスク管理ソフト

また、多くの制作会社に協賛いただいています。

• ウェブライダー
• LINICA
• エンタミナ
• コンセント
• サービシンク
• ビットエー
• トゥーアール（to-R）
• ヘルツ
• アップルップル
• CODE54
• HAMWORKS
• S-FACTORY
• necco
• FLAT
• ましじめ
• グローバルデザイン
• エイチツーオー・スペース
• Gear8
• マジカルリミックス
• ONiWA
• さきがけデジタル
• r360studio

通年で協賛を募集しています。検討くださいますと幸いです。

お問い合わせ

問い合わせはDoorkeeperのフォームからお送りください。