1. 概要

このシリーズでは、TypeScriptの入門教材としてサバイバルTypeScriptで学習し、個人的に重要だと思った箇所を備忘録として記事に記載しています。

今回の記事では、第三章作って学ぶTypeScriptを題材に、TypeScriptでのApp実装を行います。

2. 題材：Reactでいいねボタンを作る

第三章作って学ぶTypeScriptのReactでいいねボタンを作ろうに従い、Appを作っていきます。

3. 環境構築

3.1. Yarnのインストール

パッケージ管理ツールYarnを導入します。グローバル環境にインストールしておきます。

npm install -g yarn

install yarn

3.2. その他インストールが必要なもの

以下をインストールしていない場合は別途追加しておいて下さい。おそらくこれまで記事での環境構築時にインストール済みです。

Node.js
NPM
エディタ（VS Codeなど）

3.3. プロジェクト作成

以下コマンドでReactプロジェクトを作成します。

npx create-react-app like-button --template typescript

※ create-react-appパッケージが足りていない場合は以下のようにインストールを促されます。

install create-react-app

パッケージのインストールおよびReactプロジェクトの作成が終わると、指定ディレクトリに以下のようなファイルが出来上がっているはずです。

created files

3.4. 開発サーバ起動確認

作成したディレクトリに移動し、以下のコマンドを実行することで開発サーバが立ち上がります。

yarn start

無事に立ち上がると以下のようなCompiled Successfully!画面が表示されます。

Compiled Successfully!

また、指定されたlocalhostポートにアクセスするとReactのひながたAppが表示されます。

React Template

4. コーディング

4.1. 作ったコード全体

一旦全体を以下に記載します。それぞれのブロックにおける重要箇所は後ほど説明します。

4.1.1. App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <LikeButton />
      </header>
    </div>
  );
}

function LikeButton() {
  const [count, setCount] = useState(999);
  const handleClick = () => {
    setCount(count + 1);
  }
  return(
    <span className='likeButton' onClick={handleClick}>
      ♥ {count}
    </span>
  );
}
export default App;

4.2. App.tsxを変更する

初期設定では、src/App.tsxの内容が描画されるようになっています。

たとえば、予め用意されているdiv要素内を以下のように変えると、画面表示内容も瞬時に切り替わります。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>けにぶろぐ</h1>
      </header>
    </div>
  );
}

export default App;

App.tsxの変更

※ ここでの拡張子「.tsx」とは、TypeScript内に直接XMLを書けるように拡張したものです。同様にJavaScriptでは「.jsx」となります。

4.3. LikeButton関数/タグを用意する

React JSXでは自身で定義した関数をタグとして使うことが出来ます。今回はLikeButtonという関数およびタグを追加しています。

<div className="App">
    <header className="App-header">
        <LikeButton />
    </header>
</div>

…

function LikeButton() {
    …
}

4.4. React useState関数を使ってボタンのカウントを制御する

ボタンカウントの制御のためにReactのuseState関数というものを使っています。

以下のようにインポートします。

import React, { useState } from 'react';

使用する際には、以下のように記載します。

const [count, setCount] = useState(999);

それぞれ以下を意味しています。

count : state値
setCount : stateを更新するための関数名
useState(999) : reactのuseState関数の呼び出し、引数はstate（今回の場合count）の初期値が入る

4.5. onClick属性からcount stateの更新を行う

span要素にonClick属性を追加し、handleClickという関数を呼び出しています。またその中で、先程定義したsetCount関数を呼び出し、count値の更新を行っています。

function LikeButton() {
  const [count, setCount] = useState(999);
  const handleClick = () => {
    setCount(count + 1);
  }
  return(
    <span className='likeButton' onClick={handleClick}>
      ♥ {count}
    </span>
  );
}

4.6. cssの設定

Reactでいいねボタンを作ろうに従い、span要素にlikeButtonというCSSクラスを適用しています。 ReactではCSSクラスの指定にはclassではなくclassName属性を使うようです。

<span className='likeButton' onClick={handleClick}>

cssクラス記載はApp.css内に追記しています。

App.tsx内には、プロジェクト生成時点からApp.cssのインポート記載がされているため問題なく反映されるはずです。

.likeButton {
  background-color: rgb(231, 76, 60);
  color: white;
  padding: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

4.7. 動作確認

以下のように、クリックする度に値が増えるいいねボタンを作ることが出来ました。

いいねボタンApp

5. おわりに

今回の記事では、サバイバルTypeScriptの第三章作って学ぶTypeScriptを題材に、Reactを使ったいいねボタンの実装を行いました。

次回は引き続き、コーディング規約の確認などを学んでいこうと思います。

けにぶろぐ

サバイバルTypeScript勉強備忘録3（Reactでいいねボタンを作る）

目次