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

Slide 1

Slide 1 text

2023 author: GANGAN

Slide 2

Slide 2 text

「プロダクトの技術選定を１から行ってください」そう言われた時のための技術選定基準 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

3時のおやつ感覚で聞いてもらえると良いです 2023 author: GANGAN

Slide 7

Slide 7 text

本日の話昨日のおさらい Webアプリケーション開発における役職とはどんな観点で技術選定を行うのか 2023 author: GANGAN

Slide 8

Slide 8 text

本日の話昨日のおさらい Webアプリケーション開発における役職とはどんな観点で技術選定を行うのか 2023 author: GANGAN

Slide 9

Slide 9 text

昨日のおさらい 2023 author: GANGAN

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ブラウザはwebサーバーに対してページを要求するデータベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求ユーザー 2023 author: GANGAN

Slide 13

Slide 13 text

webサーバーはAPIサーバーに対してデータを要求するデータベース API サーバー Web アプリブラウザデータベース API サーバー Web アプリブラウザユーザーページにアクセスする Web アプリの表示を要求 GET: データ取得API ユーザー 2023 author: GANGAN

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

全体図を改めてみます 2023 author: GANGAN

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

2. Webアプリケーションにおける役職とは 2023 author: GANGAN

Slide 22

Slide 22 text

2. Webアプリケーションにおける役職とは主に3つの区分に分類されます。フロントエンド (クライアント) : ユーザーが操作する画面の作成バックエンド (サーバーサイド) : 画面に表示するデータの取得・加工インフラ / アーキテクチャ : ユーザーがアクセスする環境全般 2023 author: GANGAN

Slide 23

Slide 23 text

以上を踏まえると3つの観点があると分かります 2023 author: GANGAN

Slide 24

Slide 24 text

3つの観点 (大項目) フロントエンド観点サーバーサイド観点インフラ / アーキテクチャ観点 2023 author: GANGAN

Slide 25

Slide 25 text

では、本スライド構成をベースにそれぞれの観点を整理していきます 2023 author: GANGAN

Slide 26

Slide 26 text

Require (要求・要件を定義する) 欲しかったもの / やりたいこと 1. スライドを気軽に作成し、公開できる環境が欲しい 2. スライドの管理を楽にし、コンテンツの作成に集中したいやりたかったこと slidev が使いたい Cloudflare が使いたい 2023 author: GANGAN

Slide 27

Slide 27 text

slidev とは 2023 author: GANGAN

Slide 28

Slide 28 text

見る Slidev First Preview Demo Slidev First Preview Demo 共有共有 2023 author: GANGAN

Slide 29

Slide 29 text

整理します 1. slidevを用いてスライドを作成する 2. Cloudflare Pagesにデプロイする 3. スライド作成はコンテンツ作成に注力し、管理は楽にしたい 2023 author: GANGAN

Slide 30

Slide 30 text

この時点で何点か疑問が出てきます 2023 author: GANGAN

Slide 31

Slide 31 text

考えられる疑問: スライドについて Q. 共通スライドはどのように管理しますか。 Q. スライドのデザイン(テーマ)はどうしますか Q. スライドのフォントはどうしますか 2023 author: GANGAN

Slide 32

Slide 32 text

考えられる疑問: スライドについて Q. 共通スライドはどのように管理しますか。 A. commonディレクトリで管理する。monorepo構成。 Q. スライドのデザイン(テーマ)はどうしますか A. 独自のテーマをVue.jsで作成する Q. スライドのフォントはどうしますか A. Google Fontsが利用できるため、Google Fonts一覧から選定 2023 author: GANGAN

Slide 33

Slide 33 text

考えられる疑問: 公開ページについて Q. スライド一覧は必要ですか。 Q. 閲覧公開範囲はどのくらいですか。 Q. いいねなどの評価できる必要はありますか。 2023 author: GANGAN

Slide 34

Slide 34 text

考えられる疑問: 公開ページについて Q. スライド一覧は必要ですか。 A. 今回は必要ない。この機能が必要であればSpeaker Deckを採用した方がいい Q. 閲覧公開範囲はどのくらいですか。 A. 公開範囲の権限を絞る必要はない。合わせてログイン機能なども必要ない Q. いいねなどの評価できる必要はありますか。 A. こちらも必要ない 2023 author: GANGAN

Slide 35

Slide 35 text

考えられる疑問: フロントエンド / サーバーサイド Q. 表示形式は静的サイトのみですか。 Q. 複数のページが必要ですか。 Q. 画像などのイメージはどこで管理しますか。 Q. APIを必要としますか。 2023 author: GANGAN

Slide 36

Slide 36 text

考えられる疑問: フロントエンド / サーバーサイド Q. 表示形式は静的サイトのみですか。 A. 静的サイトのみ。SPA / SSR構成は考慮しない Q. 複数のページが必要ですか。 A. 必要ない。slidev構成に従って構成を組む Q. 画像などのイメージはどこで管理しますか。 A. /public ディレクトリに配置する Q. APIを必要としますか。 A. 今回は不要である。APIサーバーについて考える必要はない ` ` 2023 author: GANGAN

Slide 37

Slide 37 text

シーケンス図は以下のようになります: User Cloudflare Pages ブラウザ Cloudflare Pages ブラウザユーザーページにアクセスする Web アプリの表示を要求ページページを表示するユーザーシンプルですね 2023 author: GANGAN

Slide 38

Slide 38 text

シーケンス図は以下のようになります: Developer Cloudflare Pages GitHub Cloudflare Pages GitHub alt [ ビルド成功] 開発者 git push GitHub Actions でビルドを行う Cloudflare Pages へデプロイする開発者 2023 author: GANGAN

Slide 39

Slide 39 text

Design: 使用技術スライド作成: slidev コア技術: Vue.js デプロイ先: Cloudflare Pages CI/CD: GitHub Actions + Wrangler (Cloudflare CLI) 2023 author: GANGAN

Slide 40

Slide 40 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 41

Slide 41 text

技術に関連して考えられる検討範囲法律はクリアしているか場合によっては日本の法律はもちろん、英国・米国の法律まで検討すべき可能性もある契約的に問題ないか契約上超えてはいけないラインが要件に含まれていないかサーバーのリージョン(置いてある国)は日本かデータを日本国外に出したくないという要求は考えられる 2023 author: GANGAN

Slide 42

Slide 42 text

本日のまとめ技術を選定する場合、考えるべき項目が多岐に渡る全てを網羅することは出来ない。そのため、検討すべき要件を1つずつクリアしていけば良い 2023 author: GANGAN

Slide 43

Slide 43 text

おしまい 2023 author: GANGAN