microCMSで記事を作成して公開　→　Verselの画面に行ってデプロイっていう手順だといちいちめんどくさいですよね😖 そこで記事公開と同時にデプロイされるようにあらかじめ設定しておくと便利なので、その手順をまとめておきます！

まずVersel上で設定したいプロジェクトの画面を開き、画面上の「Settings」をクリックして設定画面を開きます。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/1dfde77a778940d9b3c3aee075da30ec/oL1IxoMC3_1.png" alt=""> 次に数ある設定項目の一覧の中から「Git」をクリックします。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/78126a16084e491ea4422885b5938d79/oL1IxoMC3_2.png?w=300&amp;h=480" alt=""> そしてDeploy Hooksの項目までスクロールして、Create Hookの項目にmicroCMS、main（デプロイされるブランチ名）をそれぞれ入力して、Create Hookボタンを押します。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/87bbcfda237f4510a6a0b13b3f28a0c0/oL1IxoMC3_3.png" alt=""> 最後に生成されたアドレスをコピーしてVersel上の操作は終了です！

microCMS上で、プロジェクトの画面を開き、公開した時に自動デプロイされるよう設定したいコンテンツ(API)を選択します。 次にAPI設定画面を開き、API設定の項目からWebhookを選択します。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/1699066c02a34254b81e46fc1383c440/oL1IxoMC3_4.png?w=180&amp;h=464" alt=""> 次に追加ボタンを押して、サービスの選択画面でカスタムフックを選びます。 すると以下の画面が表示されるので、画像の赤枠で囲んだ部分に先ほどVersel上でコピーしたURLを貼り付けます。 下の通知タイミングの設定でどの操作によって自動でデプロイさせるかを選択できるので自分好みに選択してください。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/994447282b7f41919714b8d8a9f9790d/oL1IxoMC3_5.png" alt=""> その他の部分は特に入力しなくても大丈夫です。 これで手順で記事を公開した時に、Verselで自動デプロイされるようになりました！

リリック

こんな感じで設定はすぐできるよ！

シャーニャ

この記事はmicroCMSで記事を公開した時に、Verselに自動でデプロイさせる方法をまとめています。

microCMSで記事を公開した時に、Verselに自動でデプロイさせる手順まとめ

ustStateとは、React本体に関数コンポーネント専用のデータ保存領域を作成させて、そのデータの読み書きができるReactフックです。 stateとはコンポーネントが内部で保持する「状態」のことを指しており、stateはpropsと違って後から変更できます。 useStateの動作について詳しく見ていくと、以下のような流れなります。 ① useStateはReact内部と接続し状態を保持できるようにする。 ② useStateは現在の値と、値を更新するための関数(更新関数)を返す。 ③ useStateの更新関数に新しい値を渡すと、Reactに対してコンポーネントを再実行(再レンダリング)するように命令する。

useStateを利用するためには、まずuseStateをimportする必要があります。

<pre><code>import { useState } from 'react';</code></pre>

そして、コンポーネント内で状態管理を行いたい変数をuseStateを使って宣言します。

<pre><code>// 一般化した書き方
const [state, setState] = useState(initialState);
// 以下は説明のためにカウンターを作るという例で、countという変数を定義する場合
const [count, setCount] = useState(0);</code></pre>

このstateが状態管理を行いたい変数(ステートフルな値)で、setStateがそれを更新するための関数です。 useStateの第一引数で変数(state)の初期値を設定して、初回レンダリング時に返されるstateはこの初期値と等しい値になります。 setStateに新しいstateの値を設定して実行すると、その新しいstateの値を受け取りコンポーネントを再レンダリングするように命令(スケジューリング)します。

<pre><code>setCount(newState);</code></pre>

再レンダリング時には、stateの値は常に更新を適用した後の最新のstateとなります。 宣言するときの注意点として、必ず関数のトップレベルで宣言する（最初にすぐ宣言する）必要があります。 これはuseStateに限らず、他のHooksについても同様です。 またif文やfor文の中で使用することもいけません。

更新関数に現在のstateの変数を用いた値を渡す場合

