<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="ha0d1f59935">素直に嬉しかった</h1><p>本格的にTOEIC学習を始めてもう少しで一年になるところで無事に自分の目標としていた点数に達成することができた。<br>今まで何度も点数が落ちてしまうことがあって意味わからないほど悔しかったけど、無事に点数を取れた時の達成感は今まで生きてきて一番気持ちいいものだった。<br>狭い部屋の中で一人で喜んでいた記憶しかない。<br>もちろん、まだまだ継続してさらに高得点を取っていかなければいけないことに加え、これからのプログラミングライフの少しでもいい影響を与えることができればと思っている。<br>今後少しずつ今までの大変だったことや勉強法やマインドのなども共有できればと思っている。<br>そのためのブログです！📗<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fc48df66fca84784b954843ed80a6eba/IMG_3996.webp" alt=""></p>

<h1 id="hb94559db2d">I was honestly happy.</h1><p>I have been studying TOEIC for almost a year now, and I was able to successfully reach my goal.<br>I was so frustrated that I didn't know what to expect, but the sense of accomplishment I felt when I successfully achieved the score was the best feeling I have ever had in my life.<br>I can only remember being happy by myself in a small room.<br>Of course, in addition to the fact that I still have to continue to get even higher scores, I hope that I can have a small positive impact on my programming life from now on.<br>I hope to gradually share the difficulties I've had so far, my study methods, and my mindset in the future.<br>That's what this blog is for! 📗<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/fc48df66fca84784b954843ed80a6eba/IMG_3996.webp" alt=""></p>

ひたすら勉強してきた毎日がやっと終わった

無事に目標点数に達成しました！

We've successfully reached our target score!

