👋

「私の手順」というサービスを作りました

2022/06/11に公開

3件

手順共有サービス「私の手順」を作りました。

本記事では背景から開発の流れ、技術選定などを記載していきます。

背景

ほとんどの行動には手順があるかと思います。最初にこれをやって、次にあれをやって、最後にこれをやる。
テキストコミュニケーションで以下のような説明をしたことがある方は多いのではないでしょうか。

1.
2.
3.

仕事に限らず、料理はもちろん、サウナのルーティンも1つの手順です。
そんな手順をいい感じに共有できないかと思い、本サービスを作りました。
以下、詳細について説明していきます。

デザイン

Figmaを使ってデザインを作っていきました。
コードをいきなり書き始めてもよいのですが、最終形を決めてから進めていきたいと思い、作りました。

技術選定

言語: TypeScript
フロントエンド: Next.js
バックエンド: Next.jsのAPI Routes
インフラ: Cloud Run
DB: PlanetScale

技術選定のモチベーションとしては以下の2つでした。

Cloud Runを試したい
- メルカリShopsの事例など、耳にすることが多かったので使ってみたいという思いがありました。
Zenn開発者のcatnoseさんが挙げていた構成を試したい

普段はRuby on Railsを使って開発していますが、手慣れたものを利用するというよりは、新しい技術を試したいという気持ちが強かったです。

フロントエンド

Next.jsを使っています。ディレクトリ構成などは下記の記事を参考にしています。

また、モックサーバーとしてMSWを利用することでバックエンドの実装をしなくてもフロントエンドだけで開発を進めることができました。

後述しますが、バックエンドの開発を遅らせたかったので、この進め方は良かったです。

バックエンド

当初はNestJS(TypeScript) or Echo(Go)のどちらかで開発を進めようとしていました。それぞれを選んでいた理由は下記のとおりです。

バックエンドでもTypeScriptを使って開発をしたい → NestJS
GoでAPI作ってみたい → Echo

ただ、どちらも経験がない割にバックエンドの処理としては現状はデータを作るだけなので、覚えることの割に楽しむ前に開発が終わりそうに思いました。そのため、サクッと作れる方法を考えたときにNext.jsのAPI Routesを使えばよいのでは？と思い、採用しました。

このNestJSにするかEchoにするかに頭を使いたかったので、フロントエンドだけで完結できる状況は決断を遅らせるという意味ではありがたかったです(結局Next.jsのAPI Routesになりましたが)

ORMとしてPrisma、DBとしてはPlanetScaleを使っています。DBについては生成されたPlanetScaleの接続先の文字列をPrismaの接続先にすることで、Prismaを使ってデータ操作をすることができます。現時点での要件ではCRUD操作のみなので複雑さはあまりないですが、ここからロジックが増えていく可能性があるので、上手く作っていきたいです。

インフラ

Cloud Runを利用しましたが、サクッと環境作ることができました。
Dockerfileとcloudbuild.yamlを用意して画面上で設定するだけで完了しました。

こだわりポイント

ログイン不要

多くのサービスではログインが求められますが、今回のサービスではログインせずに使えることを前提としました。というのも、入力 → 公開 → 誰かに共有する体験を考えたときに、最初に会員登録が求められるのは少しハードルがあると思ったためです。コメントやデータの管理をしたいのであれば必要ではありますが、その辺りは他のサービスに任せます(Twitterやブックマークサービスを使ってください)

イメージとしては日程調整サービスの調整さんが近いです。