更新関数の引数はプリミティブな値だけでなく関数を渡すことができて、カウンターを実装しようとした時など新しいstateが現在のstateに基づいて計算される場合（例えば、現在のcountに１を足した値にしたい場合）、setStateには以下のように関数を渡さないとバグの原因になります。

<pre><code>const [count, setCount] = useState(0);
setCount(prevCount =&gt; prevCount + 1);　// countを使わない！</code></pre>

この関数は更新関数に対して、現在のstateを参考にしてそれに１足したものを返しています。 この「現在のstate」とは<code>count</code>のことではなくReact内部でstateを計算している途中の値のことを指します。 この関数は「現在React内部で計算中のstateの値」を引数(上記でいう<code>prevCount</code>)として参照できるようになっており、この引数は自分で好きな名前をつけて使うことができます。 なぜ関数を渡さなければならないかというと、上記のように１度だけ更新関数が呼ばれるだけなら想定通りに動くかもしれないですが、 更新関数がすぐ連続して呼び出されたりした時、更新関数の呼び出しが非同期であり、stateが即座に更新されるわけではないため、関数を渡さないと想定通りの挙動をしないことが起こり得るからです。

<pre><code>const [count, setCount] = useState(0);
setCount(count + 1); // ①
setCount(count + 1); // ②</code></pre>

このように更新関数の引数に関数を渡さず<code>count</code>を使ってしまうと、以下のような挙動が起こり得てしまいます。 ① <code>count</code>の初期値は０だから１が更新される ② まだ<code>count</code>が１に更新されるReact内部の処理が終わる前にこの行が実行されて、<code>count</code>が初期値の０のまま更新関数に渡されて、また１が更新されてしまう

<pre><code>setCount(prevCount =&gt; prevCount + 1); // ①
setCount(prevCount =&gt; prevCount + 1); // ②</code></pre>

関数を渡すようにすると ① <code>count</code>の初期値は０だからprevCountも０で、そのprevCountに対して１が足され、結果１が更新される ② <code>prevCount</code>は「現在React内部で計算中のstateの値」であるから、①の処理で更新された１がじっくりと渡され、その<code>prevCount</code>に対して１が足され、結果ちゃんと２が更新される よって新しいstateが現在のstateに基づいて計算される場合は、更新関数の引数に関数を渡すようにしてあげましょう！

配列やオブジェクトのstateの更新について

配列やオブジェクトのstateを更新しようとする時、setStateで新しい値に更新したのに更新されず再レンダリングされない！とつまづくことがあります。 <a href="https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>にこのような記述があります。 <blockquote>state 更新の回避 現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します（React は Object.is による比較アルゴリズムを使用します）。</blockquote> これは新しい値に見せかけて実は同じ値で更新をした場合は再レンダリングされないということを言っています(この同じ値かどうかの判定は<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is" target="_blank" rel="noopener noreferrer">Object.is</a> による比較アルゴリズムで判定している)。 どういうことかというと、

<pre><code>const [colors, setColors] = useState(["赤", "青", "黄"]);
//上記のようなuseStateの変数があったとして配列の最後に緑を追加する処理
colors.push("緑")
setColors(colors)</code></pre>

このような場合、緑を元の配列に追加しただけで中身は変わっているけれど、新しいstateの値とはみなされず、同じ値とみなされて再レンダリングされません。 再レンダリングされるようにするためには、全く新しい変数に元の配列のコピーを取って、それを変更などして更新関数に渡すとしっかり再レンダリングされます。

<pre><code>const newArray = [...colors];
newArray.push("緑");
setColors(newArray);</code></pre>

この記事はReactHooksのuseStateについてまとめた記事です。

【ReactHooks】useStateまとめ

next-sitemapを導入したらいろいろつまずいたとこあったから手順と一緒にまとめとくね！

ねくすとさいとまっぷ？なんだあ！？

この記事はnext-sitemapを使ってサイトマップを作成し、Google Search Consoleに追加してサイトを登録するまでの手順を順を追って解説していきます！

