プロダクト開発ってどんな感じで進むんですかー？@SPARK

Slide 1

Slide 1 text

2023 author: GANGAN

Slide 2

Slide 2 text

プロダクト開発ってどんな感じで進むんですかー？制御系高専卒生が話すWebアプリケーション開発の道のり 2023 author: GANGAN

Slide 3

Slide 3 text

About me 2023 author: GANGAN

Slide 4

Slide 4 text

About me 岩丸慎平 (@gangan_nikki) 北九州高専(制御系) → 鹿児島大学(情報系) 1社目ではAI Webアプリケーションの開発・運用学生時代から記事書いたり、登壇したりしてます 2023 author: GANGAN

Slide 5

Slide 5 text

私のことなんて正直忘れてもらって大丈夫です 2023 author: GANGAN

Slide 6

Slide 6 text

本日の話プロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とは 2023 author: GANGAN

Slide 7

Slide 7 text

本日の発表ですが基本的にメモを取る必要はないです 2023 author: GANGAN

Slide 8

Slide 8 text

必要になった時に「あの時なんか聞いたなー。調べてみるかー」となれば良いです 2023 author: GANGAN

Slide 9

Slide 9 text

では、 2023 author: GANGAN

Slide 10

Slide 10 text

プロダクト開発ってどのような流れで進むのか 2023 author: GANGAN

Slide 11

Slide 11 text

プロダクト開発ってどのような流れで進むのか GitHub Copilot Chat先生に描いてもらいました。 2022-01-01 2022-02-01 2022-03-01 2022-04-01 2022-05-01 要件定義システムとソフトウェア設計実装とユニットテスト統合とシステムテスト運用とメンテナンス要件定義システムとソフトウェア設計実装とユニットテスト統合とシステムテスト運用とメンテナンスウォーターフォールモデル要件定義設計実装テストレビューと改善要件定義設計スプリント1 アジャイルモデル 2023 author: GANGAN

Slide 12

Slide 12 text

2023 author: GANGAN

Slide 13

Slide 13 text

例: 講義の実習に当てはめて考える 2023 author: GANGAN

Slide 14

Slide 14 text

例: 講義の実習に当てはめて考える先生あなた「ロボットの回路を作ってください」ロボットの回路を作るロボットの回路を納品先生あなた 2023 author: GANGAN

Slide 15

Slide 15 text

ここで質問です。 2023 author: GANGAN

Slide 16

Slide 16 text

Q. 生徒に作ってもらう「ロボットの回路」を定義するのは誰ですか？ 2023 author: GANGAN

Slide 17

Slide 17 text

A. そう、先生ですね。 2023 author: GANGAN

Slide 18

Slide 18 text

A. 先生が回路の設計を行ったことになります 2023 author: GANGAN

Slide 19

Slide 19 text

例: 講義の実習に当てはめて考える偉い人先生あなた「ロボットの回路について理解するような実習して」ロボットの回路を設計する「ロボットの回路を作ってください」ロボットの回路を作るロボットの回路を納品偉い人先生あなた 2023 author: GANGAN

Slide 20

Slide 20 text

例: 講義の実習に当てはめて考える偉い人先生あなた「ロボットの回路について理解するような実習して」【偉い人からの求められている要件を定義して】ロボットの回路を設計する「ロボットの回路を作ってください」ロボットの回路を作るロボットの回路を納品偉い人先生あなた 2023 author: GANGAN

Slide 21

Slide 21 text

2022-01-02 2022-01-09 2022-01-16 2022-01-23 2022-01-30 2022-02-06 2022-02-13 2022-02-20 要件定義システムとソフトウェア設計実装とユニットテスト統合とシステムテスト運用とメンテナンス要件定義システムとソフトウェア設計実装とユニットテスト統合とシステムテスト運用とメンテナンスウォーターフォールモデル偉い人先生あなた「ロボットの回路について理解するような実習して」【偉い人からの求められている要件を定義して】ロボットの回路を設計する「ロボットの回路を作ってください」ロボットの回路を作るロボットの回路を納品 2023 author: GANGAN

Slide 22

Slide 22 text

