前回は、Next.jsとホスティングサービスについて話したのですが

今回はサーバーレスサービスのSupabaseと決済サービスのStripeについて選定理由とメリデメについて話したいと思います。

前回までの記事でLGTMがほとんどないので、もうちょっとわかりやすく役に立つような記事を書けるように頑張ります💪

ちなみに、作ったページはこちら ↓

※この記事では具体的な使用方法については書いていません

主に感想と使ってみたサービスの評価になります。

supabaseとは

最近はやりのBaaS（Backend As A Service）で2020年から提供されているサービスです。

firebase代替をっ公式が謳っていて、かなり頻繁にアップデートを重ねています。

読み方はスーパーベースだと思ってます。

UIが非常に使いやすく、AWSを使ったことがあるAWSと比べると比較にならないぐらいスッキリしていてわかりやすいです。
ダッシュボードはこんな感じ↓

選定理由

選定理由は料金が無料
firebase並みの機能なのに、supabaseを使ってサービスを作った事例があまり見当たらなかった

firebaseも料金は無料ですが、無料の範囲がまあまあ狭かったので、どうせならこれからぐいぐい新機能が出てきて面白そうなSupabase使ってみるかといった感じです。

サービス内容

データベース
認証
ストレージ（β）
ファンクション（β）

データベース

データベースはpostgreSQLとほぼ一緒なのでpostgreSQLを使ったことがある人なら簡単に使えます。

SQLの知識があまりない人でもドキュメントがあればダッシュボードからデータベースが簡単に操作できちゃいます。

認証

firebaseのドキュメントとかと比較した感じはほとんど変わらないと思います。

若干使えないSNS認証があるのでそういうのが使いたい方はfirebaseの方がいいかと

ファンクション

ファンクションは自分が開発しているときはベータがリリースされてすぐだったので、少し実装が複雑なような気がしました。

ファンクションに関してはAWS lamdbaの方が楽なのかなと思います。

人気度

徐々に伸びている感じです。Amplifyにはあと少しで追いつきそうです。

firebaseにはまだ全然といった感じですね。

アプデートもどんどんしているのでこれからが楽しみです。

使った感想

とりあえずシンプルで使いやすい！！っていうのが初学者・小規模開発には助かりました。

ドキュメントがまだまだ未発達です。

SDKだけ書いてあって、オプションの説明とか例とかが全然なくて、英語なので、
githubの英語の質問とかissueとかを読んだり、自分で質問したりできる方じゃないと、複雑な機能を実装するのは難しいかもしれないです。

確かにfirebaseやamplifyのように機能が充実しているのもいい点ですが、どうしても、機能が多いとある機能使いたくなっちゃうと思うんですよね。

シンプルで使いやすいUIと設計だとアプリケーションもシンプルになったユーザーにも優しいアプリが作れるのではないでしょうか。

参考

次は決済サービスのstripeについてです

Stripeとは

インターネット上でクレジットカード決済を導入できる決済代行サービスです。

プログラムが書けなくても、ダッシュボードからの設定とコードのコピー＆ペーストで決済ページを使うことができます。

読み方はストリッペじゃなくて

ストライプです（いつもストリッペって言っちゃうなんて言えない）

プログラムなしでも簡単に決済サービスが利用できると書きましたが
今回は決済時に画面が遷移して読み込み時間が増えると嫌だったので
Stripe Elementというサービスを使いました。

Stripe Elementとは

Stripe Elementは自分のサイト上に決済フォームを埋め込みできるサービスです。

さらに埋め込みだけでなく、Apple payやGoogle payなどのサービスもサポートしていて、スマホユーザーの決済を楽に行うことができます。

こうしたモバイル決済が利用可能であることは、申し込みをする際に決済が面倒だからやめるといったユーザーを減らることができるので、契約率を上げることができるといわれています。

比較される決済サービス

よく比較に出されるサービスとして

Store

Square

