React


<p>今回は、<strong>Reactの状態管理ライブラリ「<a href="https://recoiljs.org/">Recoil</a>」</strong>の使い方を簡単にまとめたメモです。</p>



<p>Next.jsでの使い方やTypeScrpitの型宣言の方法などもわからなかったので調べた内容をメモしています。</p>



<ul>
<li><a href="https://recoiljs.org/">https://recoiljs.org/</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">0）ライブラリをインストールする</a></li><li><a href="#1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</a></li><li><a href="#2Atom">2）Atomを作成する</a></li><li><a href="#3Atom">3）Atomを使用する</a></li><li><a href="#AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</a><ul><li><a href="#_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</a></li><li><a href="#_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</a></li></ul></li><li><a href="#AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</a></li><li><a href="#i-2">まとめ</a></li></ul></div>
<h2><span id="i">0）ライブラリをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install recoil</code></pre></div>



<h2><span id="1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="_app.js" data-lang="TSX" data-line="1,6,8"><code>import { RecoilRoot } from &#39;recoil&#39;;


function MyApp({Component, pageProps}) {
	return (
		&lt;RecoilRoot&gt;
			&lt;Component {...pageProps} /&gt;
		&lt;/RecoilRoot&gt;
	)
}

export default MyApp</code></pre></div>



<h2><span id="2Atom">2）Atomを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="atoms/atoms.js" data-lang="JavaScript"><code>import { atom } from &quot;recoil&quot;;

const textState = atom({
	key: &#39;textState&#39;, // key名（他のatomのkeyと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p>この<code>atom()</code>で作成したデータ（Atom）は、アプリケーション内で読み書きができるようになります。（コンポーネント間でも共通の状態管理ができる）</p>



<h2><span id="3Atom">3）Atomを使用する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-lang="TSX"><code>const [&#39;text&#39;, &#39;setText&#39;] = useRecoilState(textState);</code></pre></div>



<p>使いたいコンポーネント内で<code>useRecoilState(xxx)</code>を使用すると、<code>useState()</code>と同じように使えるようになります。同じように別のコンポーネントで利用するとそのデータの受け渡しもできます。</p>



<p></p>



<h2><span id="AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</span></h2>



<p>atom()をどこで記載すればいいかわからなかったので、調べてみるとこの2パターンをよく見かけました。</p>



<h3><span id="_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="2,3"><code>my-app/
├─ atoms/
│ └─ atoms.js   ← ここにatomを定義する
│
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他に、atomごとにファイルを分けて管理したり、フォルダ名が<code>states/</code>だったりしているのも見かけました。</p>



<h3><span id="_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="7"><code>my-app/
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js   ← ここにatomを定義する
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他にコンポーネント内に記載している方法も見かけました。</p>



<h2><span id="AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="atoms/atoms.ts" data-lang="TypeScript" data-line="3"><code>import { atom } from &quot;recoil&quot;;

const textState = atom&lt;string&gt;({
	key: &#39;textState&#39;, // キー名（他のatomと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p><code>atom&lt;型></code>と記載することで、データの型宣言ができます。</p>



<h2><span id="i-2">まとめ</span></h2>



<p>selector()やデータを永続化させる方法なども追記したいと思います。レンダリングの</p>



<ul class="references">
<li><a href="https://recoiljs.org/">Recoil</a></li>



<li><a href="https://maasaablog.com/development/frontend/react/3226/">Next.jsにRecoilを導入して、グローバルな状態管理を実装しつつ永続化する</a></li>
</ul>


【React】状態管理ライブラリ「Recoil」の使い方まとめ


<p>このブログにSNSシェアボタンを設置したかったので、調べた方法まとめておこうと思います。</p>



<p>今回はReactで利用できる<strong>「react-share」というライブラリ</strong>を使用して作成していきます。</p>



<p></p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/icons-1024x266.png" alt="" class="wp-image-2715" width="768" height="200" srcset="https://craft-time.jp/wp-content/uploads/2023/01/icons-1024x266.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/icons-300x78.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/icons-768x200.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/icons-304x79.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/icons-282x73.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/icons.png 1212w" sizes="(max-width: 768px) 100vw, 768px" /><figcaption class="wp-element-caption">こんなボタンが簡単に作れます</figcaption></figure>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">ライブラリのインストールする</a></li><li><a href="#SNS">SNSシェアボタンのコンポーネントを作る</a><ul><li><a href="#Twitter">Twitterボタン</a></li><li><a href="#Facebook">Facebookボタン</a></li><li><a href="#i-2">はてなブックマークボタン</a></li></ul></li><li><a href="#react-shareAPI">「react-share」で利用できるAPI一覧</a><ul><li><a href="#Share_buttonsSNS">Share buttons（SNSボタン）</a></li><li><a href="#Share_countsSNS">Share counts（SNSでのシェア数）</a></li><li><a href="#IconsSNS">Icons（SNSのアイコン）</a></li></ul></li><li><a href="#Tailwind_CSS">おまけ：Tailwind CSSのボタンデザイン例</a></li><li><a href="#i-3">まとめ</a></li></ul></div>
<h2><span id="i">ライブラリのインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm i react-share</code></pre></div>



<h2><span id="SNS">SNSシェアボタンのコンポーネントを作る</span></h2>



<figure class="wp-block-image size-full is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/スクリーンショット-2023-01-09-20.57.19.png" alt="" class="wp-image-2701" width="338" height="129" srcset="https://craft-time.jp/wp-content/uploads/2023/01/スクリーンショット-2023-01-09-20.57.19.png 450w, https://craft-time.jp/wp-content/uploads/2023/01/スクリーンショット-2023-01-09-20.57.19-300x115.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/スクリーンショット-2023-01-09-20.57.19-304x116.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/スクリーンショット-2023-01-09-20.57.19-282x108.png 282w" sizes="(max-width: 338px) 100vw, 338px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="/components/SnsButtons.js" data-lang="JSX"><code>import React from &quot;react&quot;;
import {
	FacebookIcon,
	FacebookShareButton,
	HatenaIcon,
	HatenaShareButton,
	TwitterIcon,
	TwitterShareButton
} from &quot;react-share&quot;;


export default function ShareButtons({url, title}) {

	return (
		&lt;div&gt;

			{/* Twitter */}
			&lt;TwitterShareButton url={url} title={title}&gt;
				&lt;TwitterIcon size={32} round={true} /&gt;
			&lt;/TwitterShareButton&gt;

			{/* Facebook */}
			&lt;FacebookShareButton url={url} title={title}&gt;
				&lt;FacebookIcon size={32} round={true} /&gt;
			&lt;/FacebookShareButton&gt;

			{/* Hatena */}
			&lt;HatenaShareButton url={url} title={title}&gt;
				&lt;HatenaIcon size={32} round={true} /&gt;
			&lt;/HatenaShareButton&gt;
		&lt;/div&gt;
	)
}</code></pre></div>



<p>コンポーネントの<strong><code>url</code>にはシェアされるURL</strong>、<strong><code>title</code>にはシェアされるテキスト</strong>がそれぞれ記載されます。</p>



<p>また<code>hashtags</code>でハッシュタグを指定するなどもできます。</p>



<h3><span id="Twitter">Twitterボタン</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>{/* Twitter */}
&lt;TwitterShareButton url={url} title={title}&gt;
	&lt;TwitterIcon size={32} round={true} /&gt;
&lt;/TwitterShareButton&gt;</code></pre></div>



<h3><span id="Facebook">Facebookボタン</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>{/* Facebook */}
&lt;FacebookShareButton url={url} title={title}&gt;
	&lt;FacebookIcon size={32} round={true} /&gt;
&lt;/FacebookShareButton&gt;</code></pre></div>



<h3><span id="i-2">はてなブックマークボタン</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>{/* Hatena */}
&lt;HatenaShareButton url={url} title={title}&gt;
	&lt;HatenaIcon size={32} round={true} /&gt;
&lt;/HatenaShareButton&gt;</code></pre></div>



<h2><span id="react-shareAPI">「react-share」で利用できるAPI一覧</span></h2>



<h3><span id="Share_buttonsSNS">Share buttons（SNSボタン）</span></h3>



<h3><span id="Share_countsSNS">Share counts（SNSでのシェア数）</span></h3>



<h3><span id="IconsSNS">Icons（SNSのアイコン）</span></h3>



<h2><span id="Tailwind_CSS">おまけ：Tailwind CSSのボタンデザイン例</span></h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/image-6-1024x98.png" alt="" class="wp-image-2789" width="768" height="74" srcset="https://craft-time.jp/wp-content/uploads/2023/01/image-6-1024x98.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/image-6-300x29.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/image-6-768x74.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/image-6-304x29.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/image-6-282x27.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/image-6.png 1200w" sizes="(max-width: 768px) 100vw, 768px" /><figcaption class="wp-element-caption">こんな感じのボタン</figcaption></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>export default function SnsShareButtons({url, title}: Props) {

	return (
		&lt;div className=&quot;flex gap-2&quot;&gt;
			{/* Twitter */}
			&lt;div className={&quot;w-1/2 bg-[#00aced] rounded-lg&quot;}&gt;
				&lt;TwitterShareButton url={url} title={title} className={&quot;w-full&quot;}&gt;
					&lt;div className=&quot;flex items-center justify-center py-4&quot;&gt;
						&lt;TwitterIcon size={40} round={false} /&gt;
						&lt;div className=&quot;text-white&quot;&gt;Twitterでシェアする&lt;/div&gt;
					&lt;/div&gt;
				&lt;/TwitterShareButton&gt;
			&lt;/div&gt;

			{/* Facebook */}
			&lt;div className={&quot;w-1/2 bg-[#3b5998] rounded-lg&quot;}&gt;
				&lt;FacebookShareButton url={url} title={title} className={&quot;w-full&quot;}&gt;
					&lt;div className=&quot;flex items-center justify-center py-4&quot;&gt;
						&lt;FacebookIcon size={40} round={true} /&gt;
						&lt;div className=&quot;text-white&quot;&gt;Facebookでシェアする&lt;/div&gt;
					&lt;/div&gt;
				&lt;/FacebookShareButton&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	)
}</code></pre></div>



<h2><span id="i-3">まとめ</span></h2>



<p>SNSボタンを想像以上に簡単に実装することができました。</p>



<p>シェアする内容やデザインもカスタマイズもできるので、基本はこのライブラリで十分ですね！</p>



<p></p>



<ul class="references">
<li><a href="https://www.npmjs.com/package/react-share">react-share &#8211; npm</a></li>
</ul>


【React】ブログにSNSシェアボタンを作る。


<p>dangerouslySetInnerHTMLを使ってHTMLをレンダリングした時にTailwind CSSが適用されませんでした。</p>



<p>少し調べて使えそうだった対処法をメモしておきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#_Tailwind_CSS">方法① Tailwind CSSのプラグインを使用する</a><ul><li><a href="#_typography">手順⑴ プラグイン「typography」をインストールする</a></li><li><a href="#_tailwindconfigjs">手順⑵ tailwind.config.jsを編集する</a></li><li><a href="#_classprose">手順⑶ classに「prose」を追加する</a></li></ul></li><li><a href="#_Tailwind_CSSCDN">方法② Tailwind CSSのCDNを利用する</a><ul><li><a href="#_HeadCDN">手順⑴ Head内にCDNコードを追加する</a></li></ul></li><li><a href="#i">まとめ</a></li></ul></div>
<h2><span id="_Tailwind_CSS">方法① Tailwind CSSのプラグインを使用する</span></h2>



<p>Tailwindの公式プラグインにdangerouslySetInnerHTMLによって取得したデータの各タグに合わせてデフォルトのスタイルを適用してくれる「typography」があります。</p>



<h3><span id="_typography">手順⑴ プラグイン「typography」をインストールする</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install -D @tailwindcss/typography</code></pre></div>



<h3><span id="_tailwindconfigjs">手順⑵ tailwind.config.jsを編集する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require(&#39;@tailwindcss/typography&#39;),  // 追加
    // ...
  ],
}</code></pre></div>



<h3><span id="_classprose">手順⑶ classに「prose」を追加する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>&lt;div className=&quot;prose&quot; dangerouslySetInnerHTML={{ __html: content }} /&gt;</code></pre></div>



<h2><span id="_Tailwind_CSSCDN">方法② Tailwind CSSのCDNを利用する</span></h2>



<p>dangerouslySetInnerHTMLのデータ内で、Tailwind CSSのclassを指定したい場合はCDNを利用する方法があります。</p>



<h3><span id="_HeadCDN">手順⑴ Head内にCDNコードを追加する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>&lt;head&gt;
  {/* ... */}
  {/* 追加 */}
  &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;/head&gt;</code></pre></div>



<h2><span id="i">まとめ</span></h2>



<p>dangerouslySetInnerHTMLのデータ内でTailwindのclass指定したものを適用されるようにしたかったのですが、CDNを利用するしか方法がなさそうでした。</p>



<ul class="references">
<li><a href="https://tailwindcss.com/docs/typography-plugin#installation">@tailwindcss/typography &#8211; Tailwind CSS</a></li>



<li><a href="https://github.com/tailwindlabs/tailwindcss/discussions/7756">dangerouslySetInnerHTML not working with Taillwind and React.js · Discussion #7756</a></li>
</ul>


「React」の記事一覧