<h2 id="h83fc42b6fe"><span style="color:#242424">default exportとexport</span></h2><p><br></p><h2 id="h192cf6db81"><span style="color:#242424">default exportの場合</span></h2><pre><code>import React from "react";

const ColorfulMessage = (props) =&gt; {
  const { color, children } = props;
  const contentStyle = {
    color,
    fontSize: "18px"
  };
  return &lt;p style={contentStyle}&gt;{children}&lt;/p&gt;;
};

export default ColorfulMessage;</code></pre><p><br></p><h3 id="h22398b1b1a"><span style="color:#242424">通常のexportの場合</span></h3><p><br></p><pre><code>import React from "react";

export const ColorfulMessage = (props) =&gt; {
  const { color, children } = props;
  const contentStyle = {
    color,
    fontSize: "18px"
  };
  return &lt;p style={contentStyle}&gt;{children}&lt;/p&gt;;
};</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">exportの仕方は「関数名を定義して、その下で【export default 関数名】とするやり方」と「関数定義の先頭にexportをつけるやり方」の2つがある。</span><br><span style="color:#242424">Reactに関してはコンポーネントの名称が確約される（分割代入して定義元の関数名をコンポーネント名としてインポートしなければならない）ので、通常のexportにする方が恩恵がある（コンポーネント名のタイポの心配がない）。</span></p>

React チュートリアル【default exportとexport】