このように、皆さんの普段の実習の中でも要件定義・設計・実装・テスト・運用が存在しています 2023 author: GANGAN

Slide 23

Slide 23 text

例: このスライドに当てはめて考える 2023 author: GANGAN

Slide 24

Slide 24 text

pnpm workspace Cloudflare import import import import import import import Deploy from GitHub Actions Deploy from GitHub Actions Deploy from GitHub Actions 共通Components 共通Layouts 共通Assets スライド1 スライド2 スライド3 ...and more Pages1 Pages2 pages3 ...and more 2023 author: GANGAN

Slide 25

Slide 25 text

詳細は技術記事を書きます 2023 author: GANGAN

Slide 26

Slide 26 text

明日のイベントでは「なぜこの技術を選んだのか」など、技術選定理由なども合わせて解説します。 2023 author: GANGAN

Slide 27

Slide 27 text

疲れてないですか？ここまでが前半です。何か質問ありますか？ Q&A時間は最後にも設けますが前半内容で何かあれば受け付けます 2023 author: GANGAN

Slide 28

Slide 28 text

後半戦 2023 author: GANGAN

Slide 29

Slide 29 text

本日の話プロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とは 2023 author: GANGAN

Slide 30

Slide 30 text

Webアプリケーション開発における役職 2023 author: GANGAN

Slide 31

Slide 31 text

みなさん、Webアプリケーションってどうやって作るかご存知ですか？学科によってはほとんど授業で扱わないと思います。私は高専ではもちろん、大学でもやってない。 2023 author: GANGAN

Slide 32

Slide 32 text

case1: アミュプラザのサイトにアクセスする 2023 author: GANGAN

Slide 33

Slide 33 text

アミュプラザのサイトにアクセスする Web アプリブラウザ Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求ページページを表示するユーザー 2023 author: GANGAN

Slide 34

Slide 34 text

検索エンジンで「アミュプラザ鹿児島」を調べ、出てきたサイトへアクセスします Web アプリブラウザ Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求ページページを表示するユーザー 2023 author: GANGAN

Slide 35

Slide 35 text

Webアプリケーションサーバーが表示するHTMLを返します Web アプリブラウザ Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求ページページを表示するユーザー 2023 author: GANGAN

Slide 36

Slide 36 text

もう少し解像度を上げます 2023 author: GANGAN

Slide 37

Slide 37 text

アミュプラザのサイトにアクセスするインフラデータベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得データデータページページを表示するユーザー 2023 author: GANGAN

Slide 38

Slide 38 text

このフロー、何かに似てませんか？ 2023 author: GANGAN

Slide 39

Slide 39 text

スターバックスやジョイフルの注文フローと同じではないですか？ 2023 author: GANGAN

Slide 40

Slide 40 text

では、スターバックスさんを例に考えてみます 2023 author: GANGAN

Slide 41

Slide 41 text

スターバックスで考えてみます: [注文する] 店員さん店員さんあなた「ダークモカチップフラペチーノ」を注文するあなた 2023 author: GANGAN

Slide 42

Slide 42 text

スターバックスで考えてみます: [キッチンで注文を受ける] あなた店員さんキッチン「ダークモカチップフラペチーノ」を注文するオーダー「ダークモカチップフラペチーノ」あなた店員さんキッチン 2023 author: GANGAN

Slide 43

Slide 43 text

スターバックスで考えてみます: [冷蔵庫から食材を取ってくる] 冷蔵庫冷蔵庫あなた店員さんキッチン「ダークモカチップフラペチーノ」を注文するオーダー「ダークモカチップフラペチーノ」「ダークモカチップフラペチーノ」の食材食材を探す「ダークモカチップフラペチーノ」の食材あなた店員さんキッチン 2023 author: GANGAN

Slide 44

Slide 44 text

スターバックスで考えてみます: [お待ちのあなたへ] 冷蔵庫冷蔵庫あなた店員さんキッチン「ダークモカチップフラペチーノ」を注文するオーダー「ダークモカチップフラペチーノ」「ダークモカチップフラペチーノ」の食材食材を探す「ダークモカチップフラペチーノ」の食材オーダー完成ご注文の「ダークモカチップフラペチーノ」です！あなた店員さんキッチン 2023 author: GANGAN

