<h1 id="h2728e97741">第一回</h1><p>※何かあれば一番下のコメント欄からコメントしてほしい。バグ、説明不足、知見不足なんでも大丈夫！！<br>今日Firebase functionsってなんだ？ってなった。ということで、Firebaseを学んでいきたい。<br>せっかくなので前回作ったJestの学習用を利用したい。<br>前回の記事のリンクかこちらの<a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">リンク</a>をクリックしてもらえれば使用することができる。<br>前回の記事を参照してもらえたらわかるがJestを追加しただけなのでそれ以外は一切いじっていない状態である。</p><h2 id="hb00339748d">完成リポジトリ</h2><p>この<a href="https://github.com/sasaki-sota/try-nextjs-firebase" target="_blank" rel="noopener noreferrer">リンク</a>から確認できる</p><h2 id="h0ef859a5d4">環境構築</h2><pre><code>$ cd ~/Desktop/ &amp;&amp; mkdir learning &amp;&amp; cd learning &amp;&amp; git clone https://github.com/sasaki-sota/try-nextjs-jest.git &amp;&amp; mv try-nextjs-jest/ try-nextjs-firebase &amp;&amp; cd try-nextjs-firebase &amp;&amp; npm i &amp;&amp; npm run dev</code></pre><p>もちろん個別に分けてコマンド実行しても大丈夫！<br>ただ、Nodeの実行環境がインストールされていることとMac PCが対象ということはご容赦いただきたい。<br>この長ったらしいコマンドは学習用のフォルダを作って前回の自分のGItのリポジトリをクローンしてFirebase用に命名変更してパッケージをインストールして開発サーバーを立ち上げている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-07%2011.42.46.webp" alt=""><br>この<a href="http://localhost:3000/" target="_blank" rel="noopener noreferrer">リンク</a>で昨日と同じこの画面が立ち上がるはず。</p><h2 id="hdae96c1772">Firebaseの導入</h2><h3 id="hbe10bea12e">プロジェクトの作成</h3><p><a href="https://console.firebase.google.com/u/0/" target="_blank" rel="noopener noreferrer">Firebaseの公式ページ</a><br>このリンクからFirebaseのプロジェクトを作成していく</p><h4 id="h64217aad77">プロジェクト名の作成</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f82390d3d3be41f8b386acf2c76783eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.31.19.webp" alt=""><br>ここのプロジェクト名はなんでも大丈夫だけど、リポジトリ名と被らせたほうがわかりやすいと思う！</p><h4 id="h968a201e7e">アナリティクスの設定</h4><p>長期的に利用していくなら有効にして、今回のハンズオンのような場合だったら無効が最適だと個人的には考えている。<br>ちなみに自分は無効にする。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/dd588bfac6084d0892bf0c840fadf6ce/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.34.55.webp" alt=""><br>作成されるとこんな感じで表示される。</p><h3 id="hbd67f5c1b9">Next.jsでFirebaseを利用できるように準備する</h3><p>今回はフロントエンドで利用するのでWeb版を選択する。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/46de10bd877045d3a92446d26f8bc35c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.37.42.webp" alt=""></p><h4 id="h147e6b163c">アプリ名の登録</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/337fa469fafe483687b44501d18fa110/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.40.06.webp" alt=""><br>ここのニックネームの部分に関してもどういう名前でもいいが自分は今回はリポジトリ名と同じにする。<br>またHostingの設定に関しては、デプロイする予定があるなら有効にすればいいと思う。<br>基本的にチェック作るところは後からでも設定することが出来る部分が多いのであまり気にしなくて平気だと個人的には思う。</p><h4 id="h1fb875b41d">SDKの追加</h4><p>先ほどの名前を登録できたらSDKが発行されるのでありがたく利用させていただく。<br>ターミナルの方で</p><pre><code>$ npm install firebase　&amp;&amp; touch firebase.ts</code></pre><p>Firebaseのパッケージをイントールするが少し時間がかかると思う。</p><h4 id="h984572b3a0">.env.local</h4><pre><code>NEXT_PUBLIC_FIREBASE_API_KEY="Describe apikey here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Describe authDomain here"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Describe projectId here"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Describe storageBucket here"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Describe messagingSenderId here"
NEXT_PUBLIC_FIREBASE_APP_ID="Describe appId here"</code></pre><p>envファイルはGitignoreというファイルによってプッシュされるのが無効化されているため、APIキー防止のためにローカル環境のみとする</p><h4 id="he11b7c2001">firebase.ts</h4><pre><code>// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);</code></pre><p>これでWebアプリで使用するFirebaseの初期化が完了となる</p><h2 id="h32d9fc105e">エミュレーターの設定</h2><h3 id="h4ac9514f41">エミュレーターとは</h3><p><a href="https://firebase.google.com/docs/emulator-suite" target="_blank" rel="noopener noreferrer">公式ドキュメント</a><br>Firebaseの各それぞれのサービスが正確に再現されるように構築された開発環境のことである。<br>難しく言っているが要するに本番環境のデータに影響を与えることなく、それぞれのサービスにローカルで直接接続し、QAテストやユニットテストを実行することが出来るツールである。<br>現状では以下のプラットフォームにてサポートされている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2f549e396ae43daa7b7130bd3d251ef/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.22.57.webp" alt=""></p><h3 id="h031c8eaa2d">構築をする</h3><p>まず、最初に大事なこととしてNode.jsのバージョン14.8以上、JavaのJDKバージョン11以上が必須であり、エミュレーターはこの二つに依存して起動する。<br>また、Firebaseコマンドが必要なのでリンクからそれぞれのOSに合わせて構築してほしい。<br>ちなみに自分はNode.js18であり、Macのため</p><pre><code>$ npm install -g firebase-tools</code></pre><p>このコマンドを利用することで構築することができた。<br>また、バージョンアップなどもこのコマンドでできるので便利である。<br>おそらく全てのOSでNodeのバージョンに問題がなければ上のコマンドでインストールすることが出来ると思う。<br>コマンドがインストールすることが出来たら</p><pre><code>$ firebase login
i&nbsp; Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.


? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i&nbsp; To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:</code></pre><p><br>上のようにするとYesを選択するとFirebaseからGoogleの認証ページにリダイレクトすると思うのでそこの部分でFirebaseにログインしているアカウントを利用できれば成功できると思う。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/036cea8bcc16432287685e755d5de38c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.39.41.webp" alt=""><br>無事に作成されていることを確認するため</p><pre><code>$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬─────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────┼────────────────┼──────────────────────┤
│ try-nextjs-firebase&nbsp; │ try-nextjs-firebase │ 8536234976&nbsp; &nbsp; &nbsp;│ [Not specified]&nbsp; &nbsp; &nbsp; │
└──────────────────────┴─────────────────────┴────────────────┴──────────────────────┘


1 project(s) total.</code></pre><p>と入力し自分が靴ったものが無事にあれば問題ない。</p><h2 id="h6a08b68088">それぞれのサービスの初期設定</h2><p>実際にFirebaseのコンソール画面に行って各種サービスの設定をする。</p><h3 id="hc3bd5f627a">Firestore</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4fee3d8d07d9476f8cd80e632070ee06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.53.14.webp" alt=""><br>ここの部分からテストモードで開始するを選択し、日本に住んでいるならasia-northeast1または2を選んでおけば問題ないと思う。<br>設定が終了し、この画面になれば完了である。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/21a846ca33da4c6493e4d8cad603ff12/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.56.42.webp" alt=""></p><h3 id="h6c11353d22">Storage</h3><p>これも以下の部分から始めるをクリックする。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/91ef88f0ab7d4abe8bc8aac81225ebd7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.05.24.webp" alt=""><br>こちらもテスト用のモードを利用し、ロケーションはFirestoreのものが設定されていると思うので大丈夫。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/0760a77aca954df5bf1681d97a28c0a2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.06.36.webp" alt=""><br>上記の画面になれば設定完了である。</p><h3 id="hb286712a4a">初期化をする</h3><pre><code>$ firebase init</code></pre><p>そのままだが上記のコマンドで初期化する。<br>最強のGUIを表示してくれるので今回利用する範囲のものを選択してほしい。<br>自分はFirestoreのOnsnapshotを利用するのとGithubアクションはいらないと思っているのでそれ以外のところにチェックした。<br>また、後で記述するがFunctionsとHostingが現状はまだ必要なさそうなので、FirestoreとStorageを利用した際に使いたい。<br>そしてその機能の拡張サービスとしてFunctionsの方は利用していきたい。<br>スペースキーで選択、矢印キーで移動になっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1059f751703844f6bf23b97ead383b59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.15.00.webp" alt=""><br>セットアップに関しても以下のようにして既にある先ほど作ったプロジェクトを利用するのがいいと思う。<br>FirestoreとStorageのセットアップの部分はそのままエンターを押してもらって構わない。<br>もし何か躓きそうな部分があったら下の部分から連絡してほしい。<br>次にエミュレーターの方のセットアップだが現状は以下のようにする。<br>AuthenticationとFirestoreとStorageのみとする。<br>理由は上記と一緒になっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e1bc242a364c434a9b9fd6f781158881/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.21.40.webp" alt=""><br>それ以降のポート周りの設定は以下のような感じになっている。<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/06bdadd4728e4c26bd3e35e40646bed3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.23.44.webp" alt=""><br>ここまで無事に出来ていれば、エミュレーターの作成完了である。<br>本当にここまで環境構築大変だったと思いますがお疲れ様です👍</p><h3 id="h974e04af22">実際に起動させる</h3><pre><code>$ firebase emulators:start</code></pre><p>とエミュレーターを走れせると<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/a1aaf863cb804903bedb5c6ffe7e06a8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.27.21.webp" alt=""><br>とローカルのそれぞれのポートで作成されていることが確認することができる。<br>また実際にこの<a href="http://127.0.0.1:4000/" target="_blank" rel="noopener noreferrer">リンク</a>を踏んで確認してもらって<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/09073a66c70844fba4d329b3aab72d63/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.29.04.webp" alt=""><br>こんな感じになっていたらもう完璧！！</p><h2 id="h9db2f8f893">ここまで</h2><p>後で追記するFunctionsやHostingなども初期化の部分で追加するだけなので簡単に進めることができる。<br>また次はFirestoreについて触れることができればと思っている。<br>散々言いますが何かあればコメントください🙇</p>

