<h2 id="h64c4861f32">フロントエンドの状態管理についてまとめる</h2><h4 id="h2d62e9bc20">参考にした記事</h4><ul><li><a style="color:#1995b7" href="https://zenn.dev/gagaga/articles/state-" target="_blank" rel="noopener noreferrer"><strong>「状態管理」って何？</strong></a></li><li><a style="color:#1995b7" href="https://zenn.dev/yoshiko/articles/607ec0c9b0408d" target="_blank" rel="noopener noreferrer"><strong>「3種類」で管理するReactのState戦略</strong></a></li></ul><p><br>最近フロント、バック、スマホアプリなど色々と関係なく触ってきましたが、自分としては一通り触って満足したので、これからはフロンエンドをメインに勉強を進めていきます。<br>まずその第一歩として、ZennやQiitaなどを見ているとよく耳にする、『状態管理』について勉強しました。<br>一通り勉強したので、今回は自分のアウトプットをメインにブログ書いていきます。<br>では早速本題に入っていきます。<br></p><h3 id="h4e3ca66682">そもそも『状態管理』とは？</h3><p>自分はまずこういった根本的な部分の理解が浅い傾向にあるので、自分の認識確認の意味を込めて調べました。<br>そして調べた結果状態管理とは、『<strong>どこに・どうやって状態を持つのか？というテーマのこと</strong>』らしいです。<br>これを見た時の自分は、「？？？」って感じでした。さっぱりわからないというわけではいが、完全に理解もできていない状態。<br>もっとわかりやすい説明があるかもしれないと思い、引き続き探しました。<br>そして別の記事を見つけ、そこでは『<strong>データを作成/更新した後、更新せずにページを更新する方法</strong>』であると記されていました。<br>「？？？」<br>僕の中の？はまだ解けません。<br>引き続き調べても、『状態管理』を一言でいい感じに表すものはありませんでした。<br><br>そこで自分は「これは体で覚えるべきものだな」と切り替え、概念理解から、『Reactで状態管理を上手に扱うにはどうすればいいのか？』を考えるようにしました。<br>そこで見つけた素晴らしい記事が、<a style="color:#1995b7" href="https://zenn.dev/yoshiko/articles/607ec0c9b0408d" target="_blank" rel="noopener noreferrer"><strong>「3種類」で管理するReactのState戦略</strong></a>です。<br>ここではReactの状態管理を三つに分類して考え、さらにそれぞれでおすすめのライブラリも紹介してくださっています。<br>ただわからない単語などが自分の勉強不足なので多々ありました。<br>そこで、簡単にですが記事で出てきた3単語をまとめてみました。<br>（Zennのスクラップで書いた内容をそのまま持ってきました。）<br></p><h3 id="h0ac24acf39">Server Data Cache (SWR)</h3><blockquote>「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」</blockquote><p>この『管理する必要のあるGlobal State』を小さくするために使われるのがSWR。<br>自分はまだ軽くしか使ったことがないのであんまり恩恵がわからないが、今後使うことは必ず来ると思う。</p><h3 id="hc53a89d627">Global State (Recoil or Valtio)</h3><blockquote> Global Stateから1の手法によってサーバーデータのキャッシュを取り除いたあとにも、クライアントに必要ないくつかのGlobal Stateが残ります。 今のプロジェクトでは、「ページをまたいで保持し続ける必要のあるState」をGlobal Stateとして定義しています。例えば認証情報や、ページをまたいで表示する必要のあるToast、継続してユーザーに知らせ続ける必要のあるバックグラウンド処理の進行状況などです。</blockquote><p>Global Stateが使われる身近な例で良さそうなのはTwitterかなと。<br>認証情報を保持したまま色々なページを行ったり来たりするので（もしかしたら違うかも）<br>ライブラリでRecoil or Valtioとしているのは、よしこさんは記事内でRecoilを推していますが、別の方がValtioを推していたためです。<br>自分がまだ触っていなくてなんとも言えないため、後で両方とも触ってみたいと思います。</p><h3 id="hf520b9c562">Local State (useState)</h3><blockquote> ページをまたいで保持する必要のないStateは単純に各Component内でuseStateを使って管理しています。</blockquote><p>今の自分はServer Data CacheもGlobal Stateも使ったことがないので基本全部Local State (useState)で事足りてた。<br>けど今考えるとGlobal Stateとか知らなかっただけで使う場面あったなーと思ってます。<br><br>Server Data Cache、Global State、Local Stateの三つに関しては、割とすんなり理解できました。<br>今回はコードの書き方よりも、『Reactの状態管理』をある程度理解することが目的だったので、目標達成と言ってもいいのではないでしょうか。<br>後は実際に自分でそれぞれのライブラリを使ってみます。<br></p><h2 id="ha214098e44">まとめ</h2><p>さて、今回の内容はこれで以上です。<br>結構色々と調べたつもりですが、間違ってる可能性も大いにありますので、もしお気づきになられた方がいらっしゃいましたらTwittterなどでご連絡いただけますと幸いです。<br>ちなみに、今後は以下の内容についてもブログを書く予定です。</p><ul><li>Reactのテスト開発について</li><li>TypeScriptの型応用編</li></ul><p>後は、開発をしていく中ででたちょっとしたことをブログに書いていけたらと思ってます。<br>今年は月に最低1本更新が目標です😊<br><br>それではお疲れ様でした。<br></p><h3 id="h8e2de98202">状態管理系ライブラリを実際に触ったリポジトリ(随時更新)</h3><ol><li>Valtio : <a href="https://github.com/code-yy/lesson-valtio" target="_blank" rel="noopener noreferrer">https://github.com/code-yy/lesson-valtio</a></li></ol><p><br><br><br></p>

