Firebaseと「高レイヤーな開発」

どうも、エンジニアのgamiです。

最近、「Webflowで作ったWebサイトにログイン機能を付けたい」という相談をもらいました。Webflowの通常機能の範囲では、アカウントの登録やログインを実現する機能の提供はなさそうでした。色々調べたところ、Firebaseを使えば実現できることがわかりました。実際に試してみたところ、僕一人で数時間あれば最低限の実装を完了することができました。

一言に「ソフトウェア開発」と言っても、実際の作業にはレイヤーの違いがあります。たとえば「WebflowとFirebaseでログイン機能付きWebサイトを作る」というのは、かなり高いレイヤーの開発といえます。レイヤーが高いほど、下回りを他のソフトウェアに任せることができます。

近年、いわゆるNoCodeツールや開発者向けSaaSが増え続けています。それによって「高レイヤーな開発」でできる範囲が大きく広がりました。そのことで、エンジニアと非エンジニアの境目も曖昧になっています。

今回は、Firebaseの事例を見ながら、ソフトウェア開発のレイヤーについて紹介します。

ログイン機能という厄介な実装

そんなわけで、僕はFirebaseを使ってWebサイトにログイン機能を実装することになりました。

ログイン機能をもつWebサイトはたくさんあります。一方、それを正面から実装しようとすると、想像以上にやることが多い。

フロントエンド
● アカウント登録画面やログイン画面をつくる
● メールアドレスやパスワードにエラーがあったらエラー表示する
● ログアウトボタンを押したらログイン状態を解消する
● パスワードを忘れた人向けの再登録画面をつくる

サーバーサイド
● アカウント登録のリクエストがあったら、データベースにユーザーを保存し、確認メールを送る
● パスワードは事前に暗号化する
● ログインのリクエストがあったら、入力されたパスワードがデータベース上のものと一致するかチェックする
● パスワード再登録用のメールを送る

最低限やるべきことを挙げてみました。考えるだけで吐きそうですね。

たとえばRuby on Railsという開発フレームワークのチュートリアルでは、2つの章を割いてユーザー登録とログインの実装について説明しています。ざっと眺めるだけでも、めんどくさい感が伝わると思います。

第7章 ユーザー登録 - Railsチュートリアル

第8章 ログイン、ログアウト - Railsチュートリアル

もちろんログイン機能はどのサイトでも似たような実装になるので、それを楽にするためのOSSはこれまでもたくさんありました。しかし、サーバーサイドの実装やデータベースを扱うためのサーバーの構築や運用は自分でやらないといけないので、片手間でやるにはつらいのが実情でした。

Firebaseと開発者向けのSaaS

そこでFirebaseの出番というわけです。

Firebaseは、2014年にGoogleが買収した開発プラットフォームです。もともとはモバイルアプリを高速で開発するためのバックエンドの機能をメインに提供していました。プッシュ通知、ユーザー認証、データベース、Webサイトホスティングなど様々なものを丸っとFirebaseにお任せすることができます。ここ数年はWebアプリケーションでも使える機能が増えており、個人やスタートアップがWebサイトを高速に開発したいときにもよく名前が挙がります。

ログイン機能の実装にはFirebase Authenticationという機能を使います。サーバーサイドの処理を全く書かなくても、驚くほど広い範囲をFirebaseがカバーしてくれます。

● アカウント登録やログインのリクエスト処理
● 入力内容のエラーチェックとエラーメッセージの生成
● データベースとのやりとりやパスワードの暗号化
● 確認メールやパスワード再登録メールの送信
● パスワード再登録画面の表示

FirebaseをWebサイトから利用するためのSDKも提供されています。Webページ側では、FirebaseのSDKを読み込み初期化するためのタグを設置します。

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script>
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

firebase.initializeApp(firebaseConfig);
</script>

あとは、適切な画面上でFirebaseのメソッドを呼び出すだけで、アカウント登録やログインなどを実装できます。

// アカウント登録の場合
firebase.auth().createUserWithEmailAndPassword(email, password)

// ログインの場合
firebase.auth().signInWithEmailAndPassword(email, password)

// パスワード再登録の場合
firebase.auth().sendPasswordResetEmail(email)

実際にはフォームの入力内容を取得したりエラーメッセージを表示したり色々あるのですが、面倒なログイン周りの処理がフロントエンドで実行する数行のJavaScriptを書くだけで実現できるというのは驚きです。特に、Firebaseにサーバーの管理を任せられるところが最高で、これだからフルマネージドなクラウドサービスはやめられません。

Firebaseに限らず、開発者向けのSaaSは様々な領域で増え続けています。VercelはWebアプリケーションのホスティングやデプロイを高速にします。Stripeは支払いや請求周りの機能を丸っと提供してくれます。みんな大好きShopifyは商品の販売管理のための汎用的システムを提供します。