<h1 id="hf2bed6271d">Part 1</h1><p>※If you have anything to say, please comment using the comment box at the bottom. Bugs, lack of explanation, lack of knowledge, anything is okay!<br>What's Firebase functions today? I was like, "What is Firebase functions? So, I would like to learn Firebase.<br>Since I'm here, I'd like to use the Jest learning tool I created last time.<br>You can use it by clicking the <a href="https://github.com/sasaki-sota/try-nextjs-jest" target="_blank" rel="noopener noreferrer">link</a> in the last article or this link.<br>If you refer to the previous article, you will see that I only added Jest and did not modify it in any other way.</p><h2 id="hf55fbe7549">Completed Repository</h2><p>You can check it from this <a href="https://github.com/sasaki-sota/try-nextjs-firebase" target="_blank" rel="noopener noreferrer">link</a></p><h2 id="hae21eaed01">Build Environment</h2><pre><code>$ cd ~/Desktop/ &amp;&amp; mkdir learning &amp;&amp; cd learning &amp;&amp; git clone https://github.com/sasaki-sota/try-nextjs-jest.git &amp;&amp; mv try-nextjs-jest/ try-nextjs-firebase &amp;&amp; cd try-nextjs-firebase &amp;&amp; npm i &amp;&amp; npm run dev</code></pre><p>Of course, you can execute the commands separately!<br>However, please note that the Node runtime environment must be installed and that Mac PCs are the target.<br>This long-winded command creates a learning folder, clones my previous GIt repository, renames it for Firebase, installs the package, and starts up the development server.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fb68a5a33e0b439d801dd047241e06e4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-07%2011.42.46.webp" alt=""><br>This link should bring up this screen, the same as yesterday.</p><h2 id="h89d285ecd2">Introducing Firebase</h2><h3 id="h7f0818da0b">Creating a project</h3><p><a href="https://console.firebase.google.com/u/0/" target="_blank" rel="noopener noreferrer">Official Firebase page</a><br>Create a Firebase project from this link.</p><h4 id="he9cb4ffc5d">Create Project Name</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f82390d3d3be41f8b386acf2c76783eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.31.19.webp" alt=""><br>The project name here can be anything, but it would be easier to understand if it covers the repository name!</p><h4 id="ha1589086fb">Analytics settings</h4><p>I personally think that if you are planning to use it for a long time, it is best to enable it, and if it is a hands-on project like this one, disabling it is best.<br>By the way, I will disable it.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/dd588bfac6084d0892bf0c840fadf6ce/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.34.55.webp" alt=""><br>Once created, it will appear like this.</p><h3 id="h3816aeabf9">Prepare to use Firebase with Next.js</h3><p>This time, select the Web version since it will be used on the front end.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/46de10bd877045d3a92446d26f8bc35c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.37.42.webp" alt=""></p><h4 id="h907ebb4414">App Name Registration</h4><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/337fa469fafe483687b44501d18fa110/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2020.40.06.webp" alt=""><br>The nickname here can be any name, but I will use the same name as the repository name.<br>As for the Hosting setting, if you plan to deploy, I think you should enable it.<br>Basically, I personally don't think you need to worry too much about the checks since you can set them afterwards.</p><h4 id="h55c88408e2">Adding an SDK</h4><p>Once you have registered your name, the SDK will be issued and you can use it.<br>In the terminal</p><pre><code>$ npm install firebase　&amp;&amp; touch firebase.ts</code></pre><p>I will install the Firebase package, but I think it will take a little time.</p><h4 id="h984572b3a0">.env.local</h4><pre><code>NEXT_PUBLIC_FIREBASE_API_KEY="Describe apikey here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Describe authDomain here"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Describe projectId here"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Describe storageBucket here"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Describe messagingSenderId here"
NEXT_PUBLIC_FIREBASE_APP_ID="Describe appId here"</code></pre><p>env files are disabled to be pushed by a file called Gitignore, so only local environment is used to prevent API keys</p><h4 id="he11b7c2001">firebase.ts</h4><pre><code>// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);</code></pre><p>This completes the initialization of Firebase for use in the web application.</p><h2 id="h30565d37e7">Emulator Settings</h2><h3 id="hf49c3956e4">What is an emulator?</h3><p><a href="https://firebase.google.com/docs/emulator-suite" target="_blank" rel="noopener noreferrer">Official Documentation</a><br>A Firebase emulator is a development environment built to accurately reproduce each of the Firebase services.<br>In short, it is a tool that allows you to connect directly to each service locally and execute QA and unit tests without affecting the data in the production environment.<br>Currently, the following platforms are supported<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/f2f549e396ae43daa7b7130bd3d251ef/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.22.57.webp" alt=""></p><h3 id="hc43f50e056">Building.</h3><p>First of all, it is important to note that Node.js version 14.8 or higher and Java JDK version 11 or higher are required, and the emulator depends on these two to start.<br>The emulator depends on these two to start. Also, the Firebase command is required, so please follow the link to build it according to your OS.<br>By the way, I am Node.js18 and I am on a Mac.</p><pre><code>$ npm install -g firebase-tools</code></pre><p>It could be built by using this command.<br>It is also convenient to use this command to upgrade the version of the software.<br>If the version of Node is OK, the above command can be used to install Node on all operating systems.<br>Once the command has been installed</p><pre><code>$ firebase login
i&nbsp; Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.


? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i&nbsp; To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:</code></pre><p>If you do the above, you will be redirected from Firebase to Google's authentication page when you select Yes, so if you can use the account you are logged in to Firebase in that section, you will succeed.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/036cea8bcc16432287685e755d5de38c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.39.41.webp" alt=""><br>To ensure that it has been created successfully</p><pre><code>$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬─────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────┼────────────────┼──────────────────────┤
│ try-nextjs-firebase&nbsp; │ try-nextjs-firebase │ 8536234976&nbsp; &nbsp; &nbsp;│ [Not specified]&nbsp; &nbsp; &nbsp; │
└──────────────────────┴─────────────────────┴────────────────┴──────────────────────┘


1 project(s) total.</code></pre><p>and if your shoes are safe, you are good to go.</p><h2 id="h99a74344f8">Initial settings for each service</h2><p>We will actually go to the Firebase console screen to configure the various services.</p><h3 id="hc3bd5f627a">Firestore</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/4fee3d8d07d9476f8cd80e632070ee06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.53.14.webp" alt=""><br>If you live in Japan, you can choose asia-northeast1 or asia-northeast2.<br>When the setup is complete and you see this screen, you are done.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/21a846ca33da4c6493e4d8cad603ff12/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-08%2023.56.42.webp" alt=""></p><h3 id="h6c11353d22">Storage</h3><p>This also clicks on Start in the following section.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/91ef88f0ab7d4abe8bc8aac81225ebd7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.05.24.webp" alt=""><br>This one also uses the mode for testing, and I believe the location is set to Firestore's, so it's ok.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/0760a77aca954df5bf1681d97a28c0a2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.06.36.webp" alt=""><br><br><br>If the above screen is displayed, the setup is complete.</p><h3 id="hac4a24289c">Initialization</h3><pre><code>$ firebase init</code></pre><p>As is, but initialized with the above command.<br>It will show you the best GUI and you should select the scope of what you want to use this time.<br>I checked the other checkboxes because I will be using Firestore Onsnapshot and I don't think I need the Github action.<br>Also, as I will describe later, Functions and Hosting do not seem to be necessary at this time, so I would like to use them when I use Firestore and Storage.<br>I would like to use Functions as an extension service for these functions.<br>The space key is used to select, and the arrow keys are used to move.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/1059f751703844f6bf23b97ead383b59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.15.00.webp" alt=""><br>For the setup, it is a good idea to use the project you have already created as follows.<br>You can just hit enter on the Firestore and Storage setup sections.<br>If you encounter any stumbling blocks, please contact us from below.<br>Next, the emulator setup is as follows.<br>Only Authentication, Firestore, and Storage will be set up.<br>The reason is the same as above.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e1bc242a364c434a9b9fd6f781158881/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.21.40.webp" alt=""><br>The settings around the port since then are as follows.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/06bdadd4728e4c26bd3e35e40646bed3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.23.44.webp" alt=""><br>If you have made it this far successfully, the creation of the emulator is complete.<br>I know it was really hard work to build the environment up to this point, but thank you for your hard work. 👍</p><h3 id="h84fdc40ad8">Let's actually start it up.</h3><pre><code>$ firebase emulators:start</code></pre><p>and run the emulator.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/a1aaf863cb804903bedb5c6ffe7e06a8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.27.21.webp" alt=""><br>and local ports, respectively.<br>You can also actually step on this link and have it checked<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/09073a66c70844fba4d329b3aab72d63/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-09%200.29.04.webp" alt=""><br>If it looked like this, it would be perfect already!</p><h2 id="ha06d9af35a">Up to this point</h2><p>Functions, Hosting, etc., which we will add later, can be easily proceeded since they are only added in the initialization section.<br>I hope to touch on Firestore next.<br>I know I say this a lot, but please comment if you have any questions. 🙇</p>

