<h2 id="h22db4f3f4f">対象</h2> 今回はmacユーザーに限った内要です。 開発をしているとスマホ端末での依存性のあるバグや表示の崩れがあることが多々あります。 今回はそれを確認する方法を説明していきます。 <h2 id="h9209652a9c">ngrokをinstallする</h2> ngrokをinstallする前にHomebrewをinstallする必要があります。 <pre><code>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</code></pre> HomebrewはmacOS(またはLinux)用のパッケージマネージャーです。 installするとbrewコマンドが使えるようになります。 <pre><code>brew install ngrok</code></pre> 次にngrokをinstallします。 <h2 id="h8cde22dce9">localholtを立ち上げる</h2> 次に開発端末でlocalhostを立ち上げます。 この時にlocalhostで立ち上げたポート番号を確認します。 大体3000や8000あたりでしょうか。 <h2 id="h42b83d8cb8">ngrokでlocalhost環境を作る</h2> <pre><code>ngrok http 3000</code></pre> 自分の場合は3000だった為、こちらでngrokを立ち上げます。 下記のような形になると思います。 <pre><code>ngrok by @inconshreveable &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Ctrl+C to quit)

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Session Status&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; online &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Version &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2.3.40 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Region&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; United States (us) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Web Interface &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http://127.0.0.1:4040&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Forwarding&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -&gt; http://localhost:3000 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Forwarding&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; https://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -&gt; http://localhost:3000&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Connections &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ttl &nbsp; &nbsp; opn &nbsp; &nbsp; rt1 &nbsp; &nbsp; rt5 &nbsp; &nbsp; p50 &nbsp; &nbsp; p90&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0 &nbsp; &nbsp; &nbsp; 0 &nbsp; &nbsp; &nbsp; 0.00&nbsp; &nbsp; 0.00&nbsp; &nbsp; 0.00&nbsp; &nbsp; 0.00 &nbsp; &nbsp; &nbsp;</code></pre> 下記の部分の.ioまでをコピペしてスマホに貼り付けるとlocalhostと同じ環境が開ます！<pre><code>Forwarding&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; https://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -&gt; http://localhost:3000 &nbsp;</code></pre> お疲れさまでした！

ngrokを使用してlocalhostをスマホで開く方法

実務でindexOfが出てきて、なんだそれって思ったのでメモ <h2 id="h97deb6308c">indexOfとは</h2> indexOfメソッドは、指定された部分文字列が最初に登場した位置を、文字列の先頭を0としたインデックス番号でかえします。 文字列がない場合、戻り値は-1になります。 ん？？ 多分コードで見た方が分かりやすい。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こんにちわ")
console.log(reslut)
// 0</code></pre> 一致しているので0を返します。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ")
console.log(reslut)
// 0</code></pre> 一致しているので0を返します。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こんばんわ")
console.log(reslut)
// -1</code></pre> この場合一致しないので-1が返されます。 <h2 id="heb95265716">検索位置の変更</h2> <pre><code>indexOf( 検索したい文字, 検索開始位置 );</code></pre> 第二引数に検索位置を指定することができます。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ", 0)
console.log(reslut)
// 0</code></pre> インデックスは0から始まるので0であれば"こ"が検出され0が返ります。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ", 1)
console.log(reslut)
// -1</code></pre> 1を指定すると、"んにちは"から"こ"を検索することになるので検出されません。 よって-1を返します。

JavaScriptのindexOfを理解する

filterとfindがごっちゃになったのでメモ程度にまとめておきます。 返す値が分かりやすいようにTypeScriptで書いています。 <h2 id="hbf16933144">filter</h2> 特定の配列の中から一致した全てを配列で返す。 <pre><code>const numbers: number[] = [ 1, 2, 3];

const number: number[] = numbers.filter((number) =&gt; number === 1);
console.log(number);
// - [1]</code></pre> こんな感じで配列が返ってくる。 <h2 id="hbf60f41210">find</h2> 特定の配列から一致した最初のものを返す <pre><code>const numbers: number[] = [ 1, 2, 3];

const number: number = numbers.find((number) =&gt; number === 1);
console.log(number);
// - 1</code></pre> <h2 id="ha214098e44">まとめ</h2> 配列を返したい場合はfilterを使う 最初の一つ要素を返したい場合はfindを使う

findメソッドとfilterメソッドの違い

