Tweet
Tweet

Slide 1

Slide 1 text

1 © 2012-2025 BASE, Inc. 2025/2/13 @Developers Summit 2025 プログラミングをするパンダ バックエンドエンジニアのための フロントエンド入門

Slide 2

Slide 2 text

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）

Slide 3

Slide 3 text

3 © 2012-2025 BASE, Inc. 宣伝 YouTubeでエンジニア向けのラジオを配信してます（@dialog-radio） https://www.youtube.com/@dialog-radio/videos ● 毎週月曜日の朝7時配信 ● ブログ記事や登壇内容になりにくいけ れど、重要なテーマで話してます ○ プロダクトエンジニアって何だろう？ ○ エンジニアはなぜビジネスを学べと言 われる？ ○ POとエンジニアの違いとは？ ● ぜひご視聴 & チャンネル登録お願いし ます！

Slide 4

Slide 4 text

4 © 2012-2025 BASE, Inc. 宣伝 オフラインで読書会をします（02/26（水） 19:00 ~） ● ROSCAさん主催で『オブジェクト設 計スタイルガイド』の読書会をしま す #ROSCAFE ● ご興味ある方はぜひご参加ください https://rosca.connpass.com/event/341797/

Slide 5

Slide 5 text

5 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 対象者 ● APIサーバーを構築するバックエンドエンジニア ● フロントエンドに挑戦したい方 ○ 「ひろがるエンジニアリング」 ● Web に限定

Slide 6

Slide 6 text

6 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs テーゼ バックエンドの開発者が 学習資産を活かせば、 フロントエンドへの入門は 容易になる

Slide 7

Slide 7 text

7 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 学習資産 @laco2net「Angularの学習コストは本当に高いのか？」（参照日 2025/2/2） https://lacolaco.hatenablog.com/entry/2019/02/19/001547 “コストには2種類あります。費用の発生と資産の購入です。 支払った資本が、将来の収益の獲得に貢献するならば、それ は費用ではなく資産となります。「一度払った学習コストを 再利用して新しい技術を学ぶ」というのは、学習コストを資 産計上するということです。”（太字は発表者）

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs フロントエンド入門のために OOPが学習資産になる のでは？

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 © 2012-2025 BASE, Inc. 1. オブジェクト指向と コンポーネント指向の考え方

Slide 12

Slide 12 text

12 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクト指向 - バックエンド コンポーネント指向 - フロントエンド

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Web上でGUIを構築するために HTML + CSS + JavaScript が主に使われる

Slide 17

Slide 17 text

17 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs しかし CSS, JavaScript は グローバルスコープ

Slide 18

Slide 18 text

18 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 😭

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネント指向へ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs オブジェクトはデータ構造とその操作をまとめ たもの（プロパティ+メソッド） = カプセル化 オブジェクト指向とは、オブジェクトの組み合 わせでアプリケーションを構築すること → いわゆる Building Blocks オブジェクト指向プログラミング（OOP）とは？

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネント指向はUI管理 オブジェクト指向はデータ管理

Slide 27

Slide 27 text

27 © 2012-2025 BASE, Inc. 2. Reactコンポーネントの 一般的な解説 （疑問編）

Slide 28

Slide 28 text

28 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントの提示 = 疑問 → 通常解説 → バックエンド開発者向け解説 → 気づきの瞬間 触れないこと ● HTML, CSS, JS の書き方 ● React Hooks ● ライブラリ群（状態管理やデータ取得 etc.） ● Next.jsのようなメタフレームワーク ● Server Component ここからの構成

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs Reactコンポーネント

Slide 31

Slide 31 text

31 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs https://jsonplaceholder.typicode.com/posts/1 1. APIサーバーからデータを取ってくる（data fetch）

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

33 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントの出力

Slide 34

Slide 34 text

34 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs ここで紹介していている データ取得のやり方は 最新の方法ではないのでご注意 説明のために紹介

Slide 35

Slide 35 text

35 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs React v19 （最新版） のデータフェッチ

Slide 36

Slide 36 text

36 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 状態が更新されるとコンポーネントが再描画さ れる 1. 初期描画（初回レンダリング） a. state = null b. HTML:
loading...
2. データ取得、状態の更新 a. state = { “title”: ..., “body”: ... } 3. 再描画（再レンダリング） a. HTML: ... 2. 状態と描画（レンダリング）の関係

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

38 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs イベントハンドラ （メニューのコードのイメージ） ● アイコンをクリックすると、handleClick() が動作する ● isOpen はメニューの開閉状態、 setIsOpen() は状態を更新する関数 ● 状態isOpenがtrueに変わると、 コンポーネントが表示される 3. コンポーネントが担当するロジック

Slide 39

Slide 39 text

39 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs プレゼンテーションロジック ● ex. YouTube の動画一覧画面 ○ 日付を相対値で表示する ■ 絶対値 - 2025/1/1 ■ 相対値 - 1ヶ月前 3. コンポーネントが担当するロジック

Slide 40

Slide 40 text

40 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 3. コンポーネントが担当するロジック - プレゼンテーションロジック ユーザーにわかりやすくするための表示のロジック ReactではJavaScriptでデータを加工する

Slide 41

Slide 41 text

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 部分（表示部分）

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 表示 HTML Reactコンポーネント

Slide 44

Slide 44 text

44 © 2012-2025 BASE, Inc. 3. バックエンド開発者向けの解説 （疑問解消編）

Slide 45

Slide 45 text

45 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 1. APIサーバーからデータを取ってくる（data fetch）

Slide 46

Slide 46 text

46 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs React v16.8まで（2019年2月まで）、 クラスコンポーネントが主流だった mount → constructor // props 取得, state 初期化 → 初回 render（
loading...
） → componentDidMount() // データ取得 → state（状態）の更新 → 再度 render（...） ライフサイクルフック 1. APIサーバーからデータを取ってくる（data fetch）

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

48 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs クラスコンポーネント 関数コンポーネント

Slide 49

Slide 49 text

49 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs UI = f(props, state)

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

51 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs コンポーネントのテンプレート

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

53 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 4. JSX 部分（表示部分） JSXはシンタックスシュガー → 関数のネストでツリー構造を表現する 全部JSの関数なので型をつけられる = TypeScript と相性がいい

Slide 54

Slide 54 text

54 © 2012-2025 BASE, Inc. おわりに

Slide 55

Slide 55 text

55 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs 学習資産と 新規学習

Slide 56

Slide 56 text

56 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs OOPはフロントエンドの 学習資産になりましたか？

Slide 57

Slide 57 text

57 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs こじつけ or 補助輪

Slide 58

Slide 58 text

58 © 2012-2025 BASE, Inc. 宣伝 本発表の内容は CodeZine で連載中 （第1回は公開済み、第2回は2/20（木）公開） https://codezine.jp/author/2094

Slide 59

Slide 59 text

59 © 2012-2025 BASE, Inc. Special Thanks 資料レビューありがとうございました meiheiさん （@meihei3） Torataさん かぴさん （@ysssssss98） Endoさん （@Fendo181）

Slide 60

Slide 60 text

60 © 2012-2025 BASE, Inc. フロントエンド入門 for backend devs ご清聴ありがとう ございました