環境構築だけでも結構長いかも

Next.js + Firebaseを利用したハンズオン - 環境構築編

Next.js + Hands-on with Firebase - Building the Environment

<h1 id="hfb0ebcbccf">ようやく時間が取れた</h1><p>最近バタバタしていたこともあり、あまり時間が取れていなかった。<br>しかし今日はある程度まとまった時間が取れたので日本語の対応をした。<br>よく考えればブログは初期値は日本語なのに個人サイトの初期値は英語ってなんかおかしいなと感じた🌊</p><h2 id="h9620872e14">参照先</h2><p><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">こちら</a>から見れます！</p><h2 id="ha7fe869a7b">レンダリングについて考える</h2><p>前日の記事でもこのサイトの方は完全な静的サイトになっているのでNext.jsで作成したような状態管理を利用した言語切り替えが実装できないような仕様になっていることをまず大前提においていた。</p><h3 id="h6cfaa47bdb">ブログ</h3><p>こちらの方ではコメント機能があるため、どうしてもSSGよりの完全な静的サイトにはすることができない。また、SSRするにしても頻繁には変更があるわけではなく、特定の部分が稀に投稿される程度なので頻繁なリクエストは必要ないと考えた結果、こちらのサイトはISRによって対応することができている。<br>また、このブログの個人的な見解として、記事を見てもらいたいこととUXを高めていきたいことを優先的に考えているため、現行のままが個人的には現状においては最高の構成であると考えている</p><h3 id="h9e2347a657">個人サイト</h3><p>一方、個人サイトに関しては定期的に変更することがなく、そのことを考えるとパフォーマンスを最適化することに重きを置いたほうがいいと考えているため現行の構成とAstroを採用したことがベストだと考えている。<br>どちらかということこの記事を書いている人はどのような人だろうという疑問を解決するためのサイトという認識でいるので、できるだけ鮮明に分かりやすくするためにも最適である。<br>最悪、フレームワーク自体がなくて簡易構成でも全然いけると思うと考えている。</p><h2 id="h7b63160553">意外なメリット</h2><h3 id="h04fb6a787d">SEO対策</h3><p>もしかしたら英語版と日本語版の両方でSEO対策ができているのではと思っている。<br>URLを考えても</p><ul><li>日本語版<ul><li><a href="https://dev-sota.com" target="_blank" rel="noopener noreferrer">https://dev-sota.com/</a></li></ul></li><li>英語版<ul><li><a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">https://dev-sota.com/en</a></li></ul></li></ul><p>と分割することができているため、二つの部分から英語版と日本語版の氏名でSEOに対応できているのではないかと思っている<br>Google search consoleの方でも正常に動作しているっぽいのでこれは意外なメリットであると思う。<br>ブログの方ではStateで管理しているので、他のページには遷移しないSPAを採用されているが、これはMPAのかなりのメリット妥当いうことを開発をしながら身をもって体験することができた。<br>また、ドメインで英語版用のものを取ろうということも少し考えたが現状のもので十分に満足しているので問題にないと考えている。</p><h3 id="h1164b2e84b">ブラウザ依存のテーマ</h3><p>これも画面の色が白か黒かという点がブラウザの設定に依存している。<br>ブログの方では意図的に夜だったらナイトモードに自分だったらしたいという点からブラウザ依存せず、任意に変更することができる実装にしたが、個人サイトのような知ってもらう部分では実装が大変なだけではなく状態管理することができるツールもないのでかなりいい選択につながっていたと今になって思う。</p><h2 id="hf0d815c0bb">パフォーマンス</h2><p>これはAstroのさすがという部分になっている英語日本語ともに問題になく、前回の記事で記述させてもらったぐらいのパフォーマンスを提供してくれているので結果的に、問題なく言語対応することが出たと考えている。</p><h2 id="h3bcda3e6b0">最後に</h2><p>急務でサイトの翻訳ページを実装した背景があるので、フィードバックがあればぜひ教えてほしい<br>また機会があればフロントエンドのテストなどの部分は導入していきたいと思っている。<br>特にブログに関しては大きくなるのにつれて対応することができていないのでまとまった時間でさまざまなツールにさらに触れていきたい。<br>また、表現したいものが全て表現することができたサイトにはまだなっていないのでできることがあればさらにわかりやすい自分を理解してもらえるサイトにしていきたい！✨</p>

<h1 id="h877d9a76f4">I finally got some time.</h1><p>Due to the recent busy schedule, I have not been able to spend much time on this project.<br>However, today I was able to find some time to work on the Japanese language site.<br>I felt it strange that the default value of my blog is in Japanese, but the default value of my personal site is in English.</p><h2 id="hbb63dbb25e">References</h2><p>You can see it <a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">here</a>!</p><h2 id="h6065e803b6">Thinking about rendering</h2><p>In the previous day's article, I made the basic premise that this site is a completely static site, so it is not possible to implement language switching using state management like the one created with Next.js.</p><h3 id="ha5344e9c01">Blog</h3><p>Because of the commenting functionality, it is impossible to make this a completely static site rather than a SSG site. Also, even if SSR is used, there are not frequent changes, and specific parts of the site are posted only rarely, so frequent requests are not necessary.<br>In addition, my personal view of this blog is that the current configuration is personally the best configuration in the current situation, since my priority is to get people to see the articles and to enhance the UX</p><h3 id="h5b54dd3286">Personal Site</h3><p>On the other hand, the personal site will not be changed on a regular basis, and considering this, I think it is best to focus on optimizing performance, so I think the current configuration and the use of Astro are the best.<br>Since the site is intended to answer the question of who is writing this article, it is also the best way to make it as clear and easy to understand as possible.<br>Worst of all, we think that a simple structure without the framework itself would work just fine.</p><h2 id="h8625f66fcb">Unexpected Advantages</h2><h3 id="hbfda310d13">SEO measures</h3><p>We think that SEO measures could be taken for both the English and Japanese versions of the site.<br>Considering the URLs</p><ul><li>Japanese version<ul><li><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">https://dev-sota.com/</a></li></ul></li><li>English version<ul><li><a href="https://dev-sota.com/en" target="_blank" rel="noopener noreferrer">https://dev-sota.com/en</a></li></ul></li></ul><p>I think I can handle SEO with the English version and the Japanese version in the name from the two parts because I can divide them into two parts.<br>I think this is a surprising advantage since it seems to work fine on Google search console.<br>Since the blog is managed by State, it uses SPA, which does not move to other pages, and I was able to experience the considerable advantages of MPA while developing the site.<br>I also thought about getting an English version for the domain, but I am satisfied with the current one, so I don't think it will be a problem.</p><h3 id="h1bca541a2f">Browser-dependent theme</h3><p>This also depends on the setting of the browser in terms of whether the screen color is black or white.<br>For my blog, I intentionally chose a theme that can be changed at will without depending on the browser, because I wanted to set it to night mode if it was nighttime, but for a personal site like this, it is not only difficult to implement, but there is no tool to manage the state of the site, so it was a pretty good choice. I think now that it was a good choice.</p><h2 id="h14f31f0925">Performance</h2><p>This is a good thing for Astro, as both English and Japanese have no problems and provide the same level of performance as described in the previous article, and as a result, we believe we were able to support languages without any problems.</p><h2 id="h3d58524ea1">Finally</h2><p>We have the background of implementing the translated pages of the site on short notice, so if you have any feedback, please let us know!<br>I would also like to introduce some areas such as front-end testing if the opportunity arises.<br>In particular, we would like to further touch on various tools in a coherent time frame, as we have not been able to support the blog as it grows in size.<br>Also, I would like to make the site easier to understand myself if I can, since I have not yet been able to express everything I want to express! ✨</p>

これで個人サイトもひと段落

個人サイトの言語対応とレンダリングを考える

Consider language support and rendering for personal sites

