Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
27
Help us understand the problem. What is going on with this article?
@70ki8suda

Next.js × Nest.js & Prisma2 で個人開発したら最高だった

作ったサービス

BUZZ STOCK .COM
スクリーンショット 2021-05-31 20.08.14.png

株式情報の確認や、コメントの投稿ができるサイトを作りました!
機能はまだこれからも追加予定ですが、ひとまず、フォロー・いいね・タグなどの基本的なSNS機能とチャートや財務情報の確認機能を備えています!(株式データのAPIにはYahoo FinanceのAPIを使用)

スマホも対応しています。

技術構成

フロントエンド Next.js(CSSはビルトインのCSS Modulesを利用 Vercelにデプロイ)
バックエンド Nest.js(ORMにPRISMA2を使用 DBはPostgresql AWSにデプロイ)

Next.jsについて

Routing周りの設定や、ディレクトリー構成、CSS Modulesのサポートなど、Reactでプロジェクトをスタートする最初のしんどいスタートがこれで解決して最高でした。ReactやNext.jsというと基本的にはWebアプリケーションのフロントエンドの構築に使われることが多いと思いますが、Next.jsは静的サイトの出力もサポートしているので、これまでGulpなどのタスクランナーで構築されていたホームページ制作のスターターテンプレートの代替としても十分採用できるものだと思いました。CSS Modulesでコンポーネント毎にスコープを切ってCSSを書くことができるので、これまでBEMなどを使用してクラス名が長くなりすぎて悩んだりしていましたが(俗に言うエレメント地獄)、それらに煩わされることももうありません(しかしBEMの基本的な考え方は依然として有用だと思っています)!
そして、Next.jsで最も強力だと思ったのが、Vercelとの組み合わせで稼働することができるISR(Incremental Static Regeneration)です。
この機能によって、SSRなどで処理すると際限なく大きくなってしまうAPIへのデータのリクエスト回数を減らしつつ、ハイパフォーマンスにページを配信することができたりしました。ISRは革命といってもいいのではないでしょうか。コンテンツの追加のたびにアプリケーションのBuildを丸ごとしなければならなかったこれまでのSSGの問題も解決しているため、これまでCMSの王座を守り続けてきたWordPressなどの牙城を遂に崩すことができるんじゃないかというポテンシャルも感じます。

Nest.js+Prisma2

最初、バックエンドはRailsのAPIモードで開発していたのですが、フロントエンドでJSを書いてからRubyに頭を切り替えるコンテキストスイッチが煩わしく、そしてAPIモードとはいえRailsはAPIサーバーを建てるだけの用途に使うには『しっくりこない感』が強くありました。
そして、TypeScript製のNode.jsフレームワークとして近年話題になってきていたNest.jsを採用したのですが、これが大当たりでした!
最初こそ、見慣れないTypeScriptのデコレーターや、Module,Contoroller,Service と責務を切り分けて機能を実装するデザインパターン?に親しむのに時間を要しましたが、レールに乗ると、最高の生産性と『しっくり感』を得ることができました。
これまで実はTypeScriptを書いたことがなかったのですが、VSCODEとの連携によって、型の整合性を自動でチェックしてくれるのでデバッグの手間が体感で半分以上減り、依存関係のあるモジュールを自動でインポートしてくれたりで、感動の開発体験でした。
ORMとしてはPrisma2を採用したのですが、こちらも大当たりでした。
自分はバックエンドの知見がWordPressとRailsが少しできるくらいしかなかったので、多対多のリレーションなどのDB操作をRailsなしでやることに不安を感じていたのですが、結果からいうと、Prisma2によってリレーションを定義したり欲しいデータを取ってくるのはRailsよりももっと簡単になりました。
こちらについては、公式ドキュメントとそれに付随するexampleが非常に充実していますので、興味のある方はぜひ、チェックなさってください。
フォロー・フォロワーやカテゴリー・タグ などのよくある実装がほとんどexampleに入っています。
ペインポイントになりがちなJWTの認証の実装も、@nestjs/jwt @nestjs/passport passport passport-jwt などのパッケージを利用することでサクっと実装できましたし、今回はREST APIでつくりましたが、将来的にGraphQLでAPIを構築したくなったときなども、Nest.jsはサポートが充実していそうです。そしてAWSにデプロイするときもNestのサーバーはNode.jsさえインストールすれば動きますので、NginxやPumaなどの設定をしなければならないRailsに比べてはるかに簡単だと思いました。
とにかく、RailsからNest.js+Prismaの構成に切り替えることで、言語の切り替えによるストレスがなくなり、そしてRailよりもさらに簡単に無駄なく開発ができるようになったので、『正しいレールに乗っている感』が強くありました。

インフラ構成

インフラ構成につきましては、下記の構成図にて省略させていただきます。
AWSではじめるインフラ構築入門 安全で堅牢な本番環境のつくり方
という本に非常に助けられました。ありがとうございました。

今後の課題

今回、Reactを使って、ある程度の規模のアプリケーションをつくったのは始めてだったのですが、開発を進めるにつれて、コンポーネントファイルが肥大化してしまいました。具体的にいうと、APIとの通信層とRendering層を同一のファイルに記述していたのですが、JSの処理が多くなりすぎて、コンポーネントファイルが400行を越えてしまったりと、リファクタリングを要する状態になっています。これらの責務を切り分けて、なるたけComponentファイルはStateやPropsとJSXに集中できる見通しのよい状態にリファクタリングをしなければならないと思っています。また、機能もまだまだこれからも追加する予定です。現状、サーバー費用・ドメイン管理料などで大赤字ですが、できれば1年以上継続的に運用を続けてユーザーを獲得していければと思っています。
そしてYahoo FinanceのAPIが1秒間に5アクセスのリクエスト制限があるため、サービスが仮にグロースした場合のスケーラビリティの問題を現在抱えています。こちらについては、高額のAPIを契約すれば解決は可能ですが、まだ心配には及ばないかなという感じではあります。。
*追記、APIとの通信層はserivceディレクトリを切ってその中にまとめて入れることで、jsxの見通しはかなり改善されました(この層の分離はNest.jsのアーキテクチャを少し参考にしました。) TypeScript化による堅牢化とリファクタリングも概ね完了しました。改めて、最終的なNext.jsのプロジェクトのディレクトリー構成について後日、記事にさせていただく予定です。

*追記 フロントエンドのTypeScript化とリファクタリングが完了したので、記事にまとめました。Next.js + TypeScript のディレクトリー構成

27
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
27
Help us understand the problem. What is going on with this article?