Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

panda_program

February 11, 2025
Tweet

More Decks by panda_program

Other Decks in Technology

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. 10 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクト指向とコンポー

    ネント指向の考え方 1 Reactコンポーネントの 一般的な解説(疑問編) 2 バックエンド開発者向けの 解説(疑問解消編) 3
  10. 12 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクト指向

    - バックエンド コンポーネント指向 - フロントエンド
  11. 13 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Web

    フロントエンド = Web のクライアント側 = Web ページのデザイン + インタラクション = ユーザーインターフェース+ 体験(UI + UX) → 人間とソフトウェアの接点 “UIはユーザーとその関心の対象(オブジェクト)を 直接接着するもの”(『オブジェクト指向UIデザイン』 p.279) → 現代では GUI がメイン そもそも、フロントエンドとは? 上野学 (2020). オブジェクト指向UIデザイン 技術評論社 p.278
  12. 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/
  13. 15 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs GUIの様式

    上野学 (2020). オブジェクト指向UIデザイン 技術評論社 p.279 “操作の対象物(オブジェクト)が選択肢としてまず画面上 に見えているようにすること。それらは客体として存在し ていて、ユーザーからのアプローチを待っているというこ と。ユーザーは自由な意志でそこへアプローチし、対象が その性質に合わせた振る舞いをすること。”(太字は発表者)
  14. 19 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs スコープを狭める

    Tree view from unordered list https://codepen.io/ross-angus/pen/jwxMjL
  15. 20 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs スコープを狭める

    Tree view from unordered list https://codepen.io/ross-angus/pen/jwxMjL コンポーネント群
  16. 22 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントとは、UIとその操作をまとめた

    もの • 表示は HTML + CSS、操作は JavaScript ◦ ex. ボタン、フォーム、モーダル コンポーネント指向とは、UIを小さな部品に分 割し、それらを組み合わせてアプリケーション を構築すること コンポーネント指向とは?
  17. 23 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクトはデータ構造とその操作をまとめ

    たもの = プロパティ+メソッドのカプセル化 • プログラミング = データ処理 ◦ 「システム設計で一番重要な視点は、 データの流れです」 ▪ 藤田和彦(2011). 『設計者に必要なソフトウェアの基礎知識』 日刊工業新聞社 p.8 • データとその処理を構造化する手段 オブジェクト指向プログラミング(OOP)とは?
  18. 24 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクトはデータ構造とその操作をまとめ

    たもの = プロパティ+メソッドのカプセル化 オブジェクト指向とは、オブジェクトの組み合 わせでアプリケーションを構築すること → いわゆる Building Blocks オブジェクト指向プログラミング(OOP)とは?
  19. 25 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs [共通点]

    小さなパーツを組み合わせて大きなアプリケー ションを構築すること → 再利用性、保守性、独立性、拡張性 → スケーラビリティ [相違点] コンポーネント指向はUIの構造とその操作 オブジェクト指向はデータ構造とその操作 コンポーネント指向とオブジェクト指向
  20. 28 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントの提示

    = 疑問 → 通常解説 → バックエンド開発者向け解説 → 気づきの瞬間 触れないこと • HTML, CSS, JS の書き方 • React Hooks • ライブラリ群(状態管理やデータ取得 etc.) • Next.jsのようなメタフレームワーク • Server Component ここからの構成
  21. 29 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs APIサーバーが返した値がブラウザで表示される

    まで React コンポーネントを紹介 Article コンポーネントを例に 1. APIサーバーからデータを取ってくる 2. 状態とレンダリングの関係 3. コンポーネントが担当するロジック 4. JSX 部分 = 表示部分 データの流れが理解のカギ
  22. 32 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 1.

    APIサーバーからデータを取ってくる(data fetch) データフェッチと状態管理はセット useEffect の中で取って、取得した値を useState で状態として扱う
  23. 34 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs ここで紹介していている

    データ取得のやり方は 最新の方法ではないのでご注意 説明のために紹介
  24. 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. 状態と描画(レンダリング)の関係
  25. 37 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントが担当するロジックは状態管理・

    イベントハンドラ・プレゼンテーションの3つ イベントハンドラとは、特定のイベント(クリッ ク、キー入力、マウス移動など)が発生した際に 実行される処理(関数) ex. メニューを押すと、ドロップダウンが開く = …のアイコンにクリックイベントが発生 → ドロップダウンの状態を open にする 3. コンポーネントが担当するロジック
  26. 38 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs イベントハンドラ

    (メニューのコードのイメージ) • アイコンをクリックすると、handleClick() が動作する • isOpen はメニューの開閉状態、 setIsOpen() は状態を更新する関数 • 状態isOpenがtrueに変わると、<Menu /> コンポーネントが表示される 3. コンポーネントが担当するロジック
  27. 39 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs プレゼンテーションロジック

    • ex. YouTube の動画一覧画面 ◦ 日付を相対値で表示する ▪ 絶対値 - 2025/1/1 ▪ 相対値 - 1ヶ月前 3. コンポーネントが担当するロジック
  28. 40 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 3.

    コンポーネントが担当するロジック - プレゼンテーションロジック ユーザーにわかりやすくするための表示のロジック ReactではJavaScriptでデータを加工する
  29. 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 部分(表示部分)
  30. 42 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 4.

    JSX 部分(表示部分) 1. Reactコンポーネントで記述されたJSXは仮想DOMに変換される 2. React DOMは仮想DOMの変更を検知し、実際のDOMに変更を反映する 3. 実際のDOMが変更されたら、ブラウザは画面を更新する
  31. 45 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 1.

    APIサーバーからデータを取ってくる(data fetch)
  32. 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)
  33. 47 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs State

    パターンで考える = デザインパターンの1つで、オブジェクトの 状態に応じて振る舞いを変えるもの ex. マリオ • アイテムに応じて姿が変わる(状態) • ファイアマリオだけ攻撃できる(振る舞い) Reactコンポーネント → 状態が変わると振る舞いが変わる = state の変更で render 内容が変わる (State Machine で考えてもOK) 2. 状態とレンダリングの関係
  34. 50 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 処理のテンプレート

    クラスメソッドなら、前提条件のチェック、失 敗のシナリオ...など(左図) 3. コンポーネントが担当するロジック Matthias Noback(2019). オブジェクト設計スタイルガイド (田中裕一(訳)(2023). オライリージャパン) p.151
  35. 52 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 改めて「GUIの様式」

    “操作の対象物(オブジェクト)が選択肢としてまず画面上に 見えているようにすること” → プレゼンテーションロジック + JSX “それらは客体として存在していて、ユーザーからのアプロー チを待っているということ” → アプローチに応じてイベントハンドラが動く
  36. 53 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 4.

    JSX 部分(表示部分) JSXはシンタックスシュガー → 関数のネストでツリー構造を表現する 全部JSの関数なので型をつけられる = TypeScript と相性がいい