next-sitemapとはNext.jsのプロジェクトにおいて、XMLサイトマップ(sitemap.xml)を簡単に作成できるパッケージです。 当サイト(RylicLogic.com)のサイトマップもこのnext-sitemapを用いて作られており、以下のsitemap.xmlが自動でビルド時に作成されています。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/9692181cfb2e45e8a454851c64a403ee/bWBiL617Mym_1.png" alt="">

サイト全体のページ構成を地図のようにわかりやすくリスト形式で記述したもののことで、検索エンジンにサイト内容を効率良く伝える役割を担っています。 XMLサイトマップを用意すると、クローラビリティが向上してSEO効果が高まるとされています。

XMLサイトマップとは？

手順① next-sitemapのインストール

プロジェクトトップに移動して、以下のコマンドでインストールします。

<pre><code>npm install --save-dev next-sitemap</code></pre>

手順② next-sitemapの設定ファイルの作成

プロジェクトフォルダ以下に設定ファイル(sitemap.config.js)を作成します。

<pre><code>// sitemap.config.js
module.exports = {
&nbsp;siteUrl: "https://ryliclogic.com/",
&nbsp;generateRobotsTxt: true,
&nbsp;exclude: ["/404"],
&nbsp;generateIndexSitemap: false,
&nbsp;outDir: "./public",
};</code></pre>

それぞれのオプションの意味と何を書けばいいかは以下の通りです。 siteUrl: サイトのトップページのURLを記述します。 generateRobotsTxt: robots.txt(特定ページへのクローラー巡回を制御するファイルのこと)を作成するかの設定です。これをtrueにした場合、特にクローラー巡回を制限しないrobots.txtが作成されます。 exclude: sitemap.xmlの一覧から除外する相対パスの配列を記述します。 generateIndexSitemap: インデックスサイトマップを生成しないようにするオプション。後述しますが、個人サイトや規模が大きくないサイトはfalseにするのが推奨されます。 outDir: sitemap.xmlの出力先を記述します。Next.jsプロジェクトをVerselなどにデプロイする場合は、sitemap.xmlファイルはpublicフォルダに含めることで静的にページを生成することができるので、publicフォルダに出力します。 その他のオプションについては<a style="color:#331cbf;background-color:#ffffff" href="https://www.npmjs.com/package/next-sitemap" target="_blank" rel="noopener noreferrer">next-sitemapの公式ページ</a>に詳しく書いてあるので参照してください。

手順③ package.jsonにビルドコマンドを追加

package.jsonにビルドコマンドを追加記述して、ビルド時にsitemap.xmlを作成するようにします。 ここの書き方はNext.jsのバージョンによって書き方が変わっており、古い情報を参考にしてもうまくいかないので注意が必要です。 Next.jsプロジェクトをVerselなどにデプロイする場合、Next.jsのバージョン12現在では

<pre><code>// package.json
"build": "next build",
"postbuild": "next-sitemap --config sitemap.config.js",</code></pre>

のようにすると無事サイトマップが作成されます。

ここまでできたら、サイトをVerselなどに普段通りデプロイします。 するとsitemap.xmlが作成されて、(プロジェクトのサイトドメイン)/sitemap.xmlページにアクセスできるようになります。

手順⑤ Google Search Consoleにサイトマップを登録

ブラウザからGoogle Search Consoleにアクセスして、左側のメニューからサイトマップをクリックします。 右側に表示される新しいサイトマップの追加のところに「sitemap.xml」と入力します。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/ef010851d20443949dcd2505b35b6fe9/bWBiL617Mym_4.png" alt=""> これで無事登録されて完了となります。

ここまでおつかれしゃまだよ〜！

設定ファイルのgenerateIndexSitemapオプションについて