保守性の高いシステムを構築するには、変化に強いプログラムを組んでいくことが大切です。 今回はNext.jsを使って解説していきます。 <h2 id="h4ac312068f">なぜルーディングはハードコーディングしてはいけないのか？</h2> ダメな例です <pre><code>&lt;Link href="/users"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 上記はNext.jsのリンクコンポーネントを使い、ユーザー一覧ページへ遷移するコードですが、これは最悪です、、、、、 例えばURLが急な要望で/user_listに変更になったとします。 <pre><code>&lt;Link href="/user_list"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 上記のように書き換えが発生します。 一見簡単に思えるかもしれないですが、これが大規模システムだった時を想像してみましょう。 極端ですが、/usersのリンクコンポーネントの記述が100個あったとします。 つまりこれを100個分修正しなければいけないのです、、、 一括で修正したとしても、万が一漏れがあったとすると最悪の場合ユーザーを404ページに案内してしまう事態が起きるのです。。。 <h2 id="h58d5e63098">ハードコーディングしない為の対処法</h2> 純粋な対処法としてはルーティングをしっかりと定数のような形でまとめてあげればいいのです。 そしてページ遷移する際は全て定数からルーディングを呼び出します。 例 <pre><code>const usersListPagePath = "/users"</code></pre> <pre><code>&lt;Link href="usersListPagePath"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 定数として定義することで URLが変わった際は、usersListPagePathの値を変更するだけで100ページ分を一気に安全に修正することができます！！！ イメージがついてきたでしょうか でも上記は完全に良いとは言い切れません。 では自分が考える最適な対処法を3つほど紹介していくのでみていきましょう！ <h2 id="h316b0b0f6a">オブジェクト形式で記述していく</h2> 下記が参考コードです！ <pre><code>// routing.ts

export const Routing = {
 	 // - トップ ======================================
 	 Top: {
 	 path: "/",
 	 pageName: "トップ"
 	 },
 	
 
 	 // - ブログ =====================================
 	 Blog: {
 	 List: {
 	 path: "/blog",
 	 pageName: "ブログ記事一覧"
 	 },
 	 Details: {
 	 path: "/blog/[id]",
 	 pageName: "ブログ記事詳細"
 	 }
 	 }
 }</code></pre> 呼び出す際はRoutingをimportして <pre><code>&lt;Link href="Routing.Top.path"&gt;
 &lt;a&gt;トップページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> きれいにまとまりましたね。 では動的な場合はどうすればいいのか？？ <pre><code>&lt;Link href="Routing.Blog.Details.replace("[id]", 5)&gt;
 &lt;a&gt;ブログidが5のページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> これでいけます。 5の部分を動的にしたい場合は、blog.idのような形で書いてあげるといいと思います。 <h2 id="hf69499cf69">namespaceで記述していく</h2> 2つ目がnamespaceで記述していく方法です。 <pre><code>// routing.ts

export namespace Blog {

 export namespace List {
 export const URI_Path: string = "/blog";
 export const localizedPageName: string = "ブログ一覧";
 }

 export namespace Details {

 export enum PathParameters {
 blogID = "id"
 }
 export const URI_PathTemplate: string = `/blog/:${PathParameters.blogID}`;

 export function buildURI_Path({ targetBlogID }: { targetBlogID: string; }): string {
 return URI_PathTemplate.replace(`:${PathParameters.blogID}`, targetBlogID);
 }

 export const localizedPageName: string = "ブログ詳細";
 }
}

export default Routing;</code></pre> こちらでも対応可能です。 <pre><code>&lt;Link href="Routing.Blog.Details.buildURI_Path({ targetBlogID: blog.id})&gt;
 &lt;a&gt;ブログidが5のページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> namespaceは非推奨のプロジェクトも多いですが、関数や変数等も記述しやすい為、こういった場合は使ってもいいと思います。 <h2 id="h368f89b7da">最強ライブラリー pathpida</h2> 一番おすすめはこちらです！ <a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">pathpida</a>は最近活用しているライブラリなのですが、Next.jsではpages内のコンポーネントを自動で読み取って、ルーティングを作成してくれます。 まずはライブラリーをinstallします <pre><code>npm install pathpida npm-run-all --save-dev</code></pre> packge.jsonのscript部分を変更します。 <pre><code>// packge.json

"scripts": {
	 "dev": "run-p dev:*",
	 "dev:next": "next dev",
	 "dev:path": "pathpida --watch",
	 "build": "pathpida &amp;&amp; next build",
}</code></pre> これで準備は完了です。 <pre><code>npm run dev</code></pre> プロジェクトを立ち上げるとpagesディレクト裏を読み取って <code>utils</code>&nbsp;または&nbsp;<code>lib</code>&nbsp;ディレクトリどちらかに&nbsp;<code>$path.ts</code>&nbsp;ファイルが自動生成されます。 両方存在しない場合はlibディレクトリを自動作成してくれます！ 下記のようなファイルが自動生成されます。 <pre><code>/* eslint-disable */
	// prettier-ignore
	export const pagesPath = {
	 blog: {
	 _id: (id: string | number) =&gt; ({
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/blog/[id]' as const, query: { id }, hash: url?.hash })
	 }),
	 page: {
	 _id: (id: string | number) =&gt; ({
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/blog/page/[id]' as const, query: { id }, hash: url?.hash })
	 })
	 }
	 },
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/' as const, hash: url?.hash })
	}
	
	// prettier-ignore
	export type PagesPath = typeof pagesPath</code></pre> 呼び出す際は <pre><code>&lt;Link href="pagesPath.blog._id(targetBlog.id).$url()")&gt;
 &lt;a&gt;指定したのページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> で簡単に呼び出すことができます！ こちらのライブラリーを導入することでpagesディレクトリ下にファイルが増えるたびに自動でroutingを生成してくれるので、もはや定数化して変更があるたびに、定数を変更することすら やらなくて済むのです、、、、 詳しい使い方は<a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">こちら</a>からご覧ください！