<h2 id="hb5710333e5"><span style="color:#242424">再レンダリングと副作用（useEffect）</span></h2><p><br></p><pre><code>// useEffectをインポートする
import React, { useEffect, useState } from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () =&gt; {
  const [num, setNum] = useState(0);
  const [faceShowFlag, setFaceShowFlag] = useState(false);

  const onClickCountUp = () =&gt; {
    setNum(num + 1);
  };
  const onClickSwitchShowFlag = () =&gt; {
    setFaceShowFlag(!faceShowFlag);
  };

  // 
  /** useEffectは第一引数に関数、第二引数に依存配列を取る
   *  第二引数に空配列を渡すと、そのコンポーネントで最初の1回だけ通したいような処理を実行することができる。
   *  例：画面初回表示時にデータを取得したり、処理を実行する時
   *  第二引数の配列に変数を渡すと、その変数だけに関心を持つuseEffectになる
   *  例：numの更新が走る度に以下のuseEffect内の関数が実行される
   */ 
  useEffect(() =&gt; {
    if (num &gt; 0) {
      if (num % 3 === 0) {
        faceShowFlag || setFaceShowFlag(true);
      } else {
        faceShowFlag &amp;&amp; setFaceShowFlag(false);
      }
    }
    // es-lintを使用して静的解析を行っている場合、依存配列には関数内で使用している変数をすべて入れないと警告が出る。特定の変数のみに関心を持ちたい場合は、下記のように「コメント」で設定を無視する記述を書くことで次の行の警告が出なくなる
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [num]); 

  return (
    &lt;&gt; 
      &lt;h1&gt;こんにちは！&lt;/h1&gt;

      &lt;ColorfulMessage color="blue"&gt;お元気ですか？&lt;/ColorfulMessage&gt;
      &lt;ColorfulMessage color="pink"&gt;元気です！&lt;/ColorfulMessage&gt;

      &lt;button onClick={onClickCountUp}&gt;カウントアップ！&lt;/button&gt;
      &lt;br /&gt;
      &lt;!-- on/offボタンが押される度にonClickSwitchShowFlagを切り替える --&gt;
      &lt;button onClick={onClickSwitchShowFlag}&gt;on/off&lt;/button&gt; 
      &lt;p&gt;{num}&lt;/p&gt;
      {faceShowFlag &amp;&amp; &lt;p&gt;(´・ω・`)&lt;/p&gt;}
    &lt;/&gt;
  );
};

export default App;</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">Reactの再レンダリング条件は「Stateを変更した時」「Propsを受け取っている場合、そのPropsの中身に変更があった時」「親のコンポーネントが再レンダリングされる時、子コンポーネントも追従して再レンダリング」の3つとなる。</span><br><span style="color:#242424">再レンダリングを最適化してパフォーマンスを上げる必要がある。</span><br><span style="color:#242424">「Too many re-renders」のエラーが出た場合は、Stateの更新周りを疑う。</span><br><span style="color:#242424">扱う変数やStateの数が増えてくると、それぞれの処理が邪魔しあってうまく動かなくなる場合がある。</span><br><span style="color:#242424">そのような場合はuseEffectを使用して関心の分離を行う。</span><br><span style="color:#242424">ある変数の状態に応じてや、初回レンダリング時のみに処理をしていきたい時にuseEffectは非常に使える。</span></p>

React チュートリアル【再レンダリングと副作用（useEffect）】

<h2 id="hca2e642a5e"><span style="color:#242424">State（useState）</span></h2><p><br></p><pre><code>// useStateをインポート
import React, { useState } from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () =&gt; {
  // ボタンが押されたら、State（num）をインクリメントして更新する
  const onClickCountUp = () =&gt; {
    setNum(num + 1); // UseState関数から分割代入で受け取ったState更新用の関数を呼び出す
  };
  // Stateを扱う場合、useStateという関数を使用する
  // useStateの中から配列の分割代入で1つ目として「Stateとして使用する変数名」2つ目として「Stateの更新用の関数」を受け取る
  const [num, setNum] = useState(0);   // [変数名, set変数名]と命名するのが一般的

  return (
    &lt;&gt; 
      &lt;h1&gt;こんにちは！&lt;/h1&gt;

      &lt;ColorfulMessage color="blue"&gt;お元気ですか？&lt;/ColorfulMessage&gt;
      &lt;ColorfulMessage color="pink"&gt;元気です！&lt;/ColorfulMessage&gt;
      &lt;!-- onClickイベントにState更新処理を登録 --&gt;
      &lt;button onClick={onClickCountUp}&gt;カウントアップ！&lt;/button&gt;
      &lt;!-- State（num）を表示する onClickCountUpが呼ばれるたびにインクリメントされた状態で表示が更新される --&gt;
      &lt;p&gt;{num}&lt;/p&gt;
    &lt;/&gt;
  );
};

export default App;</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">Stateとはそれぞれのコンポーネントが持っている可変の状態のこと。</span><br><span style="color:#242424">条件によって動的に変わる部分をStateとして定義してあげることで様々な画面を表示していくことができる。</span><br><span style="color:#242424">コンポーネント内で動的に変わる部分は、useStateで定義して変数と更新関数と初期値を設定していく。</span><br><span style="color:#242424">Stateが変更されると再レンダリングする。</span></p>

React チュートリアル【State（useState）】

<h1 id="h3858928e43"><span style="color:#242424">tsParticles</span></h1><p><br></p><h2 id="he4bfbf1fe7"><span style="color:#242424">TL;DR</span></h2><p><span style="color:#242424">・幾何学模様のパーティクルアニメーションを導入するライブラリ</span><br><span style="color:#242424">・公式のデモページでtsParticlesの設定カスタマイズしたjsonを落としてきて読み込むだけ！！</span><br></p><h2 id="h9707d3a59a"><span style="color:#242424">概要</span></h2><p><br></p><h3 id="h1b9800cba2"><span style="color:#242424">公式サイト</span></h3><p><a href="https://particles.js.org/" target="_blank" rel="noopener noreferrer">https://particles.js.org/</a><br></p><h3 id="h77a364642d"><span style="color:#242424">Github</span></h3><p><a style="color:#242424" href="https://github.com/matteobruni/tsparticles" target="_blank" rel="noopener noreferrer">https://github.com/matteobruni/tsparticles</a><br></p><h3 id="hc23912c962"><span style="color:#242424">デモページ(Among Us）</span></h3><p><img src="https://images.microcms-assets.io/assets/661f51695d9d4fb590c322a7cdea4bf7/bb35e103fdaa42ccb4dc82d2136f4628/chrome-capture-2023-1-7.gif" alt=""><br></p><h2 id="h7b555ffbc5"><span style="color:#242424">実装(React）</span></h2><p><br></p><h3 id="hd8d793506b"><span style="color:#242424">インストール</span></h3><pre><code># npmの場合
$ npm install react-particles

# yarnの場合
$ yarn add react-particles

# インストール時に依存関係のエラーが出る場合は --f で対応してください。</code></pre><h3 id="h71037bce92"><span style="color:#242424">CDNの場合</span></h3><pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/2.8.0/tsparticles.min.js" integrity="sha512-+YPbXItNhUCZR3fn5KeWPtJrXuoqRYQ4Gd1rIjEFG+h8UJYekebhOMh84vv7q+Y1sy5kdIIVtfftehCiigriMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/script&gt;</code></pre><h3 id="h78b536d53a"><span style="color:#242424">particlesの設定ファイル</span></h3><p><a href="https://particles.js.org/samples/index.html#amongUs" target="_blank" rel="noopener noreferrer">https://particles.js.org/samples/index.html#amongUs</a><br>上記デモページにて設定ファイルをjsonでダウンロードできます。<br></p><h3 id="h5c748931ec"><span style="color:#242424">基本の形</span></h3><pre><code>import React from 'react';
import Particles from 'react-particles';              // react-particlesをインポート
import ParticlesParams from '../assets/particles.json';  // particlesの設定ファイルをインポート

export default function Background() {
    const params = ParticlesParams as typeof ParticlesParams

    &lt;Particlese options={params as any} /&gt;
  )
}

export default Background</code></pre><p><br></p><h2 id="ha214098e44"><span style="color:#242424">まとめ</span></h2><p><span style="color:#242424">three.js（WebGL）の技術を使って自作しなくても、tsParticlesを入れてプリセットを読み込むだけで高品質な背景が作成できるので良き！！</span><br><span style="color:#242424">ただ、設定を下手にいじるとサイト自体に影響を与えかねない描画になりそう感もあるので注意が必要かもですね、、</span></p>

tsParticlesを導入してAmong Us風な背景を作ろう

<h2 id="h800788d370">Props</h2><p>./components/ColorfulMessage.jsx</p><pre><code>import React from "react";

// ColorfulMessageコンポーネントを定義する
// 引数としてpropsを受け取る
export const ColorfulMessage = (props) =&gt; {
&nbsp;// propsオブジェクトから分割代入でcolorとchildrenを受け取る
&nbsp;const { color, children } = props;
&nbsp;const contentStyle = {
&nbsp;&nbsp;color,
&nbsp;&nbsp;fontSize: "18px"
&nbsp;};
&nbsp;return &lt;p style={contentStyle}&gt;{children}&lt;/p&gt;;
};</code></pre><p><br>./App.jsx</p><pre><code>import React from "react";
// ColorfulMessageコンポーネントをインポートする
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () =&gt; {
&nbsp;// ボタンクリックで呼び出すアロー関数を定義する
&nbsp;const onClickButton = () =&gt; alert();

&nbsp;return (
&nbsp;&nbsp;&lt;&gt;&nbsp;
&nbsp;&nbsp;&nbsp;&lt;h1&gt;こんにちは！&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&lt;!-- ColorfulMessageコンポーネントにcolorというPropsを渡す --&gt;
&nbsp;&nbsp;&nbsp;&lt;ColorfulMessage color="blue"&gt;お元気ですか？&lt;/ColorfulMessage&gt;
&nbsp;&nbsp;&nbsp;&lt;ColorfulMessage color="pink"&gt;元気です！&lt;/ColorfulMessage&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickButton}&gt;ボタン&lt;/button&gt;
&nbsp;&nbsp;&lt;/&gt;
&nbsp;);
};

export default App;</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>Propsとはコンポーネントに対して渡す引数のようなもの。<br>コンポーネントタグで囲んだ要素はpropsオブジェクトのchildrenプロパティとして受け取ることができる。</p>

記事一覧