React on いつかの熊右衛門

Ant Design：Collapse のヘッダーとコンテンツの padding と背景色を変更する

Sat, 13 Jul 2024 09:53:00 +0900

スタイルを設定できる部分がコンポーネントによってらしい。
Collapse は padding と背景色が変えられるようなので試してみた。

ConfigProvider の theme で設定する。

import React from "react";
import { ConfigProvider } from "antd";
import type { CollapseProps } from "antd";
import { Collapse } from "antd";

const items: CollapseProps["items"] = [
 {
 key: "1",
 label: "Test Text",
 children: "Content Text",
 },
];

const ExampleCollapse: React.FC = () => (
 <>
 <h1>デフォルト</h1>
 <Collapse
 defaultActiveKey={["1"]}
 items={items}
 />
 <br />
 <h1>padding なし、背景色変更</h1>
 <ConfigProvider
 theme={{
 components: {
 Collapse: {
 headerPadding: "0px",
 headerBg: "#fa8072",
 contentPadding: "0px",
 contentBg: "#87cefa",
 },
 },
 }}
 >
 <Collapse
 defaultActiveKey={["1"]}
 items={items}
 />
 </ConfigProvider>
 </>
);

何が変えられるかは、定義を辿れば分かりそう。
Collapse の場合は以下だった。

React：CTRL + S や Command + S で保存処理を行うには

Sat, 09 Sep 2023 18:56:24 +0900

create-next-app@13.4.19 で初期コードを生成後、実現したいフックを書いてみました。

保存のショートカットキーで、指定した処理を実行するフック

Mac なら Command + S、Mac でなければ CTRL + S で指定した処理を実行します。

"use client"

import { useEffect } from 'react';

export default function useSaveKey(saveFunc: ()=> void) {
 useEffect(() => {
 function onKeyDown(e: KeyboardEvent) {
 const isMac = window.navigator.userAgent.indexOf("Mac") !== -1;
 const isCtrl = isMac ? e.metaKey : e.ctrlKey;
 if (e.key === 's' && isCtrl) {
 e.preventDefault();
 saveFunc();
 }
 }
 document.addEventListener('keydown', onKeyDown);
 return () => document.removeEventListener("keydown", onKeyDown)
 }, [saveFunc])
}

使用例

初期で生成された page.tsx に追加してみた。

"use client"

import Image from 'next/image'
import useSaveKey from './useSaveKey';