ルーティングはハードコーディングするな！

<h2 id="he3c2ffbbec">今回作成する表示/非表示を切り替えるコンポーネント</h2> 今回はこのようなよくある表示/と非表示を切り替えるボタンを作成していきます。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/1ec02876d3d44777b3a6235f1182c297/%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%202021-11-06%2023.34.13.png" alt=""> <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/c8ce915bdb35478c8b5d9fe2cdff4cc7/%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%202021-11-06%2023.33.16.png?w=417&amp;h=78" alt=""> よく使うものはコンポーネントにしてどんな状況でも使いまわせることが大事です。 では早速やっていきましょう！！ <h3 id="h48162eced8">使用技術</h3> React, TypeScript, css modules, react hooks <h3 id="hc33aa31841">ファイルの作成</h3> 今回はDisplaySwitchingButtonというコンポーネント名で作成していきます。 下記二つのファイルを使用していきます。 DisplaySwitchingButton.tsx displaySwitchingButton.module.scss 今回はスタイルはcss modulesを使用しています。 アイコンも必要なので追加します。 こちらはコピペして使用してください！ <pre><code>// src/assets/icons/PlusIcon.tsx

// - フレームワーク =======================================================================================================
import React, { memo, VFC } from "react";

/* eslint-disable-next-line react/display-name */
export const PlusIcon: VFC = memo(() =&gt; {
 return (
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xmlSpace="preserve"&gt;
 &lt;g transform="translate(-.3)"&gt;
 &lt;circle cx="10.3" cy="10" r="10"/&gt;
 &lt;path d="m11.12 14.2-.07-3.46h3.4c.42 0 .84-.42.84-.84a.91.91 0 0 0-.85-.85h-3.4v-3.4a.91.91 0 0 0-.84-.85.91.91 0 0 0-.85.85v3.4h-3.4a.91.91 0 0 0-.84.85c0 .42.42.84.85.84h3.4v3.4c0 .42.42.85.84.85.5.07.85-.29.92-.78z" fill="#fff"/&gt;
 &lt;/g&gt;
 &lt;/svg&gt;
 );
});

</code></pre> <pre><code>// src/assets/icons/MinusIcon.tsx

// - フレームワーク =======================================================================================================
import React, { memo, VFC } from "react";

/* eslint-disable-next-line react/display-name */
export const MinusIcon: VFC = memo(() =&gt; {
 return (
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"&gt;
 &lt;g transform="translate(-1201 -399)"&gt;
 &lt;circle cx="1213.5" cy="411.5" r="12.5"/&gt;
 &lt;path fill="#fff" d="M1208.8 411h10.2v1h-10.2z"/&gt;
 &lt;/g&gt;
 &lt;/svg&gt;
 );
});</code></pre> これで準備は完了です。 <h3 id="hc4c8f43b2b">コンポーネントをどう実装するか？</h3> 今回のやりたいこととしては下記画像のようになります。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/f46eb27d150449ca8846f4edf7d9a735/%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%202021-11-06%2023.47.32.png" alt=""> クリックイベントによって表示非表示を切り替える必要があるのでstateにbooleanの値を保持する必要がありそうです。 また、どの要素が来ても文言を変えられるよう"XXXXを表示"のXの部分は動的にした方がよさそうです。→こちらはpropsで渡していきます。 そして表示/非表示にする要素に関してはchildrenとしてコンポーネントの中に包むようにします。(こちらは意味が分からなくても実装時説明します。) <h3 id="h0391b9f8af">コンポーネントのコード</h3> <pre><code>// src/components/atoms/DisplaySwitchingButton/DisplaySwitchingButton.tsx

// - フレームワーク =======================================================================================================
import React, { memo, ReactNode, useState, VFC } from "react";

// - アセット ============================================================================================================
import styles from "./displaySwitchingButton.module.scss";
import { PlusIcon } from "../../../assets/icons/PlusIcon";
import { MinusIcon } from "../../../assets/icons/MinusIcon";


type Props = {
 label: string;
 children: ReactNode;
 style?: React.CSSProperties;
}