今回は状態管理について色々と調べたので、アウトプットと共有の意味を込めてブログを書きました

フロントエンドの状態管理についてまとめる

<h2 id="h8d027c8ed3">はじめに</h2><p>CSR/SSR/SSG/ISRの内容に関しては、ずっとブログで書こうと思っていたのになかなか一歩が出なかった今日この頃ですが、年末ということもあり、この機会に頑張って書いていこうと思います。<br>さて前置きはこんなところで、早速内容に入っていきます。<br><strong>この記事でやらないこと</strong></p><ul><li>CSR/SSR/SSG/ISRを使っての開発方法（今回はCSR/SSR/SSG/ISRとはこういうものだ、こう違うのだっていう内容です）</li></ul><p><strong>前提条件</strong></p><ul><li>Next.jsを使用すると考えて書きます</li><li>SSGはタイトルでは三文字の方が綺麗なのでSSGにしてますが、文章中ではSGで書いてます。（公式がSGなので。ややこしいことしてすみません。）</li></ul><h2 id="hea165c2542">CSR/SSR/SSG/ISRとは</h2><h3 id="h25fe895df0">CSR</h3><p><code>Client Side Rendering</code> = <code>クライアント側でのレンダリング</code><br>CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。<br>全てがクライアント側で完結するので、実装も運用もシンプルです。<br>しかし、CSRには以下のようなデメリットがあります。</p><ul><li>クライアントのリクエストに対して空のHTMLを返すため、SEOとOGPに対応できない</li><li>クライアント側でJSを実行するため、初期表示が遅い（初回以降のページ遷移は高速）</li></ul><p><span style="color:#333333">※ちなみに、CSR で配信されているアプリケーションを一般的に&nbsp;</span><strong style="color:#333333">SPA（Single Page Application）</strong><span style="color:#333333">と呼びます</span><br></p><h3 id="hd9bd67a9a7">SSR</h3><p><code>Server Side Rendering</code>=<code>サーバ側でのレンダリング</code><br>先ほど上げたCSRの問題点を解決してくれるのが、SSRです。<br>SSRではクライアントのリクエストに対してサーバ側でデータを取得してHTMLを生成し、それを返します。<br>サーバ側でHTMLを生成するため、SEOとOGPに対応可能ですし、初期表示も高速です。<br>「そうか！ならSSRを使ってサイトを作るのがベストなんだな！」<br>って思った方、<br>以下はNext.js公式の文章を抜粋しました。</p><blockquote><strong style="background-color:#ffffff">Server-side Rendering:</strong>&nbsp;The HTML is generated on&nbsp;<strong style="background-color:#ffffff">each request</strong>. To make a page use Server-side Rendering, export&nbsp;<code>getServerSideProps</code>. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.<br>「スタティック・ジェネレーション（SG）よりもパフォーマンスが落ちるので、<strong style="color:#292c32;background-color:#ffffff">絶対に必要な場合</strong><span style="color:#292c32">のみ、これを使用してください。</span>」</blockquote><p>公式から言われてますね。必要な場合のみ使えと、基本SGを使えと。<br>ただし、常に最新の情報を取得したい場合(YoutubeやTwitterのようなアプリ)では、SGよりもSSRの方が良いらしい（SSRを使ったことがないのでなんとも言えないです😰）<br></p><h3 id="h6ee860c9a5">SSG(SG)</h3><p><code>Static Site Generation</code>=<code>静的サイト生成</code><br>（SGは<code>Static Generation</code>）<br>SSG はビルド時に HTML などのコンテンツが生成され、各リクエスト時に再利用してブラウザに渡す手法です。<br>CSR・SSR はリクエスト時にビルドを行なっていましたが、SSG は事前に作成された静的ファイルを返すだけなので表示速度が CSR・SSR に比べ高速です。<br>「そうか！ならSGを使ってサイトを作るのがベストなんだな！」<br>って思った方...間違ってはいませんが、もっと上があります。<br>と言うのも、SGだけだと、<span style="color:#333333">ページの更新時にアプリケーション全体をビルドしないといけないためページ数が多い大規模なアプリケーションには不向きだからです。</span><br>この問題を解決してくれるのが、ISRです。<br></p><h3 id="h12b8f71f97">ISR</h3><p><code>Incremental Static Regeneration</code>=<code>定期的な静的再生成</code><br>ISRではgetStaticPropsの<span style="color:#333333">revalidateオプションを使います。</span><br><span style="color:#333333">例えば、revalidateを5に設定すると、5秒ごとに</span><strong style="color:#333333">最大1回</strong><span style="color:#333333">の更新が可能になります。</span><br>ただし、ISRでは<span style="color:#333333">revalidateで指定した時間が経過しないと古い情報が返されることになるので、常に最新の情報を表示する必要があるシステムには向いていません。</span><br><span style="color:#333333">この場合は先ほども言った通りSSRを使いましょう。</span><br><span style="color:#333333">ではいつ使われるのか？？</span><br>その際たる良い例として、Zennがありました。作者であるcatnoseさんがブログを書いてました。<br>https://zenn.dev/catnose99/articles/8bed46fb271e44<br>（尚、現在はVercelからGoogle Cloudに移行したようで、ISRは使っていないそうです。現在2022/12/27）<br><strong style="color:#333333">ユーザー生成でコンテンツ更新がそこそこの頻度であるものの、必ずしも最新であることは求められないシステム</strong><span style="color:#333333">がISRにぴったりのようですね。</span><br></p><h2 id="ha214098e44">まとめ</h2><p>さて今回は、CSR/SSR/SSG/ISRについてブログを書きました。<br>個人的感想しては、「なんとなく理解してた部分を、最低限理解できた」気がします。<br>SGに関しては、Next.jsを触って「ビルド時に色々やってる」「他と比べて圧倒的に早い」「CSRではSEO対策できないけど、SG使えばSEO対策できる！」みたいなほんとに適当なことしか知らなかったです。<br>SSRに関しては今回調べて初めて内容を理解しました😭<br>まあそれでも間違って理解している部分や、まだ理解しきれていない部分もあるかと思いますので、随時この内容も更新されるかなと思います。<br></p><h2 id="he45680f0bc">参考記事</h2><p>最後に参考にした記事を載せておきます。（かなりたくさん読みました。）<br><a href="https://nextjs.org/learn/basics/create-nextjs-app?utmsource=next-site&amp;utmmedium=homepage-cta&amp;utm_campaign=next-website" target="_blank" rel="noopener noreferrer">https://nextjs.org/learn/basics/create-nextjs-app?utm</a><a href="https://nextjs.org/learn/basics/create-nextjs-app?utmsource=next-site&amp;utmmedium=homepage-cta&amp;utm_campaign=next-website" target="_blank" rel="noopener noreferrer"><em>source=next-site&amp;utm</em></a><a href="https://nextjs.org/learn/basics/create-nextjs-app?utmsource=next-site&amp;utmmedium=homepage-cta&amp;utm_campaign=next-website" target="_blank" rel="noopener noreferrer">medium=homepage-cta&amp;utm_campaign=next-website</a><br><a href="https://zenn.dev/adachi/articles/105dac5573b2f5" target="_blank" rel="noopener noreferrer">https://zenn.dev/a</a><a href="https://zenn.dev/adachi/articles/105dac5573b2f5" target="_blank" rel="noopener noreferrer"><em>da</em></a><a href="https://zenn.dev/adachi/articles/105dac5573b2f5" target="_blank" rel="noopener noreferrer">chi/articles/105dac5573b2f5</a><br><a href="https://zenn.dev/catnose99/articles/8bed46fb271e44" target="_blank" rel="noopener noreferrer">https://zenn.dev/catnose99/articles/8bed46fb271e44</a><br><a href="https://zenn.dev/bitarts/articles/37260ddb28ae5d" target="_blank" rel="noopener noreferrer">https://zenn.dev/bitarts/articles/37260ddb28ae5d</a><br><a href="https://shimablogs.com/spa-ssr-ssg-difference" target="_blank" rel="noopener noreferrer">https://shimablogs.com/spa-ssr-ssg-difference</a><br><a href="https://serip39.hatenablog.com/entry/2020/08/23/225000" target="_blank" rel="noopener noreferrer">https://serip39.hatenablog.com/entry/2020/08/23/225000</a><br><a href="https://qiita.com/amakawa_/items/e7d0720e1ab8632769bf" target="_blank" rel="noopener noreferrer">https://qiita.com/amakawa_/items/e7d0720e1ab8632769bf</a><br><a href="https://qiita.com/Nishi53454367/items/c49d859f32f7c4708c04" target="_blank" rel="noopener noreferrer">https://qiita.com/Nishi53454367/items/c49d859f32f7c4708c04</a><br><a href="https://qiita.com/Sinhalite/items/762f192459994b915380" target="_blank" rel="noopener noreferrer">https://qiita.com/Sinhalite/items/762f192459994b915380</a><br><a href="https://zenn.dev/luvmini511/articles/1523113e0dec58" target="_blank" rel="noopener noreferrer">https://zenn.dev/luvmini511/articles/1523113e0dec58</a></p>

