React TypeScriptでベーシックなカスタムボタンコンポーネントを作成する方法

読む所要時間: 12 分

March 04, 2021
執筆者
Diane Phan
Twilion
Stephenie Minami Nakajima
Twilion
レビュー担当者
Miguel Grinberg
Twilion
Yoshika Tokutake
Twilion

How to build a basic custom button component in React RypeScript

この記事はDiane Phanがこちらで公開した記事(英語)を日本語化したものです。

プログラミングを学ぶにあたって、特にJavaScriptのUIライブラリであるReactを学ぶことは簡単ではありません。しかし、もしあなたがインタラクティブなウェブページを作ることに興味があるのであれば、Reactの習得は大いに役立ちます。

Reactでは、カスタム可能な1つのコンポーネントで枠組みを作り、プロジェクト全体でその枠組みを再利用しその一部のみを変更することにより、短時間で要素を作成できます。コンポーネントについて学ぶことは、効率的で可読性の高いコードを書くためのベストプラクティスに従うことの重要性を理解するうえで役に立ちます。

本稿では、ベーシックなTypeScript Reactプロジェクトでカスタムボタンコンポーネントを作成する方法を紹介します。このチュートリアルを最後まで進めると、作成したボタンをウェブサイト内で再利用し、コンポーネントを効率的に再利用する方法を学習できます。

必要なツール・知識

  • Nodeのバージョン14.16.0以上（本稿執筆時点）
  • npm、yarnなどのパッケージマネージャー
  • JavaScriptおよびTypeScriptに関する基礎知識、または学習意欲

Reactアプリを起動する

Reactプロジェクトの作成方法はいくつかあります。ここでは簡略化するためcreate-react-appツールを使ってプロジェクトの構造を作成します。

コマンドラインで以下を実行すると、プロジェクトフォルダが作成され、my-first-typescript-appディレクトリに移動します。

npx create-react-app my-first-typescript-app --template typescript
cd my-first-typescript-app

ターミナルで以下を実行して、TypeScriptと関連するdependenciesをインストールします。

npm install --save-dev typescript
npm install --save-dev @types/react

ディレクトリには、すでにいくつかのフォルダとファイルが作成されます。 srcフォルダを開き、App.tsxに移動すると、Reactウェブページ用のボイラープレートコードが表示されます。このファイルの内容を、以下のコードに置き換えてください。

import './App.css';
 
function App() {
 return (
   <>
     <h1>Colorful Custom Button Components</h1>
   </>
   )
}
 
export default App;

ファイルを保存し、ターミナルでnpm startを実行して、localhost:3000/でサーバーを起動します。

localhost:3000を開くと、ヘッダーのみが表示されます。サーバーは使用していない時はプロセスを終了させても問題ありませんが、そのまま実行を続けるとコードを編集する度にリアルタイムで変更点を確認できます。

Reactでカスタムコンポーネントのプロパティを定義する

前述したように、ReactではコンポーネントとPropsを使用してコードを簡略化しています。プロジェクト全体でコンポーネントを再利用できるよう、コンポーネント自体を可能な限りシンプルにしておくことが大切です。

ウェブサイトで使用される基本的なボタンの機能と見た目について考えてみましょう。ボタンには、さまざまな外観や形がありますが、どのボタンもクリックされることを目的としていることは一貫しています。

以下は、基本的なボタンの一例です。

ピンクのボタンコンポーネント


まずはボタンの外観を観察しCustomButtonComponentコンポーネントに設定する値を確認しましょう。 Reactのコンポーネントは先頭にPropsを定義する必要があります。 Propsとはプロパティの略で、コンポーネントにデータを渡すという意味では関数の引数と似ています。

今回作成するReactアプリのボタンは、以下のプロパティで構成されます。

これらのPropsを使用して情報を渡しレンダリングするためには、上記のプロパティのプレースホルダーを取り込むためのButtonオブジェクトを作成する必要があります。このButtonオブジェクトをエクスポートすると、Reactプロジェクト内で何度でも呼び出すことができるようになります。

Reactでコンポーネントを作る

ボタンコンポーネントに必要なPropsが理解できたところで、srcフォルダ内にcomponentsという名前の新しいフォルダを作成しましょう。components配下にCustomButtonComponent.tsxという名前の新しいファイルを作ります。

以下のコードをコピーして、CustomButtonComponent.tsxに貼り付けます。

import React from "react";

interface Props {
  border: string;
  color: string;
  children?: React.ReactNode;
  height: string;
  onClick: () => void;
  radius: string
  width: string;
}

const Button: React.FC<Props> = ({ 
    border,
    color,
    children,
    height,
    onClick, 
    radius,
    width
  }) => { 
  return (
    <button 
      onClick={onClick}
      style={{
         backgroundColor: color,
         border,
         borderRadius: radius,
         height,
         width
      }}
    >
    {children}
    </button>
  );
}

export default Button;

「Reactでカスタムコンポーネントのプロパティを定義する」セクションでご紹介したプロパティがinterface Propsに含まれています。各プロパティには、渡すことのできる型が定義されています。ほとんどのプロパティにStringが指定されていますが、これはCSSが特定の単位（%やpxなど）を必要とするためです。一方で、onClickイベントハンドラーは値がないことを示しています。

childrenプロパティは、Reactによって自動的に処理されるため、コンポーネントを定義する際に明示的に渡す必要がありません。さらに、childrenは別のReactノードを取り込んだり、今回のようにボタンの上に表示されるテキストを渡したりできます。

