初めてVue.jsでアプリを作ってみた

airnote — Super accessible note just like air.

仕事ではバックエンドンドばかりですが、自分は実際のところフロントエンドが大好きな人間なので、趣味で色々追っています。

最近だとVue.js,Reactあたりのフレームワーク、そしてFirebaseが最大の関心。Nuxt.jsとかSSRも気になるけど、Vueの機能を使いこなすのに一杯一杯なので、今はまだNuxtでサービスを作ろうとは思っていないです。

とにかくVueのちからを100%出し切れるようになりたいです。
もっぱら手を動かして勉強する派なので思いついたものはどんどん形にして、スキル、知識を増やしていきたい。

ということで、まず最初にメモアプリを作ってみました。

その名もairnote

コンセプトは

端末間での情報共有がお手軽にできるノート

です。

ユースケース例としては、PCで見つけたテキストをiPhoneで使う です。

端末間のテキストデータ共有は、Messenngerで自分宛てに送る、というのをやっていたのですが、チャットのUIだと過去に送ったある情報がどこにあるのか、ぱっと見で把握しづらいなぁと思っていました。

evernoteもあるんですが、テキストデータの共有にはちょっとオーバースペックかなと思い、軽くてサクッとしたアプリがあればいいと思い、作りました。

機能

  • 認証、アカウント登録(Facebook、Twitter)
  • アカウントごとのデータ保持
  • 1タップでのデータコピー
  • データを新規タブで開く(URLをメモした場合に便利)
  • データをGoogle Mapで開く(住所をメモしたときに便利)
  • 自分のメモを他人が閲覧することはできない

使用技術

  • Vue.js
  • Firebase(認証、Real Time Database、Hosting)

自分の場合は、ランチで行くレストランの住所、後でみたいURL、特にインスタで投稿するときに使うタグをメモってます。

タグをかなり使う派なので結構便利です。

色々な使い方があると思いますが、ぜひ使ってみてよければ意見をください。よろしくおねがいします!

English

Git

Qiita

サイト

ブログ

Like what you read? Give Taishi Kato a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.