見出し画像

お気に入り機能をリリースしました

登録画像が200枚を超えてきましたが、自分が気に入った画像をお気に入りに登録できる機能をリリースしました。

お気に入り登録

画像詳細画面にお気に入り登録ボタンが表示されますので、そこからお気に入りの登録・解除が行なえます。

スクリーンショット 2020-05-13 22.12.35

お気に入り機能が使えるのはGitHubアカウントでログインしたアカウントのみになります。

お気に入り一覧

お気に入りに登録した画像は画面右上のメニューの「お気に入り」から一覧で表示することが可能です。

スクリーンショット 2020-05-13 22.07.02

自分がお気に入りに追加した画像が一覧で表示されるので、GitHub貼り付け用のマークダウンのコピーが簡単に行えるようになります。

スクリーンショット 2020-05-13 22.06.10

ぜひご活用ください。

今回使ったVue x Firebaseの機能

ここからは技術的な話です。

vuexfire

Firestoreのデータ操作にVuexFIreを使用しました。これを使うとFirestoreから取得したデータのバインドがお手軽にできるようになります。

arrayUnion() と arrayRemove()

お気に入りのデータはFirestoreの配列として持たせるようにしているのですが、お気に入りの追加・削除に伴う配列の要素の追加・削除にはarrayUnion() と arrayRemove() を使用しました。

これはもともとはなかったメソッドで割と最近になって追加されたメソッドのようです。

使う際の注意点としては配列がある前提で要素を追加・削除しているので一番最初に配列を作るときには普通にset()を使う必要があります。

ブランチ開発

今まではひとり開発だったのでmasterブランチにガンガンコミットしていたのですが、この機能はブランチを切って開発を行いました。(ひとり開発の状況が変わったわけではありません)

この記事が気に入ったらサポートをしてみませんか?