Vue.jsで個人開発してみたので、振り返る

2021.01.18

見出し画像

プログラミングの勉強の一環として個人で小さなアプリを開発しています。

その中身について、自分へのメモの意味も兼ねて書いていきます。

今回はVue.js!

目次

  1. 今回開発したもの
  2. 開発したキッカケ
  3. 開発に要した期間
  4. 開発に使用した技術
  5. 実装した機能
  6. 実装しなかった(出来なかった)機能
  7. 今回学んだ事
  8. 今回の反省点、改善点
  9. 次にやりたい事
  10. 追記

今回開発したもの


今回開発したものは読んだ本を一定の評価を付けて記録していけるアプリ。

https://crud-ae153.web.app

pcじゃなくて、iphoneで触るのオススメ!サイトの見た目が大変なことになってますww(viewはサボった)

開発したキッカケ


UdemyのサイトでVue.jsを勉強したので、何か自分で作ってみたくなったから。

あとは、最近本をよく読むようになったから何かに記録しておきたいなと。

開発に要した期間


10日間。githubのリポジトリ作成からデプロイまで日程で計算。

この期間の間にした事
まず作り始める前に”どこまで作るか”の設定。具体的な実装など。

あと、何をしないかも決めた。作業してると色々とやりたい事出てくるからw。

10日間でした事を簡単にまとめると。下のような感じ

要件定義→開発→試行錯誤→デプロイ→この記事書いてる

開発に使用した技術


・Vue.js 2.6.1

・ Firebase,CloudStore

・ Web Speech Api 

・ Github

実装した機能


ユーザー関連(ログイン、登録、SNS認証)

記事のCRUD機能(投稿、表示、編集、削除)

バリデーション

検索機能

マイリスト(自分の投稿)

いいね機能、いいね一覧表示

いいね数に応じた記事のランキング機能

実装しなかった(出来なかった)機能

見た目には全くこだわらなかった。iphone用で作った。

ログインした後にお気に入りに行ってからじゃないと、いいねの表示がおかしいとこ。普通にホームからアクセスすると表示がバグっている。

あとは記事に対するコメントとかできたらいいよな〜とか思う。

今回学んだ事


Vuex, Vue-router,の動きが分かってきて面白い。

音声認識についても少し学べた。これはランキング機能がうまくいっていない時に代わりでやってみて行けたからラッキーだったw

Firebaseについても学びが多かった。今まで扱ったことのないタイプのデータベースだった。

なんかfirebaseのデプロイ思ってたより簡単だった(多分色々とわかってないだけ)

あとは学習を毎日決まった時間に行ったことが自分的に良かった。これからも続けていく。

今回の反省点、改善点

Firebaseについて色々学べたが、ランキング機能のようにデータベースからデータを引っ張ってきて、外部キーとの連携をファイルの中で取るのがまだ勉強不足。

あとはjavascriptについて少しずつ理解を深めていきたい。使えた方が絶対良いということがわかった。

次にやりたい事

見た目の部分で楽していきたいので、次はVuetifyを使って楽しておしゃれなサイトにしていきたいw。

実装するものについては、フォロー機能や良いね機能、お気に入り機能などデータベースとの関係、1対多、多対多の部分を処理出来るようになりたい。

https://tech-blog.sgr-ksmt.org/2019/12/31/160623/


このサイトとか参考になりそうだな〜。

とか思いつつ。。。

以上!。

追記

2020/6/1現在。

音声apiを使用して音声入力も可能にしていましたが、apiがios(iphone)に対応していないので取り消しました。オリジナルの音声アシスタントを作ろう (1) – Web Speech API – 朝日ネット 技術者ブログ最近、Siri や Google アシスタントのような、音声による機能操作が盛り上がってきています。 皆様も、オリジナルのtechblog.asahi-net.co.jp

https://caniuse.com/#search=Web%20Speech%20API