Reactプロジェクトでコンポーネントを使用する

これまでのコードを実際に試してみましょう。

ピンクの丸いボタンを作成するため、srcフォルダ内のApp.tsxファイルを以下のコードに変更します。

import './App.css';
import Button from "./components/CustomButtonComponent";

function App() {
  return (
    <>
      <h1>Colorful Custom Button Components</h1>
      <Button 
        border="none"
        color="pink"
        height = "200px"
        onClick={() => console.log("You clicked on the pink circle!")}
        radius = "50%"
        width = "200px"
        children = "I'm a pink circle!"
      />
    </>
  );
}

export default App;

ファイルを保存してください。

これで、カスタムコンポーネントの準備が整いました。npm startを実行中でない場合は、ターミナルで実行してください。ページを更新すると、先ほど作成したピンクのボタンが表示されます。

「I&#x27;m a pink circle」と書かれたカスタムボタンコンポーネント

次に、ボタン要素の検証をしてみましょう。ブラウザ画面を右クリックし、検証オプションを選択し、Consoleメニューをクリックします。ボタンをクリックすると、Consoleタブにメッセージが表示されます。このようにボタンがクリックされたときに正しく動作するかどうかを視覚的にテストすると良いでしょう。

カスタムボタンコンポーネントとブラウザのコンソール上に表示される「You clicked on the pink cirlce!」

またconsole.log()をalert()に置き換えることもできます。

「You clicked on the pink circle」のアラートメッセージ

 

onClickイベントハンドラーに別の指示を渡すことで、プロジェクトをさらに拡張できます。ユーザーを新しいページにリダイレクトしたり、さらにクリエイティブにカラフルな図形を追加し、音符を表現するReactアートプロジェクトに返信させたりもできます。

今回私は自分のクリエイティビティを表現するためにさまざまな形のボタンを作ってみました。これをきっかけに、皆さんもコードを使ってアートを作ってみませんか？

ブラウザ画面上に縦に重なって表示される三つのボタンコンポーネント

 


上記のボタンのコードは、以下を参照して下さい。

import './App.css';
 import Button from "./components/CustomButtonComponent";
 
 function App() {
   return (
     <>
       <h1>Colorful Custom Button Components</h1>
       <Button
         border="none"
         color="pink"
         height = "200px"
         onClick={() => alert("You clicked on the pink circle!")}
         radius = "50%"
         width = "200px"
         children = "I'm a pink circle!"
       />
       <br></br>
       <br></br>
 
       <Button
         border="dotted"
         color="#f5bc42"
         height = "200px"
         onClick={() => console.log("You clicked on the orange circle!")}
         radius = "50%"
         width = "200px"
         children = "I'm an orange circle!"
       />
       <br></br>
       <br></br>
       <Button
         border="dashed"
         color="#fdffc4"
         height = "200px"
         onClick={() => console.log("You clicked on the yellow square!")}
         radius = "10%"
         width = "200px"
         children = "I'm a yellow square!"
       />
     </>
   );
 }
 
 export default App;

オプショナル: ReactプロジェクトでCSSを試すための開発者ツールをインストールする

Reactを使ってもっと開発したい場合は、React Developer Toolsのインストールを検討してみてはいかがでしょうか。React Developer Toolsは、ページ上でレンダリングされたReactコンポーネントの内訳を表示してくれるChromeの便利な拡張機能です。

この拡張機能をインストールすると、Chromeの検証ツールでComponentsタブが表示されるようになります。

ブラウザのコンソール上で表示されているComponentsタブ

 

Componentsをクリックすると、App.tsxで使用されているコンポーネントが表示されます。さらにボタンを追加すると、それぞれのボタンの構成要素が繰り返し呼び出されることがわかります。

この拡張機能を使うとPropsの値を変更しながらリアルタイムで表示を確認できます。ボタンを選択し、ComponentsでPropsに別の値を書き込むだけで、プロジェクト上でコードを変更する前にCSSの表示を試すことができます。

ここではWebページ上でcolorとchildrenのPropsの値を直接変更して、画面上で青緑色の円がどのように表示されるかを確認しています。

Componentsタブから直接ボタンの色を変えている様子

 

ぜひボタンコンポーネントにプロパティを追加したり、値を調整してみてください。

TypeScript Reactカスタムボタンコンポーネント - 次のステップ

お疲れ様でした。これまで再利用性が高く効率的でクリーンなコードを書く方法をご紹介してきました。Reactの学習曲線は急ですが、カスタムコンポーネントやWrapperの書き方を学ぶことに時間を投資すれば、長い目で見れば時間を大幅に節約できます。

Reactを使えば、ダイナミックなアプリケーションを短時間で立ち上げることができます。またReactの巨大なオープンソースコミュニティに参加できることも大きな強みです。

さらに上級者向けの課題に挑戦してみたい方は、Buttonコンポーネントに背景画像を追加して、ユーザーが図形ではなく画像をクリックできるようにしてみてください。

ReactとTypescriptをもっと使ってみたい場合は、以下の記事を参照してください。

ぜひあなたのTypeScript Reactプロジェクト第一弾の進捗をメールでシェアしてください。

Diane PhanはDeveloper Networkのエディターで、Developer Voicesチームに所属しています。プログラマーがプロジェクトを遂行する際に直面する問題の解決や支援することが好きです。ご連絡はdphan [at] twilio.comまたは LinkedInまでお願いします。

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。