先述のsitemap.config.jsファイルに記述したgenerateIndexSitemapオプションについて解説します。 現在next-sitemap v2.x以降では、generateIndexSitemapオプションを記述せずにデフォルトのままにするとsitemap.xmlはインデックスサイトマップとなり、実際のページのURLが含まれているサブサイトマップ(sitemap-0.xmlなど)がさらに作成されることになります。 つまりsitemap.xmlに各ページのURLがリスト形式で記述されるのではなく、サブサイトマップに各ページのURLのリストが記述されてsitemap.xmlはそのサブサイトマップの目次のようなものになるということです。 それ自体は問題ないのですが、実際サーチコンソールにはsitemap.xmlは読み込まれるけど、sitemap-0.xmlといったサブサイトマップが読み込まれない問題が発生します。 <img src="https://images.microcms-assets.io/assets/8dc67f2e05ca4b0c8d2107f00182816b/ce449abe4ba04388b49f093b0886d148/bWBiL617Mym_%EF%BC%92.png" alt=""> 調査したところ、これはサーチコンソール側のバグの可能性があり、名前にハイフンが入っているサイトマップは正しく読み込まれないようなのでハイフンのついてない名前にすればこの問題は回避できそうです。 そこでsitemap.config.jsでインデックスサイトマップを生成しないようにするオプションがあるので、それを設定してサイトマップをsitemap.xmlの１ファイルだけにすれば解決できます。 それがgenerateIndexSitemapオプションで、これをfalseにする必要があります。

<pre><code>// sitemap.config.js
generateIndexSitemap: false,</code></pre>

こうすることで無事サイトマップが読み込まれるようになります。 当サイトのような小規模なサイトではサブサイトマップは生成する必要があまりないので、この方法が適切でした。

next-sitemapを導入するまでつまづく部分が多々ありましたが、普通に実装するより簡単にサイトマップを追加できました！ 本記事がnext-sitemap導入の手助けになれれば幸いです✨

この記事はnext-sitemapを使ってサイトマップを作成し、Google Search Consoleに追加してサイトを登録するまでの手順を順を追って解説していきます！

next-sitemapでサイトマップ作成してGoogle Search Consoleに追加するまでの手順まとめ

いよいよ今年度の行政書士試験まで日にちが迫っています！ この時期になってくるとりよちかも自分の受験時代を思い出したりしてあの時はああだったこうだったと思い耽ったりしてしまいます。 そこで過去２回の受験経験で得た心得を、今年度以降受験される方たちに向けて書き残しておこうとこの記事を書いていきます！

まず直前１週間を切ったあたりから、もっと前からでも新しいこと、やったことのないことに手を出すのはやめましょう！ 自分自身2019年度の初めての試験は7月から試験勉強を始めたこともあり、10月にやっと行政法を初めて学び終えるという相当やばいスケジュールで臨んでいました😢 そのため個人情報保護法や商法会社法に何も手をつけていない状態で11月を迎えてしまいました😅 さすがに不安でどうすればいいんだと焦りでいっぱいになり、商法は簡単だから(?)と謎の情報を鵜呑みにしてしまい直前3日前くらいで商法に手をつけるという愚かなことをやってたりしました😭 今思えばとにかく民法行政法のAランクBランク論点に絞ってひたすら復習すべきでした。。 自分の話はさておいて、とにかく直前は民法行政法の基礎の確認や、直前だからこそ記述で出そうなところの細かい暗記だったりをすべきです！ もし初めての受験で十分な勉強ができず、商法会社法が全く手付かずの状態ならもう賭けで適当にマークするしかないです。 そのほうが５問分の時間が浮くし割とメリットがあるのでもう思い切って捨てちゃってください＞＜

会場の下見やMAPを確認してシミュレーションしておく！

試験会場によっては下見できないところもありますが、駅や途中の道、近くの商業施設、試験会場周りやトイレの位置、試験会場の教室の机がどうなっているかなど事前に確認しておくことは重要です。 こればかりは運次第なところもありますが、近くに室内で座ったりできる大きな商業施設などがあればとりあえずそこで過ごしていろいろ準備をしてから試験会場に向かうこともできます。 私の場合２回目の試験会場は東京ビッグサイトだったので、コミケなどで行き慣れていたこともあり会場付近はだいぶ把握していて、試験までは隣のTFTビルでのんびりしたりトイレなどを十分に済ませてから会場に向かいました。 HUNTER×HUNTERのハンター試験じゃないですが、試験は試験開始前から始まっているようなものなので、周りにあるものは全て利用して臨みましょう😾

試験前日緊張して寝れない人はそう言うものだと割り切る！

