バックエンドエンジニアのためのフロントエンド入門

本スライドはオブジェクト指向プログラミング（OOP）を理解しているバックエンドエンジニアの方向けに、フロントエンドのコンポーネント指向を解説することで、フロントエンドを開発するための足がかりを作ることが狙いです。OOPとの違いを意識することで、フロントエンド特有の設計思考を身につけましょう。ReactとTypeScriptを用いて解説をしますが、オブジェクト指向を知っていればどちらの知識も不要です。

https://event.shoeisha.jp/devsumi/20250213/session/5533

Transcript

1. 1 © 2012-2025 BASE, Inc. 2025/2/13 @Developers Summit 2025 プログラミングをするパンダ バックエンドエンジニアのための フロントエンド入門
2. 2 © 2012-2025 BASE, Inc. 自己紹介 • BASE株式会社 • 所属：BASE / Product Dev / feature dev1 • 現在のお仕事：シニアエンジニア ◦ フロントエンドもバックエンドも書きます（フルスタックです） ◦ スクラム開発やチームの開発プロセスの改善が得意です ◦ 今は新規機能の開発を開発してます • 好きなことと活動 ◦ DevOps とアジャイルの開発プロセス（XP、スクラム）が好き ◦ CodeZine様でたまに記事を連載してます ◦ 「ソフトウェア開発における自動テストの位置付けを考察する」など ◦ Software Design 2022年3月号で TDD 特集の2,3部を執筆しました ◦ twitter: @Panda_Program プログラミングをするパンダ（@Panda_Program）
3. 3 © 2012-2025 BASE, Inc. 宣伝 YouTubeでエンジニア向けのラジオを配信してます（@dialog-radio） https://www.youtube.com/@dialog-radio/videos • 毎週月曜日の朝7時配信 • ブログ記事や登壇内容になりにくいけ れど、重要なテーマで話してます ◦ プロダクトエンジニアって何だろう？ ◦ エンジニアはなぜビジネスを学べと言 われる？ ◦ POとエンジニアの違いとは？ • ぜひご視聴 & チャンネル登録お願いし ます！
4. 4 © 2012-2025 BASE, Inc. 宣伝 オフラインで読書会をします（02/26（水） 19:00 ~） • ROSCAさん主催で『オブジェクト設 計スタイルガイド』の読書会をしま す #ROSCAFE • ご興味ある方はぜひご参加ください https://rosca.connpass.com/event/341797/
5. 5 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 対象者 • APIサーバーを構築するバックエンドエンジニア • フロントエンドに挑戦したい方 ◦ 「ひろがるエンジニアリング」 • Web に限定
6. 6 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs テーゼ バックエンドの開発者が 学習資産を活かせば、 フロントエンドへの入門は 容易になる
7. 7 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 学習資産 @laco2net「Angularの学習コストは本当に高いのか？」（参照日 2025/2/2） https://lacolaco.hatenablog.com/entry/2019/02/19/001547 “コストには2種類あります。費用の発生と資産の購入です。 支払った資本が、将来の収益の獲得に貢献するならば、それ は費用ではなく資産となります。「一度払った学習コストを 再利用して新しい技術を学ぶ」というのは、学習コストを資 産計上するということです。”（太字は発表者）
8. 8 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 学習資産 - Angular 以外でも通用すること • HTML / CSS / TypeScript • 状態管理 • コンポーネント設計 • 依存性の注入 etc. 学習コスト（費用） - Angular に特有のもの • Directive • Routing @laco2net「Angularの学習コストは本当に高いのか？」（参照日 2025/2/2） https://lacolaco.hatenablog.com/entry/2019/02/19/001547
9. 9 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs フロントエンド入門のために OOPが学習資産になる のでは？
10. 10 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクト指向とコンポー ネント指向の考え方 １ Reactコンポーネントの 一般的な解説（疑問編） ２ バックエンド開発者向けの 解説（疑問解消編） ３
11. 11 © 2012-2025 BASE, Inc. 1. オブジェクト指向と コンポーネント指向の考え方
12. 12 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクト指向 - バックエンド コンポーネント指向 - フロントエンド
13. 13 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Web フロントエンド = Web のクライアント側 = Web ページのデザイン + インタラクション = ユーザーインターフェース+ 体験（UI + UX） → 人間とソフトウェアの接点 “UIはユーザーとその関心の対象（オブジェクト）を 直接接着するもの”（『オブジェクト指向UIデザイン』 p.279） → 現代では GUI がメイン そもそも、フロントエンドとは？ 上野学 (2020). オブジェクト指向UIデザイン 技術評論社 p.278
14. 14 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs GUIの様式 https://www.reddit.com/r/mac/comments/16alga9/the_basic_interface_of_mac_os_hasnt_really/
15. 15 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs GUIの様式 上野学 (2020). オブジェクト指向UIデザイン 技術評論社 p.279 “操作の対象物（オブジェクト）が選択肢としてまず画面上 に見えているようにすること。それらは客体として存在し ていて、ユーザーからのアプローチを待っているというこ と。ユーザーは自由な意志でそこへアプローチし、対象が その性質に合わせた振る舞いをすること。”（太字は発表者）
16. 16 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Web上でGUIを構築するために HTML + CSS + JavaScript が主に使われる
17. 17 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs しかし CSS, JavaScript は グローバルスコープ
18. 18 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 😭
19. 19 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs スコープを狭める Tree view from unordered list https://codepen.io/ross-angus/pen/jwxMjL
20. 20 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs スコープを狭める Tree view from unordered list https://codepen.io/ross-angus/pen/jwxMjL コンポーネント群
21. 21 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネント指向へ
22. 22 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントとは、UIとその操作をまとめた もの • 表示は HTML + CSS、操作は JavaScript ◦ ex. ボタン、フォーム、モーダル コンポーネント指向とは、UIを小さな部品に分 割し、それらを組み合わせてアプリケーション を構築すること コンポーネント指向とは？
23. 23 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクトはデータ構造とその操作をまとめ たもの = プロパティ+メソッドのカプセル化 • プログラミング = データ処理 ◦ 「システム設計で一番重要な視点は、 データの流れです」 ▪ 藤田和彦（2011）. 『設計者に必要なソフトウェアの基礎知識』 日刊工業新聞社 p.8 • データとその処理を構造化する手段 オブジェクト指向プログラミング（OOP）とは？
24. 24 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクトはデータ構造とその操作をまとめ たもの = プロパティ+メソッドのカプセル化 オブジェクト指向とは、オブジェクトの組み合 わせでアプリケーションを構築すること → いわゆる Building Blocks オブジェクト指向プログラミング（OOP）とは？
25. 25 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs [共通点] 小さなパーツを組み合わせて大きなアプリケー ションを構築すること → 再利用性、保守性、独立性、拡張性 → スケーラビリティ [相違点] コンポーネント指向はUIの構造とその操作 オブジェクト指向はデータ構造とその操作 コンポーネント指向とオブジェクト指向
26. 26 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネント指向はUI管理 オブジェクト指向はデータ管理
27. 27 © 2012-2025 BASE, Inc. 2. Reactコンポーネントの 一般的な解説 （疑問編）
28. 28 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントの提示 = 疑問 → 通常解説 → バックエンド開発者向け解説 → 気づきの瞬間 触れないこと • HTML, CSS, JS の書き方 • React Hooks • ライブラリ群（状態管理やデータ取得 etc.） • Next.jsのようなメタフレームワーク • Server Component ここからの構成
29. 29 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs APIサーバーが返した値がブラウザで表示される まで React コンポーネントを紹介 Article コンポーネントを例に 1. APIサーバーからデータを取ってくる 2. 状態とレンダリングの関係 3. コンポーネントが担当するロジック 4. JSX 部分 = 表示部分 データの流れが理解のカギ
30. 30 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Reactコンポーネント
31. 31 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs https://jsonplaceholder.typicode.com/posts/1 1. APIサーバーからデータを取ってくる（data fetch）
32. 32 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 1. APIサーバーからデータを取ってくる（data fetch） データフェッチと状態管理はセット useEffect の中で取って、取得した値を useState で状態として扱う
33. 33 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントの出力
34. 34 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs ここで紹介していている データ取得のやり方は 最新の方法ではないのでご注意 説明のために紹介
35. 35 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs React v19 （最新版） のデータフェッチ
36. 36 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 状態が更新されるとコンポーネントが再描画さ れる 1. 初期描画（初回レンダリング） a. state = null b. HTML: <div>loading...</div> 2. データ取得、状態の更新 a. state = { “title”: ..., “body”: ... } 3. 再描画（再レンダリング） a. HTML: <article>...</article> 2. 状態と描画（レンダリング）の関係
37. 37 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントが担当するロジックは状態管理・ イベントハンドラ・プレゼンテーションの3つ イベントハンドラとは、特定のイベント（クリッ ク、キー入力、マウス移動など）が発生した際に 実行される処理（関数） ex. メニューを押すと、ドロップダウンが開く = …のアイコンにクリックイベントが発生 → ドロップダウンの状態を open にする 3. コンポーネントが担当するロジック
38. 38 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs イベントハンドラ （メニューのコードのイメージ） • アイコンをクリックすると、handleClick() が動作する • isOpen はメニューの開閉状態、 setIsOpen() は状態を更新する関数 • 状態isOpenがtrueに変わると、<Menu /> コンポーネントが表示される 3. コンポーネントが担当するロジック
39. 39 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs プレゼンテーションロジック • ex. YouTube の動画一覧画面 ◦ 日付を相対値で表示する ▪ 絶対値 - 2025/1/1 ▪ 相対値 - 1ヶ月前 3. コンポーネントが担当するロジック
40. 40 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 3. コンポーネントが担当するロジック - プレゼンテーションロジック ユーザーにわかりやすくするための表示のロジック ReactではJavaScriptでデータを加工する
41. 41 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs JSXはJavaScriptファイル内にHTMLのような マークアップを書けるようにするもの コンテンツ・マークアップは HTML デザインは CSS ロジックは JavaScript コンポーネント = ロジックとマークアップ React 公式ドキュメント「JSX でマークアップを記述する」 https://ja.react.dev/learn/writing-markup-with-jsx 4. JSX 部分（表示部分）
42. 42 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 4. JSX 部分（表示部分） 1. Reactコンポーネントで記述されたJSXは仮想DOMに変換される 2. React DOMは仮想DOMの変更を検知し、実際のDOMに変更を反映する 3. 実際のDOMが変更されたら、ブラウザは画面を更新する
43. 43 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 表示 HTML Reactコンポーネント
44. 44 © 2012-2025 BASE, Inc. 3. バックエンド開発者向けの解説 （疑問解消編）
45. 45 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 1. APIサーバーからデータを取ってくる（data fetch）
46. 46 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs React v16.8まで（2019年2月まで）、 クラスコンポーネントが主流だった mount → constructor // props 取得, state 初期化 → 初回 render（<div>loading...</div>） → componentDidMount() // データ取得 → state（状態）の更新 → 再度 render（<article>...</article>） ライフサイクルフック 1. APIサーバーからデータを取ってくる（data fetch）
47. 47 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs State パターンで考える = デザインパターンの1つで、オブジェクトの 状態に応じて振る舞いを変えるもの ex. マリオ • アイテムに応じて姿が変わる（状態） • ファイアマリオだけ攻撃できる（振る舞い） Reactコンポーネント → 状態が変わると振る舞いが変わる = state の変更で render 内容が変わる （State Machine で考えてもOK） 2. 状態とレンダリングの関係
48. 48 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs クラスコンポーネント 関数コンポーネント
49. 49 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs UI = f(props, state)
50. 50 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 処理のテンプレート クラスメソッドなら、前提条件のチェック、失 敗のシナリオ...など（左図） 3. コンポーネントが担当するロジック Matthias Noback(2019). オブジェクト設計スタイルガイド （田中裕一(訳)(2023). オライリージャパン） p.151
51. 51 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントのテンプレート
52. 52 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 改めて「GUIの様式」 “操作の対象物（オブジェクト）が選択肢としてまず画面上に 見えているようにすること” → プレゼンテーションロジック + JSX “それらは客体として存在していて、ユーザーからのアプロー チを待っているということ” → アプローチに応じてイベントハンドラが動く
53. 53 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 4. JSX 部分（表示部分） JSXはシンタックスシュガー → 関数のネストでツリー構造を表現する 全部JSの関数なので型をつけられる = TypeScript と相性がいい
54. 54 © 2012-2025 BASE, Inc. おわりに
55. 55 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 学習資産と 新規学習
56. 56 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs OOPはフロントエンドの 学習資産になりましたか？
57. 57 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs こじつけ or 補助輪
58. 58 © 2012-2025 BASE, Inc. 宣伝 本発表の内容は CodeZine で連載中 （第1回は公開済み、第2回は2/20（木）公開） https://codezine.jp/author/2094
59. 59 © 2012-2025 BASE, Inc. Special Thanks 資料レビューありがとうございました meiheiさん （@meihei3） Torataさん かぴさん （@ysssssss98）
60. 60 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs ご清聴ありがとう ございました