<h1 id="h403db39dd4">パフォーマンス向上が主な目的</h1><p>新しい環境にまだなれず、改修に少し時間がかかってしまった🔥<br>今までの個人サイトは静的ページになっているにも関わらずパフォーマンスが効率的ではなかったためこの度Next.jsから乗り越えた。</p><h2 id="h9e2347a657">個人サイト</h2><p><a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">こちら</a>から見れます！</p><h2 id="hc69c85bcf9">背景</h2><h3 id="hda2b9457a6">静的ページだけですむ</h3><p>Next.jsは様々なレンダリング方法があるため無難な選択になりうるが、Astroのような不要なJavascriptを削除してくれるようなものはない。主に前までのパフォーマンスの低下は不要な部分が大きく反映されていることが原因になりつつあったのでそこの部分を修正することが必要だと思っていた。</p><h3 id="hfcc9cfe63d">シンプルに他のフレームワークでもコード書きたい</h3><p>最近ずっとNext.jsしか使っていなかったため、新しいフレームワークを利用してみたくなった背景がある。<br>そこの部分からTypescriptを使用することができる他のフレームワークを模索しつつ、パフォーマンスの改善にも役立ちそうなのがAstroということもあり前回までで興味本位で触っていたためこの度個人ページでも利用することにした。</p><h2 id="ha31bd80de1">要件</h2><h3 id="hb5f92ffea0">よりシンプルに</h3><p>前までの部分はかなりいらない項目なども多数あり、確かに機能という面ではよかったが、その分必要ないこともたくさんあったなと考えている。<br>そこの改善からダークモードはOSに依存させて実装し、このブログのように自分で変更することはあまりないのかなとユーザー目線で考えてみるとそう思った。</p><h3 id="hb07ec5987e">ハイパフォーマンス</h3><p>これに尽きる。<br>ただの静的ジェネレータとして個人ページは機能してくれればいいので無駄な機能はある意味いらないなと思った。<br>今までは確実なものを利用していたが、個人的に新しいものを試してみたくなった背景がある。</p><h2 id="hb6509f48bf">結果</h2><h3 id="h054fab72d6">モバイル</h3><p>変更前<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/37589e4efbd64dcdba0a050ddfad9b67/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.21.05.webp" alt=""><br>変更後<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9599107d2d604bfd8c56a7982b50baec/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.20.17.webp" alt=""></p><h3 id="h7c5031374b">パソコン</h3><p>変更前<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/afcf30ac37044a0cac6094a339292b06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.20.49.webp" alt=""><br>変更後<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/31752167b9b748e7995787f579fa926e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.19.56.webp" alt=""><br>個人的にはかなり満足だと思う。<br>画像周りは改善の余地があるがここの部分はしっかりと強調したいプライドがあるのでこのまま👤</p><h2 id="h3bcda3e6b0">最後に</h2><p>何度も話しているが、自分の目指しているものはプロダクトを成長させることができるエンジニアだ。<br>そのために少しでもパフォーマンスが良くなるのならば勉強する価値はあると思っている。<br>最近フロントエンドの記事ばかり書いているので少しずつバックエンドも書いていきたい</p>

<h1 id="h982746be86">Performance improvement is the main goal</h1><p>I am still getting used to the new environment and the modifications have taken a bit of time.🔥<br>The performance of my previous personal website was not efficient despite the fact that it was a static page, so I have now overcome this issue from Next.js.</p><h2 id="h5b54dd3286">Personal Site</h2><p>You can see it <a href="https://dev-sota.com/" target="_blank" rel="noopener noreferrer">here!</a></p><h2 id="h8c1a16f7ea">Background</h2><h3 id="hf465372398">Static pages are all that's needed</h3><p>Next.js could be a safe choice because of the various rendering methods, but there is nothing like Astro that removes unnecessary Javascript. I thought it was necessary to fix that part of the code, mainly because the previous performance degradation was becoming largely a reflection of the unnecessary parts.</p><h3 id="h8cf0f1cb56">I want to simply write code in other frameworks.</h3><p>I have been using only Next.js for a long time recently, so I wanted to try a new framework.<br>I was curious about Astro and decided to use it for my personal page.</p><h2 id="he118b7a776">Requirements</h2><h3 id="h48d4455dee">Simpler</h3><p>The previous version had many items that were not needed, and although it was good in terms of functionality, there were many things that were not needed.<br>From the user's point of view, I thought that the dark mode should be implemented by depending on the OS, and that there is not much that can be changed by the user, as in this blog.</p><h3 id="h7791140879">High Performance</h3><p>It comes down to this.<br>I thought I don't need useless functions in a sense because I just want my personal page to function as a static generator.<br>I had been using a reliable one, but I had a background of wanting to try something new for personal use.</p><h2 id="he66d18a133">Result</h2><h3 id="h7d54717b53">Mobile</h3><p>Before change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/37589e4efbd64dcdba0a050ddfad9b67/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.21.05.webp" alt=""><br>After change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9599107d2d604bfd8c56a7982b50baec/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.20.17.webp" alt=""></p><h3 id="h86670169d0">PC</h3><p>Before change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/afcf30ac37044a0cac6094a339292b06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.20.49.webp" alt=""><br>After change<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/31752167b9b748e7995787f579fa926e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2021.19.56.webp" alt=""><br>Personally, I think I am quite satisfied.<br>There is room for improvement around the image, but I have a lot of pride in this area that I want to emphasize well. so I'll keep it as is.👤</p><h2 id="h52c5acc8db">Finally.</h2><p>As I have said many times, my goal is to be an engineer who can grow the product.<br>If I can improve performance even a little for that purpose, I think it is worth studying.<br>I've been writing only front-end articles lately, so I'd like to write back-end articles little by little.</p>

ようやく時間が取れた

astroで個人サイトを改修した

Personal website renovated with astro.

<h1 id="hfc6b1274c1">コメント機能が欲しかった</h1><p>前にも説明させてもらったかもしれないが時々「じぶんのブログの記事や情報性は正しいのか？」と不安になることがある。<br>自分自身のキャッチアップ方法として自分の発信した意見から客観的にみたらどのような意見をいただけるのかということや他に応用することができることや素直に自分の記事がどう思われているのかが気になっていた。<br>だからどんな意見でもいいから客観的に情報発信として正しい情報なのかということや記事の方向性のアドバイスなどもいただきたいと考えている🙇‍♀️<br>勉強で比喩すると自分がインプットした意見を人に説明して間違ったことや改善することがあればアドバイスしてもらうような感覚で発信することができればと思っている。</p><h2 id="hcb9dacb773">結論</h2><p>ISRを用いたsupabaseを利用したコメント機能の実装となった。</p><h3 id="he45680f0bc">参考記事</h3><p><a href="https://app.supabase.com/sign-in" target="_blank" rel="noopener noreferrer">supabaseへのログインページ</a><br><a href="https://supabase.com/docs/reference/javascript/initializing" target="_blank" rel="noopener noreferrer">JSまたはTSを用いた機能の概要</a><br><a href="https://supabase.com/docs/guides/getting-started/quickstarts/nextjs" target="_blank" rel="noopener noreferrer">Next.jsでのクイックスタート</a><br><a href="https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs" target="_blank" rel="noopener noreferrer">Next.jsでの実装例</a><br><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">わかりやすいレンダリング方法の概要</a></p><h2 id="h87e668c139">実装要件</h2><ol><li>触れたことない技術を利用して実装</li><li>レンダリング方法を変更</li><li>匿名で投稿することができるように</li></ol><h3 id="hc679a011a0">触れたことない技術を利用して実装</h3><p>これはシンプルに触ったことがない技術を使ってみたいとプロダクトを実装する際に常々思っている。<br>バックエンドが実装することはスピード感を持って実装したかっため、想定していなかった。<br>そうなるとプラットフォームで完結しようと考えfirebaseは以前インターンをしていた際に利用したことがあったので今回は既存のデータベース知識を利用することができるsupabaseを使ってみてみたいと思っていたのと、友人や先輩が利用していた背景があり今回は使ってみることにした。</p><h3 id="he6b54f05b0">レンダリング方法を変更</h3><p>これもコメントを機能を付け加えるために必須の要件である。<br>今まではmicroCMSのみで完結していたため静的ページのみで開発することができたが、コメント機能実装となると実際に投稿されたコメントはサーバー側で処理して反映されるため、ビルド時に反映される既存のレンダリング方法では対応することができないということを想定していた。<br>そのため、現状ではSSGを利用していたがSSRかISRのどちらかに変更して実際に投稿されたコメントを次の記事の投稿にビルドされる必要もされることなく反映できればと思っていた。</p><h3 id="hbd54c61ab3">匿名で投稿することができるように</h3><p>自分は特定の視聴者さんの意見を知りたいということもあるがそれ以上に自分のブログは客観的にどのように思われているかどうかが知りたいということもあってそのようなことを考えると匿名でいいと思い。今回はそれ以外の部分は考慮しないという考えにした。また仮に名前ありで実装した場合、ログインやフォームでの名前の入力が必要になると思ってしまったため、あくまでもこれは自分のブログということで必要ないと考えた</p><h2 id="h922edff87b">実装</h2><h3 id="heb9db543a7">データベース</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2780f4ed0a934b1e92d88be1e83bd4c0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2021.23.16.png" alt=""><br>厳密にやれば色々やれるが省略させてもらう。<br>簡単に説明させていただくと、</p><ol><li>created_at ... Dateオブジェクトを利用はするが表示の際に文字型で利用する</li><li>blog_id ... ブログの方のデータはプラットフォームが違うため外部キーとしない</li></ol><p>とした。</p><h3 id="h5a8452001c">フロント側の実装</h3><p>supabaseの実装については上記の参考サイトの欄を閲覧してほしい。<br>かなりドキュメント的にもわかりやすいものになっていると思うのでしっかりと理解することができると思う。<br>以下の部分で実際のコードを抜粋して紹介する。</p><h4 id="he6195a8225">supabase.ts</h4><pre><code>import { createClient } from '@supabase/supabase-js';