試験とか大事に日の前日って緊張して寝れないこともありますよね😢 でも寝れなかったらどうしようとかって悩むのではなく、むしろ寝れないことが当たり前なのだからしょうがないやって割り切ってしまいましょう😆 もし寝れなくても瞳を閉じて、リラックスして、深呼吸すれば体は少しは休まるので大丈夫です！ 寝れないのが当たり前なのに、もししっかり寝れたらもうそれだけで受かったようなものです。 また、前日の夜中まで勉強することはNGです＞＜ 自分も最初に受けた年は前述した通り焦っていたため、夜中の２時くらいまで勉強してしまいました😇 次の日少し眠かったのを覚えています😅 寝る時間を数時間勉強に当てても大して変わらないどころか大きなマイナスになりうるので、早めに休んで翌日をすっきりして迎えた方が圧倒的にプラスになります。 とにかく緊張しているということは試験の時に底力がでるということなので、心配せずに前日は早めに休みましょう。

人によっては試験当日の朝に問題を解いたり、テキストを読み込んだりする人もいるかと思いますが、そこで目を酷使して疲れてしまうようなことはやめた方がいいです。 ある程度ならいいですがなるべく試験本番に全力を出せるように体の力を温存しておきましょう😴 おすすめは、耳を使うことです👂 通ってる資格学校などの講義やYouTubeの講義、自分で重要なことを録音したものでもなんでもいいので試験会場に向かう電車の中とかで聴きながら目は休ませておくのがいいです✨ 自分もスマホで資格学校の講義を聴きながら試験会場に向かおうと思ってたんですが、講義の音声データがクラウド上(icloud)にあり、ダウンロードしておいたのになぜかまたダウンロードしないと聞けなくなってしまっていて当日聞けなかったトラブルがあったので音声データはスマホ内部に保存しておいた方が安全です⛑

トイレはしっかり行っておく！

試験は３時間もあるので絶対に試験前にトイレに行っておきましょう。 これも人によりますが、まあいいかと思ってトイレに行かずに試験を迎えたら２時間くらい経過した後に急にトイレに行きたくなるなんてこともあるかもしれないので一応事前に行っておくようにしましょう。 もし試験超直前や試験中に行きたくなってしまったら、手を挙げてさっさと行ってしまった方がいいです。 周りの目が気になるかもしれませんが、どうせ一期一会なので気にすることはありません😌 仮に試験終了１５分前とかなら我慢するのもありですが、まだ試験時間が多少でも残ってるのならちゃっちゃと行っちゃいましょう！

わからない問題に時間を使いすぎない！

試験は時間との戦いです。 ４問に１問はCランクの問題が出ると考えてCランク問題に時間を使いすぎるのはやめましょう！ 試験勉強が進んでくるとCランク問題の見極めができるようになってくるので、やばいと感じたらすぐ飛ばして次の問題に行きましょう。 またやばい問題が連続することも当たり前だし、わざとそうしている場合も考えられるので、焦らずにできる問題から解いていくようにしましょう😌

一般知識は割と常識で解けたり、落ち着いて問題を読めば誤りの選択肢に違和感を感じたりして正解の選択肢を絞り込めれることもあるので、後回しにしないで時間のある時に解くことをおすすめします。 自分は初めての試験の時は後回しにして解いたので焦って問題文をよく読めず、よく読めばわかるような問題も平気で落としてしまいました😢 合格した年は一般知識は序盤で解き、落ち着いて問題文を読めたので１４問中１２問正解することができました🌸 特に文章理解は一番最初に解くことをおすすめします（解く順番は人それぞれですが自分は文章理解を一番最初にしました）。 文章理解は絶対に時間がないと解けないので、行政法民法の文章を読む前のウォーミングアップとして一番最初が適してると思うので是非参考にしてみてください😊

試験終了間際は魔の時間というか心臓がばくばくして本当に焦ります💦💦 いくら問題が解けてもマークしなければ得点にならないので、絶対に試験終了前マークだけは忘れないようにしましょう😾 試験終了前には試験官の方が終了５分前などのアナウンスをするかと思うので、そのアナウンスがあったら必ずマークできているか確認しましょう。 もしマークしていない問題があれば、最優先でマークしてください！ 自分は、合格した年の最後焦って訳が分からなくなって試験１分３０秒前くらいまで本当にマークを忘れており、命の危機を感じる思いをしました😇 正解してるのにマークできないことは一番最悪なので、とにかく絶対マークは忘れないようにしてください！

