目次

はじめに
執筆の経緯
想定する読者
本書で開発するWebサービスについて
筆者の開発環境
サンプルコード
免責事項
商標
第1章 フロントエンドの環境構築
1.1 技術選定をしよう
1.2 環境構築手順
第2章 バックエンドの環境構築
2.1 PythonでもLinterとフォーマッターを使いたい
2.2 Chaliceを使う準備
第3章 モックアップを作ろう
3.1 セマンティクスを意識しよう
3.2 Tailwind CSSでUIコンポーネントを作る手順
3.3 React Routerでルーティングを設定しよう
3.4 長い文章はマークダウンで書こう
3.5 共通するレイアウトをまとめよう
3.6 プルダウンメニューの表示制御
3.7 モーダルの表示制御
3.8 サンプルコードを動かしてみよう
第4章 メール受信APIを作ろう
4.1 APIを販売するとはどういうことか
4.2 Chaliceで楽々デプロイ
第5章 Cognitoで認証しよう
5.1 Cognitoユーザープールを設定しよう
5.2 Amplifyで認証処理を実装しよう
第6章 APIキーを自動で発行しよう
6.1 使用量プランの確認
6.2 DynamoDBテーブルの作成
6.3 バックエンドの実装
6.4 フロントエンドの実装
第7章 Netlifyでいったん公開してみよう
7.1 ビルドしてみよう
7.2 Netlifyにデプロイしよう
7.3 問い合わせフォームを使おう
7.4 OGP画像を設定しよう
第8章 Stripeでサブスクリプションを実装しよう
8.1 Stripe側の準備
8.2 AWS側の準備
8.3 バックエンドの実装
8.4 フロントエンドの実装
8.5 動作確認
第9章 アカウントの削除に対応しよう
9.1 削除の前にアカウントの識別を可能にしよう
9.2 アカウント削除処理の実装
9.3 アカウント削除の動作確認
9.4 最終型の動作確認
あとがき
謝辞

はじめに

執筆の経緯

 筆者はサーバーサイドエンジニアです。いつものように社内向けの仕事をしていたら、あるとき「これは世の中に出したら売れるんじゃないか」と思えるAPIができました。そこで自作のAPIを販売する方法を調査してみましたが、既存のサービスはどれもいまいちでした。1「それなら自分で作ってしまおう」そう考えて作ったのがこちらのAPI販売サービス(図1)です。2

図1: FM Mail

 正確にはこのサービスは筆者の練習用で、次に作るサービスが本命です。ただ練習用とはいえ、認証やDB接続、クレジットカード決済機能まで備えた本格的なWebアプリケーションです。捨ててしまうのはもったいないので、会社の許可をとってオープンソース化し、開発中に得られた知見を共有することにしました。3

 開発はZenn4で記事を書きながら進めていきました。開発に集中すれば3か月ほどで作れる規模のアプリケーションですが、業務5の合間にドキュメントを書きながら進めていったため、完成まで半年ほどかかってしまいました。そのころにはZennの記事も本が一冊作れそうなくらいたまっていましたが、開発しながら手探り状態の中で書いていたため、振り返ってみると記述のアラも目立ちます。そこで記事の内容を全面的に書き直し、一冊の本として再編成したのが本書です。

想定する読者

 本書は次に該当する方を対象としています。ひとつでも当てはまる方は、ぜひお読みいただけると幸いです。

 ・Reactで実践的なWebアプリケーションを作ってみたい

 ・サーバーサイドエンジニアだがモダンフロントエンドに興味がある

 ・自作のAPIを販売したい

 ・サーバーレスアーキテクチャに興味がある

 ・Webサービスに決済機能を追加する方法を知りたい

 本書は入門書ではありません。できるだけ詳しく説明するように心がけてはいますが、ページの都合もあり、あまりに基礎的な部分、たとえばNode.jsやPythonのインストール方法などは記載していません。入門書が必要な方はほかの書籍をお買い求めください。筆者のお勧めは「りあクト! TypeScriptで始めるつらくないReact開発 第3.1版」6です。こちらの本にはReact開発に必要なことがほとんど載っています。筆者は実際にReactに関する書籍はこの3冊(3部作なので)しか読んでいなかったのですが7、本書のWebアプリケーションを最後まで作り上げることができました。一方、Pythonについてはお勧めの入門書は特にありません。筆者の場合は必要に応じてインターネットで調べているうちに、なんとなく書けるようになっていました。

 本書のWebアプリケーションを開発するには、GitHub、AWS、Google、Netlify、Stripeのアカウントがそれぞれ必要となります。事前にご用意ください。フロントエンドのデプロイ先はNetlifyで、バックエンドのAPI群のデプロイ先はAWSです。

本書で開発するWebサービスについて

 Claris社が販売するFileMakerという開発プラットフォームはご存じでしょうか。FileMakerは古くからあるローコード開発ツールの一種です。プログラミングが苦手な人でも簡単に本格的なアプリケーションケーションを作ることができるため、一部で根強い人気があります。筆者の職場でもFileMakerが使われていて、業務に合わせて作られた多数のアプリケーションケーションが毎日使われています。

 FileMakerには数多くの機能が用意されていますが8、不思議なことにメールを受信する機能はありません。メールを送信する機能はあるにもかかわらずです。FileMakerでメールを受信したいユーザーというのは昔から結構存在するため、そういった人々のために、サードパーティーのプラグインが作られてきました。弊社でもMailit9というプラグインを使っていましたが、メンテナンス性にやや難があったため、ある時期から筆者が作成したAPIに切り替えました。これが上述した「売れるんじゃないか」と考えたAPIのひとつです。

 本書では、FileMaker用のメール受信APIを販売するWebサービス10を作っていきます。FileMakerの市場規模は小さすぎるので、残念ながらこのWebサービスを公開しても十分な利益は出ないでしょう。11しかし、販売するAPI部分は簡単に差し替えることができます。需要のありそうなAPIを作ったことがある方やアイデアのある方は、本書を参考にWebサービスを作ってAPIを販売してみてはいかがでしょうか。

 なお、本書のWebアプリケーションを開発するのにFileMakerは必要ありません。