interface Database {
  public: {
    Tables: {
      movies: {
        Row: {}; // The data expected to be returned from a "select" statement.
        Insert: {}; // The data expected passed to an "insert" statement.
        Update: {}; // The data expected passed to an "update" statement.
      };
    };
  };
}


export const supabase = createClient&lt;Database&gt;(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);</code></pre><p>formでの部分は<a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">react-hook-form</a>と<a href="https://www.uuidgenerator.net/dev-corner/typescript" target="_blank" rel="noopener noreferrer">uuid</a>というライブラリを利用している。<br>全てのコードを紹介できなくてすいません！もし何かあればコメントください。</p><h4 id="hf73ede2440">CommentForm.tsx</h4><pre><code>import { v4 as uuidv4 } from 'uuid';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, reset } = useForm();
  const onSubmit = async (data: any) =&gt; {
    let insertData: Comment = {
      uuid: uuidv4(),
      created_at: getDate(),
      comment: data.comment,
      blog_id: blog.id,
    };
    await supabase.from('comments').insert(insertData);
    reset();
  };
        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;</code></pre><p>このように実装している。</p><h2 id="h53e5994054">Supabaseを利用して感じたこと</h2><p>実際に今までのデータベースの知識を利用することができたのはかなり大きかなと感じた。<br>Firebaseと比べしっかりとデータベースの設計などもすることができ、GUIを用いて様々な制約なども作ることができるのでかなり利用しやすいのとメソッドなどもかなり自然に利用することができるのでとてもいいなと感じることができるようなものになっている。<br>また、Firebaseに比べかなりコードが理解しやすいなと個人的に感じることができた。</p><h2 id="h545fee46b9">レンダリング関係について</h2><p>結論から話すとISRを利用することにした。<br>最初はSSRを利用していたが実際に利用してみると想像よりもリクエスト数が増えていたことと自分がコメントされたことがわかればいいこととそこまでの即時性は求めていないのでISRが最適だと感じた。<br>ただ自分もここの部分まだまだ不安に残ることも多いのでしっかりとさらに知識を深めたいと思う。</p><h2 id="h8d78e14043">感想</h2><p>まだまだ改善することができる点は多いがブログの開発は一度ここまでにしておこうと思う。<br>他にもバックエンドでキャッチアップしたいことや他にもやらなければいけないような私用の手続きがたくさんあるのでこの引越しの時期に進めなければいけないような手続きを進めていこうと思う。<br>supabaseに触れる機会が今までなかったので実際に利用することができて本当によかった。</p>

<h1 id="hfda22f8a7f">I wanted a comment function.</h1><p>I may have explained this before, but sometimes I wonder, "Are my blog posts and informational content correct?" I sometimes feel insecure about the correctness of my blog posts and information.<br>As a way to catch up with myself, I have been wondering what kind of objective opinions I can get from the opinions I have sent out, what I can apply to other things, and what people honestly think of my articles.<br>Therefore, I would like to receive any kind of opinion, including advice on whether the information is objectively correct and the direction of the article. 🙇‍♀️<br>I would like to be able to transmit my opinions as if I were explaining my input to others and asking for their advice on what I have done wrong or what I can do to improve it.</p><h2 id="hba1bda21d4">Conclusion.</h2><p>The comment function was implemented using ISR-based supabase.</p><h3 id="h9089337d1f">Reference Articles</h3><p><a href="https://app.supabase.com/sign-in" target="_blank" rel="noopener noreferrer">Login page to supabase</a><br><a href="https://supabase.com/docs/reference/javascript/initializing" target="_blank" rel="noopener noreferrer">Overview of functions with JS or TS</a><br><a href="https://supabase.com/docs/guides/getting-started/quickstarts/nextjs" target="_blank" rel="noopener noreferrer">Quick Start with Next.js</a><br><a href="https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs" target="_blank" rel="noopener noreferrer">Example implementation in Next.js</a><br><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">Overview of easy-to-understand rendering methods</a></p><h2 id="hafab0352a1">Implementation Requirements</h2><ol><li>Implemented using untouched technology</li><li>Change the rendering method</li><li>Allow anonymous submissions</li></ol><h3 id="h4cf958986d">Implemented using untouched technology</h3><p>This has always been my desire when implementing a product to simply use a technology that I have never touched.<br>We did not anticipate that the backend would be implemented because we wanted to implement it with a sense of speed.<br>I had used firebase when I was an intern before, so this time I wanted to try using supabase, which can use existing database knowledge, and my friends and seniors had used it, so I decided to use it this time. I decided to try firebase this time because I had used firebase before and I wanted to use it to use existing database knowledge.</p><h3 id="h4e4675d6c5">Change the rendering method</h3><p>This is another essential requirement for adding commenting functionality.<br>Until now, development could be done only with static pages because microCMS alone was sufficient, but when the comment function was implemented, the comments actually posted were processed and reflected on the server side, so it was assumed that the existing rendering method, which is reflected at build time, would not be able to handle this. This is the reason why SSG is currently being used.<br>Therefore, we were hoping to change from using SSG to either SSR or ISR so that comments actually posted would be reflected in the next post without the need to be built.</p><h3 id="hc7d89af693">Allow anonymous submissions</h3><p>I wanted to know the opinions of certain viewers, but more than that, I wanted to know what they thought of my blog objectively, so I thought it would be good to be anonymous. I decided not to take other aspects into consideration in this case. Also, if I had implemented it with names, I thought it would be necessary to enter names in logins and forms, so I decided it was not necessary because it is my blog only.</p><h2 id="hdd7c9dcee4">Implementation</h2><h3 id="hfc87683db0">Database</h3><p><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/2780f4ed0a934b1e92d88be1e83bd4c0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2021.23.16.png" alt=""><br>I could go on and on, but I will spare you the details.<br>Let me briefly explain.</p><ol><li>created_at ... Date object is used, but it is used as a character type when displaying.</li><li>blog_id ... The data on the blog is not used as a foreign key because the platform is different.</li></ol><p>The following is a simple explanation.</p><h3 id="hd2a34f98fd">Front Side Implementation</h3><p>For the implementation of Supabase, please refer to the reference site section above.<br>I think it is fairly well documented and easy to understand, so you should be able to get a good grasp of it.<br>The following is an excerpt of the actual code.</p><h4 id="he6195a8225">supabase.ts</h4><pre><code>import { createClient } from '@supabase/supabase-js';


interface Database {
  public: {
    Tables: {
      movies: {
        Row: {}; // The data expected to be returned from a "select" statement.
        Insert: {}; // The data expected passed to an "insert" statement.
        Update: {}; // The data expected passed to an "update" statement.
      };
    };
  };
}


export const supabase = createClient&lt;Database&gt;(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);</code></pre><p>The part with form uses <a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">react-hook-form</a> and a library called <a href="https://www.uuidgenerator.net/dev-corner/typescript" target="_blank" rel="noopener noreferrer">uuid</a>.<br>Sorry I can't show you all the code! If you have any questions, please comment.</p><h4 id="hf73ede2440">CommentForm.tsx</h4><pre><code>import { v4 as uuidv4 } from 'uuid';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, reset } = useForm();
  const onSubmit = async (data: any) =&gt; {
    let insertData: Comment = {
      uuid: uuidv4(),
      created_at: getDate(),
      comment: data.comment,
      blog_id: blog.id,
    };
    await supabase.from('comments').insert(insertData);
    reset();
  };
 &lt;form onSubmit={handleSubmit(onSubmit)}&gt;</code></pre><p>This is how it is implemented.</p><h2 id="h21f468c770">What I felt when using Supabase</h2><p>I felt that it was quite significant to be able to actually use the database knowledge I have accumulated so far.<br>Compared to Firebase, it is possible to design the database more firmly and create various restrictions using GUI, so it is quite easy to use and the methods can be used quite naturally.<br>In addition, I personally feel that the code is much easier to understand than Firebase.</p><h2 id="hb947706f61">Rendering</h2><p>In conclusion, we decided to use ISR.<br>At first, I used SSR, but when I actually used it, I found that the number of requests had increased more than I had imagined, and I felt that ISR was the best choice because I only needed to know that I had been commented on, and I was not looking for that much immediacy.<br>However, there are still many things that I am not sure about, so I would like to deepen my knowledge of ISR.</p><h2 id="h458e0d0ba6">Impressions</h2><p>There are still many things that can be improved, but I think I'll leave it at this point for the blog development.<br>There are many other things I want to catch up on on on the back end and other personal procedures that I need to do, so I will try to move forward with the procedures that I need to do during this time of moving.</p>

とりあえずこれでブログ開発をひと段落させる

コメント機能のためのSupabaseとレンダリング方法

Supabase and rendering method for comment function

