👓

ReactでTypeScriptを使ってみた!

2022/09/29に公開

React

TypeScript

tech

Flutterやった人がReactやってみた!

ReactとTypeScriptは昔勉強してましたが、全然分かりませんでした🙄
FlutterとDartをやっていると、同じオブジェクト指向の言語なのか以前よりは、stateとか、型定義とか理解できるようになってきました。

最近は、Reactは日本語の情報が増えてきて学習コストが下がってきた気がします。以前だったら、Vue.jsの方が日本語の情報が多いから、需要が多いのかなと思っていたのですが、そうでもないみたいです?

こちらのサイトで最近はReactの勉強をしていますね。今回のTypeScriptを使う際にも参考にさせていただきました!

開発環境

最近流行りのViteを使ってみました。installが速くて、環境構築も簡単で使いやすく、今後は流行るのではないかと思われます?
https://ja.vitejs.dev/

まずは、プロジェクトで使用するフォルダを作成して、Viteで環境構築をします。

installをする
アプリ名を入力する

npm create vite@latest

Reactを選択して、TypeScriptを使えるように設定をする。

eed to install the following packages:
  create-vite@3.1.0
Ok to proceed? (y) y
✔ Project name: … react-hell-ts
✔ Select a framework: › React
✔ Select a variant: › TypeScript

作成されたプロジェクトへ移動して、ターミナルに表示されているコマンドを入力する。

cd react-hell-ts
  npm install
  npm run dev

cdコマンドでプロジェクトへ移動して、以下のコマンドを入力

npm install

簡易サーバーを起動するときは、npm run devを使う。

今回作成サンプルアプリ

カウンターと入力フォームしかないですが、TypeScriptだと引数に型をつけないと、エラーが出るので、ここがJavaScriptと異なり難しかったです!

関数を書くところに、こちらのコードを書いてマウスをホバーすると、HTMLのタグによって引数にどんな型を書けば良いか教えてくれます。

<button onClick={(event)=>{}}>Click</button>

こちらを参考にしながら、作成したコード

App.tsx

import { useState } from "react";

function App() {
  //カウンターを保存する変数
  const [count, setCount] = useState<number>(0);
  //カウンターを追加する関数
  const increment = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(count);
    setCount(count + 1);
  };
  // 入力フォームの文字のデータを保存する変数。
  // 文字なので、string型
  const [name, setName] = useState<string>('');
  // 入力フォームの機能を使う関数
  // e:と引数に書いているが、名前はなんでもいいみたいです?
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    //名前が保存されたか確認するlog
    console.log(name);
  };
  //  入力フォームのボタンの機能を使う関数
  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    // useStateの第二引数のメソッドを書く
    // この中に引数[e]が入ってきて保存される
    setName(e.target.value);
  };

  return (
    <div className="App">
      <h1>Hello TypeScript</h1>
      <p>counter: {count}</p>
      {/* カウントをする関数を実行するボタン */}
      <button onClick={increment}>Click</button>
      {/* 入力フォームを使えるようにする関数をformタグに書く */}
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          {/* inputタグに、入力された値を保存する関数を書く */}
          <input type="text" name="name" value={name}
          onChange={handleChangeName} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;

プログラムを実行してみるとこのようになっています。

最後に

React、TypeScriptをなぜ理解できないのか悩んでいたのですが、その原因は文法への理解不足と公式ドキュメントを読んでなかったりしたことが原因でした😅
最近は、分かりやすい日本語の動画が、UdemyやYouTubeで出てきているので、より学習しやすくなりました。