はじめに
Reactで簡単なWebアプリを作ってみたの続きになります。
アプリ概要を簡単に言うと、ボタンを作って、色をカスタマイズしたり、Reactコード化したりするアプリになります。
今回、以下の機能を追加しましたので、それぞれ説明や工夫した点、難しかった点を書いていきます。
- 保存、ロード機能
- ドラッグ&ドロップ機能
- 戻る・進む機能
今回実装したサイトはこちら、Githubリポジトリはこちらにあります。
保存、ロード機能
- 概要
現在のボタンの状態を保存します。次回ブラウザからのアクセス時、ロードするか聞かれるので、「はい」を押すと保存していたデータが読込まれます。ブラウザ側ローカルストレージに保存しているので、ブラウザキャッシュを削除するとデータも消えます。また、キャッシュ機能がOFFの場合は正常に保存されません。
最後に保存したデータから変更が無い場合は保存ボタンはグレーアウトされて押すことができなくなります。
- 感想
実装はLocalStorageを使って1時間程でサクッとできました。今までクライアント側のデータ管理はCookieしか使ったこと無く、LocalStorageは初めて使ったのですが、あまりの簡単さにビックリしてしまいました。
ただの保存、ロード機能だけだと物足りないので、最後のセーブデータから変更が無い場合は保存ボタンはグレーアウトされて押せなくしました。
ドラッグ・ドロップによる入替え機能
- 概要
ドラッグ入替え機能ボタンを押すことで、ボタンの配置をドラッグで移動することが可能になります。再度入替え機能ボタンを押すことで入替えモードが終了し、選択モードに戻ります。戻る・進むボタンも有効で、入れ替えた順番を戻ったり進むことができます。
- 感想
実装には少し苦労して、5時間程かかりました。苦労は別記事（Reactでドラッグ&ドロップ dnd-kitのstrategy関数をカスタマイズした話）にまとめました。詳しくはそちらにまとめましたが、react-beautiful-dndやreact-dnd-kitを使って、公式設定だけで簡単に実装するのは難しそうだったのでreact-dnd-kitの移動量計算関数を自作しました。5時間程度かかりしたが、半分以上は公式設定だけでできないか試行錯誤した時間なので、移動計算を自作することを決めてからは2時間ぐらいで実装できました。
戻る・進むボタン
- 概要
各操作を取り消したり、取り消したものを再実行することができます。以下、アプリの全操作が、戻る・進むができる操作です。戻る操作、進む操作が無い場合はそれぞれグレーアウトされて操作は実行されません。- ボタンテキスト変更
- ボタンカラー変更
- ドラッグによる配置入替え
- ボタン選択
- ランダムボタン追加
- ボタン複製
- 背景色変更
- ボタン削除
- 感想
実装には7-8時間程かかりました。今回の改修で一番時間がかかりました。ライブラリは使わず、今までの操作履歴をグローバル状態変数として管理し、以下のようにすることで実装できました。- 状態変数をスタックのように扱い、戻る用のスタック・進む用のスタックを作る。
- ユーザが何か新しい処理をしたときは、戻るスタックにその操作が追加され、進むスタックは空にする。
- 戻るボタンが押された時、戻るスタックの末尾を取り出して逆の処理を実行し、進むスタックに逆の処理を追加
- 進むボタンが押された時、進むスタックの末尾を取り出して逆の処理を実行し、戻るスタックに逆の処理を追加
各操作の種類化や、種類に応じて逆の操作をするための関数を作ったりとで時間がかかってしまいました。
実はもっと簡単に実装する方法もあったのですが（全ボタンの色やテキストのリストを状態管理する変数を全履歴を保持する状態変数を作る方法）、保存するデータ量の効率が非常に悪くクライアント側のリソースを多く使ってしまうかなと思い、難しいけど効率的である今回の方法にしました。勉強にもなったので良かったです。
まとめ
今回は、保存&ロード機能、ドラッグ&ドロップによる配置換え機能、戻る&進む機能を付け加えました。エディタによくある機能を実装出来ていい勉強になりました。
このアプリではボタンコンポーネントしか対象としていませんが、色んなコンポーネントのUIを試せて自由配置してデザインもできるようにしたらちょっとしたノーコードデザインエディタ風にできそうな構想もありますね。しかしこのアプリの目的はユーザが付くことが目的では無く、やりたいと思っていたことも試せたので今回の機能追加をもって開発は終えたいと思います。
次はユーザが付くことを目的したサーバーレスWebアプリを作っていきたいと思います。