Zenn
📊

単一のHTMLファイルでReactとPlotlyを使うサンプルコードを作ってみた

2022/05/31に公開
JavaScript
React
Babel
plotly
unpkg
tech

はじめに

プログラムからレポート的なものをHTML形式で出力することはよくあると思います。
その際、取り回しを良くするために単一のHTML、あるいは少数のファイルで完結させたいことも多いです。

それに加え、Plotlyを使ったインタラクティブなチャートを使いたかったので、小さなサンプルコードを作ってみました。
react-plotly.jsの使い方で少しハマってしまったので、備忘録を兼ねて記事を残しておきます。

サンプルコード全体

サンプルコードの全体は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>React + Plotly</title>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/plotly.js-dist@2/plotly.js"></script>
    <script src="https://unpkg.com/react-plotly.js@2/dist/create-plotly-component.min.js"></script>
    <script type="text/babel">
      const Plot = createPlotlyComponent.default(Plotly);

      function App() {
        const [type, setType] = React.useState("pie");
        const data = {
          "pie": [{type: "pie", values: [1, 2, 3]}],
          "line": [{type: "scatter", mode: "lines", x: [1, 2, 3], y: [2, 1, 3]}],
        };

        return (
          <div>
            <div>
              <label>
                <select value={type} onChange={(e) => setType(e.target.value)}>
                  <option value="pie">Pie</option>
                  <option value="line">Line</option>
                </select>
              </label>
            </div>
            <div>
              <Plot data={data[type]} />
            </div>
          </div>
        );
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

実行結果

上記のHTMLファイルをGoogle Chromeで実行した結果は以下の通りです。左上のセレクトボックスからチャートの種類を切り替えることができます。

ポイント

実装上のポイントは以下の通りです。

  • unpkgを使ってnpmパッケージを読み込んでいます。
    • パッケージのバージョンは、メジャーバージョンのみ固定しています。
  • babel/standaloneを使ってJSXを実行時にトランスパイルしています。
  • アプリケーション全体はReactを使って作成しています。
  • チャートはPlotlyを使って描画しています。
  • Reactを読み込むscript要素にはcrossorigin属性を指定しています。（参考）
  • PlotコンポーネントはcreatePlotlyComponent.defaultを使って構築しています。
    • README.mdを見る限りはcreatePlotlyComponent(Plotly)で良いはずですが.defaultが必要でした。（理由は分かっていません）

おわりに

このサンプルコードが何らかの参考になれば幸いです。

Discussion