つべこべ言わずにwebアプリをつくろう！/create_web_app_guide

# つべこべ言わずにwebアプリをつくろう！

author
: 山下智矢

institution
: 株式会社Inner Resource

# 何をするか

web アプリを作りたいと思ったら、何を考えるかの話をします
web アプリとは、インターネット上に公開されているブラウザで動作するアプリのことを指します

# やらないこと

- 設計や実装の仕方などの細かい話

# アジェンダ

- 何を考えるか
- どのように構築するか
- どのように公開するか

# 何を考えるか

- なぜ作るのか
- 目的は？
- 何を作るか
- どんなアプリ？
- 何を使いたいか
- 使いたい技術は？
- いくらかけれるか
- 予算は？

# 何を考えるか - 目的は？

今後の考え方、モチベーションや技術選定に大きく関わるので、しっかり固めておきましょう

- 学習のため
- 身近な問題を解決するため
- お金を稼ぐため

# 何を考えるか - どんなアプリ？

整理したり計算したりするだけのツール

- 電卓、同期機能のないToDoリストなど
- データの保存はしないか、デバイス上で完結

ビジネスロジックがあれば良い

# 何を考えるか - どんなアプリ？

- ブログ、ニュースなど
- 単一方向のCMS

DBと、コンテンツを閲覧しやすいUIが必要

# 何を考えるか - どんなアプリ？

- 掲示板、SNS など
- インタラクティブなCMS

コンテンツのCRUDをしやすくするバックエンドロジックも必要
誰がコンテンツを作ったのかを管理するために、認証の機能なども

# 何を考えるか - 使いたい技術は？

- 言語は？
- フレームワークは？
- アーキテクチャは？

# 何を考えるか - 予算は？

- 無料で？
- 趣味の範囲内で課金できる？
- 採算がとれる目処がある？
- 出資者がいる？

# どのように構築するか
バックエンドのロジックが必要な場合、サーバを用意して構築することが必要です

- フレームワークに頼ってある程度自分で構築する
- SaaSに頼ってサーバーレスで構築する

# どのように構築するか　- サーバーレス

目的や予算によっては、車輪の再開発をせずに、
提供されているサービスや公開されているAPIを有効活用しましょう

# サーバーレスサービスの一例

- CMS
- フルスタック CMS
- Wordpress
- Headless CMS
- Contentful
- FaaS
- 独自のAPIのエンドポイントとなる
- AWS Lambda
- Google Cloud Functions

# サーバーレスサービスの一例