<h1 id="h7871be0f8e">一括取得か分割取得か</h1><p>ここ最近、ブログの改修をしていく上でかなり悩んでいるテーマになっている。<br>現在は分割取得にしているが、改めて自分なりに調べたり考えたりした際に一括取得にすることもかなりありだと思ってきている。<br>その理由は自分の知見を改めて整理していこうと思う。<br>※繰り返しますが個人の経験上の知見です。間違いや参考文献などがあればアドバイスください🙇‍♂️</p><h2 id="h8cf98adad8">一括取得</h2><h3 id="h3ab24f6f50">メリット</h3><ol><li>取得したデータを一度に処理することができるため、途中でのデータ加工の煩わしさを軽減することができる。</li><li>処理したデータを容易に変更することができたりするので落とし所によってはどのようにデータをいじるかどうかという点ですごくコード的にも書きやすい</li><li>当然だが分割に比べてデータ取得回数が相対的に少なくなるため、ネットワークやAPIサーバーの負荷を減らすことにつながる。</li><li>データの取得という観点でだけで考えた場合にオフラインでの取得だった場合は一度に全てのデータを取得することができるため、アクセスの幅に大きく影響する。（ファイルをまとめたZIPフォルダをダウンロードしたりするのがいい例になっているかもしれない）</li></ol><h3 id="h7e4a670898">デメリット</h3><ol><li>取得するデータの量によっては、ネットワークやAPIサーバーに負荷を大幅に増加させてしまうことにつながることがあり結果的に処理時間が長くなってしまうことがある。</li><li>利用しているメモリの使用量が増加してしまうことによって、システム全体のパフォーマンスにも影響してしまう場合がある。長期的な目線で考えたときにかなりのメモリ大幅増加になりかねない。</li><li>頻繁なデータ更新を行うことになった要件な場合は、取得した時点でのデータが最新のものではない可能性になっていることがある。</li></ol><h2 id="h34e2502eb7">分割取得</h2><h3 id="h3ab24f6f50">メリット</h3><ol><li>一度にデータを取得するわけではないので、いくらデータ取得が膨大であろうと関係なしに分割してくれるのでメモリ消費量をおさせることができる</li><li>これも当然だが頻繁にデータ更新される場合でも、最新のデータを取得できる</li><li>ネットワークやAPIサーバーに負荷がかからないことが考えることができるようになり、結果的にシステム全体のパフォーマンスに影響を与えにくい。</li><li>APIサーバー側で、一度に大量のデータを処理するためのリソースやメモリなどが必要とならなくなるため、スケーラビリティに優れる。</li></ol><h3 id="h7e4a670898">デメリット</h3><ol><li>データ量によっては複数のリクエストを送ることになるため処理時間が増加する可能性がある</li><li>データの処理や取得が複雑になりがち</li><li>分割取得時の差異により、正確なデータを取得することができない可能性がある。（滅多になるとは思うが）</li></ol><h2 id="h8b500aca5a">使いどころ</h2><p>一括取得 .... データの更新が少なく、データ量が膨大ではない場合に適している。逆に条件に当てはまらない場合は取得データやシステム全体の負荷など大きくパフォーマンスの低下につながる可能性あり。<br>分割取得 .... データ更新が頻繁で、データ量は関係なし。ただしオーバースペックになりがちであり不必要にパフォーマンスを低下に繋げる。<br>結局はプロジェクトのスケーラビリティによるところが大きい。<br>おおよその必要な取得データ量を把握することができていればむしろ一括取得が優れているかもしれないが、下手にlimitで大量取得するぐらいなら分割取得することが無難であると思う。</p><pre><code>// デフォルト値...10 - limitパラメータがある場合はそれを利用なければデフォルト値
------------------------------
// 取得するデータ件数 ... 10
GET /api/data?limit=10 ... OK
GET /api/hoge ... デフォルト値が10のため - OK
GET /api/hoge?limit=100 ... 必要なデータ数は10でいいのに無駄に90件分の処理をしてしまう
------------------------------
// 取得するデータ件数 ... 100
GET /api/data?limit=10 ... 100の10件のみとなってしまうため分割取得
GET /api/hoge ... 上記と同じ理由
GET /api/hoge?limit=100 ... OK</code></pre><h2 id="ha55a8008da">迷っている理由</h2><p>一括取得は使いどころの条件を満たせばとても強力となりうる武器になっており、自分が開発しているブログなどの小規模かつ頻繁に更新頻度が高くないような要件ではぴったりな方法だと考えている。<br>また、一括取得に変更することで全てのページの最初のルートページのデータ取得時に関連のデータをすべて取得することができるので一覧ページが必要ではないことや現在のオブジェクトの総数を計算することができるといった様々なメリットや単純にコード的にも論理的に考えてとても開発しやすいものになるということは間違いない。<br>それを知った上での現在の開発についてはoffsetとlimitを利用した分割取得となっている。<br>もちろんページごとのデータ取得を行うことになるので一括取得に比べてデータの取得回数が増えることや一覧ページを作成しなければいけないことや関連テーブルのデータも一括取得することができないなどのデメリットはあるが、今後のスケーラビリティを考えると現在の規模では一括取得でも余裕でデータ量を持て余すぐらいだと思っている。<br>やがてこのブログが発展してデータ量が莫大になりパフォーマンスの低下の可能性を踏まえると最初から分割取得にしておき、少しでも現状以上のパフォーマンス低下を防ぎたいと考えている。<br>何度も言うが、もちろん現在の規模ではパフォーマンスがむしろ低下していることはわかるが長期的な目線で見れば分割取得の方へ変更すると思うので論理的に考えるなら現状のままでいいと思っている。</p><h2 id="h8d78e14043">感想</h2><p>取得時のメモリ使用量がパフォーマンスの低下につながるようだったら自動で分割取得に切り替えるみたいなことができればいいのだが、取得自体のタイミングを考えると絶対に無理。<br>現在は今後の発展も踏まえて分割取得を選択してページ数なども増やしてしまっているが、開発のフェーズに応じてまた見直す機会を作ることができればと思う。</p>