以上、試験直前と当日の心得についてでした！ あとは自分の力を信じて、落ち着いてできる問題から淡々と解いていくだけです！ この記事を読んでくださった皆様が、無事ベストを尽くすことができるように心から応援しております🌸

心配しないで大丈夫！自分を信じて、落ち着いて淡々とね！

試験なんてちょちょいのちょいだじょ！

この記事は、行政書士試験について試験直前と当日の心得についてまとめた記事です。


【行政書士試験】試験直前と当日の心得まとめ！

１. コンテンツ制作に関する情報を発信

コンテンツを作るにあたって、必要なことや知っておかなければならないことは本当にたくさんあります。 自分もクリエイターとして現在進行形でコンテンツ作りをしているので、その途中途中で得た情報を忘備録としてブログでわかりやすく発信していきます！

自分がこれまで制作したものや実績、現在のスキルや資格について掲載します！

3. たまにふらっと寄りたくなるような憩いの場、遊び場にしたい

このサイトはブログ兼ポートフォリオサイトでもありながら「リリックとシャーニャのひみつきち」でもあります。 ・もっと親しみやすくてインタラクティブなデザイン ・リリックとシャーニャのブラウザゲーム ・テーマBGMと可愛い効果音 など今後できる限り実装していって、一人でも多くの方が遊びに来るサイトになるようにこつこつ更新していきます！

リリックロジック略して「リリロジ」で覚えてくれたら嬉しいな✨

リリロジをよろしくねっ！！！

ゲームや音楽、デザインと技術が好き🎸

riyo

このブログ兼ポートフォリオサイトである当サイトです。 技術構成はReact / Next.js / TypeScript / TailwindCSS / Versel / MicroCMS で、Jamstackな構成となっています。

 RylicLogic

現在Webサービスを鋭意制作中です。 公開までしばしお待ちください🙇‍♂️

Coming Soon...

勉強家でゲームと音楽が好きな一見普通な男の子。 幼い頃からゲームとピアノに触れて遊んでいた。 いろんなことに挑戦しがちなオールマイティで万能タイプ。 物事をいろんな角度から見て考え、様々な知識を組み合わせて解決することが得意。 また、発明力に優れており思いついたものをすぐに作れてしまう能力がある。 性格は少々気まぐれで思ったことをそのまま口に出すタイプ。 一見するとクールでそっけなく見えるが、意外とふざけて笑ったりして一緒にいるとなんだかんだ楽しかったりする。

音使いの才と澄みきった無垢な心を持つ元気いっぱいな子猫の女の子。 口癖は「どうしゅるよ？」「(なんでも)いいよ〜(｀ω´)」。 人間に憧れており普段は音魔法で人に姿を変えている。 勉強は苦手だがなんでも知りたがりなため、よくリリックから様々な知識を教わっている。 天然でちょっと抜けてるところもあるが、やればできる猫である。

ゲームや音楽、技術とデザインが好き🎸平日はSaaS企業でWebエンジニアやってます💻 当サイト(RylicLogic)ではコンテンツ制作に関する情報など自分がこれまで培った知見や経験のほか、今取り組んでることなどを気ままに発信していきます。 このサイトはNext.jsを用いて構築した、完全自作サイトです。

当サイトの管理人

useEffectとは、関数の実行タイミングをReactのレンダリング後まで遅らせるフックです。 <a href="https://ja.reactjs.org/docs/hooks-effect.html" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>には、関数のことを副作用と呼んでおり、DOMの更新の後に副作用を呼び出すと書いてあります。 副作用とは、「DOMの書き換え操作」「サーバー通信(WebAPI通信)」「変数の書き換え」「ログの記録」などUI構築以外の処理を指します。 DOMの書き換え操作に関しては、レンダリング後じゃないとDOM上に要素が存在しないため、useEffectを使うことによって確実にDOMの書き換えが行えます。 時間のかかるWebAPI通信に関してもuseEffectでレンダリング後に行うことができます。 関数コンポーネントには基本レンダリングに関する処理しか書かないので、API通信のようなレンダリングと関係ない処理はuseEffectの中に書くことになります。 このようにuseEffectはレンダリングに関係ない処理を関数コンポーネント外に追いやるという側面も持っています。