export default function Home() {
 useSaveKey(() => console.log('save.'));
 return (
(以下略)

アップデートに期待するライブラリ

useKeyPress というフックがあったので試しましたが、動作しませんでした。
動作環境によって Command か CTRL かを変えられるかも不明ですが。

React：Cytoscape.js の図をじんわり更新する

Sat, 18 Mar 2023 17:01:29 +0900

以前の試作では、表示が即切り替わりました。
Cytoscape.js に animate があるので、じんわり更新する試作をしてみました。

import React, { FC, useRef, useEffect } from 'react';
import cytoscape, { Core, ElementDefinition, Stylesheet, } from 'cytoscape';

const Child: FC<{
 Elements?: ElementDefinition[],
 Styles?: Stylesheet[],
}> = ({
 Elements = undefined,
 Styles = undefined,
}) => {
 const refEl = useRef(null);
 const refCy = useRef<Core | null>(null);

 useEffect(() => {
 const container = refEl.current! as HTMLDivElement;
 refCy.current = cytoscape({
 container: container,
 elements: Elements,
 style: Styles,
 });
 const cy = refCy.current;
 return (() => {
 cy.destroy();
 })
 }, []);

 useEffect(() => {
 const cy = refCy.current;
 cy?.json({ elements: Elements, styles: Styles });
 cy?.nodes('[type]').style({ opacity: 0.2 });
 cy?.nodes('[type]').animate({ style: { opacity: 1 }, duration: 1000 });
 }, [Elements, Styles]);

 return (
 <div ref={refEl} style={{ width: '300px', height: '200px' }}></div>
 );
 }

export default Child;

Child.tsx に 30、31行を追加しただけで、他は以前のままです。
30行目：不透明度を即下げる
31行目：1秒掛けて不透明にする
で、じんわり更新しているような効果にしてみました。

前回

今回

React：props で Cytoscape.js の図を更新する試作

Sat, 11 Feb 2023 20:00:24 +0900

試作内容

<Child
 Elements={el}
 Styles={sy}
/>

上記のように、props で cytoscape へ設定するデータを渡して更新する Child コンポーネントの作成を目指します。

テンプレ作成

ベースとなるアプリは以下のコマンドで用意しました。

npx create-react-app my-app --template=typescript
cd my-app
yarn add cytoscape
yarn add -D @types/cytoscape

試作したコンポーネント

import React, { FC, useRef, useEffect } from 'react';
import cytoscape, { Core, ElementDefinition, Stylesheet } from 'cytoscape';

const Child: FC<{
 Elements?: ElementDefinition[],
 Styles?: Stylesheet[],
}> = ({
 Elements = undefined,
 Styles = undefined,
}) => {
 const refEl = useRef(null);
 const refCy = useRef<Core | null>(null);

 useEffect(() => {
 const container = refEl.current! as HTMLDivElement;
 refCy.current = cytoscape({
 container: container,
 elements: Elements,
 style: Styles,
 });
 const cy = refCy.current;
 return (() => {
 cy.destroy();
 })
 }, []);

 useEffect(() => {
 const cy = refCy.current;
 cy?.json({ elements: Elements, styles: Styles });
 }, [Elements, Styles]);

 return (
 <div ref={refEl} style={{ width: '300px', height: '200px' }}></div>
 );
 }

export default Child;

主なポイントは、useEffect を以下の２つに分けて処理するところでしょうか。

初期に描画する処理（14行目以降）
更新された props のデータで描画する処理（27行目以降）

14行目の useEffect の第２引数に Elements と Styles を入れても更新は可能でしたが、はじめからの描画になるので、図の変更（ノードの移動など）が戻ってしまいました。
その為、27行目の useEffect で props の更新に反応させ、

src/Child.tsx
 Line 25:8: React Hook useEffect has missing dependencies: 'Elements' and 'Styles'. 
　Either include them or remove the dependency array react-hooks/exhaustive-deps

と言う指摘は無視しています。

やはりこの手のライブラリ使用は useEffect でハマりそうな気がしますね。
あと、cytoscape の要素の初期の高さをどうするか悩みそうでした。
何もしないと高さがゼロになって何も描かれないんですよね。
仕方がないので今回は固定値を設定しました。

作成したコンポーネントを使用したスクリーンショット

ボタンクリックで、Node1 の色が変わります。

blank：黒
A：赤
B：青

その他のファイル

Child.tsx の他に、修正または追加したファイルは以下の通りです。

import React, { useState } from 'react';
import Child from './Child';
import Elements from './cy-element';
import Styles from './cy-style';

function App() {
 const [el, setElements] = useState(Elements);
 const [sy, setStyles] = useState(Styles);
 const onClick = (type: string) => {
 const node = el.find(e => e.data.id === "n01");
 node!.data.type = type;
 setElements([...el]);
 };
 return (
 <div>
 <Child
 Elements={el}
 Styles={sy}
 />
 <button onClick={() => onClick('')}>blank</button>
 <button onClick={() => onClick('A')}>A</button>
 <button onClick={() => onClick('B')}>B</button>
 </div>
 );
}

export default App;

import { ElementDefinition } from 'cytoscape';

export default [{
 "data": {
 "id": "n01",
 "label": "Node1",
 "type": "A"
 }
}, {
 "data": {
 "id": "n02",
 "label": "Node2"
 }
}, {
 "data": {
 "source": "n01",
 "target": "n02"
 }
}] as ElementDefinition[];

import { Stylesheet } from 'cytoscape';

export default
[
 {
 "selector": "node",
 "style": {
 'label': 'data(label)',
 "background-color": "black"
 }
 },
 {
 "selector": "node[type='A']",
 "style": {
 "background-color": "red"
 }
 },
 {
 "selector": "node[type='B']",
 "style": {
 "background-color": "blue"
 }
 }
] as Stylesheet[];

プロを目指す人のためのTypeScript入門 (Amazon)

React：Cytoscape.js の図を要素に合わせてリサイズする

Sat, 04 Feb 2023 10:54:59 +0900

Cytoscape.js を使った試作に、要素の大きさに図のサイズが追随するようなコードを追記しました。
以前と差分がある行を強調表示にしています。（分かりづらいですが。）

 import React, { useRef, useEffect } from 'react';
 import './App.css';
 import cytoscape, { Core, GridLayoutOptions } from 'cytoscape';
 import cyStyle from './cy-style.json';
 import data from './data.json';

 function App() {
 const refEl = useRef(null);
 const refCy = useRef<Core | null>(null);

 useEffect(() => {
 const container = refEl.current! as HTMLDivElement;
 refCy.current = cytoscape({
 container: container,
 layout: {
 name: 'grid',
 columns: 4
 } as GridLayoutOptions,
 style: cyStyle as unknown as cytoscape.Stylesheet[],
 elements: data as unknown as cytoscape.ElementsDefinition
 });
 const cy = refCy.current;

 cy.ready(function(){
 var n13 = cy.$('#n13');
 var n11 = cy.$('#n11');
 var n12 = cy.$('#n12');
 var p11 = n11.position();
 var p12 = n12.position();
 var d = (p12.x - p11.x)/4;

 n13.position({
 x: (p11.x + p12.x)/2,
 y: p11.y - d
 });

 n11.add(n12).position({ x: p11.x, y: p11.y + d });
 });
 return(() => {
 cy.destroy();
 })
 }, [])

 // リサイズ対応
 useEffect(() =>{
 const el = refEl.current! as HTMLDivElement;
 const resizeObserver = new ResizeObserver(() =>{
 const cy = refCy.current;
 cy?.resize();
 cy?.fit();
 });
 resizeObserver.observe(el);
 return () => resizeObserver.unobserve(el);
 }, [])

 return (
 <div ref={refEl} style={{ width: "100vw", height: "100vh" }} />
 );
 }

 export default App;

ResizeObserver でリサイズを監視して、cy.resize、cy.fit で図のサイズを合わせています。
ブラウザのサイズを変更すると、要素のサイズも変わるので図の大きさも変わるようになります。

プロを目指す人のためのTypeScript入門 (Amazon)

React：Cytoscape.js を試した

Sat, 14 Jan 2023 21:46:12 +0900

前回に引き続き、ライブラリを物色しています。

環境

yarn create react-app my-app --template typescript
cd my-app 
yarn add cytoscape
yarn add -D @types/cytoscape

で作成しました。
React は 18.2.0
cytoscape は 3.23.0
でした。

サンプル

Demo にある Edge-types を組み込んでみました。
cy-style.json と data.json はデモのリポジトリから拝借し、App.tsx ファイルを修正しました。

import React, { useRef, useEffect } from 'react';
import './App.css';
import cytoscape, { GridLayoutOptions } from 'cytoscape';
import cyStyle from './cy-style.json';
import data from './data.json';


function App() {
 const el = useRef(null);

 useEffect(() => {
 const container = el.current! as HTMLDivElement;
 var cy = cytoscape({
 container: container,
 layout: {
 name: 'grid',
 columns: 4
 } as GridLayoutOptions,
 style: cyStyle as unknown as cytoscape.Stylesheet[],
 elements: data as unknown as cytoscape.ElementsDefinition
 });

 cy.ready(function(){
 var n13 = cy.$('#n13');
 var n11 = cy.$('#n11');
 var n12 = cy.$('#n12');
 var p11 = n11.position();
 var p12 = n12.position();
 var d = (p12.x - p11.x)/4;

 n13.position({
 x: (p11.x + p12.x)/2,
 y: p11.y - d
 });

 n11.add(n12).position({ x: p11.x, y: p11.y + d });
 });
 return(() => {
 cy.destroy();
 })
 }, [])

 return (
 <div ref={el} style={{ width: "100vw", height: "100vh" }} />
 );
}

export default App;

プロを目指す人のためのTypeScript入門 (Amazon)

React：maxGraph を試した

Sat, 07 Jan 2023 20:05:29 +0900

構成図や階層図に使えそうなライブラリを物色しています。
現状、React でこの手のグラフを描画するライブラリの多くは相性が良くないと感じています。

maxGraph を試した結果を残しますが、やはり React と相性が良くなさそうでした。
別々に作って組み合わせた方が良いんでしょうか。

環境

yarn create react-app my-app --template typescript
cd my-app
yarn add @maxgraph/core

で作成しました。
React は 18.2.0
maxGraph は 0.1.0
でした。

サンプル

README.md にある例を組み込んでみました。
App.tsx ファイルを修正しました。

import React, { useRef, useEffect } from 'react';
import { Graph, InternalEvent } from '@maxgraph/core';

function App() {
 const el = useRef(null);

 useEffect(() => {
 const container = el.current!;
 InternalEvent.disableContextMenu(container);

 const c = container as HTMLDivElement;
 const g = c.appendChild(document.createElement("div"));
 
 const graph = new Graph(g);
 graph.setPanning(true);
 const parent = graph.getDefaultParent();
 
 graph.batchUpdate(() => {
 const vertex01 = graph.insertVertex(parent, null, 'a regular rectangle', 10, 10, 100, 100);
 const vertex02 = graph.insertVertex(parent, null, 'a regular ellipse', 350, 90, 50, 50, {shape: 'ellipse', fillColor: 'orange'});
 graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
 });
 return(() => {
 g.remove();
 })
 }, []);

 return (
 <div ref={el} />
 );
}

export default App;

表示はできましたが、useEffect の挙動を考えるとハマりそうとしか思えません。。

プロを目指す人のためのTypeScript入門 (Amazon)

Redux Toolkit の RTK Query を定周期に実行する

Sat, 18 Dec 2021 17:19:33 +0900

以前 RTK Query を使ってみましたが、定周期で実行することができるようなので試しました。

テンプレートの作成

create-react-app でテンプレートを作成します。
create-react-app のバージョンを指定しているのはエラーを回避する為です。
v5.0.0が最近(2021/12/14)出たばかりだからかと思います。

npx create-react-app@5.0.0 my-app --template redux-typescript

APIの準備

定期的に取得して結果に違いが出そうな API として、Yahoo! JAPAN Webサービスの気象情報API を利用します。
利用には固有のアプリケーションIDを取得する必要があります。

RTK Query のコードを追加

テンプレートに追加/修正するファイルは以下の４ファイルです。

src/app/services/weather/index.ts
src/app/services/weather/type.ts
src/app/store.ts
src/App.tsx

気象情報APIを実行するコードを以下のように作成しました。
渡した座標（Coordinates）の天気（Weather）を返します。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Coordinates, Weather } from './type';

const appId = '(取得した固有のアプリケーションID)';

export const weatherApi = createApi({
 reducerPath: 'weatherApi',
 baseQuery: fetchBaseQuery({ baseUrl: 'https://map.yahooapis.jp/weather/V1/' }),
 endpoints: (builder) => ({
 getWeather: builder.query<Weather, Coordinates>({
 query: (coordinates: Coordinates) => {
 const {
 latitude,
 longitude,
 } = coordinates;
 return `place?output=json&past=1&coordinates=${longitude},${latitude}&appid=${appId}`;
 } ,
 }),
 }),
});

export const { useGetWeatherQuery } = weatherApi;

Weather の定義は以前紹介した「Paste JSON as Code」を利用し、Coodinates を含め以下のようにしました。

export interface Coordinates {
 latitude: number;
 longitude: number;
}

export interface Weather {
 ResultInfo: ResultInfo;
 Feature: Feature[];
}

export interface Feature {
 Id: string;
 Name: string;
 Geometry: Geometry;
 Property: Property;
}

export interface Geometry {
 Type: string;
 Coordinates: string;
}

export interface Property {
 WeatherAreaCode: number;
 WeatherList: WeatherList;
}

export interface WeatherList {
 Weather: Weather[];
}

export interface Weather {
 Type: string;
 Date: string;
 Rainfall: number;
}

export interface ResultInfo {
 Count: number;
 Total: number;
 Start: number;
 Status: number;
 Latency: number;
 Description: string;
 Copyright: string;
}

そして、作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import { weatherApi } from './services/weather';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 [weatherApi.reducerPath]: weatherApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat(weatherApi.middleware),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

表示部分の作成

既存の App.tsx を以下のように変更しました。

import React, { useState } from 'react';
import { useGetWeatherQuery } from './app/services/weather';

const intervalOptions = [
 { label: 'Off', value: 0 },
 { label: '1分', value: 1 * 60 * 1000 },
 { label: '10分', value: 10 * 60 * 1000 },
 { label: '30分', value: 30 * 60 * 1000 },
];

const Types: { [key: string]: string } = {
 observation: '実測値',
 forecast: '予測値',
};

export function App() {
 const [latitude, setLatitude] = useState(35.663613);
 const [longitude, setLongitude] = useState(139.732293);
 const [pollingInterval, setPollingInterval] = useState(60000);
 const { data, error, isLoading } = useGetWeatherQuery({
 latitude,
 longitude,
 }, { pollingInterval });
 const now = new Date();
 return (
 <>
 <div>
 <label>更新間隔</label>
 <select
 value={pollingInterval}
 onChange={({ target: { value } }) =>
 setPollingInterval(Number(value))
 }
 >
 {intervalOptions.map(({ label, value }) => (
 <option key={value} value={value}>
 {label}
 </option>
 ))}
 </select>
 </div>
 <div>
 <label>経度</label><input type="text" value={longitude} onChange={(e) => setLongitude(Number(e.target.value))} />
 </div>
 <div>
 <label>緯度</label><input type="text" value={latitude} onChange={(e) => setLatitude(Number(e.target.value))} />
 </div>
 {
 error
 ? 'Error.'
 : isLoading
 ? 'Loading...'
 : data && data.Feature
 .map(feature => <>
 <div>{feature.Name}</div>
 <table>
 <caption>{now.toLocaleDateString()} {now.toLocaleTimeString()} 更新</caption>
 <thead>
 <tr>
 <th>区分</th>
 <th>日時</th>
 <th>降水強度（mm/h）</th>
 </tr>
 </thead>
 <tbody>
 {feature.Property.WeatherList.Weather
 .map(w =>
 <tr key={w.Date}>
 <td>{Types[w.Type]}</td>
 <td>{w.Date}</td>
 <td align='right'>{w.Rainfall}</td>
 </tr>
 )}
 </tbody>
 </table>
 </>)
 }
 </>
 );
}

export default App;

API を実行する周期を useGetWeatherQuery のオプションで pollingInterval に指定すれば OK です。
このソースコード自身の注意としては、入力中の座標の天気も取得に行っちゃう作りになっている所ですが妥協しました。

実行結果

「降水強度」が 0 のみだと寂しいので、降りそうな新潟駅辺りを指定してみました。

データの取得と表示も定周期で動きました。
定周期のタイミングで、座標変更前のデータ取得も１度発生しますね。
特に使われることが無いので問題にはならなそうです。

ローカルで実行した React アプリでもサーバーの API を利用するには

Sat, 25 Sep 2021 21:52:50 +0900

結果、package.json に以下の様な proxy を設定すれば OK という話なのですが、やりたいことから順に説明していきます。

 "proxy": "http://192.168.0.10/"

API のポートが 80 で無く、例えば 8080 なら、それも指定します。

 "proxy": "http://192.168.0.10:8080/"

やりたいこと

開発サーバー (192.168.0.10)

バックエンドの API のサービスが用意できている
開発したフロントエンドのアプリもビルドして配置する

開発するPC (192.168.0.20)

フロントエンドのアプリを create-react-app で生成されるものを元に開発する
ローカルで実行する http://localhost:3000/ からサーバーの API を呼びたい

という太字の部分が「やりたいこと」になります。
何故なら単純に開発するPC側から、

fetch('http://192.168.0.10/v1/item')

しても、

Access to fetch at 'http://192.168.0.10/v1/item' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

というエラーでアクセスはできません。

試してみる：バックエンドの作成

簡単なものを express で作ってみます。

const express = require('express');
const app = express();
const port = 80;

app.get('/v1/item', (req, res) => {
 const resObj = {
 timestamp: new Date().toString(),
 message: 'Hello World!'
 };
 res.send(resObj);
});

app.listen(port, () => {
 console.log(`listening:${port}`)
});

サーバー側で次のコマンドで実行

node app.js

試しにブラウザからアクセスしてみて、

{"timestamp":"Sat Sep 25 2021 21:28:05 GMT+0900 (日本標準時)","message":"Hello World!"}

の様な文字列が表示されれば OK です。

試してみる：フロントエンドの作成

ベースは create-react-app で生成します。

npx create-react-app front-example --template typescript

修正するのは、App.tsx と package.json になります。

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

function App() {
 const [value, setValue] = useState<string>();
 useEffect(() => {
 fetch('/v1/item')
 .then(async res => setValue(JSON.stringify(await res.json(), null, 2)));
 }, []);
 return (
 <pre>{value}</pre>
 );
}

export default App;

{
 "proxy": "http://192.168.0.10/",
 "name": "front-example",
 "version": "0.1.0",
 "private": true,
(以下省略)

ローカルで実行します。

yarn start

ブラウザの http://localhost:3000/ に

{
 "timestamp": "Sat Sep 25 2021 21:40:27 GMT+0900 (日本標準時)",
 "message": "Hello World!"
}

の様な文字が表示されれば OK です。

React + Redux Toolkit + Storybook のプロジェクトを作成する

Sat, 11 Sep 2021 20:41:00 +0900

作成した React コンポーネントの確認に、Storybook が便利です。
更に、Redux Toolkit を導入している場合はどうするか、を確認してみました。

Redux Toolkit のプロジェクトを作成する

公式で案内されている Typescript の例をそのまま使ってサクっと作成します。

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

プロジェクトに Storybook を追加する

こちらも公式で案内されている sb init でサクっと導入します。

cd my-app
npx sb init

Storybook を導入したことで、元プロジェクトをローカルで実行する yarn start がコケてしまうので、以下の .env ファイルを作成してエラーになってしまうのを回避します。

SKIP_PREFLIGHT_CHECK=true

プロジェクトのコンポーネントで Story を作成する

元プロジェクトにある「Counter.tsx」コンポーネントを Story に追加する為に、以下のように「Counter.stories.tsx」を作成しました。

import { Provider } from 'react-redux';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { store } from '../../app/store';
import { Counter } from './Counter';

export default {
 title: 'Example/Counter',
 component: Counter,
 argTypes: {
 },
 decorators: [
 (Story) => (
 <Provider store={store}>
 <Story />
 </Provider>
 ),
 ],
} as ComponentMeta<typeof Counter>;

const Template: ComponentStory<typeof Counter> = () => <Counter />;

export const Default = Template.bind({});

Redux を使っている事で変わる点は、Provider で包む必要がある所です。（13〜15行目）
これをしない場合、以下のエラーになりました。

Error
could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Storybook を実行する

yarn storybook

で実行します。

と表示され、Counter コンポーネントの表示や動作を確認することができます。
Counter コンポーネントに props は無いので、Storybook の Controls タブで設定を変えて表示の変化を確認することはできません。
が、ボタンのクリックも処理されてストア及び表示に反映されますので、ストアを使っていることで挙動を確認し易くなる場合もあるのかな、とも思います。
この辺りはコンポーネントの設計次第でしょうか。

React で長い文字列を省略表記にして、ツールチップに全て表示するには

Sat, 24 Jul 2021 20:12:00 +0900

どんなことをしたいかというと、

文字列が長くて表示しきれないときは省略表記する
マウスホバーで文字列全体をツールチップ表示する

というコンポーネントを作成してみます。
動作は Chrome バージョン 92.0.4515.107 で確認しています。
この表示をしたコンポーネントのコードは以下の通りです。

export const Simple = () => <span
 style={{
 display: 'block',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 overflow: 'hidden',
 }}
 title="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"
>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</span>

style に、文字列が表示に収まらなかったら省略表記するように指定
title に、ツールチップで表示する文字列を設定

ということをしています。
ただ、このままだと省略表記が不要な文字長でもツールチップが表示されます。省略表記していないときはツールチップがでないようにしたいと思います。

作成したコード

.text {
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

import React, { useRef, useState, useEffect } from 'react';
import './text.css';

type TextProps = Omit<JSX.IntrinsicElements['span'], 'children'>
& { children: string };

export const Text = (props: TextProps) => {
 const refOuter = useRef<HTMLSpanElement>(null);
 const refInner = useRef<HTMLSpanElement>(null);
 // 省略表記のとき true
 const [isEllipsis, setIsEllipsis] = useState<boolean>(false);

 // リサイズ監視
 useEffect(() =>{
 const resizeObserver = new ResizeObserver(() =>{
 const rectOuter = refOuter.current?.getBoundingClientRect();
 const rectInner = refInner.current?.getBoundingClientRect();
 // 外枠 < 内枠 なら省略表記
 setIsEllipsis((rectOuter?.width ?? 0) < (rectInner?.width ?? 0));
 });
 const el = refOuter.current as Element;
 resizeObserver.observe(el);
 return () => resizeObserver.unobserve(el);
 });

 const {
 children,
 ...etc
 } = props;
 // 省略表記になるとき title を設定
 const title = isEllipsis && { title: children };
 return (
 <span
 ref={refOuter}
 className="text"
 {...etc}
 >
 <span
 ref={refInner}
 {...title}
 >{children}</span>
 </span>
 );
};

という Text コンポーネントにすると、

<Text>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<Text>

の様に使えます。

解説

省略表記している → title の props を設定
省略表記していない → title の props は無し

ということをする為に色々していきます。

 <span
 ref={refOuter}
 className="text"
 {...etc}
 >
 <span
 ref={refInner}
 {...title}
 >{children}</span>
 </span>

span を親子な状態にしています。

親

display: block; でブロック要素にして親要素の幅に沿わせる。
文字列が収まらなかったときに省略表記するスタイルの設定。
要素のリサイズを監視し、親と子の幅を比較して、ツールチップが必要かどうかを isEllipsis に反映。
親は overflow: hidden; にしているので、
親の幅 < 子の幅のときは省略表記されている、と判定します。

子

文字列の表示
文字列が
省略表記されたときはツールチップで全文表示
省略表記されていなければツールチップは無し

という役割をしています。

 // リサイズ監視
 useEffect(() =>{
 const resizeObserver = new ResizeObserver(() =>{
 const rectOuter = refOuter.current?.getBoundingClientRect();
 const rectInner = refInner.current?.getBoundingClientRect();
 // 外枠 < 内枠 なら省略表記
 setIsEllipsis((rectOuter?.width ?? 0) < (rectInner?.width ?? 0));
 });
 const el = refOuter.current as Element;
 resizeObserver.observe(el);
 return () => resizeObserver.unobserve(el);
 });

useEffect で親spanのリサイズ監視/監視解除をします。
リサイズの監視には ResizeObserver を使用します。
リサイズが発生したときは、親と子の span の幅を比較して、省略表記されているか判定した結果を isEllipsis に反映します。

ここまでするぐらいなら、もう常に title ありでも良いんじゃないか？という気も湧いてきますが、何かの参考になりましたら幸いです。

プロを目指す人のためのTypeScript入門 (Amazon)

Redux Toolkit の RTK Query で REST API を使う

Sat, 10 Jul 2021 20:17:00 +0900

前回は createAsyncThunk を使いましたが、チュートリアルを読み進んでみると、元々データフェッチの機能が用意されていましたので、今回はそちらの方法で REST API を使ってみました。
create-react-app でテンプレートを用意する所は前回と同じなので、その後の修正部分を書いていきます。

REST API を使用するコードを追加

公式の例を参考に createApi、fetchBaseQuery を使って書きます。
データを取得したい側は、useGetCityQuery フックを使うようになります。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export type city = {
 status: string;
 data: {
 id: string,
 name: string,
 }[];
};

export const cityApi = createApi({
 reducerPath: 'cityApi',
 baseQuery: fetchBaseQuery({ baseUrl: 'https://www.land.mlit.go.jp/webland/api/' }),
 endpoints: (builder) => ({
 getCity: builder.query<city, string>({
 query: (code) => `CitySearch?area=${code}`,
 }),
 }),
})

export const { useGetCityQuery } = cityApi

表示部分を次のように追加しました。

import React, { useState } from 'react';
import { useGetCityQuery } from '../../app/services/city';

export function City() {
 const [inputCode, setInputCode] = useState('13');
 const [code, setCode] = useState('');
 const { data, error, isLoading } = useGetCityQuery(code, { skip: code === ''});
 const cities = (code === '')
 ? undefined
 : data?.data;
 return (
 <div>
 <input type="text" value={inputCode} onChange={(e) => setInputCode(e.target.value)} />
 <button onClick={() => setCode(inputCode)}>get</button>
 <button onClick={() => { setCode(''); setInputCode(''); }}>clear</button>
 {
 error
 ? 'Error.'
 : isLoading
 ? 'Loading...'
 : <table>
 <thead>
 <tr>
 <th>ID</th>
 <th>name</th>
 </tr>
 </thead>
 <tbody>
 {
 cities?.map(c => 
 <tr key={c.id}>
 <td>{c.id}</td>
 <td>{c.name}</td>
 </tr>
 )
 }
 </tbody>
 </table>
 }
 </div>
 );
}

useGetCityQuery フックには、[get]クリック時の都道府県コードを渡す必要があるので、

inputCode：入力中の都道府県コード
code：[get]クリック時に inputCode を設定

としています。
code が空のときはクエリを発行したくないので、フックに skip: True を渡して発行を止めています。
データは現状の値が返されるので、cities は undefined にしています。

REST API の実行中は ‘Loading…’ の表示にしてみましたが、REST API が軽くて目視では確認できませんでした。
また、同じクエリは RTK Query がキャッシュから返してくれる為、同じ都道府県コードのときは REST API は発行されません。

そして、store に作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import { cityApi } from './services/city';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 [cityApi.reducerPath]: cityApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat(cityApi.middleware),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

前回のコードよりもスッキリしましたね。ファイルの構成も次の通りになりました。

createAsyncThunk と RTK Query 、どちらも使い易くできていますね。

React + Redux Toolkit で REST API を使う

Sat, 03 Jul 2021 18:56:53 +0900

React Redux で面倒に感じる部分が、かなり良い感じに改善しているらしい Redux Toolkit 。
非同期の部分も加わっている様なので、REST API を試してみました。

基本はテンプレートを使用

Redux Toolkit のイントロダクションでも説明されている通り、次のコマンドでテンプレートを用意しました。

npx create-react-app my-app --template redux-typescript

REST API は「国土交通省総合情報システム」が公開している「都道府県内市区町村一覧取得API」で試しました。

テンプレートを参考に REST API を使用するコードを追加

テンプレートが良い感じに参考なります。
なので、同じ構成でコードを追加していきました。

まずは counterAPI.ts を参考に次のコードを追加。

export type city = {
 status: string;
 data: {
 id: string,
 name: string,
 }[];
};

export function fetchCity(code: string) {
 return new Promise<city>((resolve, reject) => {
 fetch(`https://www.land.mlit.go.jp/webland/api/CitySearch?area=${code}`)
 .then(response => resolve(response.json()))
 .then(data => reject(data));
 });
}

REST API を呼んで非同期に実行させる部分になります。

次に counterSlice.ts を参考に次のコードを追加。

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { 
 city,
 fetchCity,
} from './cityAPI';

export interface CityState {
 data?: city;
 status: 'idle' | 'loading' | 'failed';
}

const initialState: CityState = {
 data: undefined,
 status: 'idle',
};

export const cityAsync = createAsyncThunk(
 'city/fetch',
 async (code: string) => {
 try {
 const response = await fetchCity(code);
 return {
 status: 'idle',
 data: response.data,
 };
 }
 catch (e) {
 return {
 status: 'failed',
 data: [],
 };
 }
 },
);

export const citySlice = createSlice({
 name: 'city',
 initialState,
 reducers: {
 clear: (state) => {
 state.data = { status: 'idle', data: [] };
 },
 },
 extraReducers: (builder) => {
 builder
 .addCase(cityAsync.pending, (state) => {
 state.status = 'loading';
 })
 .addCase(cityAsync.fulfilled, (state, action) => {
 state.status = 'idle';
 state.data = action.payload;
 });
 },
});

export const { clear } = citySlice.actions;
export const selectCity = (state: RootState) => state.city.data;
export default citySlice.reducer;

createAsyncThunk 関数で非同期のアクションを生成し、extraReducers で非同期の結果を反映する感じですね。
cityAsync.rejected に対する処理は省略しましたが。

そして表示部分となる Counter.tsx を参考に次のコードを追加。

import React, { useState } from 'react';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import {
 clear,
 cityAsync,
 selectCity,
} from './citySlice';

export function City() {
 const [code, setCode] = useState('13');
 const cities = useAppSelector(selectCity);
 const dispatch = useAppDispatch();
 return (
 <div>
 <input type="text" value={code} onChange={(e) => setCode(e.target.value)} />
 <button onClick={() => dispatch(cityAsync(code))}>get</button>
 <button onClick={() => dispatch(clear())}>clear</button>
 <table>
 <thead>
 <tr>
 <th>ID</th>
 <th>name</th>
 </tr>
 </thead>
 <tbody>
 {
 cities?.data?.map(c => 
 <tr key={c.id}>
 <td>{c.id}</td>
 <td>{c.name}</td>
 </tr>
 )
 }
 </tbody>
 </table>
 </div>
 );
}

実行時には次のような形になります。

そして、作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import cityReducer from '../features/city/citySlice';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 city: cityReducer,
 },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

これで最終的なファイルの構成は以下の通り。

ホント使い勝手が良くなってますね。比較的小さい規模でも導入しやすいと思いました。

propsの型で楽する

Sat, 19 Jun 2021 20:38:00 +0900

props の型を定義するとき、

組み込み要素の props を引き継ぐ
不適切な props 値を設定できないようにする

際に参考になりそうな事を記載します。

組み込み要素の props を自身のコンポーネントに加える

htmlの要素が持つ pops を自身が作成するコンポーネントでも使うとき、ひとつひとつ定義すると大変なことになりますよね。
そういうときは、JSX.IntrinsicElements が便利です。

例えば、自身が作成するコンポーネントで button を使っていて、button が持つ props を受け取れることを定義したいときは、

type MyButtonProps = JSX.IntrinsicElements['button'];

とすればOKです。自身のコンポーネント用に expanded: boolean という props があるなら、

type MyButtonProps = {
 expanded: boolean;
} & JSX.IntrinsicElements['button'];

という形で定義できます。

props に設定が間違っている事が分かるようにする

props の定義で、組み合わせできない props の値が設定されても、エラーで気が付けるようにできます。
少し長いですが以下の様な形です。

import React from 'react';

type BaseProps = {
 label: string;
}

type OrderedProps = {
 listType: 'ordered';
 listStyle: 'decimal' | 'cjk-decimal' | 'upper-roman';
} & BaseProps
 & JSX.IntrinsicElements['ol'];

type UnorderedProps = {
 listType: 'unordered';
 listStyle: 'none' | 'disc' | 'circle' | 'square';
} & BaseProps
 & JSX.IntrinsicElements['ul'];

type Props = OrderedProps | UnorderedProps;

export default function MyList(props: Props) {
 const {
 label,
 listStyle,
 children,
 ...otherProps
 } = props;

 let listEl = <></>;
 if (props.listType === 'ordered') {
 listEl = <ol
 style={{ listStyleType: listStyle }}
 {...(otherProps as JSX.IntrinsicElements['ol'])}
 >{children}</ol>;
 }
 if (props.listType === 'unordered') {
 listEl = <ul
 style={{ listStyleType: listStyle }}
 {...(otherProps as JSX.IntrinsicElements['ul'])}
 >{children}</ul>;
 }
 return (
 <div>
 <div>{label}</div>
 {listEl}
 </div>
 );
}

listType が

‘ordered’ なら、listStyle に使えるのは ‘decimal’, ‘cjk-decimal’, ‘upper-roman’
‘unordered’ なら、listStyle に使えるのは ’none’, ‘disc’, ‘circle’, ‘square’

となるので、違っている場合は指摘されます。

Visual Studio Code 上なら、
listType が ‘ordered’ なら、
listStyle に ’none’ は使えないので、
MyList に波線が付いて、間違っていることが分かります。

type として OrderedProps と UnorderedProps を定義して Props はそのどちらかとすることで、できない組み合わせを設定されたときでも間違いに気づけます。

type Props = OrderedProps | UnorderedProps;

VSCode で props のサジェストも追随してくれると更に楽なんですが、そこまで判断はされませんでした。