<h1 id="hc9b2f9a0db">Bulk acquisition or split acquisition?</h1><p>This has been a subject that I have been struggling with quite a bit recently as I have been revamping my blog.<br>Currently, I am taking a split acquisition, but upon reexamining and thinking about it in my own way, I am beginning to think that it is quite possible to take a lump-sum acquisition.<br>I will explain the reasons for this in a separate blog entry.<br>*Again, these are findings from personal experience. Please advise me of any errors or references. 🙇‍♂️</p><h2 id="hbc3c79d237">Batch acquisition</h2><h3 id="h56314cc279">Advantages</h3><ol><li>Acquired data can be processed at once, reducing the hassle of data processing in the process.</li><li>Since the processed data can be easily changed, it is very easy to write code in terms of how the data can be modified depending on the drop location.</li><li>Naturally, the number of data acquisitions is relatively smaller than in the case of splitting, which leads to a reduction in the load on the network and API server.</li><li>When considered only from the standpoint of data acquisition, if the acquisition was offline, all data can be acquired at once, which has a significant impact on the breadth of access. (Downloading a ZIP folder of files might be a good example)</li></ol><h3 id="h323d3f9d4d">Disadvantages</h3><ol><li>Depending on the amount of data to be retrieved, it may lead to a significant increase in load on the network or API server, resulting in longer processing times.</li><li>The increase in the amount of memory used may also affect the overall system performance. This can be a significant memory increase when considered from a long-term perspective.</li><li>If the requirement is to perform frequent data updates, the data may not be up-to-date at the time of acquisition.</li></ol><h2 id="h96f55236dc">Split acquisition</h2><h3 id="h56314cc279">Advantages</h3><ol><li>Since data is not acquired all at once, it does not matter how large the data acquisition is, the data is divided into segments, thus memory consumption can be reduced.</li><li>The latest data can be acquired even if the data is frequently updated, which is also a matter of course.</li><li>It is possible to consider that the network and API server will not be overloaded, and as a result, the overall system performance will be less affected.</li><li>Superior scalability, as the API server will no longer require resources, memory, etc. to process large amounts of data at a time.</li></ol><h3 id="h323d3f9d4d">Disadvantages</h3><ol><li>Processing time may increase due to the need to send multiple requests depending on data volume</li><li>Data processing and acquisition tends to be complex</li><li>May not be able to acquire accurate data due to differences during split acquisition. (although this is likely to happen infrequently)</li></ol><h2 id="hfee32a1c2b">where to use</h2><p>Batch acquisition .... Suitable when data updates are few and the data volume is not huge. Conversely, if the conditions do not apply, it may lead to significant performance degradation in terms of acquired data and overall system load.<br>Split acquisition .... Frequent data updates and data volume is irrelevant. However, it tends to be over-specified and unnecessarily degrades performance.<br>In the end, it depends largely on the scalability of the project.<br>If you know the approximate amount of data you need to acquire, batch acquisition may be superior, but if you want to acquire a large amount of data by limiting it, it is safer to acquire the data by splitting it.</p><pre><code>// default value . .10 - use limit parameter if available, otherwise default value
------------------------------
// Number of data to retrieve ... 10
GET /api/data?limit=10 ... OK
GET /api/hoge ... because the default value is 10 - OK
GET /api/hoge?limit=100 ... I wasting my time processing 90 cases when I only need 10.
------------------------------
// Number of data to retrieve ... 100
GET /api/data?limit=10 ... Split acquisition because only 10 of 100 are available.
GET /api/hoge ... Same reason as above
GET /api/hoge?limit=100 ... OK</code></pre><h2 id="h032311b394">Reasons for hesitation</h2><p>Bulk acquisition can be a very powerful weapon if the conditions for its use are met, and I think it is the perfect method for small-scale, infrequently updated requirements such as the blog I am developing.<br>In addition, changing to batch retrieval has various advantages, such as the fact that all related data can be retrieved at the time of retrieving data on the first root page of all pages, so a list page is not necessary, and the total number of current objects can be calculated, as well as the fact that it is simply very easy to develop from a code and logical point of view. There is no doubt that it will be very easy to develop.<br>Knowing this, the current development is based on the split acquisition using offset and limit.<br>Of course, there are some disadvantages compared to batch acquisition, such as the fact that the number of times data is acquired increases, a list page must be created, and data from related tables cannot be acquired in a batch. However, considering the future scalability, we believe that the amount of data is more than enough even with batch data acquisition at the current scale.<br>However, considering the future scalability of this blog, I think that even with batch data acquisition, there is more than enough data to handle the current scale of data.<br>As I have said many times before, of course I understand that the performance is rather low at the current scale, but from a long-term perspective, I think I will change to the split-acquisition method, so logically speaking, I think it is fine as it is now.</p><h2 id="h458e0d0ba6">Impressions</h2><p>It would be nice if it were possible to automatically switch to split acquisition if the amount of memory used during acquisition leads to performance degradation, but this is absolutely impossible considering the timing of acquisition itself.<br>Currently, we have chosen to use split acquisition and have increased the number of pages in consideration of future development, but we hope to have another opportunity to review it depending on the phase of development. Translated with www.DeepL.com/Translator (free version)</p>

結局はスケーラビリティによる

データ取得について考えてみる

Consider data acquisition

