「プロダクトの技術選定を1から行ってください」そう言われた時のための技術選定基準@SPARK

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

---
theme: プロダクト開発における技術選定
title：「プロダクトの技術選定を1から行ってください」そう言われた時のための技術選定基準@SPARK

Transcript

1. 2023 author: GANGAN
2. 「プロダクトの技術選定を １から行ってください」 そう言われた時のための技術選定基準 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. 3時のおやつ感覚で聞いてもらえると良いです 2023 author: GANGAN
7. 本日の話 昨日のおさらい Webアプリケーション開発における役職とは どんな観点で技術選定を行うのか 2023 author: GANGAN
8. 本日の話 昨日のおさらい Webアプリケーション開発における役職とは どんな観点で技術選定を行うのか 2023 author: GANGAN
9. 昨日のおさらい 2023 author: GANGAN
10. 1. アミュプラザのサイトにアクセスする 2023 author: GANGAN
11. 検索エンジンで「アミュプラザ鹿児島」を調べ、出てきたサ イトへアクセスします データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする ユーザー 2023 author: GANGAN
12. ブラウザはwebサーバーに対してページを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 ユーザー 2023 author: GANGAN
13. webサーバーはAPIサーバーに対してデータを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API ユーザー 2023 author: GANGAN
14. APIサーバーはデータベースに対してデータを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 ユーザー 2023 author: GANGAN
15. APIサーバーはデータベースに対してデータを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ ユーザー 2023 author: GANGAN
16. webサーバーはAPIサーバーに対してデータを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ユーザー 2023 author: GANGAN
17. ブラウザはwebサーバーに対してページを要求する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ユーザー 2023 author: GANGAN
18. ユーザーに「アミュプラザ鹿児島」のサイトを表示する データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
19. 全体図を改めてみます 2023 author: GANGAN
20. アミュプラザのサイトにアクセスするシーケンス図: 全体図 インフラ データベース API サーバー Web アプリ ブラウザ データベース API サーバー Web アプリ ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API select: データ取得 データ データ ページ ページを表示する ユーザー 2023 author: GANGAN
21. 2. Webアプリケーションにおける役職とは 2023 author: GANGAN
22. 2. Webアプリケーションにおける役職とは 主に3つの区分に分類されます。 フロントエンド (クライアント) : ユーザーが操作する画面の作成 バックエンド (サーバーサイド) : 画面に表示するデータの取得・加工 インフラ / アーキテクチャ : ユーザーがアクセスする環境全般 2023 author: GANGAN
23. 以上を踏まえると3つの観点があると分かります 2023 author: GANGAN
24. 3つの観点 (大項目) フロントエンド観点 サーバーサイド観点 インフラ / アーキテクチャ観点 2023 author: GANGAN
25. では、本スライド構成をベースにそれぞれの観点を整理していきます 2023 author: GANGAN
26. Require (要求・要件を定義する) 欲しかったもの / やりたいこと 1. スライドを気軽に作成し、公開できる環境が欲しい 2. スライドの管理を楽にし、コンテンツの作成に集中したい やりたかったこと slidev が使いたい Cloudflare が使いたい 2023 author: GANGAN
27. slidev とは 2023 author: GANGAN
28. 見る Slidev First Preview Demo Slidev First Preview Demo 共有 共有 2023 author: GANGAN
29. 整理します 1. slidevを用いてスライドを作成する 2. Cloudflare Pagesにデプロイする 3. スライド作成はコンテンツ作成に注力し、管理は楽にしたい 2023 author: GANGAN
30. この時点で何点か疑問が出てきます 2023 author: GANGAN
31. 考えられる疑問: スライドについて Q. 共通スライドはどのように管理しますか。 Q. スライドのデザイン(テーマ)はどうしますか Q. スライドのフォントはどうしますか 2023 author: GANGAN
32. 考えられる疑問: スライドについて Q. 共通スライドはどのように管理しますか。 A. commonディレクトリで管理する。monorepo構成。 Q. スライドのデザイン(テーマ)はどうしますか A. 独自のテーマをVue.jsで作成する Q. スライドのフォントはどうしますか A. Google Fontsが利用できるため、Google Fonts一覧から選定 2023 author: GANGAN
33. 考えられる疑問: 公開ページについて Q. スライド一覧は必要ですか。 Q. 閲覧公開範囲はどのくらいですか。 Q. いいねなどの評価できる必要はありますか。 2023 author: GANGAN
34. 考えられる疑問: 公開ページについて Q. スライド一覧は必要ですか。 A. 今回は必要ない。この機能が必要であればSpeaker Deckを採用し た方がいい Q. 閲覧公開範囲はどのくらいですか。 A. 公開範囲の権限を絞る必要はない。合わせてログイン機能なども必 要ない Q. いいねなどの評価できる必要はありますか。 A. こちらも必要ない 2023 author: GANGAN
35. 考えられる疑問: フロントエンド / サーバーサイド Q. 表示形式は静的サイトのみですか。 Q. 複数のページが必要ですか。 Q. 画像などのイメージはどこで管理しますか。 Q. APIを必要としますか。 2023 author: GANGAN
36. 考えられる疑問: フロントエンド / サーバーサイド Q. 表示形式は静的サイトのみですか。 A. 静的サイトのみ。SPA / SSR構成は考慮しない Q. 複数のページが必要ですか。 A. 必要ない。slidev構成に従って構成を組む Q. 画像などのイメージはどこで管理しますか。 A. /public ディレクトリに配置する Q. APIを必要としますか。 A. 今回は不要である。APIサーバーについて考える必要はない ` ` 2023 author: GANGAN
37. シーケンス図は以下のようになります: User Cloudflare Pages ブラウザ Cloudflare Pages ブラウザ ユーザーページにアクセスする Web アプリの表示を要求 ページ ページを表示する ユーザー シンプルですね 2023 author: GANGAN
38. シーケンス図は以下のようになります: Developer Cloudflare Pages GitHub Cloudflare Pages GitHub alt [ ビルド成功] 開発者 git push GitHub Actions で ビルドを行う Cloudflare Pages へデプロイする 開発者 2023 author: GANGAN
39. Design: 使用技術 スライド作成: slidev コア技術: Vue.js デプロイ先: Cloudflare Pages CI/CD: GitHub Actions + Wrangler (Cloudflare CLI) 2023 author: GANGAN
40. 最終的に出来たアーキテクチャ構成 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
41. 技術に関連して考えられる検討範囲 法律はクリアしているか 場合によっては日本の法律はもちろん、 英国・米国の法律まで検討すべき可能性もある 契約的に問題ないか 契約上超えてはいけないラインが要件に含まれていないか サーバーのリージョン(置いてある国)は日本か データを日本国外に出したくないという要求は考えられる 2023 author: GANGAN
42. 本日のまとめ 技術を選定する場合、考えるべき項目が多岐に渡る 全てを網羅することは出来ない。そのため、検討すべき要 件を1つずつクリアしていけば良い 2023 author: GANGAN
43. おしまい 2023 author: GANGAN