<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="hd0ce9b56c4">英語勉強の真っ只中で念願のISUCONに出場してみた</h1><p>お久しぶりです。<br>そして現在も絶賛英語の勉強を継続中です！！<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="h14188bd7b7">I competed in ISUCON, which I had longed to do in the midst of my English studies.</h1><p>It has been a long time since I have been here.<br>And I'm still studying English to rave reviews!<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, I was fully committed to English until yesterday, 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 my English study is over so 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.

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

ISUCON12に出場してみた

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

デザインもパフォーマンスもいいおしゃれなエディタを作りました。