ElectronアプリでReact/Vue Routerを使うには？

ElectronアプリでReact/Vue Routerを使うには？

前回は、Electron アプリでメニューバーをカスタマイズする方法をお伝えしました。 Web アプリを React や Vue のフレームワークを使って作る場合、ページの切り替えに「Router」を使う場合が多くなります。

Vue の場合は Vue Router、React の場合、React Router（react-router-dom）を使う場合が多いと思います。Web ベースのアプリを Electron でデスクトップのアプリにする場合は、この方法でページ（表示）を切り替える方が便利な場合があります。

この記事は、React/Vue を使ってアプリを作る際に、React Router を使って表示を切り替える方法について解説します。

React Router はハッシュヒストリを使う

通常の Web 開発で React Router を使う場合は、「BrowserRouter」をインポートして使う場合が多いと思いますが、Electron と併用して利用する場合は、この使い方では動作しません。

対策としては、ハッシュヒストリモード(Hash History)を使います。 Web アプリのトップレベルの記述例は以下のような感じで、「BrowserRouter」を「HashRouter」に置き換えるだけです。

import React from "react";

import { HashRouter, Route, Switch } from "react-router-dom";

import Analyze from "./page/analyze";

import Home from "./page/home";

const App = (props) => {

  return (

    <HashRouter>

      <div className="App">

        <Switch>

          <Route path="/" exact>

            <Home />

          </Route>

          <Route path="/analyze">

            <Analyze />

          </Route>

        </Switch>

      </div>

    </HashRouter>

  );

};

Menu の記述は「Link」を使う

実際に Web アプリでメニュー（Navbar）を使う場合は、以下の様に「Link」をインポートして利用します。Bootstrap などの Navbar の記述は「＜ a ＞」タグを使うことが多いと思いますが、Electro で利用する場合は「Link」を使います。

import {Link} from "react-router-dom";

const Navbar = (props) => {

    return(

        <div className="navbar">

            <ul>

                <li><Link to="/">Home</Link></li>

                <li><Link to="/analyze">Analyzhk></li>

            </ul>

        </div>

    )

}

実は、React や Vue のフレームワークをフル活用して Web アプリと同じような形でデスクトップの UI を作ってしまった方が、Web 開発に慣れている人の場合効率よく開発ができます。デスクトップアプリとして Electron を利用する場合、多少の書き換えが必要ですが、エントリーポイントのメニューから色々な操作やページの切り替えを行うよりは簡単に実装できます。

実は、このような方針で作ってしまった方が、前回お話ししたような Mac 特有の制限事項などは少なくなるので開発も楽になります。（ただし、Mac のガイドラインから外れます）

Vue は標準設定がハッシュモード

Vue Router の場合は標準設定がハッシュモードになっているので、設定を変更せずに利用すると、問題なく動作します。

Vue は先日もお伝えしていますが、拡張機能（プラグイン）を導入すればほとんど何もしなくて、Electron の開発テンプレートができてしまうので、Electron を使用してのデスクトップアプリ開発で利用するにはとても相性が良いのが大きな特徴です。

Electron のメニューでやることはアプリの終了

React や Vue の Router 機能を使ってしまえば Electron のエントリーポイントのソースコードで、メインのウインドウを作って、カスタムメニューもしくは標準メニューでアプリ本体の切り替えは、Router 機能で行う設計にすると、開発自体は Web 開発とほぼ同じでデスクトップアプリを作ること t ができます。

つまり、Web 開発を一通りマスターすればデスクトップのアプリまで開発できることになります。Web 開発者にとってはなんとも便利な仕組みです！

まとめ

Electron を使ったアプリの開発について、Web 開発と異なる点を中心にお届けしてきました。Web 開発の知識があれば、開発そのものはシンプルです。

Web アプリの場合、Web ホスティングするサーバーがあれば、アプリの配布を行う必要がないので便利ですし、一つの開発で主なプラットフォームをサポートする事ができます。

しかし、今回 Electron を利用した開発をこの連載で取り上げたのには一つ理由があります。実は、Firebase を使った Web アプリの管理ツールはセキュリティ上 Web サイトで公開しないで、管理用の PC から行う方がより安全です。

次回は、Electro を用いて Firebase を利用したアプリの管理ツールに発展させていく予定です。お楽しみに！