Edited at

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


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をよろしくおねがいします。