<h1 id="h0a92af9860">念願のISUCONに出場してみた</h1><p>お久しぶりです。<br>今日の1日だけはエンジニアリングを試したい！そして楽しみたいと思う気持ちからISUCON12にインターン時代の友人たちと一緒に本日出場してきました！<br>その備忘録とやり残したことのまとめです🏆<br>（これは自分の知識内だけで書いているので間違いなどがあれば教えていただけると幸いです。）</p><h2 id="hfe1fd41872">そもそもISUCONとは</h2><p><a href="https://isucon.net/" target="_blank" rel="noopener noreferrer">公式サイトはこちらから！</a><br>とされていまして簡単に説明する</p><blockquote>SUCONとは、LINE株式会社が運営窓口となって開催している「お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトル」です。</blockquote><p>とされているらしいです。（自分も詳しくはわかっていません笑）<br>ただ本来の題名としては<span style="color:#4c4c4c">ISUCON（いい感じにスピードアップコンテスト）という略になっているらしくて年齢関係なくプログラミングに興味がある人は誰でも参加できる大会です。</span><br><span style="color:#4c4c4c">その文もちろんエントリーも激戦なのですが。。。。</span></p><h2 id="hd2c91c24e4">経緯</h2><p>前にインターンをしていた同期たちと共に「社員さんたちがISUCONに出場するらしい！」みたいなことを聞いて自分たちも出てみたいねなんか話していたらまさかのそのうちの一人が申し込んでくれといてくれました！！しかもガッツリと当選しているという。。。。<br>本当にその時応募してくれた方と一緒になって話を進めていただいた方、そして誘ってくれた２たりには感謝をしています！</p><h3 id="heac42bdc08">メンバー</h3><p>自分たちは最大人数である3人チームで出場しました。また、このご時世ということもあって当初は集まってやろうとも思っていたのですがそれぞれが個人のオンライン環境であるという形式にしました。正直自分はプログラミングするのも久しぶりでメソッドや概念や規約そのものを忘れていましたが他の2人が意味わからないぐらいアルゴリズム力がハンパないだけではなく地頭もいいので脳内で高速処理しているし、自分の意見や考えを尊重してくれてアドバイスをくれたり根っからのいい人たちので本当に支えていただきました。スコアの向上に関してもあまり自分は今回は関与することができなかったので自分にとっても悔しいですがせっかくのすごいいい経験だったので今後はもっとパフォーマンスのチューニングができるような技術力を今まで以上にプログラミングに時間を費やしたいと思いモチベーションの向上につながったと思います💻</p><h3 id="h139225844a">Go言語の選定</h3><p>ISUCONは様々な言語で挑戦することができるようになっているような競技になっています！！<br>自分たちは過去のISUCONの実績や今のスキルセットなどを考慮した結果Go言語にしました。<br>自分の半年前ぐらいにはかなり記述していたのですが最近はもっぱらプログラミングそのものをやっていないというのもあって全然書くことができませんでしたが、Goのコンパイラがそもそも優秀っていうのもあるしフレームワークに関しても自分の経験のあるものでサーバーのバインディングをしていたのでとても取り組みやすく今になってはとてもいい技術選定だったと思います。そして他の方々もしっかりと使いこなしていたのでさすがだなと思ってました笑<br><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e52854691b68413981b4e29e916dac7d/alex-kotliarskyi-QBpZGqEMsKg-unsplash.webp" alt=""></p><h2 id="h1e4c2ff89c">備忘録</h2><p>まず第一に感じたのは今までのやってきたいわゆる実装という部分とはかけ離れているのかな？というところです。<br>自分の場合は個人のプロダクトなら尚更なのですがアーキテクチャーに時間をかけてどれだけわかりやすいコードを書いて機能を実装するかどうかという部分にフォーカスして集中しています。しかもパフォーマンスに関するところも自分がデーターベース周りに関わっていたことが多かったり技術的にやったことがあるものを使って使いまわせるといった課題というより0→1を自分で作っていくような感覚だったのですが、ISUCONに関してはどのようにパフォーマンスを上げられるかどうか？というところの一点に集中しているのでもちろんコードをきれいに書くことに越したことはないですがそれ以上にチューニングをしてスコアをとっていかなければいけない、さらに時間になって初めて課題を見ることができるような仕様なのでアプリケーション全体のイメージ感を掴むのにも時間がいるということもあってそこら辺はどちらかというと問題という表現の方が近かったような所感です。<br>全部紹介することはできませんのでかいつまんでになります。実際に他の2人は自分が把握していること以上のことをやっていたので理解できていない部分のあります。すいません笑</p><h3 id="h0ef859a5d4">環境構築</h3><p>これも大変な部分の一つだと思います。もちろんこの開発は一人で行うものではないのでDockerなどのコンテナの環境ですることもできるのですがサーバーを利用するために踏み台サーバーと本番サーバーなどを用意しておくことなどが求められます。これが普通に大変というか人数分に合わせて作成しなければいけないだけではなく、本番を想定して練習サーバーでもSSH接続をすることができるのかどうかなどやKeyの登録などやることがかなりあります。<br>これに関してはチームメンバーの方が事前に様々な設定をしてくれ、しかも当日にはMakefileなども作成して必要コマンドをAlias化してくれるような化け物っぷり。。。怖いと思いつつ全力で頼らせていただき、当日のインフラ環境及びサーバー関連に関しても全てやってくれたので本当に開発に集中することができました😇</p><h3 id="ha81c197958">データーベースチューニング</h3><p>これはまず必須だと思います。というのもインデックスを利用することで本の検索のようなものができるようになるようになりテーブルを処理するためのデータ構造を高速化することができるようになっています。なので、特定のカラムの検索をする場合に調べたい項目がわかり、検索を高速化できるという仕組みです。<br>詳しくは「SQL　INDEX」のように調べてみてください、記事が出てくると思います。<br>これに関してもデーターベースの理解やINDEXはしっかりと理解した上で利用しなければ逆にパフォーマンスが下がってしまうこともあったりするのでそこの部分も考慮しなくてはなりません。これに関してももう一人の友人が全てやってくれました。しかもそれでしっかりとスコアを向上させていく優秀さ、トラブルに関してもとても冷静に解決されていたので自分が見習うべきことがたくさんあるなと思った点とまだまだ理解が浅いなという点でした。</p><h3 id="hadc80dfb5f">接続データベースの切り分け</h3><p>デフォルトとして踏み台サーバーの方にデータベースサーバーとアプリケーションサーバーの両方が構築されており、データーのInitializeなども全てそのファイルに完結されるようになっているのでそこの部分をより高速化されたサーバーに切り替えるとINDEXが実装されたテーブルを利用することができると考え実行しました。これに関しては自分が担当しましたが想定よりも自分のイメージとの剥離があり、元々想定していたデーターベースなどでもなかったためかなり困難することができましたが依存変数などの定義などをみてみると答えが見えてくることなどもあってかなり汚く力技でしたが実装することができた？と思っています。しかし実際に完璧に動作検証することができたかというとそうではなく（もちろん時間内には厳しいことはわかっていたのですが）もっとここら辺のインフラ部分のアーキテクチャなども落ち着いたら勉強しなければいけないという自分に対するボトルネックを発見することができたとてもいい経験でした！！</p><h3 id="h0b83f5686f">N+1クエリ問題</h3><p>これに関しては以前インターンしていた企業でRubyを利用していた先に全ての大きいデータの部分でテーブルの構成をいじってどのような時にJoinさせるのかどうかということをよくやっていたので関連テーブルの扱いなども慣れていると思ったのですが、Go言語でどのように関連テーブルにアクセスするのか？そしてのどのように利用してパフォーマンスの向上につながるのか？ということを忘れていた反面、対策不足ということもありあまり実行できませんでした。多少の部分はもちろん実装できたのですがそれ以上に過去にかなりできたからってたかをくくっていたかもしれません。久しぶりにやることはしっかりと復習をしてから取り組むようにしたいです…<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/581ec541828d46fdaecba71f5cdcd71e/kelly-sikkema-Oz_J_FXKvIs-unsplash.webp" alt=""></p><h2 id="h6e312b3deb">課題</h2><p>もちろんたくさんの学びの場でもありましたが、反省の場でもあります。<br>そして今まで自分にできなかったことや逃げてきたことが少しでも浮き彫りにあるようなことがたくさんあったのでそのこ部分もしっかりと復習できればと思ったとともに今でもわからないようならしっかりと学習を復習して進めておくべきだと改めて実感することができるようなとてもいい機会だったと思います。それにしてもここまでできないとは思ってなかったです笑</p><h3 id="h265673ccb1">キャッシュ問題</h3><p>これに正直自分が担当させていただき午後は時間を一番使って考えていたのですが、時間内までに解決することができませんでした。開発中に考えていたこととして時間内に実装できるライブラリや簡単なキャッシュ処理なら自前で実装なども視野に入れていて</p><ol><li>Redisなどのインメモリデータベースを用いたキャッシュ（以前のインターン先で経験済み）</li><li>データそのものにキャッシュ機能をかける（正しくはフレームワークそのものに利用）</li><li>サーバーに利用（これも同様にフレームワークサーバーにバインドして利用）</li></ol><p>の三つを考えていたのですが、これを実装して行ってみた結果、テストそのものがデータの一致から判断している部分の問題があってスコアそのものの前にベンチマークテストそのものを利用することができないという結果でした。よく考えてみるとキャッシュのデータの対象として1MBのデータをキャッシュするというものを利用していましたが毎度変更を感知するようなアルゴリズムが実装されていると現在考えておりキャッシュされたデータを優先的に利用される仕様になっていたため実際のテストデータとの差異が生まれてエラーが起こってしまったと考えております。この部分は本当に難しくデータベースというより低レイヤーの部分もたくさんと絡んでくると思うのでどっちにしろ勉強不足です。。。</p><h3 id="hd3382fa58f">トランザクション</h3><p>これは完全に忘れていたということでした。確かにコードを見るにデーターベースにアクセスしていて一つでも止まったらロールバックするような実装はされていなくもしあれでバグなどがあったらどうすることもできなかっただけではなくデバッグの際にも本当に役に立つと思うのでしっかりとここの部分は日頃から大切なデータだからこそ利用する価値があると改めて実感することができました。</p><h3 id="h3ad9878be4">リバースプロキシ</h3><p>これに関してはいまだに理解することができません。どちらかというとアプリケーション動向値うより外部のインターネットからサーバーへアクセスされる通信を中継する仕組みとなっておりフィールドプロキシと比較すると接続される方向が逆になる。。。となんとも難しい言葉を並べておりますが自分も理屈しか知らなくて実際にこのプロキシを利用したことがあるかというとそもそも普段から意識したこともなかったので勉強になりました。今後エンジニアとして成長していくには必要なことだなと感じました〜〜〜</p><h2 id="h8d78e14043">感想</h2><p>総評して心のこそから今回の大会には出れることができてまずよかったなと思っています。そして一緒に出場してくれた2人に本当に感謝をしたいと思っております。肝心の結果に関しても自分では絶対に達成することができないようなスコアを発揮することができたので本当に優秀なんだと思っています。2人のようなエンジニアリングを目指していけるようにしていきたいとともに自分にしかない強みもエンジニアとして何かしらはあると思っているので（ドキュメントを読んでその技術を取得するのがとんでもなく早いです笑）それをこれからどのように活かしていきたいのかを改めて考えていこうとおもいます。<br>そしてまた機会があれば出場したいと思います！！！！</p>

