Next.jsとFirebaseを使って質問箱のようなサービスを作ってデプロイするまでを解説します。

<p>この本は Next.js と Firebase を使い、質問箱のようなサービスを作る方法を解説します。実際に何もないゼロの状態から作り始め、デプロイしてサービスとしてアクセスできるようにした手順をすべて書いています。</p>
<p>また、その関係上特定の技術をしっかり学ぶための本ではありません。一度ものを完成させるための手順を学ぶことで、作るためには何が必要かを知り、気になった部分を更に別の本などで学び、様々な技術への学びを深めていくための入り口となります。</p>
<p>実際に作ったサービスは下記になります。</p>
<p><a href="https://nextjs-firebase-app.vercel.app/" rel="nofollow">https://nextjs-firebase-app.vercel.app/</a></p>
<h2 id="%E6%8A%80%E8%A1%93%E6%A6%82%E8%A6%81">技術概要</h2>
<p>この本では主に下記の技術を利用して開発していきます。</p>
<ul>
<li>Next.js 10.0.4</li>
<li>React (React Hooks)</li>
<li>Recoil 0.1.2</li>
<li>Firebase (Admin, Authentication, Firestore)</li>
<li>TypeScript</li>
<li>Bootstrap5</li>
<li>Vercel</li>
</ul>
<h2 id="%E9%96%8B%E7%99%BA%E5%86%85%E5%AE%B9%E6%A6%82%E8%A6%81">開発内容概要</h2>
<p>この本では下記の開発を実際に行います。</p>
<ul>
<li>匿名認証を用いた簡単なユーザー認証</li>
<li>質問の投稿</li>
<li>質問への回答</li>
<li>デザインや動線の設定</li>
<li>OGP の作成</li>
</ul>
<h2 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">事前準備</h2>
<p>開発する PC にて、下記が利用できる前提で進めていきます。事前にインストールなどを行ってください。</p>
<ul>
<li>git</li>
<li>Node.js</li>
<li>GitHub へのユーザー登録</li>
<li>Firebase を利用するための Google アカウントの準備</li>
<li>Vercel へのユーザー登録</li>
</ul>
<h2 id="%E3%82%84%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">やっていないこと</h2>
<p>GitHub などでのソースコードの公開はやっておりません。理由はそれを動かしただけで完成した気分になってしまい、学習の差支えになる可能性があるからです。ただし実際のコードは全て書きながら説明していますので、読みすすめることで作れるようになります。</p>
<h2 id="%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E3%81%8A%E9%A1%98%E3%81%84">フィードバックのお願い</h2>
<p>物理本でなく Web 上の本として書きましたので、随時修正が可能です。そのためせっかくですのでわかりにくいところや改善したほうが良いところなどがあればぜひフィードバックをお願いします。読者の方のお声を元により良い本にしていきたいと思います。</p>


この本の内容について

<p>まずは最低限の下準備をして動くところまで進めていきます。</p>
<h2 id="next.js-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90">Next.js プロジェクトを作成</h2>
<p>まずは、コマンドを利用してプロジェクトを初期化します。今回は Yarn を利用するため、下記のコマンドを実行します。最後の <code>nextjs-firebase-app</code> は自由に決めることができます。</p>

      <div class="code-block-container">
        
        <pre class="language-shell"><code class="language-shell"><span class="token function">yarn</span> create next-app nextjs-firebase-app
</code></pre>

      </div>
      <p>色々と表示されますが、最後に下記のようなメッセージが表示されれば完了です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/jydj3m1vs1rmkqxuq2k4y6gz3tyt" alt="" loading="lazy"></p>
<p>これらのメッセージは実際に開発で利用するコマンドの解説です。慣れてくれば初期化時にこのメッセージを見てコマンドを思い出しつつ、すぐに開発を進められます。</p>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%B8%E7%A7%BB%E5%8B%95">プロジェクトのフォルダへ移動</h2>
<p>プロジェクトは先程指定した、例でいうと nextjs-firebase-app フォルダに作成されていますので、まずはそこへ移動します。先程一番下に表示されていたメッセージ通りのコマンドです。</p>

      <div class="code-block-container">
        
        <pre class="language-shell"><code class="language-shell"><span class="token builtin class-name">cd</span> nextjs-firebase-app
</code></pre>

      </div>
      <h2 id="%E8%A9%A6%E3%81%97%E3%81%AB%E5%AE%9F%E8%A1%8C">試しに実行</h2>
<p>まずは何もいじっていないこのプロジェクトが正常に動くかどうか確認しておきましょう。下記のコマンドで実行できます。</p>

      <div class="code-block-container">
        
        <pre class="language-shell"><code class="language-shell"><span class="token function">yarn</span> dev
