Vue.jsでブックマークツール「Quick Bookmark」を作った
はじめに
この記事はVue Advent Calendar 2021の20日目の記事です。
ちょこちょこ作っていたツールの開発をアドベントカレンダー駆動で加速させ、とりあえず紹介するところまで持ってきました。
この記事では前半でツール自体の紹介、後半でツールの技術面の紹介をします。
Quick Bookmarkについて
エレベータピッチ
Quick Bookmarkの価値を、アジャイル界隈でよく使われるエレベータピッチのフォーマットでまとめました。
資料のリンクを見失って、メールやチャットを掘り返すのを何とかしたいユーザ向けの、 Quick Bookmarkというプロダクトは、ブックマーク用のツールです。 これはブックマークを端末内に保存し、保存したリンクを絞り込み検索できます。 はてなブックマークやPocketといったブックマーク用のサービスとは違って、 ブックマークを端末内に保存するので、社内ファイルサーバのパスを保存しても問題ありません。 Proxy環境下でも利用できます。 ブラウザのブックマーク機能と違って、絞り込み検索ができるので、ブックマークが増えた時も探しやすいです。
触ってみる
こちらからQuick Bookmarkを触ることができるので、まずは軽く触ってみてください。
ブックマークを登録できます。Quick Bookmarkは登録したブックマークを端末のlocalStorageに保存するので、ブラウザを閉じた後もブックマークは消えずに残ります。端末に保存するので、インターネット上の誰かにあなたが登録したブックマークの内容を見られてしまうこともありません。
デモ
デモ用のGIF動画を作成したのですが、はてなブログに貼れなかったので、こちらの下の方に貼り付けています。もしよければご覧ください。
Quick Bookmarkの技術面について
利用技術
Quick Bookmarkで利用している技術は以下の通りで、導入順に並べています。
| 利用技術 | 利用シーン |
|---|---|
| Vue.js | 全体 |
| vue-good-table | 「ブックマーク絞り込み検索」の表で使っています。多機能の上に、自分で定義した関数を実行することもできてとにかく便利です。削除やソートはまんまvue-good-tbleの機能です。 |
| wanakana | ひらがなとカタカナが異なっていても検索ヒットさせるために利用しています。 |
| Puppeteer | 動作確認テスト用に追加して、GitHub Actionsでテストが回るよう設定しましたが、vue-router導入時に既存のテストコードが壊れてからは、直せていません。 |
| vue-router | 機能ごとにページを分割するために導入しました。 |
| vuetify | 見栄えを良くするために導入しました。 |
Vue.jsの良いところ
ツールを作っていて感じたVue.jsの良いところを述べます。Angular.jsやReact.jsなどの他のJSフレームワークと比べる意図はありません。
冒頭述べたように、私は普段コードを書かないのですが、そんな自分でも、欲しいものを作れてしまうのがVue.jsのすごいところだと思うので、その辺りを中心に述べます。
日本語情報が多い
2016年にAngular.jsの1系で、Quick Bookmarkとほぼ同じlocalportalというツールを作っていたのですが、その当時は分厚い本が1冊出版されているだけで、初学者が勉強するのはしんどい状況だったので、Udemyか何かで英語のレッスン動画を見ながら、Angular.jsの機能を覚えていた記憶があります。（もちろん今はAngular.jsの日本語情報もたくさんあるのでしょうが、当時は大変だった印象があります。）
Vue.jsは日本語の公式情報もあるし、基礎から学ぶ Vue.jsやVue.js入門をはじめとした書籍も充実しているので、同じ機能を様々な解説・サンプルコードを見ながら学習することができ、理解がしやすかったです。
利用者が多く、コミュニティも活発
私は2018〜2019年頃に、秋葉原のWeeybleというコワーキングスペースでVue.jsの書籍の輪読会に参加して勉強することで、Vue.jsを覚えていきました。（当時の資料）
この勉強会でVue.jsを勉強していなかったら、このツールは作れていなかったと思うので、この場を提供してくれた方や、Vue.jsを現場で利用してVue.js人口を増やしている方に感謝します。
プログレッシブフレームワークゆえVue.jsの技術習得と機能追加がいい感じに回る
以下は、v0.1.0時点のQuick Bookmarkの画面です。1つの画面に全機能が詰め込んであって、見た目も質素ですが、今と基本的な機能は変わりません。
私のような普段コードを書いていない人間が欲しいものを1ヶ月でリリースできるというのはすごいことだと思っていて、これを実現してくれたのがVue.jsのプログレッシブフレームワークという考え方だと思っています。
もともとvue-routerやVuexで何ができるかはざっくり把握していたこともあり、自分が最低限必要とする機能を実装するのにこれらは不要と判断できたので、vue-routerやVuexの勉強はすっ飛ばして、実装に集中できました。
その後ツールを改良しようとした時に、以下の通り段階的にVue.js関連の技術を習得して、機能を追加していくことができました。
- 1画面1機能に分割したい → vue-routerの導入
- 見た目をもう少し綺麗にしたい → Vuetifyの導入
次はブックマーク登録をした時に「ブックマークが登録されました」とフラッシュメッセージを出したいと思っていて、その時Vuexが必要らしいので、次はVuexを勉強しようと思っています。
このように段階的に勉強をして、すぐにそれを活かした実践で活かせるので学習意欲が湧くいてくるという点も私にとってはVue.jsの良いところです。
おわりに
この記事ではQuick Bookmarkの紹介、使用しているVue.jsの技術スタックの紹介、私が思うVue.jsの良いところの紹介をしてきました。
Quick Bookmarkをご利用いただき、フィードバックをお寄せいただけると嬉しいです。よろしくお願いします。
