React 入門

TypeScript コメント掲示板アプリの開発

CommentListPage コンポーネントの作成

ここではコメントの一覧を表示するためのコンポーネントである CommentListPage を作成し，このページがトップページになるように設定も変更します．

App コンポーネント（src/App.tsx）をコメント一覧のコンポーネントとして利用してもよいのですが，今回は新たにコンポーネントを作成してそれをデフォルトのコンポーネントとして利用することにします．まず，src フォルダ内に components フォルダを作成します．次のとおり，Visual Studio Code のエクスプローラで「src」フォルダを選択した状態から「新しいフォルダ」のアイコンをクリックしてフォルダ名「components」を入力します．

次に，components フォルダを開いた状態で「新しいファイル」アイコンをクリックして「CommentListPage.tsx」を入力します．このとき，ファイル名の先頭が大文字で各単語の先頭も大文字になるようにしてください．

新しいファイル「CommentListPage.tsx」作成されました．

作成した src/components/CommentListPage.tsx を編集しますが，Visual Studio Code に拡張機能をインストールしていると，次の通りファイルの先頭に「rafce」とだけ入力するとコードの候補が表示されるので Tab を押して雛形を自動生成します．「rafce」と入力してもコードの候補が表示されない場合はここを参照して拡張機能をインストールしてください．

コードの雛形が生成されました．

Visual Studio Code で生成された雛形です．ここでファイル名から関数名 (CommentListPage) が自動的に作成されていることに注意してください．

src/components/CommentListPage.tsx
import React from 'react'

const CommentListPage = () => {
  return (
    <div>CommentListPage</div>
  )
}

export default CommentListPage

次の通り，見出し要素 <h1>コメント一覧</h1>を返すように書き換えておきます．

src/components/CommentListPage.tsx
import React from 'react'

const CommentListPage = () => {
  return (
    <h1>コメント一覧</h1>
  )
}

export default CommentListPage

次に，src/index.tsx に記載されている内容を確認します．このファイルの7行目で，index.html の id=root を持つ要素を取得しています．続いて8行目でその要素に対して root.render() で App コンポーネントの内容を描画しています．なお，React.StrictMode は JavaScript の Strict モード（厳格モード）を有効にするための指定です．Strict モードを有効にしたときの影響などは MDN などで確認してください．

src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

表示するコンポーネントを App コンポーネントから CommentListPage コンポーネントに変更します．このためには，root.render() で CommentListPage コンポーネントを返すように書き換えます．同時にプログラムの先頭で CommentListPage をインポートします．このとき，index.tsx から CommentListPage.tsx への相対的なパスを指定しなければならないので，./components/CommentListPage とし，拡張子 .tsx は省略しています．また App コンポーネントのインポートは不要になったのでコメントアウト（または削除）します．

src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import CommentListPage from './components/CommentListPage';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    {/* <App /> */}
    <CommentListPage />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

コメント一覧の見出しが表示されました．うまく動作すれば src/App.tsx と src/App.css ファイル自体を削除しても構いません．

なお，JSX では閉じタグのない空要素を利用するときには上の11行目にあるとおり <App /> と記載しなければならいことに注意してください．他にも例えば改行の <br> も JSX では <br /> と入力しなければなりませんし，12行目の CommentListPage コンポーネントの読み込みでも <CommentListPage /> と入力しなければなりません．

目次に戻る