スポンサーリンク

【TypeScript】Reactで非同期に処理を実行する方法ご紹介。

TypeScript
スポンサーリンク

今回の記事はTypeScriptのReactで非同期処理を行う方法をご紹介します。初心者にも分かりやすいように記載していくので是非参考にしてみて下さい。

スポンサーリンク

TypeScriptでReactプロジェクト起動

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次に非同期で処理を行う方法をご紹介します。

非同期に処理を実行


import React, { useEffect } from 'react';
import axios from 'axios';

const App: React.VFC = () => {
  const [count, setCount] = React.useState(0);
  //非同期実行
  useEffect(() => {
    const CountSet = async () => {
      //3秒後に中の処理を実行
      setTimeout(() => {
        setCount(999);
      }, 3000);
    };
    //関数実行
    CountSet();
  }, []);

  //レンダリング
  return (
    <div style={{ height: 400, width: '100%' }}>
      <p>{count}</p>
    </div>
 );
}

export default App;

これでページを立ち上げると3秒後に表示が変わります。

非同期で処理を出来ます。console等でも確認できるのでコード書き換えてみて下さい。

では今回の記事は以上です。他にも多数のTypeScript記事を記載しているので是非サイト内見ていって下さい。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました