ご覧いただきありがとうございます。ぶるおと申します。

今回は、個人開発ほぼ初心者だった自分が「Next.js + TypeScript + Tailwind CSS」を使って、どのように「BokTan新書」をゼロから作りリリースしたのか、苦労したポイントや得られた学びをまとめます。

ざっと概要説明

サービスの簡単な紹介: 新書に特化したキーワード検索サイト
使用技術: Next.js (TypeScript), Tailwind CSS, Rakuten Books API,ChatGPT
期間: 恐らく2ヶ月、週5~10時間ほど
この記事で得られるもの: 個人開発のリアル、初心者が躓いた箇所と対策

「個人開発に興味ある」「Next.jsちょっと触ってみたい」「初心者だけどサービス作ってみたい」という方の参考になれば幸いです！

背景・モチベーション

なぜ「新書検索サービス」を作ろうと思ったのか

私自身も読書や本が好きなんですが、好奇心旺盛なので様々な情報に触れたり勉強をしたくなります。そういった中で、専門的な内容を低価格で得ることができる「新書」というジャンルは大変重宝しているとうう前提がまずありました。

現代ではネット上には本を探して購入する手段があって、Amazonや楽天などを使えば簡単に購入ができますし、最近は関連機能も充実していて本に限らずすぐ沼れますよね。そうしたサービスを使いながら本を探していく中で「新書だけをキーワードで検索できないかな？」と思ったちょっとした思いが開発の原動力になりました。

つまり、新書で専門的な内容を手軽に知りたい→新書だけで検索したいけど他の情報にとらわれず新書だけを表示させてくれる書籍検索がないかな？→これ自分で作ってみよう！

そんな流れです。

「楽天とかAmazonで『ITの歴史新書』みたいな感じで検索すればいいんじゃない？」というお声もあるかと思いますが、あくまでも「新書だけ」をノイズなく表示したかったというのが強い思いとしてありました。

開発前のスキルレベル

私はこれまでエンジニアとしてのキャリアもなく、完全独学でサービス公開まで至りました。

最初はコロナの期間に何かできることないかな？とはじめたプログラミング学習からのスタートです。定番のプロゲートでプログラミングの感覚を掴み、htmlとcssがどんなものかわかった！程度でした。

そんな時にエンジニアの友人からReactとかVueというものがあるんだ、という話を聞き、まずはVueで簡単なサイトを作ることからスタート。初心者中の初心者である私からすればVueの方がまだ使っていて分かりやすいという感覚でした。

数ヶ月後「Reactの方が使ってる人が多い印象」という助言もいただいて、頑張ってReactを触り始めます。

その頃に、これまで運用していたWordPressでの個人的なブログを、Next.js+microCMSを利用しての運用へ移植することを実行しました。これが初めて自分でゼロからサイトを作ったという経験でした。

サービス概要（BokTan新書とは？）

【サービス名】BokTan新書（ブクタン新書）
【サイトURL】https://boktan.info

使用技術

Next.js / TypeScript / Tailwind CSS / Rakuten Books API

また、開発においては多くの場面でChatGPTを活用しています。わからないコードや概念について質問をしたり、コードをまるっと生成してもらう場面もありました。非常に助けられましたし、開発を爆速で進められたように思います。

マネタイズ方法

検索に重要なAPIとして使用させてもらってるRakutenの書籍検索APIの規約的な部分もあり、Rakutenアフィリエイトのみでのマネタイズとなっています。

開発について

開発期間やスケジュール管理

開発期間は2ヶ月ほど。少ない時は週に2~5時間、多い時でも週に10時間程度の作業で仕上げたぐらいだと記憶してます。

引っかかったポイント等

Server ComponentでReactのフックを使用しちゃう

開発最初の頃は

「Error: × You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.」

といったエラーに直面しました。良かれと思って設定したフックが、エラーを起こす。この数ヶ月でかなりノウハウも溜まったのでわかることですが、client componentでないとReactのフックが使用できないということがその当時はきちんと理解できていませんでしたので、戸惑いました。

2. 'use client'をどう使用するべきか

1番の話にも関連しますが、そもそもNext.jsとReactの違いであったり、client component、server component、SSRやSSGなどの各種レンダリング方法などの差異についてもふわっとしていたため、'use client'然り1番の問題然り、ぶつかる結果となりました。

Nextの強みでもあるserver componentをどう活かしながら、client componentでしか実装できないことを盛り込んでいくか。その部分に大変学びがあったと思います。

特に、トップページから'use client'を使用してしまうと、その後の各コンポーネントもclient componentになってしまう。いかに機能を切り分けていくか。この点はまだ知識の浅い私にとって気づきが多かったです。

今後の予定

今後は会員機能の実装が目標です。検索履歴や読書量を管理できるものなど、ユーザーそれぞれ個別で利用できる機能を実装していきたいと思っています。

また、このBokTan新書以外にもサービスを開発していけたらとも思っています。

まとめ

最後までお読みいただきまして、ありがとうございました。
初めてWebサービスを開発してみた様子を簡単にご紹介させていただきました。

今はGPTなどのAIが非常に便利で、技術の勉強においても大変役立っています。本サービスにおいても多くの場面で助かられました。ですが、AIだけに頼った開発にならないようには注意したいところ。AIが示すコードをきちんと理解しながら使用できることを大前提として、今後も引き続き開発を続けていきたいと思います。

そして興味がある方はぜひ、開発した「BokTan新書」という新書検索サービスを使ってみてください！

BokTan新書

もし使ってみた感想やフィードバックがあれば、コメントか私のXへDMをお願いします！！

他にも並行してこんなサイトもやっています。

夜更けに耽る

夜更け×読書＝自己成長。寝る前のひとときに、本と語らう喜びをシェアするブックメディア。深夜の静寂とともに、本を通じて自己成長やアイデアを深めるためのコンテンツを発信中。忙しい日中には得られない、夜だけの学びを提案します。