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

公開日:2019-07-27
最終更新:2019-07-28
※この記事は外部サイト(https://qiita.com/roottool/items/598e91caf...)からのクロス投稿です

TL;DR

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

はじめに

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

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

動作サンプル

使いみち

一般的なカンバンの使い方である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をよろしくおねがいします。

記事が少しでもいいなと思ったらクラップを送ってみよう!
40
+1
@roottoolの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする