Doorkeeper

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

2025-12-12(金)21:00 - 23:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む
当日の視聴のみ 無料
申込締切
12月12日 23:00
個人(スライド、アーカイブ視聴付き) 2,200円 前払い
申込締切
12月12日 23:00
法人(スライド、アーカイブ視聴付き) 11,000円 前払い
申込締切
12月12日 23:00
「無料」のチケットから「アーカイブ視聴を含む」のチケットに切り替えるには、ご自身でキャンセルしてから再度お申し込みください(終演時刻まで)。終演後はSTORES、および、サブスクでもアーカイブを扱っています。

詳細

プロフェッショナル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 とどのように違うのか、また、どのようなメリットがあるのかを解説します。

西畑 一馬

株式会社トゥーアール

1979年大阪生まれ。2002年からWeb制作をはじめ2016年にフロントエンド専門のWeb制作会社「株式会社トゥーアール」を設立しReactやNext.jsを利用したモダンフロントエンド開発を行っている。「Web制作の現場で使うjQueryデザイン入門(アスキー・メディアワークス刊)」や「JavaScriptコーディングベストプラクティス(MdN刊)」など多数の著書を執筆している。。

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

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

伊藤 将貴

 

業務システムやBtoB SaaSのフロントエンドを主軸に、React歴5年。アプリケーションのアーキテクチャ設計を担い、フロントエンドからクラウドインフラまでフルスタックで実装・運用。開発チームのマネジメントを行いつつ、開発プロセスを効率化やUI/UX 改善にも取り組んでいる。

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

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

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

飛田 心

株式会社FLAT

株式会社FLATにてフロントエンド開発のリードエンジニアを担当。React/Next.js を用いたフロントエンド開発に加え、Node.js を用いたバックエンド開発を業務で行う。UI/UXの改善や保守性の高いアプリケーション設計・実装が得意。

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

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

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

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

長谷川広武

株式会社HAMWORKS

株式会社HAMWORKS代表取締役。フロントエンドエンジニア兼テクニカルディレクターとして、HTML/CSS/JavaScriptやWordPress等の開発を手がける。Web制作の企画から設計、実装、運用まで一貫したサポートを提供。2009年より札幌でWebデザイナー向け勉強会「SaCSS」を主催・運営。

『プロフェッショナル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でライブ配信します。

お申し込みと参加費

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

フォローアップ(アーカイブ)

スライドなどのフォローアップ(アーカイブ)は、アーカイブ購入/サブスクの方限定のコンテンツです。

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

フォローアップ(アーカイブ)の購入

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

  • アーカイブ動画の視聴期限はありません。ずっと見られます。
購入方法個人法人受け取り備考
金額
終演までその後
Doorkeeper
(単品)
2,200円-11,000円

終演時刻にメールを送信(info@doorkeeper.jpから送信されます)

「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。
STORES
(単品)
3,300円11,000円購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります(アーカイブ動画や特典の掲載はイベント終了後)ユーザー登録してから申し込むと、[マイページ]の[購入履歴]から、後からダウンロードできます。
サブスク4,400円(3ヶ月)詳細[メンバー限定]セクションの[フォローアップ(アーカイブ)]から本イベントのNotionにアクセスしてください。法人は別途
17,600円(1年)

配信に関してのあれこれ

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

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

配信URL

YouTube Liveで配信します。

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

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

YouTube関連

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

リアクションや質問

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

その他

  • 「UDトーク」にて文字情報を提供しますので、別のブラウザーなどでご覧ください。タイムラグや精度についてはご容赦ください。
  • サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
  • 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
  • スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください!
  • ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。
  • 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
  • 若干の延長など、ぴったり進行しないことがあります。

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

領収書

インボイス対応の領収書が必要な方は、アーカイブ購入者向けのNotionからPDFをダウンロードしてご利用ください。

  • 「アーカイブ視聴(会社として申し込み、社内で共有)」のチケットを購入いただいている場合のみ、個別対応いたします。

所轄税務署、インボイス制度電話相談センターなどに相談し、次のようにすることにしました。

オンライン椅子ヨガ

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

  • 開演前
  • 休憩時間(適宜)

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

サブスク

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

  • 3ヶ月:4,400円+税
  • 年パス:16,000円+税

年間で50近く開催されますので、1本あたり400円を切る計算です。ぜひ、ご利用ください!

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

サブスクの登録方法

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

  1. Circleでユーザー登録(自動返信メールを確認して完了です)
  2. Stripeで決済(3ヶ月ごと:4,400円年パス:17,600円
  3. CircleとStripeでメールアドレスが異なる場合のみ フォームからのご連絡をお願いします。

協力企業のご紹介

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

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

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

お問い合わせ

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

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2022年10月で丸17年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる