すべてのカテゴリ

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

FirebaseでReact Routerを使うには？FirebaseとReactという組み合わせは、Webアプリ、Webサービスを作る場合よく利用される組み合わせです。 Reactと合わせて利用される機能にReact Router (react-router-dom)があります。これは、React内でページを切り替えるための機能の拡張ですが、実際のWebサイトのページを切り替える感覚で利用できるので便利な機能です。 例えば sv-sw.com/firebase のようにドメインに続いて「firebase」のようにパス（Path）を指定すると、そのページがあるかの様に表示を切り替えてくれる機能です。 Reactのアプリのページは基本的に「１ページ」 よく、１ページアプリとも言われますが、実際にReactが使っているページは、通常は「index.html」だけです。Reactのプログラム内で、「firebase」というページ（のようなもの）を作った場合でも、実際のページは存在しません。 実は、この辺りが、実際にWebサーバーにReactアプリを公開しようとする場合（デプロイする場合）にちょっと混乱する部分です。 Webホスト（サーバー）が管理している「ルーティング」 元々は、Webサイトの全てのHTMLファイルはWebホスティングしているWebサーバーにおいてあって、ブラウザから要求されたファイルをWebホストが提供していました。最近のWebサイトは実際のファイルがない場合も多く、仮想ファイルをサーバーが判断してWebブラウザに提供しています。 サーバー側でのレンダ