GUIで超直感的にFirestoreのデータ操作ができるfirefooを使った方がいいぞ！

こんにちは。[virapture株式会社](https://virapture.com/)の[もぐめっと](https://mogmet.com/)です。
![IMG_C6FB3C04768A-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/6f32aee4-28d0-f2b8-e9db-ebbfd87cd000.jpeg)
最近ストーリーでボケてみたのですが、このボケに気づいた人が以外に少なくてボケ力の弱さを痛感しました。みなさんはどうツッコみますか？

本日は朝起きたらスーパー便利そうなツイートを見つけたので試しに使ってみたのでみなさんに共有いたします。

https://twitter.com/firefooapp/status/1394378853649354754?s=20

## firefooとは

簡単にいうとFirestoreを操作できるGUIクライアントなんですが、firebaseのコンソールよりもより使い勝手が良く、[sequelpro](https://www.sequelpro.com/)みたいに簡単にデータが操作できるイケイケツールです。
説明するより下記動画を見てもらった方が早いですね。

<iframe width="560" height="315" src="https://www.youtube.com/embed/KpmTRoGUif0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## セットアップ

下記からダウンロードしてインストールします。

https://firefoo.app/

## 使ってみた

起動するとログインを求められるのでログインを行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/bfc2d4d6-599d-1931-9a1a-0dfb6304a95d.png)

ログインが成功すると保持しているプロジェクトがずらりと！もうこの時点で便利すぎ。好き。

![スクリーンショット 2021-05-27 7.30.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/c1af15d8-b648-81f2-3d81-2f87acd9f144.png)

プロジェクトを開くとコレクション一覧が見れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/daedccc2-8671-dd0e-07e1-7cb9ad60687a.png)

コレクションを選択するとデータの一覧を確認できます。好き。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2d1aefb5-b689-8ab9-d37b-6f99ed293132.png)

データがない場合は右クリックで好きな型で作れます。好き。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f4012749-6cbf-1c95-e274-6daeabaa11e4.png)

もちろんこのまま入力ができちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2cfd9781-704a-6ef5-68c3-dc8083292749.png)

ツリー形式で見たり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/b329bc1e-046d-8453-1139-80f943c0a169.png)

JSONでみたりすることもできます。ちゅき。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f8727d05-6337-e787-3071-fa7b26cdd9a0.png)

検索はGUIベースでもちろん見ることもできますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/705e99ec-ce9f-d1a2-33ac-e644d2d66cc4.png)

javascriptで検索もできます。しかもちゃんと補完もききます。ラブ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/5ebeb96f-1c3f-b1fa-a9fd-d8524a34c2a7.png)

もちろんドキュメントの追加もおてのもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/df3b38bd-fc45-79f3-e792-a4e40ebc5cf8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ec377d33-169c-8b3e-5497-ef6e0b2d74b4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/02125b1c-a774-e3a3-fea6-227e5b33c4ee.png)

そして簡単にexportできちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/3cb26c59-89d2-8f98-5311-8d0bf06428a7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/0f75e3ce-46cb-dc81-6956-d88aa7f8773c.png)

importもできちゃいます。萌え死ぬ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2736bb76-4652-b814-e2a3-4b1cc80087ac.png)

データがかぶってればいい感じにマージしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/612086dd-e752-e809-7baa-543ae6b49b38.png)

意外と使えると思われる機能がこのDuplicate Document。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/7456aee5-ae62-51c3-b2b5-6729d93e0de2.png)
Duplicate先を選択すると。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/76b85e84-1f53-6dc5-a75c-5f2937b9abd6.png)
なんと気軽にコピーできちゃいました！これ結構ずっと欲しいっておもってたんですよね。もうこれだけでラブフォーエバー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/63ab5a12-ff19-d10b-473d-2306b740cb08.png)



## イケてないところ

~~海外ツールあるあるなのですが、日本語入力途中で変換した値をEnterで確定するとそのままデータ入力も完了してしまいます。。。ここはfirebaseのコンソールも一緒ですね。~~

~~ただ、長文を書くときは、Open in JSON Editorを選んでもらって~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/75c651a7-d6c4-1e4b-0306-470fb94eb106.png)
~~エディタでそのまま編集してもらえば変換問題はある程度解決します。~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/cbd6f90d-ea93-9899-1907-b419d8dcefe2.png)

~~ただ、そう長文を書くことなんてないんで、できれば表データで完結したいですね。~~

~~また、csvのexportはできるのですが、csvのimportにはまだ対応してないです。~~

-- **2021/06/04追記** --
日本語入力もcsv importも対応されたようです！
-----------追記ここまで------------

## サポート

困ったらSupport Chatから開発者に直接問い合わせできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/5ac979ad-a913-54eb-e925-5044641b6442.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/44cbe433-dbfe-036a-ccf1-b2c9c79b6241.png)

この辺の導線はすぐに意見を客から集約できるので作りとしてうまいなと思いました。

とりあえず入力問題は送ったら改善するっていってくれたので多分近いうちに改善されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/7e513d45-61cf-7b59-2d66-fb740877a42b.png)

あと、csv import機能についても絶賛開発中なのでこちらも近いうちに追加されると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/bccd4bd0-e263-8991-8bde-200dd2c8ce69.png)


-- **2021/06/04追記** --
日本語入力もcsv importも対応されたようです！
-----------追記ここまで------------

また、今後考えてる機能としては下記の機能を考えてるみたいです。

- collectionのスキーマアナライザー(なに分析するんだろう）
- エディタで入力してる時にフィールド名を自動補完
- ダークテーマ
- firestoreのルールエディタ
- script / tabの保存
- 違う言語でのQueryCodeの生成

今後の開発に楽しみしかないですね。サランヘヨ。

## 金額

金額に関しては月8ドル、45ドルと選択することができます。

https://firefoo.app/buy

今のところは機能の差異はなく、ライセンス数の違いがある程度みたいですね。
ただ、めちゃくちゃfirestoreに関わるもぐめっととしては月8$課金してもいい代物かとは感じています。
仕事道具にお金は惜しみません。それ以上に稼げばいいのです。

## まとめ

結論、firestoreを使う上では必須なくらいの超イケイケツールでした！
javascriptでのqueryも使えるのでデータ検索してみてそのまま実装コードにコピペできるのはなかなかいい機能ですね！
今後使い倒していこうと思います！

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/