/* eslint-disable-next-line react/display-name */
export const DisplaySwitchingButton: VFC&lt;Props&gt; = memo((props) =&gt; {

 const { label, children, style } = props;

 const [ displayChildren, setDisplayChildren ] = useState&lt;boolean&gt;(true);

 const onClickDisplayChildren = (): void =&gt; {
 setDisplayChildren(!displayChildren);
 }

 return (
 &lt;div className={styles.displaySwitchingButton} onClick={onClickDisplayChildren}　style={style}&gt;

 { displayChildren ? (
 &lt;div className={styles.flexContainer}&gt;
 &lt;div className={styles.label}&gt;{ `${label}を非表示` }&lt;/div&gt;
 &lt;div className={styles.icon}&gt;
 &lt;MinusIcon/&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 ) : (

 &lt;div className={styles.flexContainer}&gt;
 &lt;div className={styles.label}&gt;{ `${label}を表示` }&lt;/div&gt;
 &lt;div className={styles.icon}&gt;
 &lt;PlusIcon/&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 )}

 { displayChildren &amp;&amp; &lt;div&gt;{ children }&lt;/div&gt; }
 &lt;/div&gt;
 );
});</code></pre> 説明していきます。 <pre><code>type Props = {
 label: string;
 children: ReactNode;
 style?: React.CSSProperties;
}</code></pre> まずはPropsの型定義をしています。 labelは動的の文言の部分です。 childrenの型定義はReactNodeです。(これはお決まりまので覚えておきましょう。) <h3 id="h52aa7f01a9">childrenとは</h3> コンポーネントの中に入る子要素は事前には知らないものがあります。 例えば今回で言えば表示/非表示にする要素は事前に知ってはいけません。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/4f577d8bb9eb49f98f626853f5eba62f/%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%202021-11-07%200.00.33.png" alt=""> 今回はプロフィールを入れる例で最初に説明しましたが、これはもしかしたらカテゴリーが入る可能性もあれば、ブログ記事が入る可能性もあるのです。 そういった不確定な要素を定義するのがchildrenです。 コンポーネントの子要素に挟むとchildrenになります。 <pre><code>&lt;DisplaySwitchingButton &gt;
 &lt;ProfileCard targetProfile={myProfile} /&gt; ← DisplaySwitchingButtonで挟むとchildren になる
&lt;/DisplaySwitchingButton&gt;</code></pre> 詳しくはこちらで確認しましょう。 <a href="https://ja.reactjs.org/docs/composition-vs-inheritance.html" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/composition-vs-inheritance.html</a> そして表示/非表示のstateをuseStateで定義しておきます。<pre><code> const [ displayChildren, setDisplayChildren ] = useState&lt;boolean&gt;(true);</code></pre> あとはこちらをクリックイベントに合わせて切り替えます。 下記の部分です。 <pre><code> const onClickDisplayChildren = (): void =&gt; {
 setDisplayChildren(!displayChildren);
 }
 &lt;div className={styles.displaySwitchingButton} onClick={onClickDisplayChildren}&gt;</code></pre> あとは簡単です。 ロジックで言うと displayChildrenがtrueであれば表示, falseであれば非表示です。 こちらを三項演算子で切り替えています。 <pre><code>{ displayChildren ? (trueの場合の処理) : (falseの場合の処理)</code></pre> そして最後にdisplayChildrenがtrueの場合はchildrenを表示しています。 <pre><code>{ displayChildren &amp;&amp; &lt;div&gt;{ children }&lt;/div&gt; }</code></pre> &amp;&amp;は 左辺がtrueであれば &amp;&amp; 右辺を返す です！ <h3 id="h4702e77dbd">スタイルの調整</h3> 最後にスタイルを調整しましょう。 <pre><code>.displaySwitchingButton {

 .flexContainer {

 display: flex;
 align-items: center;
 column-gap: 10px;

 cursor: pointer;


 &amp;:hover {

 text-decoration: underline;
 }


 &amp;:active {

 opacity: 0.7;
 }


 &amp;:focus {

 text-decoration: underline;
 }
 }



 .icon {

 width: 20px;
 height: 20px;

 fill: #423A57;
 }
}</code></pre> これで完成です！ <h3 id="hd82f6c9ef0">コンポーネントの呼び出し</h3> 呼び出す際は切り替えたい要素をchildrenに入れます。 例 <pre><code>&lt;DisplaySwitchingButton label={"プロフィール"}&gt;
 &lt;ProfileCard targetProfile={myProfile} /&gt;
&lt;/DisplaySwitchingButton&gt;</code></pre> お疲れ様でした！！！ <h3 id="hdf6724cf74">今回のソースコード</h3> <a href="https://github.com/abeshi03/tech-blog/blob/main/src/components/atoms/DisplaySwitchingButton/DisplaySwitchingButton.tsx" target="_blank" rel="noopener noreferrer">github</a>