【初心者向け】React+TypeScript+Hooksでフォーム入力値を表示させる

こんにちはおたけいです

ReactとTypeScriptでフロントエンドの開発をしているのですが、なかなかとっつきづらいと思うので初心者向けにフォームに入力した値を表示するところまでやっていきたいと思います。

# React+TypeScript環境構築

まずは環境構築です。すでに済んでいる方は飛ばしてもらって大丈夫です。
今回はCreate React Appを使っていきます

まずはNodeJSがインストールされているかを確認します
terminalに下記のコマンドを入力してください

```terminal:terminal
node --version
```

こんな感じでバージョンがでてきたらOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580535/832ed92a-ab23-cee6-53af-a9fd511ef008.png)

バージョンが出てこない人はNodeJSを下記の公式のHPからダウンロード
https://nodejs.org/ja/

次はCreate React Appをインストールします
terminalに下記のコマンドを入力してください

```terminal:terminal
npm install -g create-react-app
```

※permission errorが出る場合には下記を実行（sudoの意味はちゃんと調べてから使ってくださいね！）

```terminal:terminal
sudo npm install -g create-react-app
```

ファイルを作成するところに移動してterminalに下記のコマンドを入力してください
今回はmyappというプロジェクトを作成してくれます

```terminal:terminal
npx create-react-app --template typescript myapp
```

command not found になってしまったら下記を参考にpathを通してください
https://qiita.com/Mikenerian/items/5e9801342a8373ab518f

さきほど作成したプロジェクトのディレクトリに移動して
terminalに下記のコマンドを入力してください

```terminal:terminal
npm start
```

ブラウザが立ち上がってReactのマークがくるくるしていれば無事に作成完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580535/61eb990f-219b-0d78-e87e-7ae9f37d60a5.png)

# 入力フォームを表示させてみる

無事にプロジェクトを作成できたところで早速実装していきます。
デフォルトで入っているapp.tsx を下記の内容に書き換えてください

```TypeScript:src/app.tsx
import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" /><br />
      <p>lastname</p>
      <input name="lastname" type="text" /><br />
    </div>
  )
}

export default App;
```

ブラウザには画像のように表示されていると思います。
これでフォームの表示までは完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580535/dab56e1f-ebc1-e15c-b06b-e353b99241fb.png)
# 入力フォームの値を表示させる

次にフォームに入力した値を画面に表示してみます。
ここではHooksというReactの機能をつかって入力値を画面に表示させてみます。
app.tsx を下記の内容に書き換えてください

```TypeScript:src/app.tsx
import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  const [firstname,setFirstname] = useState<string>()
  const [lastname,setLastname] = useState<string>()

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" value={firstname} onChange={(e) => setFirstname(e.target.value)} /><br />
      <p>lastname</p>
      <input name="lastname" type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} /><br />
      <p>
        {firstname},{lastname}
      </p>
    </div>
  )
}

export default App;
```

これでフォームに入力した値を画面に表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580535/089573a7-545f-d657-4116-cf6381e5d28f.png)


onChangeイベントを別の関数として設定することも可能です。
下記の内容に書き換えても同様の動きをしてくれます。

```TypeScript:src/app.tsx
import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  const [firstname,setFirstname] = useState<string>()
  const [lastname,setLastname] = useState<string>()

  const changeFirstName = (event: React.ChangeEvent<HTMLInputElement>)  =>  {
    setFirstname(event.target.value)
  }

  const changeLastName = (event: React.ChangeEvent<HTMLInputElement>)  =>  {
    setLastname(event.target.value)
  }

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" value={firstname} onChange={changeFirstName} /><br />
      <p>lastname</p>
      <input name="lastname" type="text" value={lastname} onChange={changeLastName} /><br />
      <p>
        {firstname},{lastname}
      </p>
    </div>
  )
}

export default App;

```


# まとめ

簡単でしたが以上です。
inputフォームの値をevent.target.valueでとってきてstateにセットするだけですが
なれないとスムーズに行かない所も多いと思います。
初心者の方で詰まっている方がいれば参考にしてください。