オブジェクト指向を活かす!React入門 by プログラミングをするパンダ

PHPerKaigi 2025
レギュラートーク(20分)

オブジェクト指向を活かす!React入門

Panda_Program プログラミングをするパンダ Panda_Program

近年、プロダクト開発におけるフルサイクルエンジニアリングの重要性が高まっています。これに伴い、バックエンドエンジニアがフロントエンドスキルを習得するニーズも増加しています。しかし、フロントエンドの学習に対して「自分には難しい」という心理的なハードルを感じる方も多いのではないでしょうか?

本セッションでは、オブジェクト指向プログラミング(OOP)の知識を土台に、Reactを使ったフロントエンドの基本的な考え方をわかりやすく解説します。バックエンドエンジニアが親しみやすいOOPの概念と、Reactの「コンポーネント指向」の類似点や相違点を比較しながら、フロントエンドの基礎的なメンタルモデルを解説します。

具体的には以下の内容を取り上げます。

・OOPとReactの共通点と違い: クラスとコンポーネント、オブジェクトグラフとUIツリー、MVCとFluxの対応を具体例を用いて比較。
・状態とイベントの管理: React Hooks (useState) を使った状態遷移を解説。

これらをブログの記事「Articleクラス」と「Articleコンポーネント」を比較して解説します。

短時間でフロントエンドのエッセンスを把握することを目指すこのセッションを通して、「フロントエンドもできるエンジニア」を目指す一歩を踏み出すきっかけをお届けします。