React + Redux学習用にelectronアプリを作ってみた

More than 1 year has passed since last update.


初めに

Reactを使うと面倒なDOM操作なしに、Webアプリケーションが作成できるという評判を聞いて、学習用にReactで何か作ってみようと思ったのがきっかけです。

何気に初投稿となります。


作成したアプリ

デスクトップアプリが作りたかったことから、React + Redux + electron構成のアプリを作成しました。

ネタは、アプリゲーム「Fate Grand Order」の素材管理アプリです。


github

githubに公開しています。

リンクにgifがあるので、おおよそどんなアプリかざっくり分かると思います。

https://github.com/shuntaka9576/fgosimulator_redux

使い方や、使用ライブラリ、作って思ったことはおいおい書いていこうと思います。


使用言語

基本的にes6及びjsxでコーディングしています。

es6(というよりjavascript自体)あまり書いたことがないので、かなりゴリ押しなソースコードになっています。


アプリ概要

所持数・キャラクターを入力すると必要な素材の数がわかるようになっています。

やってることは単純のなのに、算数苦手なのでこのビジネスロジック部分で苦労しました。


ライブラリ


  • redux-devtools-log-monitor redux-devtools-dock-monitor

    Webアプリの場合、「Redux DevTools」が安牌ですが、electronでは使用できないので使いました。

    Redux DevToolsと比較すると微妙です。

  • aphrodite

    適当に調べらたら、使いやすそうなので使用しました。

    cssは別のフォルダで管理したいので、使っている人が多いSassに変えようと思っています。

  • nedb

    本アプリの保存・リストア(復元)機能を実現してくれているライブラリです。

    登録すると、指定したDB名でファイルが生成され、登録する内容をJSONで保存してくれます。

    処理も軽く、このアプリの根幹を担っているといっても過言ではありません。


最後に

まだまだ書ききれていないことが多いので、時間を見つけて更新していく予定です。