<h1 id="h447a27ab5b">I competed in ISUCON, which I had longed to do</h1><p>It has been a long time since I have been here.<br>But just for today, I want to try my hand at engineering! And out of a desire to have fun, I competed in ISUCON12 today with some friends from my internship!<br>Here's a reminder and a summary of what we left undone 🏆.<br>(This is written only to the best of my knowledge, so I would appreciate it if you could tell me if there are any mistakes.)</p><h2 id="h31979d0e51">What is ISUCON to begin with?</h2><p><a href="https://isucon.net/" target="_blank" rel="noopener noreferrer">Click here to visit the official website!</a><br>The following is a brief explanation.</p><blockquote>SUCON is a "Tuning Battle" in which the participants try to speed up a given web service to the limit within a set regulation, and is held under the management of LINE Corporation.</blockquote><p>(I don't know the details myself, lol). <br>The original title of the contest is ISUCON, which is an abbreviation for "speed-up contest", and anyone interested in programming can participate regardless of age.<br>Of course, the entry is very competitive, but you can find out more about it at 。。。。</p><h2 id="h8c1a16f7ea">Background</h2><p>I heard that some of my former interns and I were going to participate in ISUCON. We were talking about how we would like to participate in ISUCON, when one of them signed up for it! And he won the prize!<br>We are really grateful to the person who applied and to the two people who worked with us and invited us to participate!</p><h3 id="hbe835590ea">Members</h3><p>We competed as a team of three, which was the maximum number of people. In addition, due to the current climate, we had originally planned to gather together, but decided on a format where each person would be in his or her own private online environment.To be honest, and it had been so long since I had programmed that I had forgotten the methods, concepts, and conventions themselves. They respect my opinions and ideas and give me advice. It was a great experience for me, and I would like to spend more time on programming after that I can tune my performance more. I think it helped me to improve my motivation.</p><h3 id="he2f64c592e">Go Language Selection</h3><p>ISUCON has become such a competition that it's open to challenges in a variety of languages!<br>We chose Go language after considering our past ISUCON achievements and our current skill set.<br>I used to write a lot of code about half a year ago, but recently I have not been able to write much at all, partly because I have not been doing much programming. I think it was a very good choice of technology because it was very easy to work with and I had a lot of experience in the framework. And the other people were also using it well, so I thought it was as good as I expected.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e52854691b68413981b4e29e916dac7d/alex-kotliarskyi-QBpZGqEMsKg-unsplash.webp" alt=""></p><h2 id="hf27e9dc322">Memorandum</h2><p>The first thing I felt was that this is a far cry from the so-called "implementation" that I have been doing up to now. I think it's even more important if it's an individual product.<br>In my case, I have been focusing on how much time I can spend on architecture and how much time I can spend on writing easy-to-understand code and implementing functions, which is even more important for an individual product. Moreover, I have been involved in many performance-related projects around databases, so it was more like creating a 0 → 1 project by myself rather than using something I had already done technically and being able to use it. I was more interested in how I could improve the performance of ISUCON. In ISUCON, the focus is on how to improve performance, so of course there is nothing better than writing clean code, but you have to do more than that, you have to tune the code and get a score. I can't introduce all of them, so I'd rather call them problems.<br>I can't introduce all of them, so I will just summarize. In fact, the other two were doing more than I could grasp, so there are parts that I don't understand. Sorry.</p><h3 id="h6de5824f35">Building the Environment</h3><p>This is one of the most difficult parts. Of course, since this development is not a one-person job, it can be done in a container environment such as Docker, but in order to use a server, it is necessary to prepare a standby server, a production server, and so on. This is usually quite a difficult task, not only do you have to create a server for each number of people, but you also have to check if SSH connections can be made on the practice server for the production server, and register the key.<br>The team members set up the various settings in advance, and on the day of the practice, they even created a Makefile and made the necessary commands into an Alias for us. I was scared, but I did my best to rely on them. They also took care of everything related to the infrastructure environment and servers on the day of the event, so I was able to really concentrate on development😇.</p><h3 id="h232c772a32">Database tuning</h3><p>I think this is a must. This is essential because indexes allow us to do things like book searches, which speeds up the data structure for processing tables. So, if you are searching for a specific column, you will know what you want to look up and can speed up your search.<br>For more information, please look up something like "SQL INDEX" and you will find the article.<br>This is also important to understand the database and INDEX, because if you don't use it with a clear understanding of the database, performance may be adversely affected. Another friend of mine did all of this for me. He was excellent in improving the score, and he solved the problems very calmly, which made me think that I have a lot to learn from him and that I still have a lot to learn from him.</p><h3 id="h426120897b">Separation of connection databases</h3><p>By default, the database server and the application server are both built on the base server, and all data initialization, etc., is completed in that file. I thought that if I switched to a faster server, I would be able to use INDEX-implemented tables. I was in charge of this, but there was more of a disconnect from my image than I had expected, and because it was not the database that I had originally envisioned, I was able to make it quite difficult. I think I was able to implement it. I think I was able to implement it, although it was quite dirty and forceful. However, it was not so much that I was able to verify the actual operation perfectly (of course I knew it would be difficult in time), but I was able to discover a bottleneck for myself that I need to study more about the architecture of this part of the infrastructure once I settle down. It was a great experience!</p><h3 id="h77b9a1c8e7">N+1 query problem</h3><p>I had been working with Ruby at a company where I had interned before, and I had been doing a lot of work with large data tables, trying to figure out how and when to join them, so I thought I was familiar with how to handle related tables, but how do you access related tables in Go? How do you access related tables? I thought I was familiar with how to access related tables and how to use them to improve performance. I thought I was used to dealing with related tables, but I was not able to do it because I forgot how to access related tables in Go language and how to use them to improve performance. Of course, I was able to implement some parts, but more than that, I may have underestimated the importance of what I had done in the past because I had done it so well. I would like to make sure that I review what I have not done for a long time before I start working on it...<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/581ec541828d46fdaecba71f5cdcd71e/kelly-sikkema-Oz_J_FXKvIs-unsplash.webp" alt=""></p><h2 id="h1bf80b6e7a">Challenges</h2><p>Of course it was a learning experience, but it was also a time for reflection.<br>There were many things that I had not been able to do and things that I had been running away from that I wish I could have reviewed more thoroughly, and it was a very good opportunity for me to realize that if I still don't understand something, I should review my learning and make sure I do. I think it was a good opportunity for me. Still, I didn't expect to be able to do so much lol.</p><h3 id="hc562a1d758">Cache problem</h3><p>To be honest, I was in charge of this and spent most of the afternoon thinking about it, but I couldn't solve it by the end of the day. During development, I was thinking about libraries that could be implemented within the time frame, and if it was a simple cache process, I was considering implementing it on my own.</p><ol><li>Caching using an in-memory database such as Redis (I had already experienced this at a previous internship)</li><li>Caching on the data itself (or more correctly, on the framework itself)</li><li>Use it on the server (this is also used by binding it to the framework server)</li></ol><p>However, when I implemented and ran the test, I found that the benchmark test itself could not be used before the score itself due to a problem with the part of the test itself judging from the data match. When we thought about it, we used 1MB of cached data as the target of the cache data, but now we think that an algorithm that detects changes every time is implemented, and the cached data is preferentially used because it has become a specification. We believe that the error occurred due to a difference between the actual test data and the cached data. I think this part is really difficult and involves a lot of lower layers than the database, so I haven't studied it well enough anyway.</p><h3 id="ha5a68da6bb">Transaction</h3><p>I had completely forgotten about this. Looking at the code, it is true that there is no implementation that rolls back if one of the databases is stopped, and if there was a bug in the code, there was nothing we could do about it. I am now able to realize once again that it is worth using this part of the system because it is important data.</p><h3 id="h01e05fc4a2">Reverse Proxy</h3><p>I still don't understand this. It is more of a mechanism to relay the communication accessed from the external Internet to the server rather than the application trend value, and compared to a field proxy, the direction of connection is reversed. The most important thing to remember is that the field proxies are not only a way to access the server from the outside Internet, but also a way to relay the communication between the server and the application trend value. I felt that it is necessary for me to grow as an engineer in the future.</p><h2 id="h458e0d0ba6">Impressions</h2><p>Overall, from the bottom of my heart, I am very happy to have been able to participate in this year's tournament. I would also like to thank the two people who participated with me. I would like to aim to become an engineer like the two of them, and I believe that I have some strengths as an engineer that only I can have. I would like to try to become an engineer like the two of them, and I also think that I have some unique strengths as an engineer (I read documents and acquire the skills ridiculously fast lol).<br>And if I get another chance, I would like to compete again: ！！！！</p>

