Mokkanの技術スタック、あるいは紆余曲折のモノローグ

プロローグ

「ゑんぢにあもすなる技術すたっく記事といふものを、われもしてみんとてするなり。」

　文書投稿サービスMokkanの開発をしている、株式会社Zassö. CTOのおかざわです。どうぞよろしく。

　エンジニアの人は何かを作ったらその解説をnoteなり、zennなりに投稿する文化があるらしいので、私も先人たちの例に則って書いてみようと思う。ただ書くだけでは面白くないので、開発譚として。

「僕らを走らせるならきっとなんだっていい」

　僕らの出会いや開発までの経緯に関しては詳述しない。いずれ社長が会社設立の経緯やサービスに関するお気持ち表明をするだろうから、そこに席を譲ろうと思う。そんな必要に迫られる程度には大きな存在になりたいものだ。とにかく僕らは何かをしようとして、何かをしてきた。そして会社を作った。

　開発を主に担っている人間から見たら、Mokkanは開発中のサービスも含めて僕たちの3つ目のサービスであり、ビジネスとしてちゃんとやり始めた初めてのサービスだ。正直な話、儲かりそうなサービスだとは思っていなかった。僕はTwitterもまともに運用していないくらい文書を産出するという行為が苦手なこともあり、人が「課金をしたいほどコメントしたい」「どうしても何かを伝えたい」という欲求に駆られることがあまり想像できなかった。

　それでも開発に同意したのは、いろいろな打算と、自分との落とし所によるものが大きい。前者に関しては、開発経験値として、またポートフォリオの拡充として。プロダクトとして長期的にロングスパンで伸びていけばいいという方針も気負わずに作れる後押しになった。後者については自分のためと言っていいだろう。

　少し話は逸れるが、いつか社長とプロダクトに対する心持ちについて話した時のことを書きたい。その時僕は概ねこんなことを言っていたと思う。

「現在が集積した結実であるところのプロダクトを、私の分身ではなく、一緒に言祝ぐ（ことほぐ）ための道具として受け入れることができれば、人間は、少なくとも私は幸せになれると思うし、それが健全だと思う。」

　Mokkanを作るという社長がやりたかったことは、僕にとって夢や野望や希望といった暖色のものとは質的に違う。ただ今を走らせる動機を作ってくれる機能として、目的を設定してくれる存在として社長がいた。僕を走らせるための口実になるのならば、それで十分だった。

　そういうわけで、僕はMokkanの開発に取りかかった。プロダクトとしての成功など眼中に入れず、その過程そのものに身を投じること、そして自分とプロダクトを後腐れなく切り離すこと、それが僕の動機だった。

「僕らを走らせるならきっとなんだっていい　恩義でも逃避でも、世間体でも逆恨みでも」

Next task: switch to the Next.js

　さて、閑話休題。与太話はほどほどにして、技術的な話をしよう。

　フレームワークには当初、Nuxt.jsを選んだ。その理由はいくつかあり、まず、Vue.jsを使ったことがあったからだ。さらに、SSR（サーバーサイドレンダリング）ができる点も魅力的だった。SSRを使えば表示速度が速くなるし、SEO対策にもなる。AmplifyでSSRとしてデプロイできるという点も決め手の一つだった。

　しかし、ここで問題が発生した。非ログイン状態でのGraphQLのクエリが効かないのだ。探索をすればいずれは解決する類の問題であることは直感していたが、ドキュメントや技術ブログなどの少なく長期戦になりそうな予感がした。そのためこの時点で、Nuxt.jsに固執するのは得策ではないと判断し、Next.jsに切り替えることを決断した。まだプロジェクトの骨格だけで、引き返しても傷が浅い。そう判断したのだ。

　Next.jsに移行してからは、紆余曲折がありつつも問題は概ね順調に解決した。まず、Amplifyの認証問題が解消され、非ログイン状態でのGraphQLクエリが正常に動作するようになった。また、結果的にNext.jsの技術ブログやコミュニティの豊富な情報源の恩恵を受けることができたことも怪我の功名だった。

　バックエンドにはAWS Amplifyを使っている。Amplifyは、認証、API、データストアなど多くのバックエンドの処理を押し付けられるツールだ。超便利。私自身開発経験が浅いので、AWSの細かな設定を考えずに済むのは、正直かなりたすかった。（時々ドキュメントに（多分）明記されていない仕様があったりするけど...）

　あとの特記すべきものとしては、決済にStripe、エディタにTiptapを使っている、ということぐらいだろうか。Stripeに関してはこの手のサービスの決済といえば、真っ先に思い浮かぶくらい有名だし、開発当初から使うことが決まっていたと思う。

　エディタに関しては、いろいろと比較検討したが、最終的にTiptapを選んだ。選定の決め手となったのは、拡張性と数式記述の可否、そしてドキュメントの多さだった。誰かのツイートで「数式が書けないと辛い」というのをどこかのタイミングで読んだこともあり、結構そこに引っ張られた気がしないでもない。

LLMおじさん「LLMはいいぞ」

　LLMはいいぞ。

　LLMはいいぞ。

　Mokkanの開発において、本当にLLMは役に立ってくれた。これがなかったらNextへの切り替えも、その後3-4ヶ月でのローンチもできなかっただろう（しかも学業と並行で!!!）。

　だからLLMはいいぞ。

　開発初期にはChatGPT Plusを、後期にはClaude3 Opusを使っていた。どちらも基本的には良いものではあるが、ChatGPTはNextの情報が古くて、これにはかなりイラつかされた。まじでwtf!!!! この問題には、Nextに切り替えてすぐにぶち当たった。今は使えない関数を提案してきたり、useEffectをServer Compで使わせようとしたり、本当にアホなんちゃうかって思わされることが何度もあった。GPT-4においてさえ、そうなのである。

　そうこうしているうちにClaude3 Opusが出てきて、「GPT-4より性能がいい」みたいな噂をちらほら聞くようになった。試しに課金してみたら、これが素晴らしい代物なのである。Xでも同じように評価している人がちらほら見かけられるが、GPT-4で詰まるところをあっさりクリアしてくれる。UIがクソなのが唯一にして最大の欠点ではあるが、金のない学生にとっては、GPTに振り向けていた20ドルをこっちに回そうと思えるくらいには良い物だった。

　そんなわけで、昨今のLLMの恩恵をフルに受けて、このサービスは従来の一般的な開発期間や開発者の経験年数などに見合わないくらい、超高速で実装まで実現できた。

　だからLLMはいいぞ。

（余談だが、GPT-4oにもまた課金し始めてしまったので、現在アメリカに毎月40ドルを個人のお財布からお布施している。今後どっちを切るべきか...）

技術スタックまとめ

　さて、ここまでの話をまとめると、Mokkanの技術スタック構成は以下の様になる。

• フロントエンド：Next.js 14

  • app router

• バックエンド：AWS Amplify

  • Authentication

  • GraphQL API

  • REST API

  • Functions

  • Storage

  • Amplify Hosting

• エディタ：Tiptap

• 決済：Stripe

  • Billing

  • Connect

今後の実装

　上記でもちょっと触れたが、実は現状でもKaTeX形式で数式も書ける。ただ記事ページでまだ表示できるようにしてないので、今後はこれを対応する予定だ。また、記事が増えてきたら注目記事も解禁したい。（24年5月末現在）

エピローグ

　やっぱ文書を書くの苦手だわ。

（文責：おかざわ）