<h1 id="h860058ed7f">個人的にもさすがに納得</h1><p>3月もついに上旬に差し掛かり最近季節の変わり目かなとすごく感じる。<br>天気も晴れの日がここ毎日のように続いているしこれからも継続してほしいなと思っている！<br>早咲きの桜の方が咲き始め、実際に近くで見てみるととても綺麗だった🌸<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/5c5c4979c4f341969d705bb22b6760ca/69492AE5-1DB0-4352-8BD7-66FD4636E954_1_105_c.jpeg" alt=""></p><h2 id="hc69c85bcf9">背景</h2><p>まず、前回でさらにわかりやすくなってはいたがまだまだ改善の余地があると思ったのが理由になる。<br>さらに他のテックブログなども見てみると均等にわかりやすくなっているレイアウトも多々あったため、自分なりに修正して新しく利用しなおしたいと思った。<br>さらに、自分自身もこのレイアウトでブログを書いていると修正したくてたまらないのでやれる時にもう一度自分の納得するようなものに変更することができればいいなと思った。</p><h2 id="h01cb3c76e3">主な変更点</h2><ol><li>カテゴリーリストの追加</li><li>ルートページの大幅刷新</li><li>APIからのデータ取得周りの調整</li></ol><h3 id="hf739948d85">カテゴリーリストの追加</h3><p>これは最初の課題であり、前回も進めていこうと思っていた事項の一つ。<br>カテゴリー部分のデザイン周りもどのようにするべきかどうかが本当に悩んでいたが、改修する前までにカテゴリーページ自体は存在していたのでその時の機能を継承しつつ、新しく追加することができるようになったのでこれは個人的に大きな変更点とすることができたと思っている。</p><h3 id="h515379d375">ルートページの大幅刷新</h3><p>これも実際に見てもらえればわかるようなことになっている。<br>今まではカード型のデザインになっていたのに対して今度からはリスト型もミックスしてよりシンプルにわかりやすく自分が考えるデザインへ変更した。<br>またここのページがこのブログの顔となる部分になるのでここのところはさらにこだわっていきたいなと考えている</p><h3 id="h2598933a1b">APIからのデータ取得周りの調整</h3><p>これは次の記事などで記述させてもらおうと考えているが現在もかなり悩んでいる。<br>引き続きブログ継続のためにどのようなデータ取得が自分のブログには適しているかどうかを模索していきたい。<br>最近こういう部分も考えることができればよりユーザー経験が向上することができるように感じる。<br>気持ちいいしたまらない...</p><h2 id="h077e137261">残りの課題</h2><p>全てのページのデザイン周りが完璧でないのとまだまだ細かい部分に関しては全然できていないと思っている。<br>さらに１番の課題としては詳細ページの部分のデザインがかなり悪く目立ってきてしまっていると感じている。<br>今までは気になっていなかったが応急処置のようなデザインになっているのでそこの部分も修正することができるようになっている。</p><h2 id="h8d78e14043">感想</h2><p>最近、コンピューターサイエンスの部分をしっかりと学んでいきたいと思っているのにも関わらずあまり挑戦することができていないような気がする。ブログの改修ばかりをやっておりかなり凝ってしまうタイプなので自分の納得いく部分まで切り詰めたい<br>長く使っていくものでもあるので....<br>また、残りの期間も少しずつタイムリミットになっているのでそこの部分もしっかりと念頭にいれて1日1日を有意義な時間となるように後悔しないような期間を過ごしたい</p>