お久しぶりです。
このブログは本来エンジニアとしてのテックブログにしようと思っていたのですが
最近は完全に日常でのブログと化してました笑
本日は自分自身では初の参加となるISUCONというエンジニアの大会に参加してきました。
まさか大学生のうちにこのような正式なエンジニアの大会に参加するなんて夢にも見てなかったです。✋
今回はその興奮と備忘録を残したいと思って書きます！！

ISUCON12に出場してみた

I competed in ISUCON12.

（この記事で誤った情報などがありましたら報告いただけると幸いです🙇‍♂️）
※ Dockerで簡単に環境構築することができるハンズオンになっています！！
最近自分自身フロントエンドの勉強を中心にしています。
しかし、いまだにreduxはおろか簡単なstateの部分しか理解することができていません。。。。
以前、サービスを作った際にバケツリレーになってしまったことがあって
もうあんな思いはしたくないと考えているので今回は最近注目しているFacebook（Meta）が開発している
「Recoil」という状態管理ライブラリを自分で学習しつつハンズオンを試してみようと思います。

Next.js × TypeScript × Recoil での状態管理を学ぶためのハンズオン

Hands-on to learn state management with Next.js x TypeScript x Recoil

<h1 id="h9b047028ae">そもそも論</h1><p>最近コロナウイルスが絶賛流行っていて自粛生活の佐々木です🌳<br>最近少し忙しかったです。（言い訳でしかありません。）<br>自分自身、<a href="https://acvation.com/" target="_blank" rel="noopener noreferrer">acvation</a>というサイトを今年に入ってから本格的に開発をしています。<br>その中で自分がプロダクトとして最大限に提供したい価値として<br><strong>誰でも簡単に投稿することができて、UI的にも優れていくれるものに変換してくれるといったものが必要不可欠</strong>だと考えます。<br>その部分を考えたときに自分なりの要件として</p><ol><li>簡単にカスタマイズすることができる。</li><li>前回と比べて格段に投稿しやすいプロダクトにする</li><li>プレビューをさらに実用的にそしてフォーカス時などのパフォーマンスも落とさないようにする</li></ol><p>という部分を特に意識指定開発していこうと思っていたのが背景です。<br>また、実際にこの要件を満たすコードを書いていたところ詰まる部分などがとてもたくさんあり、<br>自分自身最初はそれほど難しいものではないと思っていたのですが、いざ開発してみると<br>ドキュメントのコードがうまく動かなかったりプレビューを導入するならではの難しさなどがあったので共有させていただきます。😀<br></p><h2 id="h88d3ef1cbe">実際に取り組んでみて</h2><p>実際に考えから開発にするまでは<strong>一週間</strong>ほどかかりました。（元々の予定は３日間ぐらいで完成できると思っていました。）<br>まず最初に「react リッチエディタ」のように調べてみたら<br>とても有名なdraft.jsというライブラリを見つけて<br>実績としても申し分なくドキュメントを読んでみても使いやすそうだったので使ってみました。<br>→ 世の中の誰かが作っていただいたライブラリなどを使用してみてよければプロダクトに落とし込むの本当に好きです笑<br></p><h3 id="hdc064bf0f8">実際に作ってみたんだけど？</h3><p>まずは簡単にドキュメント通りに進めてみましたが早速問題が起こりました<br><u>え、ツールバー自体は利用することができないの？？</u><br>というのもライブラリを入れてインポートすればデザイン周りも含め全てやってくれると思いましたが全然そんなことありませんでした笑<br>普段どれだけ頼っているのかがとても感じることができた瞬間でした。<br><br>そういうことなら自分で作ってみようと思ったところで実際にdraft.jsを中心としているものの<br>他のライブラリを多用してやってみた時にとてもしっくりくるものがあったのでそちらのスタイルシートを使って開発をしました。<br></p><h3 id="hee9c32d58b">やってみた感想</h3><p>実際に実装完了して現在は運用していますが　← 是非使ってみてください🔥<br>個人的にかなり難しい部分がとてもありました。<br>当初はただ単に入力された<strong>文字をhtmlに変換して表示させる</strong>というだけしか思っていなかったのですが<br>そのHTMLに変換するときに装飾された部分をどのようにプレビュー表示できるのかどうかという部分にかなり苦戦しました。<br></p><h3 id="h37f44fe987">どんなことあったの？</h3><p>例えばなんですけど</p><pre><code>//typeになっていないのが原因である。
// const editorRef = useRef&lt;Editor&gt;(null)
// ref設定をしないと意図しない挙動をする
// ref={editorRef}</code></pre><p>refの部分をしっかりと設定しなかった時に今までの文字が突然コマ切れのように表示されるようになったり。<br>こんな感じでどう分割して表示するかを考えていました。</p><pre><code>  const inlineStyle: DraftInlineStyle = editorState.getCurrentInlineStyle()
  console.log('class', inlineStyleHandler(inlineStyle))
  console.log('state', editorState)
  const splitHTML = (htmlTemplate: string) =&gt; {
    const split = htmlTemplate.split(/[]/)
    console.log(split)
  }</code></pre><p>さらにエディタの部分はしっかりとこだわりたかったので本当に利用する価値のある機能のみのミニマムな構成にしようと思いました。<br>そのためオプションの選択が難しくなってしまった。。。<br>また、実際にコンソールで見たときに自分なりのロジックなどや正規表現などを用いて分割することができたりしたのですが<br>どのようにそのロジックを文字変換に変更しようという部分はかなり難しく<br>コード的にも冗長な部分がとてもあるメソッドとなっており、メモ化できる部分もたくさんあるためまだまだ修正は必要そうです。。。</p><h1 id="h28b62bc2c0">今後の課題</h1><p>acvationの課題部分にも記述させていただきましたがまだまだ未完成な部分がとても多いと考えております。<br>その中で自分なりに特に注意したいものになっているのは</p><ol><li>デザイン部分が完全に自分の主観で作っているので本当にユーザーが使いたいと思うニーズを満たすことができているのか　←　やはりデザインのセンス😭</li><li>情報自体をステートで持っているのでもし途中で接続などが切れてしまったら再レンダリングされることになり入力していた情報が消えてしまう。</li><li>一つの処理の部分がそれぞれとてもウォッチしていて重いものになっているのでさらに高めることができるのではないのか</li></ol><p>などを特に考えております。<br>また、もっといいプロダクトよりのライブラリなども改めて調べてみるとありそうなので<br>とりえずこの機能は実装完了として<br>時間の余裕があれば是非再度付け加えたいと思っています。📝<br>また、プロダクト自体さらにユーザーに寄り添って使いやすいものになるように精進してきます。<br></p><pre><code>　これからは実際にどのようにコードを記述したかなども含めて共有することができればと考えているので楽しみにしてください！！　
また、少しずつわかりやすいように記述していけるように努めます。</code></pre>

自分のプロダクトに何が足らないか考えた時に今までのUI/UXを完全に無視したものをプロダクトとして作っていました。
draft.jsにカスタマイズを加えてリッチなエディタに仕上げています。
それもあって再現性がとても高いものではないエディタになってしまい、「誰でも簡単に記事を投稿することができるエディタ」を目指していたのに全く違うものになっていたのが現実です。
なので今回、自分なりに試行錯誤に結構の日数はかかってしまいましたが自作のエディタを作ってみました！！✏️
また、リアルタイムでパフォーマンスよく反映されるようにも調整して誰でも簡単に編集できるといったオリジナルです。
ぜひ、実際に触れてみて触ってほしいです！！こだわりいっぱいです。
今回はその備忘録です。

Sota Tech Blog.

Next.js + Firebaseを利用したハンズオン - 環境構築編

個人サイトの言語対応とレンダリングを考える

astroで個人サイトを改修した

コメント機能のためのSupabaseとレンダリング方法

ISUCON12に出場してみた