[前の投稿] ホーム / 開発試行 /

React(Typescript)で静的Webサイトを作る

2021/06/06

開発試行

Reactで静的Webサイトを作成しました。公式のサンプルをもとにformをサブミットして、API呼び出し、結果を表示する単純なWebサイトになります。最終的にVSCodeのLiveServerを使ってローカルホストで動作確認まで行います。作業はすべてVSCODE上で行います。


入力


結果表示

環境
  • FW：React
  • LNG：Typescript
  • IDE：VSCODE
  • OS：Windows
  • API：A3RTのTalkAPI(ChatBot)

Reactのテンプレートから基本のスケルトンを作成

Reactのインストール

VSCODEのターミナルにて、npmコマンドを使い、npxとReactをインストールします。


$apt update
$npm install n -g
$n stable
$apt purge -y nodejs npm
$exec $SHELL -l
$npm install -g npx #NPXのインストール
$npx create-react-app a3rt --template typescrip #Reactのサンプルソースをインストール

スケルトンの作成

インストール後、./srcのファイルのうち、APP.css,APP.tsx,index.tsx,react-app-env.d.ts以外を削除します。残ったファイルを以下のようにスケルトン化します。





./Package.jsonに以下の通り追加します。ビルド結果のJSやCSSを相対パスで読み込むことができるようになります。


{
  "homepage": "./",
}

基本のコンポーネント配置

./src配下に、compornentsフォルダを作成し、Forms.tsx,Responce.tsx,Load.tsxを配置します。Reactでは基本的にcompornentという単位でオブジェクトを管理します。compornentをメインのAPP.tsxに配置し、APP.tsxをindex.tsxに配置します。index.tsxはindex.html上でinnerhtmlとして呼び出されるイメージになります。

Forms.tsxでは、onSubmit時に、setImessage（compornent間でImessageのStateを受け渡す）、getOmessage（API呼び出し）を実行します。Responce.tsxでは、APIから返却されたOmessageを表示します。OmessageはApp.tsx経由で受け渡されることになります。すべてのStateはApp.tsxに所属します。 


/*props定義*/
type FromPropsType={
    imessage:string;
    setImessage:any;
    getOmessage:any;
}

const Form =({imessage,setImessage,getOmessage}:FromPropsType)=>{
    return(
        <form onSubmit={getOmessage}>
            <input type="text" name="imessage" placeholder="" onChange={e=>setImessage(e.target.value)} value = {imessage}/>
            <button type="submit">SUBMIT</button>
        </form>
    );
};
export default Form;


/*props定義*/
type ResponcePropsType = {
    responce:{
        omessage:string
    }
}

const Responce =({responce}:ResponcePropsType)=>{
    return(
        <div>
        {responce.omessage && <div className="">{responce.omessage}</div>}
        </div>
    );
};
export default Responce;

Load.tsxは、通信中の場合にspinを表示するCompornetです。


const Load =()=>{
    return(
        <div className="load">
        <h5>Loading</h5>
        </div>
    );
};
export default Load;

App.tsxは、compornentを管理します。


{
import React from 'react';
import './App.css';
import Form from './components/Form';
import Responce from './components/Responce';
import Load from './components/Load';
import {useState} from "react";

type ResponceStateType={
  omessage:string
}

function App() {
  const[load,setLoad]=useState<boolean>(false);
  const[imessage,setImessage]=useState("");
  const[responce,setResponce]=useState<ResponceStateType>({
    omessage:""
  });

  const getOmessage=(e:any)=>{
    ------------
    ------------
    ------------    
  }  

  return (
    <div className="container">
    <Form  imessage={imessage} setImessage={setImessage} getOmessage={getOmessage}/>
    <Responce responce={responce}/>
    {load ? <Load/>:<div>} /*参考演算子でLoadを出し入れします*/
    </div>
  );
}

export default App;

Reactにロジックを追加

getOmessageを追加

A3RTのTalkAPIを呼びだせるように以下のように追加します。apikeyはリンクより、A3RTのWebサイトにて発行します。


const getOmessage=(e:any)=>{
    e.preventDefault();

    const fdata = new FormData();
    fdata.set('apikey', 'xxxxxxxxxx');      
    fdata.set('query', imessage);      

    fetch(`https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk`,{
      method: "POST",
      body: fdata
    })
    .then(res=>res.json())
    .then((data)=>{
      setResponce({
        omessage:data.results[0].reply
      })
      setImessage("");
      setLoad(false);
    })
    .catch(err=>{
      alert("エラーが発生しました。リロードしてください。")
      setLoad(false); 
      }
    )   
}
A3RT

Load用のCSSを追加


  text-align: center;
}
.load {
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

Webサイトの実行

npm startで実行

以下の通り実行します。規定のブラウザ上に今回作成したWebサイトが表示されます。


npm start

You can now view a3rt in the browser.
  Local:            http://localhost:3001
  On Your Network:  http://172.19.80.1:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

live serverで実行

まず、Reactのbuildを行い、その後、VSCode上の右下にあるパネル「GoLive」をクリックし、サーバを起動します。



Compiled successfully.

サーバが起動すると、規定のブラウザ上に以下の画面がでるので、buildフォルダを選択します。選択すると今回作成したWebサイトが表示されます。



まとめ

今回はReactで静的Webサイトを作成する方法を紹介しました。Paas環境で実行する方法については、AzureやAWS上で、ストレージ上に静的Webサイトを作成すると簡単だと思います。

QooQ