- DB (BaaS）
- Firebase
- Supabase
- 認証・認可
- 多様化する認証フローをすべて自分で作るのは大変なので
- Firebase Authentication
- Amazon Cognito
- Auth0

# サーバーレスサービスの一例

- メール送信
- Sendgrid
- Mailchimp
- 決済
- セキュリティとか担保できないなら、自分で構築するのは避けましょう
- Stripe
- Square
- Pay.jp

# サーバーレスサービスの一例

- ストレージ
- 画像やファイルの保存、画像の加工なども
- Cloudinary
- Amazon S3
- Firebase Storage
- 各種公開API
- 公開されてるAPIをうまく使えば、自分で開発することはほとんどなかったりする

# どのように公開するか

インターネット上に公開する以上、インターネットに繋がっているサーバにアプリを設置する必要がある

- 自宅サーバ
- IaaS
- PaaS

# どのように公開するか - 自宅サーバ

- 停電や通信切断のリスクを取れて、セキュリティやネットワークの知識に自信があれば取りうる
- 主なコストは電気代

# どのように公開するか - IaaS

- Amazon EC2, レンタルサーバなど
- ミドルウェアやランタイムの導入、デプロイは自分でやる
- スペックにこだわらなければ安価に利用できるものが多い

# どのように公開するか - PaaS

- Netlify, Heroku, Vercel など
- 自分の使いたい言語のランタイムに対応しているか
- ソースコードをプッシュするだけで簡単にホスティングできるものが多い
- ファンクションやストレージ機能を提供してくれるものも
- 無料で使えたり、少額のサブスクで使える
- 料金や規約変更に注意

Transcript

1. つべこべ言わずにwebア プリをつくろう！ 山下智矢 株式会社Inner Resource
2. 何をするか web アプリを作りたいと思ったら、何を考える かの話をします web アプリとは、インターネット上に公開され ているブラウザで動作するアプリのことを指し ます
3. やらないこと 設計や実装の仕方などの細かい話
4. アジェンダ 何を考えるか どのように構築するか どのように公開するか
5. 何を考えるか なぜ作るのか 目的は？ 何を作るか どんなアプリ？ 何を使いたいか 使いたい技術は？ いくらかけれるか 予算は？
6. 何を考えるか - 目的は？ 今後の考え方、モチベーションや技術選定に大 きく関わるので、しっかり固めておきましょう 学習のため 身近な問題を解決するため お金を稼ぐため
7. 何を考えるか - どんなアプリ？ 整理したり計算したりするだけの ツール 電卓、同期機能のないToDoリストなど データの保存はしないか、デバイス上で完結 ビジネスロジックがあれば良い
8. 何を考えるか - どんなアプリ？ あなたがコンテンツを提供しユー ザーは閲覧する ブログ、ニュースなど 単一方向のCMS DBと、コンテンツを閲覧しやすいUIが必要
9. 何を考えるか - どんなアプリ？ ユーザーもコンテンツをCRUDする 掲示板、SNS など インタラクティブなCMS コンテンツのCRUDをしやすくするバックエン ドロジックも必要 誰がコンテンツを作ったのかを管理するため に、認証の機能なども
10. 何を考えるか - 使いたい技術は？ 言語は？ フレームワークは？ アーキテクチャは？
11. 何を考えるか - 予算は？ 無料で？ 趣味の範囲内で課金できる？ 採算がとれる目処がある？ 出資者がいる？
12. どのように構築するか バックエンドのロジックが必要な場合、サーバ を用意して構築することが必要です フレームワークに頼ってある程度自分で構築 する SaaSに頼ってサーバーレスで構築する
13. どのように構築するか　 - サーバーレス 目的や予算によっては、車輪の再開発をせず に、 提供されているサービスや公開されているAPI を有効活用しましょう
14. サーバーレスサービスの一例 CMS フルスタック CMS Wordpress Headless CMS Contentful FaaS 独自のAPIのエンドポイントとなる AWS Lambda Google Cloud Functions
15. サーバーレスサービスの一例 DB (BaaS） Firebase Supabase 認証・認可 多様化する認証フローをすべて自分で作るのは大変 なので Firebase Authentication Amazon Cognito Auth0
16. サーバーレスサービスの一例 メール送信 Sendgrid Mailchimp 決済 セキュリティとか担保できないなら、自分で構築す るのは避けましょう Stripe Square Pay.jp
17. サーバーレスサービスの一例 ストレージ 画像やファイルの保存、画像の加工なども Cloudinary Amazon S3 Firebase Storage 各種公開API 公開されてるAPIをうまく使えば、自分で開発する ことはほとんどなかったりする
18. どのように公開するか インターネット上に公開する以上、インター ネットに繋がっているサーバにアプリを設置す る必要がある 自宅サーバ IaaS PaaS
19. どのように公開するか - 自宅サーバ 停電や通信切断のリスクを取れて、セキュリ ティやネットワークの知識に自信があれば取 りうる 主なコストは電気代
20. どのように公開するか - IaaS Amazon EC2, レンタルサーバなど ミドルウェアやランタイムの導入、デプロイ は自分でやる スペックにこだわらなければ安価に利用でき るものが多い
21. どのように公開するか - PaaS Netlify, Heroku, Vercel など 自分の使いたい言語のランタイムに対応して いるか ソースコードをプッシュするだけで簡単にホ スティングできるものが多い ファンクションやストレージ機能を提供して くれるものも 無料で使えたり、少額のサブスクで使える