バックエンドの知識が活きるReact入門──オブジェクト指向で学ぶフロントエンド

【13-C-9】バックエンドエンジニアのためのフロントエンド入門

　「データは取ってきたけど、これってどこでHTMLになるの？」「Reactってどういう順番で画面が変わるの？」──そんな素朴な疑問から出発し、Reactコンポーネントの設計思想を紐解いていく本セッション。登壇者は、BASEでシニアエンジニアを務める“プログラミングをするパンダ”氏だ。オブジェクト指向プログラミングの発想を手がかりに、状態管理・イベント処理・描画ロジック・JSXといった構造を読み解きながら、バックエンド出身のエンジニアがReactを「学習資産」として理解するためのヒントを提示する。

フロントエンドに挑むための第一歩

　本セッションの対象は、APIサーバーの構築に従事するバックエンドエンジニアだ。Developers Summit 2025のテーマ「ひろがるエンジニアリング」に呼応するかたちで、バックエンドからフロントエンドへと活躍の幅を広げる足がかりを提供する内容となっている。

　本題に入る前にプログラミングをするパンダ氏（以下、パンダ氏）が提示したのは「バックエンドの開発者が学習資産を活かせば、フロントエンドへの入門は容易になる」とのテーゼだ。

BASE株式会社 Product Dev／Feature Dev1／シニアエンジニア プログラミングをするパンダ氏

　ここでの「学習資産」とは、学習コストを単なる「費用」と捉えるのではなく、再利用可能な「資産」として扱う考え方で、Angular界隈で知られるlacolaco（ラコラコ）氏のブログに端を発するものだ。たとえば、HTMLやCSS、状態管理、コンポーネント設計といった知識は、特定の技術スタックにとどまらず、広くフロントエンド技術全般に応用可能な資産と捉えることができる。

　この考え方を踏まえてパンダ氏は、バックエンドエンジニアが拠って立つ「オブジェクト指向プログラミング（OOP）」の知識もまた、フロントエンド技術における有効な学習資産になり得ると激励する。氏自身、PHPによるバックエンド開発からキャリアをスタートし、ReactやNext.jsといったフロントエンド技術にも取り組んできた経験から、両者の考え方には多くの共通点があると感じてきた。

再利用できる知識は技術スタックを越えて活かせる

　いよいよ本題。セッションは3つのパートで構成されている。

• オブジェクト指向とコンポーネント指向の考え方の共通点と相違点
• Reactコンポーネントの一般的な解説
• バックエンド出身者に向けた補足

　まずは、前提となる思考の枠組み──オブジェクト指向とコンポーネント指向の2つのパラダイムを比較し、それぞれの構造や役割を見ていこう。