がありますが、
どちらもどちらかといえば店舗決済に力を入れていて、
インターネット上での決済はおまけといった感じなので、
インターネット上で決済がメインで考えている方はStripeをお勧めします。

逆に、店舗決済も必要な場合はSquareが店舗決済とインターンネット決済をどちらもサポートしている唯一のサービスといえるので、そういう場合はsquareがおすすめです。

stripeの良かったところ微妙なところ

全体的にいいことばっかりだったのですが、それだけだと偏りがあるのでちょっとな～って思ったところも紹介します。

良かったところ

ドキュメントがめっちゃわかりやすい(Stripe.jsは微妙かも)
コピペばかっかりでコーディングが少ない
結構アップデートが頻繁にある
ログが見やすい
コンポーネントデザインがmaterial デザインっぽい

stripeのドキュメントはめちゃめちゃ充実してます。

stripeのドキュメントはほぼ全部のことが、コード例ととともに対応するすべての言語で乗っているのでデベロッパーからしたらめちゃめちゃ助かります。

逆に充実しすぎて、stripeについてのググっても調べても公式以外の記事がないぐらいです。

機能に関しては結構完成されているのにアップデートがあります。

今回採用したElementの機能は比較的最近実装されたのですが、それが使い始めてから3か月ぐらいたった後にアップデートされて新機能が追加されてました。

もうちょっと早くしてほしかった…と言いたいところですが、アップデートがないよりは全然いいと思いました。

apiリクエストに対してリスポンスとリクエストのlogが見やすいです。

エラーが起きた場合やリクエストが成功した場合などでタブが分かれていて、

エラーも結構具体的なのでトライ＆エラーの回数が増えて早く実装できた気がしています。

微妙なところ

デベロッパーだとダッシュボードが若干使いずらい
windows向けのstripe CLIのインストールの説明が雑
サブスクリプションの初回メールがstripeからは送れない

毎回必ず微妙だなと思うのがダッシュボードの醜さです。

最近のアップデートでなぜかAPI keyがトップページに表示されなくなりさらに使いにくくなった気がします。
設定も変更したい設定がどこにあるのかパッと見でわかりずらく、設定を変えるときに毎回時間がかかっていしまいます。
APIのログも検索タブからわざわざ「API」と入力しないとログが見れないのでなんだかな～って思っています。
（いい方法知っていたら教えてください！）

Stripe CLI

loacalでウェブフックのテストをする場合に、eventトリガーを作るためにStripe CLIが必要でした。
これがちょっと曲者でmacやlinuxだとbrewでインストールできるんですが、windowsはインストーラーからログインして
使いたいところにstripe.exeを移動して
powershellから

stripe.exeを配置した任意のディレクトリ内

./stripe login

しないといけないのですが、これが公式に乗ってなくて結構苦戦しました。

もう一つ困ったのが、サブスクリプションの時に初回メールを送るのに上乗せで手数料を払う必要があることです。

結構重要な機能だと思っていて、登録完了メールが送られないと、ちゃんと登録できたかわかりずらいし、信頼度が低いように感じられてしまいます。

上乗せで手数料払えばいいじゃんと思うかもしれませんが、これだけのために上乗せで0.8%も手数料払うのはちょっと気が引けます。

これまでだけでも無料にしてほしいな～と思ってます。

自分でwebhookからメール送信すればいいだけなんですけど（笑）

今度メールで通知を実装しようと思いました。

なんかStripeの悪口みたいになっちゃいましたが、初学者でも実装できたのでインターネット決済してみたいよって方には非常におすすめです。

まとめ

こんな感じで、毎回コードとか実際の動かし方とか全然書いてなくて、読んでる人に役に立つかわからないんですが、
SupabaseとStripeは記事を書いてる人があまりいないので、使ってみようか迷っている方は参考にしてみてください。

次回はデザインとCMSの話ですかね。
書くの結構長くなりますが、頑張って書いていきます！