</code></pre>

      </div>
      <p>下記のように表示されれば正常です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0jeomvw56ie38cabl734qq19azjr" alt="" loading="lazy"></p>
<p>メッセージに表示された URL である <code>http://localhost:3000</code> にアクセスするとページが表示されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/si8wltioyshjnv3v4sarq58tqbpu" alt="" loading="lazy"></p>
<p>これで最初の準備は整いました。うまく動かない場合は環境設定がうまくいっていない可能性がありますので、エラーメッセージなどを確認してみてください。</p>


プロジェクトを作成する

TypeScriptを導入する

GitHubにpushする

Firebaseを設定

ユーザー認証

Recoilでユーザー情報を保持する

Firestoreの設定

ユーザー詳細画面を作成する

Bootstrapでデザインを整える

質問できるようにする

受け取った質問一覧ページを作る

質問に回答する

セキュリティ保護ルールを設定する

一度Vercelにデプロイする

回答詳細画面を作る

OGP用画像を作成する

画面遷移を整える

独自ドメインを設定する

<p>一通りリリースまで完了しました。ただ、サービス開発は作ってそれで終わりではありません。引き続き改善や問題点の修正などを行っていきましょう。</p>
<h2 id="%E3%83%9E%E3%83%8D%E3%82%BF%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B">マネタイズする</h2>
<p>マネタイズはサービス運営のモチベーションのために大きな役割を持ちます。AdSense などをいれてマネタイズをしてみましょう。</p>
<p>また、売れる機能を考えられた場合は実際に売ってみましょう。とにかく何事も躊躇せず、ためしにやってみることが重要です。むしろマネタイズ方法を考えてサービスを作り始めるのも重要だったりします。</p>
<h2 id="%E4%B8%8D%E5%85%B7%E5%90%88%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%99%E3%82%8B">不具合を修正する</h2>
<p>今回解説したサービスにはまだ不具合が残っている可能性があります。見つけ次第修正してみましょう。</p>
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E5%87%A6%E7%90%86%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B">エラー処理を入れる</h2>
<p>今回はコードをわかりやすくするため、エラー処理を全く入れていません。実際には例えば下記のような形でエラー処理を行いましょう。</p>

      <div class="code-block-container">
        
        <pre class="language-typescript"><code class="language-typescript"><span class="token keyword">const</span> doc <span class="token operator">=</span> <span class="token keyword">await</span> firebase
  <span class="token punctuation">.</span><span class="token function">firestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'users'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">doc</span><span class="token punctuation">(</span>query<span class="token punctuation">.</span>uid<span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>doc <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'エラーが発生しました。'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span>
<span class="token punctuation">}</span>
</code></pre>

      </div>
      <h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B">デザインを改善する</h2>
<p>今回は Bootstrap を利用して最低限のデザインを行いました。ただ、絵が用意できるようであれば適材適所で入れてみて、もっとわかりやすく、親しみやすいデザインにすると居心地の良い場所になります。得意な場合は試してみましょう。ただし好きなことを全面に出しすぎてうるさくしすぎると逆効果な場合もあります。あくまでもユーザーが利用しやすい場所になるような改善をしていきましょう。</p>
<p>あとは例えば今回 isReplied というフラグを定義していますが、ほとんど利用していません。これを利用して受け取った質問一覧に返答済みかどうかを表示したり、where を利用して未返答のものだけを絞り込んだりという機能をつけていくと便利になるでしょう。</p>
<h2 id="%E3%82%A8%E3%82%B4%E3%82%B5%E3%83%BC%E3%83%81%E3%81%99%E3%82%8B">エゴサーチする</h2>
<p>Twitter でのシェア機能をいれていますので、リリース後は Twitter で自分のサービスを実際に利用してシェアしてくれている人を探してみると良いでしょう。使われているととても楽しく、時間を忘れてしまいます。</p>
<p>また、ユーザーの属性を見ることでもっと必要な機能があることに気づくこともできる場合があります。</p>
<h2 id="%E7%B6%99%E7%B6%9A%E3%81%99%E3%82%8B">継続する</h2>
<p>とにかく、継続は重要です。どんな素晴らしいサービスでも終了してしまえば何もなくなります。なかなかうまく行かなくても、継続することに価値があります。継続することでサービスが急展開をむかえることもあります。</p>
<p>他にもたくさんできることはあります。自分のアイデアで色々と試してみてください。</p>
<h2 id="%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E3%81%8A%E9%A1%98%E3%81%84">フィードバックのお願い</h2>
<p>物理本でなく Web 上の本として書きましたので、随時修正が可能です。そのためせっかくですのでわかりにくいところや改善したほうが良いところなどがあればぜひフィードバックをお願いします。読者の方のお声を元により良い本にしていきたいと思います。</p>
<p>また、もし役に立ったらシェアなどしていただけるとありがたいです。</p>
