それでは、今回はより具体的にReact開発方法について解説します。
ショップデモのリポジトリの配下にreactというディレクトリがあります。
この下にReactのコードがあります。
ここのreact-setup.mdに記載されている通り、前準備としてreactのテンプレートを作ります。
npx create-react-app shopdemo --template typescript
あとはこのReactプロジェクトを動かすためのライブラリのインストールを行います。
詳細は、react-setup.mdに書いてあります。
まず３つのディレクトリがあって、これは絶対こうしなければならないというものでもないのですが、基本的なお作法として用意するのが一般的なようです。
- public
- ここにはindex.htmlだけ置くのが一般的なようです。
- テンプレートが自動生成するものでも良いのですが、Bootstrapを使用する場合は、テンプレートのindex.htmlにそのライブラリのロードを付け加えています。
- components
- ここに自分で開発するreactコンポーネントを配置します。
- hooks
- hookを用意する場合は、ここに配置します。
ここでは、まずログインをするためのユーザー認証を行うコンポーネントの処理について説明します。
Login.tsxに処理を記述しています。
tsxという拡張子は、jsx形式のファイルで、typescriptで記述する際は、tsxにするのがお作法のようです。
このファイルの終わりの方にreturn文以降に以下のような記述があります。
これがjsx記法と呼ばれるもので、javascriptの中にHTML文を埋め込むことができます。
return (
<div>
<h1>ログイン</h1>
<form onSubmit={handleSubmit}>
<table>
<tbody>
<tr>
<td><label>利用者ID:</label></td>
<td><input name="userid" type="text" placeholder="userid" /></td>
</tr>
<tr>
<td><label>パスワード</label></td>
<td><input name="password" type="password" placeholder="password" /></td>
</tr>
<tr><td><button type="submit">ログイン</button></td></tr>
</tbody>
</table>
</form>
{isError && <p style={{ color: "red" }}>{`${errorText}`}</p>}
</div>
);
};
ここでユーザー名とパスワードを入力してもらって、ログイン認証を行う処理を作っていきます。
前回の記事でReactは基本SPAでサブミットはないという説明をしましたが、このログイン処理のように複数のデータをフォーム形式で入力してサブミットするというようなケースは多々あります。
方法は色々あるのですが、ここではreact-router-domというものを使っています。
それ以外にもnext.jsというフレームワークが有名です。
実際にサブミットしているように見えますが、実際にPOSTしているわけではなく、react-router-domというフレームワークの中であくまでもSPAの枠組みの中で処理は実装されている感じです。
（もしかしたらこの理解は間違っているかも）
ここでonSubmitコールバックとしてhandleSubmitというメソッドが呼ばれています。
ここの中括弧は、jsxの作法の１つで、そのカッコ内にjavascriptを記述できます。
ここでは、handleSubmitはJavaScriptの変数で、以下のように定義されています。
ちなみにReactでは変数定義は、基本const、たまにletが使われ、varは使いません。
古いJavaScriptしか知らない人にとってはここが１つのハードルかもしれません。
そして以下のコードは厳密に言うと、TypeScriptですが、あんまり褒められたTypeScriptコードではありません。
eventという変数の型としてanyを使っていますが、本当は適切なイベント型を指定するべきです。
そのイベントに紐づいた（ここはフォームデータなので）データ要素としてユーザー名とパスワードを取得しています。
そしてuserLoginCheckというメソッドを呼び出しています。
const handleSubmit = (event: any) => {
event.preventDefault();
const { userid, password } = event.target.elements;
userLoginCheck(userid.value, password.value).finally(() =>
{
if (login.status) {
navigate("/Shop", { state: { customerId: login.customerId } })
}
})
};
userLoginCheckの中身は以下のようになっています。
const userLoginCheck = async (userid: any, userpassword: any) => {
let status = false;
let customerId = 0;
setIsLoading(true);
setIsError(false);
await axios
.get<any>(`http://${serverAddress}:${serverPort}${applicationName}/checkpassword/${userid}/${userpassword}?IRISUsername=${username}&IRISPassword=${password}`)
.then((result: any) => {
if (result.data.authorized === 'ok') {
login.status = true;
login.customerId = result.data.ID;
}
else {
setIsError(true);
setErrorText('ログインが失敗しました');
}
})
.catch((error: any) => {
setIsError(true)
if (error.response) {
setErrorText(error.response.data.summary);
}
else if (error.request) {
setErrorText(error.request);
}
else {
setErrorText(error.message);
}
})
.finally(() => setIsLoading(false))
};
この後、RESTのインタフェースによりサーバーのAPIを呼び出します。
RESTのインタフェースの実装も複数ありますが、ネット上でサンプルがたくさん見つかるaxiosというライブラリを使用しています。
ここでREST APIのurlを指定します。
このurlにcheckpasswordというメソッド名が含まれているのがわかると思います。
これがIRIS側で呼ばれるメソッド名となります。
ログインチェックがOKだったら、react-router-domに含まれるnavigateメソッドを呼び出して、/Shopにページ遷移します。
（実際にページ遷移しているわけではなくあくまでもエミュレーション）
あと、axiosの呼び出しは非同期なので、結果が返る前に呼び出しが戻ってくるので、最初はその動きになかなか慣れないかもしれません。
ログインが成功するとShop.tsxが呼ばれます。
このページはさらに複数のコンポーネントで構成されています。
そしてショッピングカートの機能を実装するためにcreateContextを使いコンテキスト情報を管理します。
navigate経由でページ遷移する際にデータを引き継ぐ仕組みとしてuseLocationというフックが用意されているので、それを使って情報を引き継ぎます。
jsx記法によるHTML定義の中で動的にデータを変更したい部分にはuseStateというフックを使用します。
import React from 'react';
import { createContext, useState, Dispatch,SetStateAction } from "react";
import { Header } from './Header';
import { ShoppingCart } from './ShoppingCart';
import { ProductList } from './ProductList';
import { useLocation } from "react-router-dom"
export type shopItem = {
productCode: string;
productName: string;
price: number;
units: number;
};
export const ShopContext = createContext({} as {
orderItems: shopItem[];
setOrderItems: Dispatch<SetStateAction<shopItem[]>>;
}
);
export const Shop = () => {
const [orderItems, setOrderItems] = useState<shopItem[]>([]);
const location = useLocation();
const values={orderItems,setOrderItems};
return (
<>
<div className="title">
<Header customerId = {location.state.customerId} />
</div>
<ShopContext.Provider value={values}>
<div className="shoppingcart" style = {{ float: "left",width: "40%",height: "100%",overflow: "auto",border: "solid #000000 1px"}}>
<ShoppingCart customerId = {location.state.customerId} />
</div>
<div id="productlist" style = {{ width: "60%",height: "100%",overflow: "auto",border: "solid #000000 1px"}}>
<ProductList />
</div>
</ShopContext.Provider>
</>
);
}
export default Shop;
.png)
Since the new programming contest is dedicated to FHIR and Digital Health Interoperability, we've decided to gather all the related ideas in one place (see the table below). To show your interest and support for your fellow members, we invite everyone to vote for existing ideas or post new ones before the start of the Contest..png)
When we launched the portal last year, we had very few ideas. A year and a half later, the number of ideas on the portal exceeded 300. 🌟.png)
To round up this newsletter, here are 4 ideas implemented during the last 2 months..jpg)