Next.jsを使うにあたって、CSR/SSR/SSG/ISRについて、ちゃんと自分での理解できているかの確認のためにブログに書きました

[Next.js] CSR/SSR/SSG/ISR についてまとめる

<p><br>この記事でやらないこと</p><ul><li>TypeScript とはのような概念理解</li><li>実践的な TypeScript の使い方</li></ul><p>こちらに関しては他のブログでたくさん紹介されているので、今回は省かせていただきます。</p><h2 id="hc706658589">TypeScript の型（基本）</h2><h3 id="h8f442b8850">プリミティブ型</h3><p>TypeScript 以下の型 7 つをプリミティブ型と呼びます。</p><h4 id="h1bce00e202"><span style="background-color:#d1ecf3">文字列型(string)</span></h4><p>文字列のみを受け取る型</p><pre><code>const foo: string = "Hello, TypeScript!";
const foo: string = 111; // error</code></pre><h4 id="h13c942cd6f"><span style="background-color:#d1ecf3">数値型(number)</span></h4><p>数字のみを受け取る型</p><pre><code>const foo: number = 0;
const foo: number = "Hello, TypeScript!"; // error</code></pre><h4 id="h39091c37c2"><span style="background-color:#d1ecf3">論理型(boolean)</span></h4><p>真偽値(true/false)のみを受け取る型</p><pre><code>const foo: boolean = true;
const foo: boolean = false;
const foo: boolean = "Hello, TypeScript!"; // error</code></pre><h4 id="h52af2eb185"><span style="background-color:#d1ecf3">undefined 型</span></h4><p>undefined のみを受け取る型</p><pre><code>const foo: undefined = undefined;
const foo: undefined = null; // error</code></pre><h4 id="h90883e7f27"><span style="background-color:#d1ecf3">null 型</span></h4><p>null のみを受け取る型</p><pre><code>const foo: null = null;
const foo: null = undefined; // error</code></pre><h4 id="h8020db7c1b"><span style="background-color:#d1ecf3">symbol 型と bigint 型</span></h4><p>後は他にも symbol 型と bigint 型がありますが、あまり見たことがなく、参考にした記事でもそこまで深く書かれていなかったので、今回は割愛させていただきます。</p><h3 id="h24960929a6">オブジェクト型</h3><p>TypeScript では、プリミティブ型以外の型をオブジェクト型と呼びます。</p><h4 id="h48acc9390d"><span style="background-color:#f0f7d9">any 型</span></h4><p>なんでも代入できてしまう型。<br><span style="color:#333333">any型の値はどんな型とも相互変換可能であり、実質TypeScriptの型システムを無視することに相当します。（つまりTypeScriptの意味がなくなってしまう）</span></p><pre><code>let foo: any = "hello world!!";
foo = 111;
foo = true;</code></pre><p>ですが、僕自身がまだまだ型付けができないので、anyを使うこともしばしばあります。<br>JavaScript → TypeScriptに置き換える際は難しいので、anyから初めて、段階的に型付けをしていくこともあるみたいです。</p><h4 id="h6308044015"><span style="background-color:#f0f7d9">void 型</span></h4><p>この型は主に関数の返り値の型として使われ、「何も返さない」ことを表します。</p><pre><code>const foo = (): void =&gt; {
  alert("hello");
};</code></pre><p>ちなみに、「何も返さない」とは、「returnしない」 / 「返り値がない」と言うことなので、</p><pre><code>const foo = (): void =&gt; {
  alert("hello");
  return; 
}

const foo = (): void =&gt; {
  alert("hello");
  return undefind 
}</code></pre><p>と同じ意味になります。</p><h4 id="hbe249b8ffe"><span style="background-color:#f0f7d9">配列型</span></h4><p>配列型には二種類の書き方があります。</p><pre><code>const foo: string[] = ["aaa", "bbb"];
const foo: Array&lt;string&gt; = ["aaa", "bbb"];</code></pre><p>二番目の<code>Array&lt;string&gt;</code>という書き方は、TypeScriptのジェネリクスという機能を使っています。<br>ちなみに一番目の書き方の方が、よく使われる...らしい...</p><h4 id="h9a1a39a607"><span style="background-color:#f0f7d9">オブジェクト</span></h4><p>オブジェクト型では、<code>{foo: string; bar: number}</code><span style="color:#333333">のような形で、型定義をします。</span></p><pre><code>const obj: { foo: string, bar: number } = {
  foo: 'aaa',
  bar: 111
}</code></pre><p><code>{foo: string; bar: number}</code><span style="color:#333333">以外を代入しようとすると、エラーになります。</span></p><pre><code>const obj: { foo: string, bar: number } = {
  foo: 'aaa',
  bar: 111,
  baz: true  // error
}</code></pre><p>オブジェクト型は、実際に開発する際にはコードが長くなりがちなので、よく<code>type</code>や<code>interface</code>を用いられることが多い印象です。<br><code>type</code>と<code>interface</code>の違いについては今回は割愛させていただいて、<code>type</code>を用いて、例を書いてみます。</p><pre><code>type Props = {
  name: string,
  age: number,
  country: string,
}

const obj: Props = {
  name: "Yuto",
  age: 20,
  country: "Japan"
}</code></pre><p>個人的には、<code>type</code>の方が<code>interface</code>よりも使われている印象です。<br></p><h2 id="ha214098e44">まとめ</h2><p>今回の内容は以上です。<br>引き続き、勉強していって、ある程度学んだらまた記事にしてアウトプットしていこうと思います。</p>

最近 TypeScript のインプットが多くなってきたので、整理のためにまとめました。

YY

Blogs

フロントエンドの状態管理についてまとめる

[Next.js] CSR/SSR/SSG/ISR についてまとめる

[TypeScript]基本の型