筆者の開発環境

 本書のWebアプリケーションは次の環境で開発しています。

 ・macOS Monterey (Intel Mac)

 ・Node.js 16.13.0

 ・Python 3.9.10

 ・VS Code

 Appleシリコン搭載Mac(M1 Max)でビルドできることは確認済みです。12WindowsやLinuxでの動作確認はしておりませんので、あらかじめご了承ください。

サンプルコード

 GitHubにサンプルコードを用意しました。

 https://github.com/sikkimtemi/How_to_create_API_sales_service

 フォルダ名は章の数字に対応しています。章が進むごとに機能が追加されていくので、筆者の開発作業を追体験できるようになっています。サンプルコードを動かしながら本書をお読みいただくことで、より理解が深まるでしょう。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

商標

 本書に登場するシステム名や製品名は、関係各社の商標または登録商標です。また本書では™や©、®といったマークは省略しています。

1. 楽天Rapid APIやAWS Marketplaceといった既存サービスが存在します。

2. https://fmmail.netlify.app/

3. もともと技術情報は積極的に発信してきましたが、このプロジェクトではシークレットキーなどの公開できない情報以外は100%公開しています。

4. https://zenn.dev/sikkim

5. 筆者はいわゆる「情シス」の中の人なので、社員の「何もしていないのにパソコンが動かなくなったんですけど」に対応するのが主な仕事です。ちなみに、大抵の場合は再起動すると直ります。

6. https://oukayuka.booth.pm/

7. もちろん本の知識だけでは足りないので、インターネットからの情報収集は必須です。また、現在は他の本も読んでいます。

8. https://help.claris.com/ja/pro-help/content/script-steps-reference.html

9. https://www.dacons.net/mailit

10. FileMaker用のメール受信サービスなので、「FM Mail」と名付けました。ただ、次のバージョンからブランド名がFileMakerではなくなるらしいです。

11. せいぜい子どものお小遣い程度の売上にしかならないはずです。運用の手間を考慮すると赤字ですね。

12. FM Mailのビルド時間はIntel Mac(Core i7, メモリ16GB)で44秒、M1 Mac(M1 Max, メモリ32GB)で8秒でした。Mac Studioは速いですね。

第1章 フロントエンドの環境構築

1.1 技術選定をしよう

 本章では、フロントエンド開発の基盤となる開発環境を準備します。この構成はあとから変更するのが難しいため、最初の技術選定がとても重要になります。筆者が悩み抜いて選んだ構成がこちらです。1

 ・React(JavaScriptライブラリ)

 ・TypeScript(開発言語)

 ・Vite(ビルドツール)

 ・ESLint(静的解析ツール)

 ・Prettier(コードフォーマッター)

 ・Tailwind CSS(CSSフレームワーク)

1.1.1 React

 React、Vue、Angularを3大フレームワーク2といいます。シェアはReactが圧倒的に1位で、その差はさらに広がりつつあります。ユーザー数が多いということは情報収集しやすいということです。筆者は以前Vue.jsを使っていましたが、しばらく前から何かを検索しようとするとReactの情報ばかりヒットするようになり、Reactを知らないことに危機感を覚え始めていました。そこでこのプロジェクトではReactを使おうと、心に決めていました。

1.1.2 TypeScript

 Reactの開発言語はJavaScriptとTypeScriptから選べます。特に理由がない限りはTypeScriptにしましょう。JavaScriptでは実際に動かすまでエラーに気付かないことがありますが、TypeScriptなら開発中に気付く場合が多くて助かります。

1.1.3 Vite

 ReactにはCreate React AppというMeta社謹製のビルドツールがありますが、Viteを使った方がはるかに速くビルドできます。プログラマーの3大美徳のひとつは「短気」です。ビルドする時間は短いほどよいのです。シェアも圧倒的に高いので情報は集めやすいです。

1.1.4 ESLintとPrettier

 ESLintとPrettierはきれいなコードを保つためのツールです。ESLintはコーディング規約に違反した箇所を指摘してくれます。コーディング規約を守らないとエラーになってコミットできないので、チームにルールを徹底させることができます。個人で開発する場合でも、コーディング規約に準拠したコードを書けるようになるのは大きなメリットです。Prettierはフォーマッターです。適当に書いたコードでもきれいに整形してくれます。VS Codeと組み合わせると、ファイルの保存時に自動的に整形してくれるのでとても楽です。

1.1.5 Tailwind CSS

 Tailwind CSSはとても人気のあるCSSフレームワークです。筆者はCSSを書くのが苦手なので、なるべくCSSを書かずに済む方法を探し求めていました。Tailwind CSSのおかげで、本書ではCSSをまったく書かずに済みました。

1. 「悩んだわりに普通の構成」とかいわないでください。

2. Reactは正確にはフレームワークではなくライブラリですが、比較の文脈上フレームワークと呼んでいます。

試し読みはここまでです。
この続きは、製品版でお楽しみください。