<p>ブロックチェーンは、データを共有しながら安全に管理できる技術です。この技術は、以下のような順序で一般的に使用されています。</p><ol><li>データがさまざまなソースから収集されます。これはIoTデバイスであったり、ウェブ上の交易であったりします。</li><li>これらのデータは一元化され、クラウドや他のデータベースにまとめられます。</li><li>ブロックチェーンは、この集められたデータを共有監視する仕組みを提供します。この仕組みにより、データの改ざん防止や認証が可能となります。</li><li>AIなどの技術がこれらのデータを解析し、ユーザーに還元します。例えば、最適なビジネス決定を下すための洞察を提供したり、個々の消費者にパーソナライズされたサービスを提供したりします。</li></ol><h2 id="h0c87dd127d">ブロックチェーンの仕組み</h2><p>ブロックチェーンの仕組みは、以下の4つの主要な要素で構成されています。</p><ol><li>暗号化技術: データは256ビット（01の羅列256個）で暗号化されます。これにより、およそ10億パターン程度の組み合わせが可能になり、それぞれのブロックがチェーンでつながってより強固な構造を作ります。</li><li>コンセンサスアルゴリズム: 複数のエンティティがブロックの中身の確認を行う作業です。これにより、データの正確性と一貫性が保証されます。</li><li>確認した情報を全員が共有する台帳に記録します。誰かがデータを改ざんしようとしても、他の参加者が保持している台帳と比較することで、その改ざんを瞬時に検出することが可能です。</li><li>P2Pネットワーク: これは自立分散型のシステムで、全員が相互に監視する仕組みです。これにより、中央の管理者や調停者を必要とせず、トランザクションを確認し、新たなブロックをチェーンに追加することができます。</li></ol><h2 id="h1757e93274">ブロックチェーンのメリット</h2><p>Web2.0は中央集権型で、Web3.0は自立分散型です。ブロックチェーンは中央にデータが集まることによる様々なリスクを回避し、データの独占やセキュリティリスクに対する懸念を解決できます。</p><h2 id="h8e0c27b8ef">通貨と仮想通貨</h2><p>通貨は、全員がその価値を信頼しているために成り立つ制度で、通常は管理者（中央銀行など）が存在します。これは中央集権的な性格を持ちますが、中央が大量に貨幣を刷ると価値が下がる可能性があります。<br>一方、仮想通貨は中央集権的ではなく、全員で取引を監視し記録します。ブロックチェーン技術を使用することで、セキュリティも強化されます。仮想通貨は以下の特性を持つことで通貨としての役割を果たします。</p><ol><li>交換可能: 他の商品やサービス、あるいは他の通貨と交換することができます。</li><li>価値計測可能: 価値を一定の基準で計測し、表現することができます。</li><li>貯蔵可能: 価値を一時的に保存し、後で使用することができます。</li></ol><p><br></p>

ブロックチェーンとは

<p>Solidityは、イーサリアムのスマートコントラクトを開発するためのプログラミング言語です。C++、Python、JavaScriptに似た構文を持つ、静的型付けされた言語です。</p><h2 id="h8b77c7074b">スマートコントラクトとは</h2><p>スマートコントラクトは、あらかじめ定義されたルールに従って自動的に実行されるプログラムです。これらはブロックチェーン上に存在し、一度デプロイされると、そのコードは不変になります。</p><h2 id="h5cde41d999">Solidityの特徴</h2><h3 id="hce38c79f68">静的型付け</h3><p>Solidityは、変数の型を事前に宣言する必要がある静的型付けの言語です。これにより、コードの安全性と予測可能性が向上します。</p><h3 id="h4639ef02d7">EVM互換性</h3><p>Solidityはイーサリアム仮想マシン(EVM)で実行するためのバイトコードにコンパイルされます。EVMはイーサリアムネットワーク上の全てのノードで実行される仮想環境です。</p><h3 id="h5a582334d4">ハイレベル言語</h3><p>Solidityはハイレベル言語であり、直感的で理解しやすい構文を提供します。これにより、開発者はブロックチェーンとスマートコントラクトの複雑さを気にせずにアプリケーションを開発することができます。</p><h3 id="ha3055eb139">セキュリティ</h3><p>Solidityは、スマートコントラクトの開発におけるセキュリティを強調しています。例えば、スマートコントラクトの関数はデフォルトで外部からのアクセスが制限され、明示的に公開する必要があります。<br><br>以上のような特徴を持つSolidityは、イーサリアムブロックチェーン上で分散型アプリケーション（DApps）を開発するための主要な言語となっています。</p>

Solidityとは何か

<ol><li>1xx (情報): リクエストが受信され、継続して処理されることを示す。</li><li>2xx (成功): リクエストが正常に受信、理解、処理されたことを示す。</li><li>3xx (リダイレクト): リクエストを完了するために、さらなるアクションが必要であることを示す。</li><li>4xx (クライアントエラー): クライアントが悪いリクエストを送信したか、リクエストを処理できないことを示す。</li><li>5xx (サーバーエラー): サーバーが正しいリクエストを処理できなかったことを示す。</li></ol><p>以下に、よく使われるいくつかのHTTPステータスコードとその意味を示します。</p><ul><li>200 OK: リクエストが成功し、サーバーが要求されたデータを返しています。</li><li>201 Created: リクエストが成功し、サーバーが新しいリソースを作成しました。</li><li>204 No Content: リクエストが成功し、サーバーが返すべきデータがないことを示します（例：DELETEリクエスト）。</li><li>400 Bad Request: クライアントが不正または不完全なリクエストを送信しました。</li><li>401 Unauthorized: クライアントが認証されていないため、リクエストにアクセスできません。</li><li>403 Forbidden: クライアントが認証されていても、リクエストされたリソースへのアクセスが許可されていません。</li><li>404 Not Found: リクエストされたリソースが見つからなかったことを示します。</li><li>500 Internal Server Error: サーバー側でエラーが発生しました。</li></ul><p><br></p>

エラーコードメモ

<h2 id="haa9b281d91">1. Next.jsのAPIルーティングとは</h2><p>Next.jsのAPIルーティングは、APIエンドポイントを簡単に作成できる機能です。<code>pages/api</code>ディレクトリ内にファイルを作成するだけで、エンドポイントが自動的に生成されます。これにより、バックエンドAPIを簡単に構築できます。</p><h2 id="h290d6d4504">2. 主な使用方法</h2><p>APIルーティングを利用するには、次の手順に従ってください。</p><ol><li><code>pages/api</code>ディレクトリを作成します。</li><li>そのディレクトリ内に、エンドポイントに対応するJavaScriptファイル（<code>.js</code>または<code>.ts</code>）を作成します。</li><li>ファイル内で、エクスポートされたデフォルト関数（リクエストハンドラ）を定義します。この関数は、リクエストオブジェクト（<code>req</code>）とレスポンスオブジェクト（<code>res</code>）を引数に取ります。</li></ol><p>例:</p><pre><code>export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from the API!' });
}</code></pre><p>これにより、<code>/api/hello</code>エンドポイントが生成されます。</p><h2 id="h2a57c62c64">3. メリット</h2><p>Next.jsのAPIルーティングには、以下のようなメリットがあります。</p><ul><li>シンプルな構成: APIエンドポイントの作成が簡単で、追加のサーバー設定やバックエンドフレームワークが不要です。</li><li>開発効率の向上: フロントエンドとバックエンドを同じプロジェクト内で管理できるため、開発効率が向上します。</li><li>自動的なコード分割: Next.jsは自動的にコード分割を行い、必要な部分だけをロードします。これにより、パフォーマンスが向上します。</li></ul><h2 id="h900b969ae7">4. 実際の使用例</h2><p>以下に、Next.jsのAPIルーティングを用いた簡単なCRUDアプリケーションの例を示します。</p><ol><li>ユーザー情報を取得するAPIエンドポイント:</li></ol><pre><code>import { getUsers } from '../../../lib/users';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await getUsers();
    res.status(200).json(users);
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}</code></pre><ol><li>ユーザー情報を追加するAPIエンドポイント:</li></ol><pre><code>import { createUser } from '../../../lib/users';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const user = await createUser(req.body);
    res.status(201).json(user);
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}</code></pre><ol><li>ユーザー情報を更新するAPIエンドポイント:</li></ol><pre><code>import { updateUser } from '../../../lib/users';

export default async function handler(req, res) {
  if (req.method === 'PUT') {
    const user = await updateUser(req.query.id, req.body);
    res.status(200).json(user);
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}</code></pre><ol><li>ユーザー情報を削除するAPIエンドポイント:</li></ol><pre><code>import { deleteUser } from '../../../lib/users';

export default async function handler(req, res) {
  if (req.method === 'DELETE') {
    await deleteUser(req.query.id);
    res.status(204).json({});
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}</code></pre><p>上記の例では、<code>/api/users</code>エンドポイントを作成し、HTTPメソッドに応じて異なる処理を行っています。また、各エンドポイントで<code>lib/users.js</code>から関数をインポートして、データ操作を行っています。<br>これにより、Next.jsのAPIルーティングを使って、シンプルかつ効率的にCRUDアプリケーションを構築できます。<br></p>

Next.jsのAPIルーティングとは

<h2 id="he313374e63">. JWTトークンとは</h2><p>JSON Web Token（JWT）は、クライアントとサーバー間で情報を安全にやり取りするためのコンパクトなトークン形式です。JWTは、ヘッダー、ペイロード、署名の3つの部分から構成されており、それぞれBase64Urlエンコードされた文字列で表現されます。JWTは、認証や認可に広く使われています。</p><h3 id="h9cb6bb63af">JWTトークンを使用したログイン機能の使用例</h3><ol><li>クライアントがユーザー名とパスワードをサーバーに送信します。</li><li>サーバーがユーザーの認証を行い、認証に成功した場合、JWTトークンを生成してクライアントに返します。</li><li>クライアントは、以降のリクエストにJWTトークンをAuthorizationヘッダーに含めて送信します。</li><li>サーバーは、JWTトークンを検証し、有効な場合はリクエストを処理します。</li></ol><h2 id="h578388db81">2. サーバーセッションとは</h2><p>サーバーセッションは、サーバー側でユーザー情報や状態を一時的に保存する仕組みです。セッションIDを用いてクライアントとサーバー間でセッションを識別し、認証や認可に利用されます。</p><h3 id="h0dc344fc56">サーバーセッションを使用したログイン機能の使用例</h3><ol><li>クライアントがユーザー名とパスワードをサーバーに送信します。</li><li>サーバーがユーザーの認証を行い、認証に成功した場合、セッションIDを生成し、クライアントに返します。</li><li>クライアントは、以降のリクエストにセッションIDをCookieに含めて送信します。</li><li>サーバーは、セッションIDをもとにセッション情報を取得し、有効な場合はリクエストを処理します。</li></ol><h2 id="hfe3e8a8438">3. JWTトークンとサーバーセッションの違い</h2><ul><li>ストレージ: JWTトークンはクライアント側で保持され、サーバーセッションはサーバー側で保持されます。</li><li>スケーラビリティ: JWTトークンはステートレスなので、複数のサーバー間で共有する必要がありません。一方、サーバーセッションはセッション情報をサーバー側で保持するため、スケーラビリティが低いです。</li></ul><h2 id="hb74adf9978">4. メリットとデメリットの比較</h2><h3 id="hc859d85541">JWTトークン</h3><p>メリット:</p><ul><li>ステートレス: サーバーがユーザー情報を保持する必要がないため、スケーラビリティが高い。</li><li>SPAに適している: クライアント側でトークンを管理するため、サーバーとの通信が簡単になる。</li></ul><p>デメリット:</p><ul><li>セキュリティ: クライアントに情報が保持されるため、トークンの漏洩リスクが高い。</li><li>トークンサイズ: ペイロードに情報を持つため、トークンサイズが大きくなる可能性がある。</li></ul><h3 id="h38c8ca91f6">サーバーセッション</h3><p>メリット:</p><ul><li>セキュリティ: セッション情報がサーバー側に保持されるため、情報漏洩のリスクが低い。</li><li>トークンサイズ: セッションIDのみをクライアントとやり取りするため、通信量が少ない。</li></ul><p>デメリット:</p><ul><li>スケーラビリティ: セッション情報をサーバー側で管理するため、スケーラビリティが低い。</li><li>セッション管理: セッション情報の有効期限管理やサーバー間での共有が必要になる。</li></ul><h2 id="h97ed3e39ff">5. JWTがSPAで使用される理由</h2><p>JWTは、ステートレスであるため、スケーラビリティが高く、サーバーの負荷を軽減できます。また、SPAではフロントエンドとバックエンドが分離されているため、クライアント側でトークンを管理するJWTが適しています。これにより、APIリクエスト時に簡単に認証情報を付与でき、バックエンドの処理もシンプルになります。<br>ただし、JWTを使用する場合は、トークンのセキュリティ対策が重要です。</p><h2 id="hda3eb2d590">6. Next.jsのSSRやSSGでの適用</h2><p>Next.jsは、Reactベースのフレームワークで、Server-Side Rendering（SSR）やStatic Site Generation（SSG）をサポートしています。これらのアプローチを用いる場合、JWTトークンとサーバーセッションのどちらが適しているかを検討します。</p><h3 id="h33fd868b2f">SSR（Server-Side Rendering）</h3><p>SSRでは、各リクエストごとにサーバーでHTMLを生成してクライアントに送信するため、サーバー側でユーザー情報や認証情報を処理することが容易です。このため、サーバーセッションを用いた認証が適しています。ただし、JWTトークンも使用可能で、リクエストヘッダーやCookieを通じてサーバーに送信することで、サーバー側でトークンを検証して認証を行うことができます。</p><h3 id="h410720dce9">SSG（Static Site Generation）</h3><p>SSGでは、ビルド時に静的なHTMLファイルを生成するため、リクエストごとにサーバーでHTMLを生成する必要がありません。このため、クライアント側での認証処理が主になり、JWTトークンを使用した認証が適しています。一方で、サーバーセッションを用いた認証は、リクエストごとにサーバーとの通信が発生するため、SSGの恩恵が少なくなる可能性があります。<br></p>

JWTトークンとサーバーセッションによるログイン機能の違いと使用例

<h2 id="h3183ebf097">1. Nest.jsとは</h2><p>Nest.jsは、効率的でスケーラブルなサーバーサイドアプリケーションを構築するためのNode.jsフレームワークです。Angularにインスパイアされた構造を持ち、モジュール性、テストの容易さ、保守性に重点を置いています。また、TypeScriptを使用して書かれており、型安全とオブジェクト指向プログラミングをサポートしています。</p><h2 id="h29ce30b628">2. TypeScriptとNest.js</h2><p>Nest.jsはTypeScriptをベースにしているため、開発者は型安全とオブジェクト指向プログラミングの利点を享受できます。TypeScriptはJavaScriptのスーパーセットであり、静的型付けやインターフェイスを提供し、開発者の生産性を向上させます。</p><h2 id="h8269fcd22a">3. モジュール、サービス、コントローラーについて</h2><p>Nest.jsアプリケーションは、モジュール、サービス、コントローラーという3つの主要な要素で構成されています。</p><ul><li>モジュール: アプリケーションの機能をカプセル化し、再利用可能なコードを提供するための仕組みです。モジュールは、アプリケーション内の関連するサービスやコントローラーをグループ化します。</li><li>サービス: ビジネスロジックやデータアクセスを担当し、アプリケーションの機能を実装するためのクラスです。サービスは、コントローラーから呼び出され、データベースや外部APIとの通信を行います。</li><li>コントローラー: クライアントからのリクエストを処理し、適切なサービスに処理を委譲します。また、サービスからのデータをクライアントに返す役割も担当します。</li></ul><h2 id="hce63efcd0e">4. DTO (Data Transfer Object)</h2><p>DTO（Data Transfer Object）は、クライアントとサーバー間でデータをやり取りする際に使用されるオブジェクトです。Nest.jsでは、DTOを使ってAPIのリクエストとレスポンスのデータ構造を定義し、型安全を確保します。DTOはTypeScriptのインターフェイスやクラスを使用して定義されます。<br>DTOを使用することで、APIのリクエストとレスポンスのデータ構造を明確にし、エンドポイントの仕様を簡単に理解できるようになります。また、型の不一致や不正なデータによるバグを防ぐことができます。<br></p><h2 id="heb499575c8">5. PipeとValidationPipeによるバリデーション</h2><p>Nest.jsでは、Pipeという機能を利用して、リクエストデータの変換やバリデーションを行うことができます。Pipeは、リクエストデータを受け取り、それを変換したり、条件に従って検証したりする処理を行います。<br>ValidationPipeは、Nest.jsが提供するビルトインPipeの一つで、DTOによって定義されたデータ構造に基づいてリクエストデータのバリデーションを行います。ValidationPipeは、通常、class-validatorとclass-transformerという2つのライブラリと連携して動作し、データの型変換や検証ルールの適用を行います。<br>コントローラーのメソッドにValidationPipeを適用することで、CreateUserDtoに基づいたリクエストデータのバリデーションが行われます。<br>これにより、リクエストデータがDTOの定義に沿っていない場合、自動的にエラーが返され、開発者はバリデーションのためのコードを省略することができます。<br></p>

Nest.jsとは何か

<p>この記事では、MacでMongoDBをローカル環境にインストールする方法を解説します。Homebrewを使用して簡単にインストールを行います。</p><h2 id="h0e9c3e4c70">1. Homebrewのインストール</h2><p>すでにHomebrewがインストールされている場合は、この手順をスキップしてください。<br>ターミナルを開き、以下のコマンドを実行してHomebrewをインストールします。</p><pre><code>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</code></pre><p>インストールが完了したら、次のコマンドでHomebrewのバージョンを確認してください。</p><pre><code>brew -v</code></pre><h2 id="hd5f5c9de75">2. MongoDBのインストール</h2><p>ターミナルで以下のコマンドを実行し、MongoDBの公式Tapを追加します。</p><pre><code>brew tap mongodb/brew</code></pre><p>次に、以下のコマンドを実行してMongoDBをインストールします。</p><pre><code>brew install mongodb-community@5.0</code></pre><p>※バージョンが更新されている場合がありますので、適宜修正してください。</p><h2 id="h8d5dd52489">3. MongoDBの実行</h2><p>ターミナルで以下のコマンドを実行してMongoDBサーバーを起動します。</p><pre><code>brew services start mongodb-community@5.0</code></pre><p>MongoDBサーバーが起動したら、以下のコマンドでMongoDBシェルに接続できます。</p><pre><code>mongo</code></pre><p>起動ができない場合は以下のコマンドを試してみてください。</p><pre><code>brew install mongodb-community-shell</code></pre><h2 id="h8a0cc94ac8"><br>4. MongoDBの停止（必要に応じて）</h2><p>MongoDBサーバーを停止する場合は、ターミナルで以下のコマンドを実行してください。</p><pre><code>brew services stop mongodb-community@5.0</code></pre><p>以上で、MacでのMongoDBのローカル環境へのインストールが完了します。これでローカルでMongoDBを使用できるようになります。ぜひ、MongoDBを活用してデータ管理を効率化しましょう。<br></p>

MacでMongoDBをローカル環境にインストールする方法

<p>この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック <code>useScrollTrigger</code> の作成方法を紹介します。このカスタムフックを使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。</p><h2 id="hb30cc6d771">1. useScrollTrigger の解説</h2><p>カスタムフック <code>useScrollTrigger</code> のコードを見ていきましょう。</p><pre><code>const useScrollTrigger = (
  ref: RefObject&lt;HTMLElement&gt;,
  startPosition: number = 0
) =&gt; {
  const [isTriggered, setIsTriggered] = useState(false)

  useEffect(() =&gt; {
    const handleScrollTrigger = () =&gt; {
      if (ref.current) {
        const { top, bottom } = ref.current.getBoundingClientRect()
        const windowHeight = window.innerHeight

        if (top + startPosition &lt; windowHeight &amp;&amp; bottom &gt; 0)
          setIsTriggered(true)
      }
    }

    window.addEventListener('scroll', handleScrollTrigger)
    window.addEventListener('resize', handleScrollTrigger)

    handleScrollTrigger()

    return () =&gt; {
      window.removeEventListener('scroll', handleScrollTrigger)
      window.removeEventListener('resize', handleScrollTrigger)
    }
  }, [ref])

  return isTriggered
}

export default useScrollTrigger


</code></pre><p><code>useScrollTrigger</code> は2つの引数を受け取ります。</p><ul><li><code>ref</code>: 監視対象のHTML要素への参照</li><li><code>startPosition</code>: トリガーが発生する位置のオフセット（デフォルトは <code>0</code>）</li></ul><p><code>useState</code> を使って、<code>isTriggered</code> というステートを定義します。これは、要素が表示領域内にスクロールされたかどうかを表す真偽値です。<br><code>useEffect</code> を使って、スクロールとリサイズのイベントリスナーを設定します。これらのリスナーは、ウィンドウがスクロールされたりリサイズされたりしたときに <code>handleScrollTrigger</code> 関数を呼び出し、<code>isTriggered</code> の値を更新します。<br><code>handleScrollTrigger</code> 関数では、監視対象の要素の矩形がウィンドウの表示領域内に入ったかどうかをチェックし、<code>isTriggered</code> の値を更新します。オフセットが指定されている場合、表示領域内でトリガーが発生する位置が調整されます。</p><h2 id="h46446c11cf">2. 使用方法</h2><p><code>useScrollTrigger</code> を使って、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視する方法を紹介します。</p><pre><code>import React, { useRef } from 'react'
import useScrollTrigger from '@/hooks/useScrollTrigger'

const MyComponent = () =&gt; {
  const ref = useRef&lt;HTMLElement&gt;(null)
  const isTriggered = useScrollTrigger(ref)

  return (
    &lt;div&gt;
      &lt;div ref={ref} className={isTriggered ? 'visible' : 'hidden'}&gt;
        スクロールで表示される要素
      &lt;/div&gt;
    &lt;/div&gt;
  )
}

export default MyComponent</code></pre><p>上記のコードでは、<code>useRef</code> を使って、監視対象の要素への参照を作成しています。そして、<code>useScrollTrigger</code> を使って、要素が表示領域内にスクロールされたかどうかを判定しています。<br><code>isTriggered</code> の値に応じて、要素のクラス名が切り替わります。この例では、表示領域内にスクロールされたときに <code>visible</code> クラスが適用され、それ以外の場合は <code>hidden</code> クラスが適用されます。これにより、CSSで要素の表示・非表示やアニメーションを制御することができます。<br>以下は、表示・非表示の切り替えに使用できる簡単なCSS例です。</p><pre><code>.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}</code></pre><p>このように、<code>useScrollTrigger</code> カスタムフックを使うことで、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視し、表示領域内に入った際にアニメーションや特定の処理を実行することが容易になります。</p><h2 id="ha214098e44">まとめ</h2><p>この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック <code>useScrollTrigger</code> の作成方法を紹介しました。<br><code>useScrollTrigger</code> を使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。ぜひ、このカスタムフックをプロジェクトで活用して、スクロールに応じた動的なウェブアプリケーションを作成してください。</p>

【React】要素が表示領域内にスクロールされたか監視するカスタムフック

<p>この記事では、Reactでメディアクエリを簡単に扱うためのカスタムフック <code>useMediaQuery</code> を作成する方法を紹介します。このカスタムフックを使用することで、コンポーネントのレンダリングをデバイスや画面幅に応じて最適化できます。</p><h2 id="he43d227b7b">1. プロジェクトの構成</h2><p>まず、プロジェクトの構成を確認しましょう。以下のファイルが必要です。</p><ul><li><code>useMediaQuery.ts</code> : カスタムフック <code>useMediaQuery</code> が定義されています。</li><li><code>minmaxDecision.ts</code> : <code>minmaxDecision</code> 関数が定義されています。</li><li><code>vars.ts</code> : 画面幅の定数 <code>Device</code> が定義されています。</li><li><code>types.ts</code> : 型定義 <code>DeviceType</code> が定義されています。</li></ul><h2 id="h94ffd9dc31">2. useMediaQuery の解説</h2><p>カスタムフック <code>useMediaQuery</code> のコードを見ていきましょう。</p><pre><code>const useMediaQuery = (
  width: number | keyof DeviceType = Device.tb,
  minmax: 'min' | 'max' = 'max'
): boolean =&gt; {
  const [isMatch, setIsMatch] = useState(() =&gt; false)
  const breakpoint =
    typeof width === 'string' ? minmaxDecision(width, minmax) : width

  useEffect(() =&gt; {
    const isMatches = () =&gt;
      window.matchMedia(`(${minmax}-width: ${breakpoint}px)`).matches
    const resetIsMatch = () =&gt; {
      const nowIsMatch = isMatches()
      setIsMatch(() =&gt; nowIsMatch)
    }


    resetIsMatch()
    window.addEventListener('resize', resetIsMatch)
    return () =&gt; {
      window.removeEventListener('resize', resetIsMatch)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return isMatch
}

export default useMediaQuery</code></pre><p><code>useMediaQuery</code> は2つの引数を受け取ります。</p><ul><li><code>width</code> : 画面幅の閾値（デフォルトは <code>Device.tb</code>）</li><li><code>minmax</code> : メディアクエリのタイプ（'min' または 'max'。デフォルトは 'max'）</li></ul><p><code>useState</code> を使って、 <code>isMatch</code> というステートを定義します。これは、メディアクエリがマッチしているかどうかを表す真偽値です。<br><code>breakpoint</code> は、メディアクエリの閾値を計算します。<code>width</code> が文字列の場合、<code>minmaxDecision</code> 関数を使って計算されます。<br><code>useEffect</code> を使って、<code>resize</code> イベントリスナーを設定します。このリスナーは、ウィンドウサイズが変更されたときに <code>resetIsMatch</code> 関数を呼び出し、<code>isMatch</code> の値を更新します。</p><h2 id="h7696cab8dd">3. minmaxDecision の解説</h2><p><code>minmaxDecision</code> 関数のコードを見ていきましょう。</p><pre><code>const minmaxDecision = (
  width: number | keyof DeviceType,
  minmax: 'min' | 'max'
): number =&gt; {
  let _width: number = typeof width === 'number' ? width : Device[width]
  _width = minmax === 'max' ? _width - 1 : _width
  return _width
}

export default minmaxDecision</code></pre><p><code>minmaxDecision</code> 関数は2つの引数を受け取ります。</p><ul><li><code>width</code>: 画面幅の閾値またはデバイスタイプのキー</li><li><code>minmax</code>: メディアクエリのタイプ（'min' または 'max'）</li></ul><p>この関数は、<code>width</code> が数値の場合、そのままの値を使い、文字列の場合は <code>Device</code> オブジェクトから対応する数値を取得します。そして、<code>minmax</code> が 'max' の場合は、閾値から1を引いた値を返します。これにより、<code>max-width</code> クエリでは、閾値の1ピクセル手前までを対象とすることができます。</p><h2 id="h4044a99389">4. Device の解説</h2><p><code>Device</code> オブジェクトは、画面幅の定数を定義しています。以下のように定義されています。</p><pre><code>export const Device: DeviceType = {
  pc: 1920,
  ct: 1136,
  tb: 768,
  sp: 428
}</code></pre><p>これらの定数は、<code>useMediaQuery</code> や <code>minmaxDecision</code> 関数で使用されます。プロジェクトでサポートするデバイスや画面サイズに応じて、適切な値を定義してください。</p><h2 id="h3484014cc7">5. 使用方法</h2><p><code>useMediaQuery</code> を使って、コンポーネント内でメディアクエリを扱う方法を紹介します。</p><pre><code>// 画面幅
export type DeviceType = {
  pc: 1920
  ct: 1136 // Contents
  tb: 768 //IPad Mini
  sp: 428 //iPhone14ProMax
}

import React from 'react'
import useMediaQuery from '@/hooks/useMediaQuery'
import { Device } from '@/styles/vars'

const MyComponent = () =&gt; {
  const isMobile = useMediaQuery(Device.sp, 'max')

  return (
    &lt;div&gt;
      {isMobile ? (
        &lt;p&gt;モバイル画面です&lt;/p&gt;
      ) : (
        &lt;p&gt;モバイル画面以外です&lt;/p&gt;
      )}
    &lt;/div&gt;
  )
}

export default MyComponent</code></pre><p>上記のコードでは、<code>useMediaQuery</code> を使って、画面幅が <code>Device.sp</code> よりも小さいかどうかを判定しています。<code>isMobile</code> の値に応じて、異なる内容を表示しています。<br>このように、<code>useMediaQuery</code> カスタムフックを使うことで、コンポーネント内で簡単にメディアクエリを扱うことができます。これにより、レスポンシブデザインを実現しやすくなります。</p><h2 id="ha214098e44">まとめ</h2><p>この記事では、Reactでメディアクエリを簡単に扱うためのカスタムフック <code>useMediaQuery</code> の作成方法を紹介しました。また、<code>minmaxDecision</code> 関数や <code>Device</code> オブジェクトの定義方法についても説明しました。<br><code>useMediaQuery</code> を使って、コンポーネントのレンダリングをデバイスや画面幅に応じて最適化することができます。これにより、レスポンシブデザインの実現が容易になります。<br>ぜひ、このカスタムフックをプロジェクトで活用して、レスポンシブなウェブアプリケーションを作成してください。</p>

【React】メディアクエリを使うカスタムフック

<h2 id="hcb9dacb773">結論</h2><p>Gitはデフォルトの設定ではファイル名の大文字、小文字の区別がされない。<br></p><h2 id="h5e56efe3ac">発生状況</h2><p>Next.jsとTypeScriptで作成したプロジェクトGithubからvercelにデプロイを試みた際に発生。<br>ローカルでのBuildは成功する。<br></p><h2 id="h9c1f22bd6d">原因</h2><p>該当ファイルをバージョン管理への追加後、ファイル名の大文字、小文字を変更したため。<br>結論で述べた通り、Gitはデフォルトでは大文字、小文字の区別がされない。<br>その為、変更前のファイル名でバージョン管理が行われており、エラーが発生したファイルからimportが失敗。<br></p><h2 id="had0b1b94af">解決方法</h2><pre><code>git mv 【現在のファイル名】【新しいファイル名】</code></pre><p><br>上記を行い、正しいファイル名をバージョン管理することで解決した。<br></p><h2 id="hb109fbdd18">対策</h2><pre><code>git config --global core.ignorecase false</code></pre><p><br>コマンドラインで上記を実行することにより、Gitが大文字、小文字を区別するようになる。<br><br><br><a href="https://zenn.dev/msksgm/articles/20211122-clearify-upper-lower" target="_blank" rel="noopener noreferrer">参考サイト様</a></p>

HIROBLOG

New

Solidityとは何か

ブロックチェーンとは

エラーコードメモ

Next.jsのAPIルーティングとは

JWTトークンとサーバーセッションによるログイン機能の違いと使用例

Nest.jsとは何か

MacでMongoDBをローカル環境にインストールする方法

【React】要素が表示領域内にスクロールされたか監視するカスタムフック

【React】メディアクエリを使うカスタムフック

Solidity

Solidityとは何か

ブロックチェーンとは

Nest

エラーコードメモ

JWTトークンとサーバーセッションによるログイン機能の違いと使用例

Nest.jsとは何か

Next

Next.jsのAPIルーティングとは

【Next.js】vercelデプロイ時にエラーType error: Cannot find module '@/components/someComponents' or its corresponding type declarations.

React

【React】要素が表示領域内にスクロールされたか監視するカスタムフック

【React】メディアクエリを使うカスタムフック

Mongo DB

MacでMongoDBをローカル環境にインストールする方法