ちなみにAWSやGCPが提供する各種クラウドサービスも、こうした開発者向けSaaSと地続きです。IaaSとSaaSとの間にはグラデーションがあり、「どこまでサービス提供側に任せられるか」によって区別されます。

ソフトウェア開発にはいくつものレイヤーがある

クラウドサービスの登場を待たずとも、もともとソフトウェア開発には様々なレイヤーがありました。

最もレイヤーが低い開発とは、対ハードウェアの開発です。CPUのレジスタやセンサーから送られてくる電気信号を直接操作するようなプログラムを書きます。

汎用的なコンピュータにはLinuxやWindowsやAndroidなどのOSがインストールされています。OSがあると、ハードウェア制御をOSに任せることができます。アプリケーション開発者は、OSの機能を呼び出すだけで文字入力を受け取ったり外部ネットワークと通信したりといった機能を実装できます。

さらに、開発をより楽にするための開発フレームワークが世の中にはたくさんあります。よくある機能はフレームワーク側がすでに実装してくれているので、開発者はもっと楽をすることができます。たとえば前述したRuby on RailsはWebアプリケーションのサーバーサイドの実装を楽にしてくれます。Electronを使うとMacやWindowsのPCで動くデスクトップアプリを高速に開発できます。

レイヤーが上がるというのは、仕事を任せられる範囲が広がるということです。たとえば会社組織を考えてみると、経営レイヤーでは「社員証の発行プロセスはどうなってるんだろう」とか「商談のログはどういう業務フローで蓄積しているんだろう」といったことは普通は考えずに済みます。現場のメンバーにこうした仕事を任せることで、より全体の戦略設計や意思決定に集中できるわけです。

ソフトウェア開発でも同じで、全てを把握し管理しようとするととても煩雑になります。OSや開発フレームワークに細かい部分はお任せすることで、開発者はアプリケーションの機能や価値に集中しやすくなるのです。

ちなみに、サーバーの管理をお任せできるようなサービスのことをクラウドサービスと呼びます。その意味では、オンプレサーバーを使うよりクラウドインフラを使った方が開発のレイヤーが高いと言えます。またクラウドインフラの中でもレイヤーにはグラデーションがあり、低いレイヤーのものはIaaS、高いレイヤーのものはSaaSと呼ばれます。

開発の高レイヤー化と「エンジニア」

コンピュータが登場した当初は、誰もがより低いレイヤーで開発するしかありませんでした。時代を経てソフトウェア開発のノウハウが蓄積されていくと、「ここまでは汎用的なソフトウェアで共通化できそう」と考える人や会社が出てきます。そうしてOSや開発フレームワークや開発者向けのクラウドサービスが増えていきました。Firebaseもまさにこうした流れの末端に位置付けられるサービスです。

アプリケーション開発者としては、「高レイヤーな開発」で済ますという選択肢が増えました。もちろん、仕事を誰かに任せるほど自分でコントロールできない範囲が大きくなり、その仕事の自由度は下がります。それを理由にあえて低レイヤーな開発まで自分でやることもあります。しかし、いわゆる普通のWebサイトやネイティブアプリが欲しいときには、面倒くさい部分をほとんど誰かに任せられるようになりました。Webflow+Firebaseによるサイト構築とかは、まさにその好事例です。

こうした動きが極まってくると、最終的にはコードを1行も書かなくてもできる領域が登場します。これこそまさにNoCodeです。Notionでサイト構築！とか、SaaSを使って業務システム構築！など、エンジニアを介さずにできる範囲もどんどん広がっています。

とはいえ↑のnoteにも書いた通り、全てのプロジェクトが完全にNoCodeで済むわけでもありません。今回僕が実装を任されたログイン処理についても、最初は非エンジニアのプロジェクトメンバーがすべてNoCodeでやろうとして挫折したものでした。

こうなると、SaaSとSaaSの間をつなぐような「高レイヤーな開発」を担うエンジニアの需要はもっと増えるだろうなあと思っています。実際、Corporate EngineerとかCustomer Engineerなどといわれる開発部門以外の業務の現場に近いエンジニアも増えつつあります。かくいう僕も、最近はCustomer Engineerを名乗っています。

また、AWSエンジニアやSalesforceエンジニアなど、開発プラットフォーム名を職種名に冠するエンジニアも出てきています。これも、「Salesforceに関わる開発だけやってても生活できる」というような状況が生んだ新しい職種です。

ということで個人的には、エンジニアと非エンジニアの間で揺れ動く「高レイヤーな開発」を担うエンジニアを増やしたいと思っています。とはいえコミュニティもロールモデルもあんまり無いので、まずは勉強会あたりから企画しようかとコソコソ画策しています。