useEffectを使うために、まずuseEffectをインポートします。

<pre><code>import { useEffect } from 'react';</code></pre>

useEffectの基本的な書き方は以下の通りです。これもuseStateなどと同様に関数コンポーネントのトップレベルで宣言します。

<pre><code>useEffect(
() =&gt; { fetchAPIFunction() }, // 第1引数は実行させたい副作用関数を設定！
[依存する変数の配列など] ) // 第2引数は複数のパターンがある！</code></pre>

第１引数には先ほど説明したAPI通信などの副作用関数を設定します。 第２引数には複数のパターンがあり、設定の仕方によって副作用関数の実行タイミングを制御することができます。

第２引数に何も設定しない場合

<pre><code>useEffect(
() =&gt; { fetchAPIFunction() }, 
)</code></pre>

この場合はコンポーネントのレンダリング後にとにかく毎回、副作用関数が実行されます。 このパターンは実際にはあまり使うことは少ないです。ログを出力させる時などに使うことがあります。

第２引数に空の配列を設定する場合

<pre><code>useEffect(
() =&gt; { fetchAPIFunction() }, 
[] )</code></pre>

この場合はコンポーネントの１番最初のレンダリング後にのみ副作用関数が実行されます。

第２引数に変数を入れた配列を設定する場合

<pre><code>useEffect(
() =&gt; { fetchAPIFunction() }, 
[count, isFlugChanged] ) // 第２引数に変数を入れた配列を設定するパターン</code></pre>

この場合は、１番最初のレンダリング後と第２引数の配列に入れた変数のいずれかの値が変更された時に副作用関数が実行されます。 配列には変数を1つだけ入れてもいいし、複数入れることもできます。 上記の例の場合だと、１番最初のレンダリング後、countの値が変更されたとき、isFlugChangedの値が変更されたときに実行されることになります。 このように第２引数に具体的な変数を設定することで、副作用関数の実行タイミングを制御することができます。 これにより不要なレンダリングを減らすことができ、サイトのパフォーマンスを向上させることができます✨

useEffectで無駄なレンダリングを減らすじょ！

副作用は２種類に分類することができ、クリーンアップを必要としない副作用と、必要とする副作用があります。 クリーンアップを必要としない副作用は「DOMの書き換え操作」「サーバー通信(WebAPI通信)」「変数の書き換え」「ログの記録」などが該当しますが、 「イベントリスナーの追加」「タイマーの設定」などはクリーンナップを必要とする副作用に該当します。 「DOMの書き換え操作」「サーバー通信(WebAPI通信)」「変数の書き換え」「ログの記録」については処理を実行した後、その処理が持続して実行されず、一度で終わるためであり、 「イベントリスナーの追加」「タイマーの設定」はその処理をキャンセルしないと処理が続いてしまうため、キャンセルするクリーンアップが必要になるということです。 よってクリーンアップとは「イベントリスナーの削除」や「タイマーのキャンセル」をして前回の副作用を削除することを指します。 クリーンアップするときは第１引数の副作用関数を書いた後に、returnで「イベントリスナーの削除」や「タイマーのキャンセル」する関数を返します。

<pre><code>useEffect(() =&gt; {
 // 副作用関数
 element.addEventListener('click', () =&gt; { 
 // イベント処理
 event(); 
 })
 
 // returnでクリーンアップする！！
 return () =&gt; {
 element.removeEventListener('click', () =&gt; { event(); }) 
 }
}, [])</code></pre>

この記事はReactHooksのuseEffectについてまとめた記事です。

microCMSで記事を公開した時に、Verselに自動でデプロイさせる手順まとめ

はじめに

自動デプロイさせる手順

手順① Verselでの操作

手順② microCMSでの操作

フリーワード検索

カテゴリー

タグ

人気記事

新着記事