【勉強中】React, Next.jsの忘れそうなことメモ

JSXでテスト用の表示を繰り返す方法

JSXでページの見た目を作るときに、スクロールバーが表示されることを確認したくて、大量のテキストを出力する必要がありました。
そのときに、繰り返しテキストを表示するのにmap関数を使用しようとしましたが、なにも出力用の配列がなかったので、空の配列を作成しようと考えました。
しかし、単にnew Arrayをしただけでは、うまくmap関数が動かなかったので、そのときのことをメモとして記録します。

やりたかったこと

map関数を使ってテキストを繰り返し、大量に出力したかった。

やったこと

new Array<String>(100)で空配列を作成して、map関数で配列の個数回だけ、テキストを繰り返し出力するようにしました。

問題点

map関数がうまく動かず、想定通りにテキストが出力されませんでした。

対処方法

new Array<String>(100).map(...略...)

ではなく、

new Array<String>(100).fill("").map(...略...)

のように、.fill("")を挟むことでうまくmap関数が動作して、テキストが繰り返し表示されました。

page.tsx

export default function Home() {
  return (
    <div className="min-h-screen">
      <div>
        {new Array<String>(100).fill("").map((_, i) => {
          return (
            <p key={i}>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus
              possimus illum odit rerum nemo maxime consectetur natus cum
              nostrum magni commodi vel vitae, voluptatibus blanditiis quia
              dolores ratione. Sunt, quos.
            </p>
          );
        })}
      </div>
    </div>
  );
}

Noritaka

useRefに型を設定して、refの値を取得時のエラーを解消する（TypeScript）

フォームの値を取得するのに、これまではuseStateのsetXXX関数をonChangeで呼び出して取得していました。
最近、useRefを使っている動画を見て便利そうだったので使ってみたところエラーになったので、そのときの状況と対処をメモとして残します。

やりたかったこと

テキストを入力して送信するだけのフォームで、Inputに入力されたテキストを取得したかった。

やったこと

Inputに入力された文字列をuseRefを使って取得することにして、以下の記述をしました。

const refText = useRef(null);

onSubmitで実行する関数に以下の記述をしました。

const text = refText.current?.value;

発生したエラー

onSubmitで実行する関数内に記載した

const text = refText.current?.value;

の.value部分で、プロパティ 'value' は型 'never' に存在しませんというエラーが表示されました。

エラー解消のための対処

refTextの型を以下のように指定することでエラーが解消されました。

const refText = useRef<HTMLInputElement>(null);

補足

今回は型にHTMLInputElementを設定してエラーが解消されましたが、もしrefを設定する要素がInputではない場合、要素に対応したHTMLElementを設定する必要があるようです。

参照したページ

React,typeScript環境でuseRefを使用した際の型エラー解消

環境

名前	バージョン
next	13.4.7
react	18.2.0

Noritaka

Reactのコンポーネント分割など、ベストプラクティスに関連する記事など

すぐに見つけられなくなってしまうので、こちらにメモします。

▼コミュニティで教えてもらったページ

Noritaka

Next.js 13でcomponentsフォルダはプロジェクトルートに

特に何も考えず、なんとなくappフォルダの下にcomponentsフォルダを作ってしまっていました。
しかし、もし「page.tsx」というファイル名でコンポーネントを作っていたら、http://localhost:3000/componentsで変なページが表示されるところでした。
componentsフォルダはプロジェクトルートに置くものみたいですね。
※素人すぎるメモで恥ずかしい。

もしappフォルダより下のフォルダにコンポーネントを置きたい場合は、「_components」のようにフォルダ名の先頭にアンダースコアをつけるとルーティングから除外されるようです。

参考にしたページ

環境

名前	バージョン
next	13.4.7
react	18.2.0