筆者はサーバーサイドエンジニアです。いつものように社内向けの仕事をしていたら、あるとき「これは世の中に出したら売れるんじゃないか」と思えるAPIができました。そこで自作のAPIを販売する方法を調査してみましたが、既存のサービスはどれもいまいちでした。1「それなら自分で作ってしまおう」そう考えて作ったのがこちらのAPI販売サービス(図1)です。2
正確にはこのサービスは筆者の練習用で、次に作るサービスが本命です。ただ練習用とはいえ、認証や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です。
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
・React(JavaScriptライブラリ)
・TypeScript(開発言語)
・Vite(ビルドツール)
・ESLint(静的解析ツール)
・Prettier(コードフォーマッター)
・Tailwind CSS(CSSフレームワーク)
React、Vue、Angularを3大フレームワーク2といいます。シェアはReactが圧倒的に1位で、その差はさらに広がりつつあります。ユーザー数が多いということは情報収集しやすいということです。筆者は以前Vue.jsを使っていましたが、しばらく前から何かを検索しようとするとReactの情報ばかりヒットするようになり、Reactを知らないことに危機感を覚え始めていました。そこでこのプロジェクトではReactを使おうと、心に決めていました。
Reactの開発言語はJavaScriptとTypeScriptから選べます。特に理由がない限りはTypeScriptにしましょう。JavaScriptでは実際に動かすまでエラーに気付かないことがありますが、TypeScriptなら開発中に気付く場合が多くて助かります。
ReactにはCreate React AppというMeta社謹製のビルドツールがありますが、Viteを使った方がはるかに速くビルドできます。プログラマーの3大美徳のひとつは「短気」です。ビルドする時間は短いほどよいのです。シェアも圧倒的に高いので情報は集めやすいです。
ESLintとPrettierはきれいなコードを保つためのツールです。ESLintはコーディング規約に違反した箇所を指摘してくれます。コーディング規約を守らないとエラーになってコミットできないので、チームにルールを徹底させることができます。個人で開発する場合でも、コーディング規約に準拠したコードを書けるようになるのは大きなメリットです。Prettierはフォーマッターです。適当に書いたコードでもきれいに整形してくれます。VS Codeと組み合わせると、ファイルの保存時に自動的に整形してくれるのでとても楽です。
Tailwind CSSはとても人気のあるCSSフレームワークです。筆者はCSSを書くのが苦手なので、なるべくCSSを書かずに済む方法を探し求めていました。Tailwind CSSのおかげで、本書ではCSSをまったく書かずに済みました。