【個人開発/OSS】カンバンアプリを作ってみた
TL;DR
- 非同期処理の返り値を
State
の初期値にしたい時は、useEffect
を使う
- Skebanをよろしくおねがいします
はじめに
State
の初期値にしたい時は、useEffect
を使う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ではおなじみのReducer
、Dispach
やAction
を書いていません。
React HooksのuseState
で作成した状態更新関数だけでアプリを作成出来ました。
indexedDB
indexedDBは、ブラウザに搭載されているDBです。
ラッパーのDexie.jsを使用しました。
苦労ポイント
DBからのレコード取得が非同期であるため、useState
の引数にasync関数を作って返り値にDBからの取得結果を初期値としていました。
ですが、PromiseとuseState
で設定していた取得結果の配列型との型不一致エラーとなってしまいました。
そこで、状態のマウント時とアップデート時に実行されるuseEffect
で解決しました。
これは。useEffectをUpdateタイミングのみで使いたいというstackoverflowの回答を利用しています。
マウント時のタイミングで、DBからのレコード配列をuseState
で作成した状態更新関数で状態更新を行いました。
最後に
localStorageを使ってみたり個々のコンポーネントのStateだけで作れないかと色々模索していましたが、今の形に落ち着きました。
Skebanをよろしくおねがいします。
Author And Source
この問題について(【個人開発/OSS】カンバンアプリを作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/roottool/items/598e91caf02a9ac4d215著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .