React+TypeScriptを試した

作成:2021.09.15

更新:2021.09.15

React

Reactとは?

JavaScriptでSPAとか作っちゃおうぜライブラリ。

TypeScriptとは?

型ありJavaScript。

環境構築

任意のプロジェクトフォルダ(たとえば~/study/react)で以下を実行。

ターミナル(~/study/react)
npx create-react-app sample-project --template typescript

インストールして良いか聞かれるので「y」。

ターミナル(出力結果)
Need to install the following packages:
  create-react-app
Ok to proceed? (y)

完了すると以下のようなディレクトリ構成が生成される。
今回触るのはsrcディレクトリだけ。

~/study/react
sample-project
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── src
└── tsconfig.json

srcディレクトリの中にはテンプレートが入っているが、今回は自前で作るので、react-app-env.d.tsのみを残して削除する。

ターミナル(~/study/react)
npx create-react-app sample-project --template typescript

CSSはSassで書きたいので、プロジェクトフォルダに移動してモジュールを追加。

ターミナル(~/study/react/sample-project)
npm i -D node-sass

create-react-appでプロジェクトを作った場合、node-sassを入れるだけでSassが使える。

作る

選択肢から1つを選んだら、その内容が表示されるというだけの簡単なものを作る。

エントリーポイント

~/study/react/sample-project/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';

// CSSのインポート
import './index.scss';

// コンポーネントのインポート
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

親コンポーネント

~/study/react/sample-project/src/component/App.tsx
// データを一時保存するためにインポート
import { useState } from 'react';

// CSSのインポート
import './App.scss';

// コンポーネントのインポート
import PokemonList from './PokemonList';

// メイン処理
function App() {
  {/*
    一時保存するデータ

    myPokemon:
      state名(任意)です。この名前で管理します。
    setMyPokemon:
      stateをセットします。
      名前は任意ですが、慣例としてset + state名とするようです。
    useState:
      Reactのメソッドです。引数に初期値を指定します。
  */}
  const[myPokemon, setMyPokemon] = useState('');

  return (
    <div className="App">
      <div>
        <h1 className="App__heading">最初のポケモンを選択</h1>

        {/*
          ポケモンリストのコンポーネントを出力します。
          コンポーネントの名前は大文字ではじめます。
        */}
        <PokemonList
          setMyPokemon = { setMyPokemon }
        />

        <p className="App__result">
          あなたが選んだポケモン:<b className="App__resultName">{ myPokemon }</b>
        </p>
      </div>
    </div>
  );
}

// 他のファイルにインポートできるようにします。
export default App;

子コンポーネント

~/study/react/sample-project/src/component/PokemonList.tsx
// CSSのインポート
import './PokemonList.scss';

// ポケモンリストの引数の型
type PokemonListPropsType = {
  setMyPokemon: React.Dispatch<React.SetStateAction<string>>;
}

// ポケモンリスト
const PokemonList = (props: PokemonListPropsType) => {
  return (
    <ul className="pokemonList">
      <li className="pokemonList__item">
        <input
          type="radio"
          name="pokemon"
          value="ヒトカゲ"
          className="pokemonList__input"
          id="hitokage"
          onChange={e => props.setMyPokemon(e.target.value)}
        />
        <label htmlFor="hitokage" className="pokemonList__label">ヒトカゲ</label>
      </li>

      <li className="pokemonList__item">
        <input
          type="radio"
          name="pokemon"
          value="ゼニガメ"
          className="pokemonList__input"
          id="zenigame"
          onChange={e => props.setMyPokemon(e.target.value)}
        />
        <label htmlFor="zenigame" className="pokemonList__label">ゼニガメ</label>
      </li>

      <li className="pokemonList__item">
        <input
          type="radio"
          name="pokemon"
          value="フシギバナ"
          className="pokemonList__input"
          id="fushigibana"
          onChange={e => props.setMyPokemon(e.target.value)}
        />
        <label htmlFor="fushigibana" className="pokemonList__label">フシギバナ</label>
      </li>
    </ul>
  );
};

export default PokemonList;

実行する

ターミナル(~/study/react/sample-project)
npm start

Visual Studio Codeの権限に関するアラートが出た場合は「許可する」。

Visual Studio Code(アラート)
“Visual Studio Code.app”が“Google Chrome.app”を制御するアクセスを要求しています。制御を許可すると、“Google Chrome.app”の書類やデータにアクセスしたり、そのアプリケーション内で操作を実行したりできるようになります。