<h1 id="hb667bdd32f">Personally, I am indeed convinced.</h1><p>As we finally approach the beginning of March, I'm really feeling the change of seasons lately.<br>The weather has been sunny every day here, and I'm hoping it continues to be so!<br>The early blooming cherry trees have started to bloom, and it was actually quite beautiful to see them up close🌸.<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/5c5c4979c4f341969d705bb22b6760ca/69492AE5-1DB0-4352-8BD7-66FD4636E954_1_105_c.jpeg" alt=""></p><h2 id="h8c1a16f7ea">Background</h2><p>First of all, the reason is that I thought there was still room for improvement, although it was even easier to understand last time.<br>Furthermore, when I looked at other tech blogs, I found many layouts that were equally easy to understand, so I wanted to modify the layout in my own way and use it anew.<br>Furthermore, when I was writing my own blog using this layout, I was eager to modify it, so I thought it would be good if I could change it again to something I would be satisfied with.</p><h2 id="h4c77cf6b37">Major changes</h2><ol><li>Addition of category listings</li><li>Major revamp of the root page</li><li>Adjustments around data acquisition from API</li></ol><h3 id="h56fa701bc5">Addition of category listings</h3><p>This was the first task, and one of the items we were planning to proceed with last time.<br>I was really struggling with how the design of the category section should be done, but since the category page itself existed before the renovation, I was able to inherit the functionality of that page and add a new one, so I think this could be a major change for me personally.</p><h3 id="h37574298c7">Major revamp of the root page</h3><p>This is another thing that you can actually see.<br>The design of the route page has been changed from a card-type design to what I consider a simpler and easier-to-understand design with a list-type design mixed in.<br>Also, this page will be the face of this blog, so I would like to pay more attention to this part.</p><h3 id="h0c7530f5a1">Adjustment of data acquisition from API</h3><p>I am still struggling with this issue, which I will describe in my next post.<br>I would like to continue to explore what kind of data acquisition would be suitable for my blog to continue.<br>I feel like I can improve the user experience if I can think about these aspects lately.<br>It feels good and irresistible...</p><h2 id="h9a5912e57d">Remaining issues</h2><p>The design of all the pages is not perfect, and I don't think I've done much in the way of detail yet.<br>The most important issue is that the design of the detail pages is becoming noticeably worse.<br>This was not a concern before, but it is now a first aid measure so that we can fix that part as well.</p><h2 id="h458e0d0ba6">Impressions</h2><p>Lately, I feel like I have been wanting to learn more about the computer science part of the project, but I haven't been able to challenge myself much. I'm all about blog modifications and I'm the type of person who gets pretty elaborate, so I'd like to cut down to the parts I'm comfortable with.<br>It's also something I'll be using for a long time: ....<br>Also, I want to spend the rest of the year with no regrets so that I can make the most of each and every day.</p>

結局自分が納得できるのが落ち着く

本当に最後のデザイン改修

Truly the last design renovation

<h1 id="hea91cee78d">ブログとしての使用感を上げるため</h1><p>今回もご覧いただきありがとうございます！<br>最近ようやく春って感じで来ているのでかなり充実した日々になっていますね〜！<br>しかも最近快晴と来ています。もう最高です🌞</p><h2 id="hd92040d0df">きっかけ</h2><p>昨日、本当に一年ぶりくらいにプログラミングを再開しました。<br>この期間は記事でも散々投稿させていただいていますがTOEIC学習を行っていたため、一切のコンピュータ関連の学習および開発を忘れて取り組んでいた背景があります。<br>そして昨日再開したのですが、久しぶりに軽いことからやっていこうと思ったのでその矢先にずっと修正課題だと考えていたブログの使用感やデザイン周りの調整をしようと思いました！</p><h2 id="h9eccdedcb0">デザインの振り返り</h2><p>まず今までのデザインを振り返ってみると<br><strong>初代</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/746dadbe73204d138a9f94c1e6563779/%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-03%2014.07.58.webp" alt=""><br><strong>2代目</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9a5fc8bb00104719a04a565a80be0d8b/%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-03%2014.08.48.webp" alt=""><br><strong>現在</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d5a9c75f0e4d4892912383de5b8aabb4/%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-03%2014.23.25.webp" alt=""><br>となっており、どのようなデザイン部分がより見やすいかを模索しつつ、バグなどは極力減らしつつ進めています。</p><h2 id="h81fe8ce460">主にやったこと</h2><ol><li>ダークモードの追加</li><li>遷移先構成の統合</li><li>全体的なUXの向上</li></ol><h3 id="h09b07b24be">ダークモードの追加</h3><p>多分これが一番目に見えてわかりやすい変化になっていると思います。<br>自分のブログはtailwindCSSとSCSSを使っているので、かなり柔軟に色の変化なども出しやすかったです！<br>これは元々自分が必要で自分の使うツールは全てダークモード化されているので自分のブログもしたいと思いました。<br>さらに、reduxにでダークモードの有無の状態管理を使っているのであまり難しくなくスムーズに実装することができました</p><h3 id="h868da12fc9">遷移先構成の統合</h3><p>これも前のブログを見ていただいていた方ならわかるかもしれませんが、メニューバーは削除しました！<br>理由としては自分もそうですが見る立場で考えたらメニューバーを通さず流動的に記事を見ていくと思ったからです。<br>さらに翻訳とダークモードのみを残すことによってさらに使いやすくなっていると思います。<br>そして他のページの遷移は極力減らしてかつ、パフォーマンスはなるべく落とさないということを重視しました。<br>なので検索などもホーム画面でできるように統合しました。（ここの部分が多分一番大変だった...）</p><h3 id="hfabbc0eaa7">全体的なUXの向上</h3><p>これは完全に自分の肌感です。<br>以前と比べて、かなりやりたいことを直感的に行うことができるようになったなと個人的には感じています。<br>さらに遷移画面も極力減らしたのでやりたいことをより簡単にできるようになったと思います！<br>ページが無題に多い総合的なことはこのブログには合わないですね....</p><h2 id="ha214098e44">まとめ</h2><p>しかし、まだ課題があって以前あったカテゴリー部分は取り除いてあります。<br>これに関しては実装課題ということにしておいて今の状態でデプロイしてしまいました！<br>時間があるときに取り組んでいこうと思っています。<br>実装に関してはあまり難しくないように頭の中の想定ではあるので思い立ったら多分やります。</p>

