株式会社スマレジの開発部でスマレジのサーバサイドを作っています

electronとReactを併用するときに注意すること

こんにちは！株式会社スマレジ 、開発部のmasaです。 また投稿が空いてしまい申し訳ないです。。。実は体調を崩しておりました。。。

気温がグッと下がって寒暖差も大きかったのが原因だと思います。皆様も体調管理にはお気をつけください。

さて、表題の通り、前回からReact + electronでアプリ開発をしているのですが、 作っていて気になったところをあげようと思います。

なお、作成しているアプリはgithubに置いています。

github.com

React側でWebAPIをコールするのは注意が必要

Reactに限った話ではないですが、フロントからAPIをコールして画面表示する方式をとる場合には、 一手間加える必要がありそうです。

www.kabanoki.net

この記事などで書かれているように、html上でのAPI通信を有効にすると、Electron APIが使えなくなります。 そのため、フロントで利用したいライブラリについてはCDNなどではなくダウンロードして利用する方式をとります。

「API通信もしたいし、サーバで処理する必要がないものについてはElectronで処理させたい」となった場合は、 React側ではなく、メインプロセス内でAPIをコールする方式にするのが良さそうです。

github.com

詳しくは上のリンクを見て欲しいんですが、私の場合は以下のようにmainプロセス内でactionをコールし、 呼ばれたAPIに紐づくアクションクラスを別に用意しています。

ipcMain.on('dialog:redmineVersion', redmineVersionAction);
ipcMain.on('dialog:saveConfig', saveConfigAction);
ipcMain.on('dialog:saveRedmineConfig', saveRedmineConfigAction);

で、APIのコールはこんな感じ。

github.com



const axios = require('axios');

module.exports = class AbstractApi {

    /**
     * execute post api
     * @param uri
     * @param headers
     * @param request
     * @return {Promise<null>}
     */
    static async callPostApi(uri, headers, request) {
        let response = null;
        try {
            response = await axios.post(uri, request, {headers: headers});
        } catch (e) {
            console.error(e);
            throw new Error("APIの実行に失敗しました。")
        }
        
...

なんてことはない、axios利用したAPIコールです。

逆に言えば気になったのはこれくらいで、他に関しては本当にWebアプリを作るのとほとんど変わらない感じでした。

Node.jsでWebアプリ作るときとあまり変わらない。

masa的主観で言うと、Node.jsでWebアプリを作成する際もCORSの問題などでAPIをフロントから直呼びすることってLambdaとか割と決まった時だけが多いので、結局、サーバとフロントの間の処理層としてelectronが機能しているだけでWebアプリ作るときと、大きくは変わらないのかなと思っています。

ゆくゆくはelectron前提のフレームワークとか出てきても良さそうですよね、めっちゃ使われてますし。