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

近年、プロダクトや機能のライフタイム全体に責任を持つフルサイクルエンジニアを目指そうという考え方が普及しています。フルサイクルエンジニアとしてのスキルを拡張するために、バックエンドエンジニアがフロントエンドを学ぶ必要性が増しています。ただ、いきなりフロントエンドに挑戦するハードルは高いと感じる方も多いでしょう。

しかし、発表者はPHPを6年、React・Vueを5年書いてきた経験から、適切なメンタルモデルを身につけていれば両者の行き来は難しくないと感じています。

本セッションはオブジェクト指向プログラミング（OOP）の考え方を土台に、フロントエンドの「コンポーネント指向」を解説することで、バックエンドエンジニアがフロントエンドを学ぶ基礎を作ろうというものです。内容は私が執筆したReactの考え方の解説記事を、バックエンドエンジニア向けにアレンジする予定です。

「React を深く知るための入り口」
https://zenn.dev/panda_program/articles/deep-dive-into-react

まず、OOPの「クラス」「オブジェクトグラフ」「MVC」と、Reactの「コンポーネント」「UIツリー」「Flux」の違いや共通点を比較します。例としてブログ記事を題材に両者の設計や振る舞いを整理した後、Reactの基本的な機能と考え方を紹介します。

・状態があるコンポーネントと状態がないコンポーネント： React Hooks の useState と状態遷移
・状態管理とイベントハンドラ：ユーザーアクションへの対応と、UIの動的な更新の仕組みを解説
・プレゼンテーションロジック：フロントエンドとバックエンドのHTML描画の違い（JSX）

Reactの基本を押さえつつ、OOPの視点を活かしながらフロントエンド特有の設計思考を身につけましょう。