Slide 45

Slide 45 text

スターバックスで考えてみます : 全体図スターバックスチーム冷蔵庫冷蔵庫あなた店員さんキッチン「ダークモカチップフラペチーノ」を注文するオーダー「ダークモカチップフラペチーノ」「ダークモカチップフラペチーノ」の食材食材を探す「ダークモカチップフラペチーノ」の食材オーダー完成ご注文の「ダークモカチップフラペチーノ」です！あなた店員さんキッチン 2023 author: GANGAN

Slide 46

Slide 46 text

(再掲) アミュプラザのサイトにアクセスするインフラデータベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得データデータページページを表示するユーザー 2023 author: GANGAN

Slide 47

Slide 47 text

実は概念的には同じなんですね 2023 author: GANGAN

Slide 48

Slide 48 text

≒ 2023 author: GANGAN

Slide 49

Slide 49 text

Webサイトの話に戻ります 2023 author: GANGAN

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Webアプリケーションにおける役職フロントエンド (クライアント) バックエンド (サーバーサイド) インフラ/アーキテクチャ ※ それぞれについて軽く触れていきます。今回は詳しく解説していません主に3つの区分に分類されます 2023 author: GANGAN

Slide 52

Slide 52 text

Slide 53

Slide 53 text

フロントエンドはこの部分データベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得データデータページページを表示するユーザー 2023 author: GANGAN

Slide 54

Slide 54 text

フロントエンドについてユーザーがアクセスする画面機能実装例ユーザー操作画面ログイン機能ページ遷移利用技術: あくまで一例 React.js / Next.js Vue.js / Nuxt.js Angular.js Astro, Remix, and more… 2023 author: GANGAN

Slide 55

Slide 55 text

Slide 56

Slide 56 text

サーバーサイドはこの部分データベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得データデータページページを表示するユーザー 2023 author: GANGAN

Slide 57

Slide 57 text

サーバーサイドについて画面に表示するデータを取得・加工する (データ: DB, image, csv, pdf, etc.) 機能実装例 CRUD API (GET / POST / PUT / DELETE) データベース内のデータ更新 eg. 1日1回日付を更新する利用技術: あくまで一例 Java / Kotlin + Spring Boot Ruby + Ruby on Rails PHP + Laravel JavaScript + Express / Hono and more… 2023 author: GANGAN

Slide 58

Slide 58 text

Slide 59

Slide 59 text

インフラはこの部分インフラデータベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得データデータページページを表示するユーザー 2023 author: GANGAN

Slide 60

Slide 60 text

インフラ/アーキテクチャについてフロント、サーバーが動く環境を提供。環境全般 SRE, Platform Engineering などの用語を耳にするかも機能実装例サーバーを用意するログインユーザーを管理する利用技術: あくまで一例 cloud: AWS cloud: Google Cloud cloud: Microsoft Azure cloud: Cloudflare IaC: Terraform and more… 2023 author: GANGAN

Slide 61

Slide 61 text

このように、1つのプロダクトを作るためには色々な役職が存在し、多くのエンジニアがタッグを組んであなたの便利のために頑張っています 2023 author: GANGAN

Slide 62

Slide 62 text

本日の内容は全部覚えなくても良いです 2023 author: GANGAN

Slide 63

Slide 63 text

気になった時、気になった所から調べてみてください 2023 author: GANGAN

Slide 64

Slide 64 text

本日のまとめプロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とはスライドはここに上がってるよ https://slide-kosen-dev-roadmap.pages.dev/ 2023 author: GANGAN

Slide 65

Slide 65 text

明日の告知 2023 author: GANGAN

Slide 66

Slide 66 text

2023 author: GANGAN

Slide 67

Slide 67 text

Q&A slidoを眺めながら回答します質問は技術的な話でも、就活的な話でもOKです後から質問出てきた場合は、明日でも、X(旧Twitter)のDMでも大丈夫です 2023 author: GANGAN

Slide 68

Slide 68 text

おしまい 2023 author: GANGAN