【TypeScript】Reactでダイアログページを表示する方法ご紹介。

今回の記事はTypeScriptベースのReactでダイアログページを表示する方法をご紹介します。ダイアログ表示にはいくつか種類があるため、メリットデメリットを含め、解説していきます。使用用途に合ったものを使用しましょう。是非参考にしていただければ幸いです。

Reactでダイアログを表示する方法

ダイアログを表示する方法は下記です。

• Reactモジュール（NewWindow）を使う
• JavaScript/TypeScriptの別ページ表示用メソッドを使う

両者にはメリットデメリットがあるため、その辺り含め、順番に説明していきます。

Reactモジュール（NewWindow）を使ってダイアログ表示

Reactモジュールでダイアログを表示する場合はNewWindowというモジュールが使えます。

Reactモジュール（NewWindow）使い方

使い方は下記の記述です。

import React, { useCallback, useState } from 'react';
import { Button } from '@mui/material';
import NewWindow from 'react-new-window';

const App: React.VFC = () => {
  // 表示非表示Flag
  const [showFlag, setShowFlag] = useState<boolean>(false);
  // 画面を非表示
  const close = useCallback(() => {
    setShowFlag(false);
  }, []);
  // ダイアログ
  const Dialog: React.VFC = () => {
    return(
      <NewWindow>
      ダイアログ
      <Button onClick={close}>
        閉じる
      </Button>
      </NewWindow>
    )
  };
  return (
    <div>
      <Button onClick={() => {setShowFlag(true)}}>表示</Button>
      {showFlag && (<Dialog/>)}
    </div>
  );
}

export default App;

Reactモジュール（NewWindow）メリット

Propsで値を渡すことができるため、Reactのコード記述と相性が良いです。Reactのライブラリなため、そりゃそうかということなのですが、コードの一貫性はやはり重要です。

また、Propsで値をやりとりすることができる点としてダイアログページなどで代表的な検索画面などで検索した結果を元画面に反映するなどの連携が取りやすいです。

Reactモジュール（NewWindow）デメリット

下記コードのようにページに表示・非表示の切り替えFlagやコンポーネントを記述しておく必要がある点です。コンポーネント内のフラグが増えるという難点と使用する際はコンポーネントへの埋め込みが必要になってきます。

 <div>
      <Button onClick={() => {setShowFlag(true)}}>表示</Button>
      {showFlag && (<Dialog/>)}
    </div>

また、帳票など複数画面に表示したい場合、「<Dialog />」を複数記載する必要があります。

JavaScript/TypeScriptの別ページ表示用メソッドを使う

こちらはjavascriptでもお馴染みの「window.open()」関数を使用して実装します。

JavaScript/TypeScriptの別ページ表示用メソッドを使う方法

import React from 'react';
import { Button } from '@mui/material';

const App: React.VFC = () => {
  return (
    <div>
      <Button onClick={() => {window.open('http://localhost:3000/','','width=500 height=500')}}>表示</Button>
    </div>
  );
}

export default App;

ローカルホストは自身のローカルサーバを指定してください。

JavaScript/TypeScriptの別ページ表示用メソッドを使うメリット

関数ベースで使用できるため、コード記述量は減り、見やすくなる。

また、複数ページを表示することができる。

JavaScript/TypeScriptの別ページ表示用メソッドを使うデメリット

Reactプロジェクトで最も問題になるPropsの連携が取れない点です。そのため、レデューサーを使ったStore管理などで検索画面ダイアログで取得した値を返却する必要が出てきます。（正直この部分が痛いです。）

Reactでダイアログページを表示する方法まとめ

多少のコード量等は仕方ないと考えた上で下記が最も理想的な使い分けかと思います。

• 検索画面系の値を返すダイアログ → NewWindow
• 複数ページ表示する必要がある場合 ⇨ window.open
• もしもPropsを使用せずStore全ての値をStore管理する場合（おすすめしない）→ window.open

そもそも検索画面は複数表示させるというのがおかしな話なので検索画面は「NewWindow」、帳票系の複数表示必要な項目は「window.open」で固定しても良いかもしれません。

では今回の記事は以上です。他にも多数のReact関連の初心者用記事を記載しているので是非興味があればサイト内見て行ってください。