こんにちは吉田智哉です。
6/1に開催される技術書典18で、ChatGPTクローンのチュートリアル本を2冊出します。
- 技術書典18
- Ruby on Railsで作るChatGPTクローンチュートリアル
- Next.jsで作るChatGPTクローンチュートリアル
- サークル場所
- 執筆した理由
- どちらがよいという話ではない
- Stats
- まとめ
技術書典18
Ruby on Railsで作るChatGPTクローンチュートリアル
Next.jsで作るChatGPTクローンチュートリアル
サークル場所
技術書典18では（か19）にいますので、東京近郊にお住いの方はぜひお立ち寄りください。
遠方の方はオンラインでも購入できますので、ぜひご購入ください！
執筆した理由
まだまだ人間の力が必要
最近はAIの技術の進歩がすごいですね。 自然言語だけである程度のアプリケーションが作れるようになってきています。 Vibe CodingというAIを使って雰囲気でコーディングするという言葉も出てきています。 一方で複雑な機能や、こだわったUIを実装するには、やはり人間の力が必要です。
その際には(自分で書いたコードでも、AIが書いたコードでも)コードを書き、読む力が必要になってきます。 そこでChatGPTのクローンを題材に、本格的なWebアプリケーションの開発を学ぶことができるチュートリアル本を作成しました。
「ChatGPTのクローンを作ってみよう」だったり、「AIでチャットアプリを作ってみよう」というブログ記事は 探せばいくらでも出てきますが本書くらい本格的なものは、なかなかありません。
Next.jsとRuby on Railsの比較
本書では、Next.jsとRuby on Railsの2つのフレームワークを使ってChatGPTクローンを作成します。 (2冊に分かれていますが)
同じアプリケーションをNext.jsとRuby on Railsを使って開発することで、 両者の違いを比較しながら学ぶことができます。
最近はReactやVue.jsなどのフロントエンドフレームワークが主流になってきていますし、 特にNext.jsは最も人気のあるフレームワークの一つです。
Railsは根強い人気があるものの、ファーストチョイスではなくなってきているのも事実ですが、 Railsは依然として強力なフルスタックフレームワークであり、 特にフロントエンドからバックエンドまで一気通貫して開発できることはRailsの大きな強みです。
フロントエンド開発はHotwireやTurboなどの技術が登場し、ReactやVueに負けないくらいのUIを実装できるようになってきていると 言われていますが、本当にそうなのかを確かめるために、 同じアプリケーションをNext.jsとRailsで作成してみることにしました。
どちらがよいという話ではない
同じアプリケーションをNext.jsとRailsで作成することで、 どちらの良さも感じることができました。
注意点として私はRailsの方が好きで得意なので、非常にバイアスがかかってしまうことを前提としておきます。
Next.jsはReactでサクサクフロントエンド開発を進めることができます。 Hot reloadもしてくれるので、コンポーネントの修正をブラウザで即座に確認できるので、 非常に開発体験が良いです。 データベースのやりとりや外部APIとの通信などもAPI RoutesやServer Actionsを使うことで、 Next.jsだけで行うこともできます。 一方でバックエンド開発はRailsのように強力な規約があるわけではないので、 開発者が設計する必要があります。 規模が大きくなってきた場合、Next.jsだけで完結させるのは難しいかもしれません。
Railsの場合は、ActiveRecord一択ですが、Next.jsの場合データベースのライブラリなどの選定をする必要があります。 書籍だとPrismaを使っていますが、他のORMやデータベースライブラリを使うこともできます。 実際の開発に使う場合には、このあたりの選定コストが発生することを念頭に置いておく必要があります。 加えて私があまりReactに慣れていないこともあり、コンポーネント設計に苦労しました。
一方でRailsはフロントエンドからバックエンドまで一気通貫で開発できることが大きな強みです。 Railsの規約にしたがって開発を進めることで、ファイル構成やディレクトリ構成は迷うことなく開発を進めることができます。 しかしReactに負けないようなUIを実現するには、HotwireやTurbo、特にStimulusを駆使する必要があります。 StimulusはシンプルなJavaScriptライブラリなので学習コストは高くないですが、 いかんせん情報量が少ないので自分で調べて、考えて実装する必要があります。
どちらがよいという話ではなく、ぜひ本書を読んでいただき、 自分に合ったフレームワークを選んでいただく際の参考にしていただければと思います。
Stats
参考まで以下に、Next.jsとRailsのコード量やコミット数などの統計情報を示します。
リポジトリ内の全トラックされたファイルの行数および総行数
まずリポジトリで Git 管理下にある全ファイルを列挙し（git ls-files）、 それぞれの行数を wc -l で数えます。
出力としては各ファイルの行数と最後に合計行数が表示されるため、 「リポジトリ内の全トラックされたファイルの行数および総行数」を把握できます。 Next.jsがRailsの約2.75倍のコード量があることがわかります。 ただし後述のとおり公平な比較ではないです。
Next.js
$ git ls-files | xargs wc -l 13409 total
Rails
$ git ls-files | xargs wc -l 4869 total
ファイル数も見てみる
Git リポジトリの最初のコミット以前（空の状態）から現在までに追加されたすべてのファイルの変更量（統計）**を表示してみます。 Railsはrails newのジェネレータで生成されるファイルが多いため、 files changedの数はNext.jsの約3倍となっています。
Next.js
$ git diff --stat `git hash-object -t tree /dev/null` 64 files changed, 13384 insertions(+)
Rails
$ git diff --stat `git hash-object -t tree /dev/null` 192 files changed, 4850 insertions(+)
最初のコミット以降の変更量
次に、リポジトリの最初のコミット以降の変更量を確認します。 Next.jsであれば、package.jsonや package-lock.json、pnpm-lock.yaml、prisma/migrationsなど ライブラリのインストールやジェネレータで生成されたファイルの変更は除外します。 RailsはGemのインストールで自動更新されるGemfile.lock、 db:migrateで生成されるdb/schema.rb、 アセットの画像やスタイルシート、テストディレクトリなどを除外します。 この比較がここまでの中では最も公平な比較となります。 files changedはRailsが約1.4倍、insertionsはNext.jsが約1.7倍、deletionsはNext.jsが約10倍となっています。 Railsが以外にfiles changedが多いのは、MVCでファイルを分割するからでしょうか。
Next.js
$ git diff --stat $(git rev-list --max-parents=0 HEAD)..HEAD -- . \ ':(exclude)package.json' \ ':(exclude)package-lock.json' \ ':(exclude)pnpm-lock.yaml' \ ':(exclude)prisma/migrations' 49 files changed, 2044 insertions(+), 132 deletions(-)
Rails
$ git diff --stat $(git rev-list --max-parents=0 HEAD)..HEAD -- . \ ':(exclude)vendor' \ ':(exclude)db/schema.rb' \ ':(exclude)Gemfile.lock' \ ':(exclude)app/assets/images' \ ':(exclude)test' \ ':(exclude)app/assets/stylesheets/toastr.css' 67 files changed, 1213 insertions(+), 13 deletions(-)
まとめ
同じアプリケーションをNext.jsとRailsで開発してみて、 どちらのフレームワークにもそれぞれの良さがあることを実感しました。 RailsでもReactに負けないUIが実現できることもわかりましたし、 Next.jsもどんどん進化してきていますね！
ぜひ2冊とも手に取っていただき、 自分に合ったフレームワークを選ぶ参考にしていただければと思います！
