Help us understand the problem. What is going on with this article?

【個人開発/OSS】カンバンアプリを作ってみた

More than 1 year has passed since last update.

TL;DR

  • 非同期処理の返り値をStateの初期値にしたい時は、useEffectを使う
  • Skebanをよろしくおねがいします

はじめに

Skeban v0.1.0を先日リリースしました。
個人利用のみに対象を絞ったElectron製カンバンアプリです。


アプリ名は、Sketches your brain in kanbanから命名しました。
決してあのスケバンではありません。
Webp.net-resizeimage.png

動作サンプル

skeban.gif

使いみち

一般的なカンバンの使い方であるTodo管理や、ちょっとした情報の整理にどうぞ。

作った理由

なんとなくアカウント不要のカンバンが欲しかったからです。
どうせ作るならMITライセンスのOSSにしようと思い、OSSとなりました。

インストール方法

Windows

インストーラーをダウンロードしてインストールしたら完了です。

Mac

Mac版に関しては、私がMacを持っていないためインストーラーを生成出来ませんでした。
ですので、以下のコマンドでGithubからソースをクローンしてパッケージ化を行ってインストーラーを作成してください。

git clone https://github.com/roottool/Skeban.git
yarn install
yarn run build
yarn run pack:mac

技術スタック

  • Electron
  • React
  • unstated-next
  • react-beautiful-dnd
  • TypeScript
  • indexedDB
  • webpack
  • babel

今回はcreate-react-appを使わず、webpackとbabelの設定を自分で行いました。
理由は、今までwebpackとbabelの設定を行ったことがなかったので経験値を積むためです。
しかし、create-react-appのお手軽感を改めて実感することになりました…。
D&D実装は、react-beautiful-dndを使用しました。

unstated-next

unstated-nextは、Reduxのようなアプリ全体での状態管理を行うことが出来るパッケージです。
Reduxと違う点は、Reactに実装されているReact Hooksのみで書けることです。
今回のアプリ作成に限って言えば、ReduxではおなじみのReducerDispachActionを書いていません。
React HooksのuseStateで作成した状態更新関数だけでアプリを作成出来ました。

indexedDB

indexedDBは、ブラウザに搭載されているDBです。
ラッパーのDexie.jsを使用しました。

苦労ポイント

DBからのレコード取得が非同期であるため、useStateの引数にasync関数を作って返り値にDBからの取得結果を初期値としていました。
ですが、PromiseとuseStateで設定していた取得結果の配列型との型不一致エラーとなってしまいました。
そこで、状態のマウント時とアップデート時に実行されるuseEffectで解決しました。
これは。useEffectをUpdateタイミングのみで使いたいというstackoverflowの回答を利用しています。
マウント時のタイミングで、DBからのレコード配列をuseStateで作成した状態更新関数で状態更新を行いました。

最後に

localStorageを使ってみたり個々のコンポーネントのStateだけで作れないかと色々模索していましたが、今の形に落ち着きました。
Skebanをよろしくおねがいします。

roottool
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away