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

2023/12/15
鹿児島工業高等専門学校　スタートアップ教育整備事業　インキュベーションプログラム「SPARK」
登壇資料

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

Transcript

1. 2023 author: GANGAN
2. プロダクト開発って どんな感じで進むんですかー？ 制御系高専卒生が話すWebアプリケーション開発の道のり 2023 author: GANGAN
3. About me 2023 author: GANGAN
4. About me 岩丸慎平 (@gangan_nikki) 北九州高専(制御系) → 鹿児島大学(情報系) 1社目ではAI Webアプリケーションの開発・運用 学生時代から記事書いたり、登壇したりしてます 2023 author: GANGAN
5. 私のことなんて正直忘れてもらって大丈夫です 2023 author: GANGAN
6. 本日の話 プロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とは 2023 author: GANGAN
7. 本日の発表ですが 基本的にメモを取る必要はないです 2023 author: GANGAN
8. 必要になった時に 「あの時なんか聞いたなー。調べてみるかー」 となれば良いです 2023 author: GANGAN
9. では、 2023 author: GANGAN
10. プロダクト開発ってどのような流れで進むのか 2023 author: GANGAN
11. プロダクト開発ってどのような流れで進むのか GitHub Copilot Chat先生に描いてもらいました。 2022-01-01 2022-02-01 2022-03-01 2022-04-01 2022-05-01 要件定義 システムとソフトウェア設計 実装とユニットテスト 統合とシステムテスト 運用とメンテナンス 要件定義 システムとソフトウェア設計 実装とユニットテスト 統合とシステムテスト 運用とメンテナンス ウォーターフォールモデル 要件定義 設計 実装 テスト レビューと改善 要件定義 設計 スプリント1 アジャイルモデル 2023 author: GANGAN
12. 2023 author: GANGAN
13. 例: 講義の実習に当てはめて考える 2023 author: GANGAN
14. 例: 講義の実習に当てはめて考える 先生 あなた 「ロボットの回路を作ってください」 ロボットの回路を作る ロボットの回路を納品 先生 あなた 2023 author: GANGAN
15. ここで質問です。 2023 author: GANGAN
16. Q. 生徒に作ってもらう「ロボットの回路」を定義するのは 誰ですか？ 2023 author: GANGAN
17. A. そう、先生ですね。 2023 author: GANGAN
18. A. 先生が回路の設計を行ったことになります 2023 author: GANGAN
19. 例: 講義の実習に当てはめて考える 偉い人 先生 あなた 「ロボットの回路について理解するような実習して」 ロボットの回路を設計する 「ロボットの回路を作ってください」 ロボットの回路を作る ロボットの回路を納品 偉い人 先生 あなた 2023 author: GANGAN
20. 例: 講義の実習に当てはめて考える 偉い人 先生 あなた 「ロボットの回路について理解するような実習して」 【偉い人からの求められている要件を定義して】ロボットの回路を設計する 「ロボットの回路を作ってください」 ロボットの回路を作る ロボットの回路を納品 偉い人 先生 あなた 2023 author: GANGAN
21. 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
22. このように、皆さんの普段の実習の中でも 要件定義・設計・実装・テスト・運用が存在しています 2023 author: GANGAN
23. 例: このスライドに当てはめて考える 2023 author: GANGAN
24. 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
25. 詳細は技術記事を書きます 2023 author: GANGAN
26. 明日のイベントでは「なぜこの技術を選んだのか」など、 技術選定理由なども合わせて解説します。 2023 author: GANGAN
27. 疲れてないですか？ここまでが前半です。 何か質問ありますか？ Q&A時間は最後にも設けますが前半内容で何かあれば受け付けます 2023 author: GANGAN
28. 後半戦 2023 author: GANGAN
29. 本日の話 プロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とは 2023 author: GANGAN
30. Webアプリケーション開発における役職 2023 author: GANGAN
31. みなさん、Webアプリケーションってどうやって 作るかご存知ですか？ 学科によってはほとんど授業で扱わないと思います。私は高専ではもちろん、大学でもやってない。 2023 author: GANGAN
32. case1: アミュプラザのサイトにアクセスする 2023 author: GANGAN
33. アミュプラザのサイトにアクセスする Web アプリ ブラウザ Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 ページ ページを表示する ユーザー 2023 author: GANGAN
34. 検索エンジンで「アミュプラザ鹿児島」を調べ、出てきたサ イトへアクセスします Web アプリ ブラウザ Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 ページ ページを表示する ユーザー 2023 author: GANGAN
35. Webアプリケーションサーバーが表示するHTMLを返します Web アプリ ブラウザ Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 ページ ページを表示する ユーザー 2023 author: GANGAN
36. もう少し解像度を上げます 2023 author: GANGAN
37. アミュプラザのサイトにアクセスする インフラ データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
38. このフロー、何かに似てませんか？ 2023 author: GANGAN
39. スターバックスやジョイフルの注文フローと同じ ではないですか？ 2023 author: GANGAN
40. では、スターバックスさんを例に考えてみます 2023 author: GANGAN
41. スターバックスで考えてみます: [注文する] 店員さん 店員さん あなた 「ダークモカチップフラペチーノ」を注文する あなた 2023 author: GANGAN
42. スターバックスで考えてみます: [キッチンで注文を受ける] あなた 店員さん キッチン 「ダークモカチップフラペチーノ」を 注文する オーダー 「ダークモカチップフラペチーノ」 あなた 店員さん キッチン 2023 author: GANGAN
43. スターバックスで考えてみます: [冷蔵庫から食材を取ってくる] 冷蔵庫 冷蔵庫 あなた 店員さん キッチン 「ダークモカチップフラペチーノ」を 注文する オーダー 「ダークモカチップフラペチーノ」 「ダークモカチップフラペチーノ」の食材 食材を探す 「ダークモカチップフラペチーノ」の食材 あなた 店員さん キッチン 2023 author: GANGAN
44. スターバックスで考えてみます: [お待ちのあなたへ] 冷蔵庫 冷蔵庫 あなた 店員さん キッチン 「ダークモカチップフラペチーノ」を 注文する オーダー 「ダークモカチップフラペチーノ」 「ダークモカチップフラペチーノ」の食材 食材を探す 「ダークモカチップフラペチーノ」の食材 オーダー完成 ご注文の「ダークモカチップフラペチーノ」です！ あなた 店員さん キッチン 2023 author: GANGAN
45. スターバックスで考えてみます : 全体図 スターバックス チーム 冷蔵庫 冷蔵庫 あなた 店員さん キッチン 「ダークモカチップフラペチーノ」を 注文する オーダー 「ダークモカチップフラペチーノ」 「ダークモカチップフラペチーノ」の食材 食材を探す 「ダークモカチップフラペチーノ」の食材 オーダー完成 ご注文の「ダークモカチップフラペチーノ」です！ あなた 店員さん キッチン 2023 author: GANGAN
46. (再掲) アミュプラザのサイトにアクセスする インフラ データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
47. 実は概念的には同じなんですね 2023 author: GANGAN
48. ≒ 2023 author: GANGAN
49. Webサイトの話に戻ります 2023 author: GANGAN
50. (再掲) アミュプラザのサイトにアクセスする インフラ データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
51. Webアプリケーションにおける役職 フロントエンド (クライアント) バックエンド (サーバーサイド) インフラ/アーキテクチャ ※ それぞれについて軽く触れていきます。今回は詳しく解説していません 主に3つの区分に分類されます 2023 author: GANGAN
52. Webアプリケーションにおける役職 フロントエンド (クライアント) バックエンド (サーバーサイド) インフラ/アーキテクチャ ※ それぞれについて軽く触れていきます。今回は詳しく解説していません 主に3つの区分に分類されます 2023 author: GANGAN
53. フロントエンドはこの部分 データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
54. フロントエンドについて ユーザーがアクセスする画面 機能実装例 ユーザー操作画面 ログイン機能 ページ遷移 利用技術: あくまで一例 React.js / Next.js Vue.js / Nuxt.js Angular.js Astro, Remix, and more… 2023 author: GANGAN
55. Webアプリケーションにおける役職 フロントエンド (クライアント) バックエンド (サーバーサイド) インフラ/アーキテクチャ ※ それぞれについて軽く触れていきます。今回は詳しく解説していません 主に3つの区分に分類されます 2023 author: GANGAN
56. サーバーサイドはこの部分 データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
57. サーバーサイドについて 画面に表示するデータを取得・加工する (データ: 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
58. Webアプリケーションにおける役職 フロントエンド (クライアント) バックエンド (サーバーサイド) インフラ/アーキテクチャ ※ それぞれについて軽く触れていきます。今回は詳しく解説していません 主に3つの区分に分類されます 2023 author: GANGAN
59. インフラはこの部分 インフラ データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
60. インフラ/アーキテクチャについて フロント、サーバーが動く環境を提供。環境全般 SRE, Platform Engineering などの用語を耳にするかも 機能実装例 サーバーを用意する ログインユーザーを管理する 利用技術: あくまで一例 cloud: AWS cloud: Google Cloud cloud: Microsoft Azure cloud: Cloudflare IaC: Terraform and more… 2023 author: GANGAN
61. このように、1つのプロダクトを作るためには 色々な役職が存在し、 多くのエンジニアがタッグを組んで あなたの便利のために頑張っています 2023 author: GANGAN
62. 本日の内容は全部覚えなくても良いです 2023 author: GANGAN
63. 気になった時、 気になった所から調べてみてください 2023 author: GANGAN
64. 本日のまとめ プロダクト開発ってどのような流れで進むのか Webアプリケーション開発における役職とは スライドはここに上がってるよ https://slide-kosen-dev-roadmap.pages.dev/ 2023 author: GANGAN
65. 明日の告知 2023 author: GANGAN
66. 2023 author: GANGAN
67. Q&A slidoを眺めながら回答します 質問は技術的な話でも、就活的な話でもOKです 後から質問出てきた場合は、明日でも、X(旧Twitter)のDMでも大丈夫です 2023 author: GANGAN
68. おしまい 2023 author: GANGAN