<h1 id="ha8846b99d8">To improve its use as a blog</h1><p>Thanks again for taking a look at this one!<br>It's finally starting to feel like spring these days, so my days have been pretty full~!<br>And it's been sunny and sunny lately. It's already the best 🌞.</p><h2 id="hee8bc9bed6">Trigger</h2><p>Yesterday, I resumed programming for the first time in about a year.<br>As I have posted many times in my articles, I had been studying for the TOEIC during this period, so I had forgotten about any computer-related learning and development.<br>I decided to start with something light for the first time in a while, so I decided to make some adjustments to the feel and design of the blog, which I've been thinking of fixing for a long time!</p><h2 id="h9baf8654dd">Design Reflection</h2><p>First, let's look back at the designs to date<br><strong>1st generation</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/746dadbe73204d138a9f94c1e6563779/%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-03%2014.07.58.webp" alt=""><br><strong>Second generation</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9a5fc8bb00104719a04a565a80be0d8b/%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-03%2014.08.48.webp" alt=""><br><strong>Current</strong><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/d5a9c75f0e4d4892912383de5b8aabb4/%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-03%2014.23.25.webp" alt=""><br>We have been seeking for the best design parts to make it easier to see, while reducing bugs as much as possible.</p><h2 id="h55ad71e7ed">Main things we did</h2><ol><li>Addition of dark mode</li><li>Integrated transition destination configurations</li><li>Improved overall UX</li></ol><h3 id="he88b47ab41">Add dark mode</h3><p>This is probably the most visible and obvious change.<br>My blog uses tailwindCSS and SCSS, so it was pretty easy to be flexible and add color changes!<br>I originally wanted to do this for my own blog as well since I needed it and all the tools I use are dark mode enabled.<br>In addition, I used redux to manage the state of the dark mode, so it was not too difficult to implement smoothly.</p><h3 id="ha2d9254463">Integration of destination configurations</h3><p>If you've been following my previous blog, you might know that I removed the menu bar!<br>The reason for this is that I, as well as the viewer, thought that I would be able to view articles fluidly without going through the menu bar.<br>Furthermore, by leaving only the translation and dark mode, I think it has become even easier to use.<br>I also focused on minimizing the number of transitions to other pages, while keeping the performance as low as possible.<br>We also integrated search and other functions on the home page. (This part was probably the hardest part...)</p><h3 id="haae052060c">Improvement of overall UX</h3><p>This is completely out of my own skin.<br>Compared to the previous version, I personally feel that it is now possible to do what I want to do quite intuitively.<br>Plus, I've reduced the number of transition screens as much as possible, which I think makes it easier to do what I want to do!<br>Comprehensive with a lot of untitled pages is not a good fit for this blog. ....</p><h2 id="he26af36bce">Summary</h2><p>However, there are still some issues and the category section that was there before has been removed.<br>I've left this one as an implementation issue and deployed it in its current state!<br>I will work on it when I have time.<br>I have an assumption in my head that it shouldn't be too difficult to implement, so I'll probably do it when I think of it.</p>

あとでご報告させていただきますが、これからは少しズクブログの更新頻度が高くなっていくと思うのでご了承いただけると幸いです🙇‍♂️
最近ブログの構築について改めて見直していたのですが思ったより酷いものになっているなと思い、昨日の夜中に頭ガンガンで構築し直しました！
やっぱり自分が納得構成の方がテンション上がりますね〜！！

Sota Tech Blog.

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

無事に目標点数に達成しました！

データ取得について考えてみる

本当に最後のデザイン改修

よりブログっぽく構築し直した