katonobo’s blog

プログラミング中心の雑記ブログ

【備忘録】Vue.js+Fifebaseの学習途中のメモ

Vue.jsの学習過程とその時参考になったサイトと記事を現段階でまとめてみます。

 

スタート

 

スタートはモモンガ本(500円安い!モモンガ可愛い)

booth.pm

 

本書を読めば、全く寄り道をせずにVue.jsとFirebaseを連携させることができます。

 

本書で学習を進めると

 

・Vue.jsとFirebaseの連携

・ログインの有無でページの表示を変えること

・マークダウンが作れる

 

ここまでできます。

 

この時は、丸写ししているだけなので、Vue.jsの仕組みや構造はあんまりわかってないです。

 

単一ファイルコンポーネントの存在を知る

いやお前ずっと書いてただろ!って感じなんですが、

「.vue」って、単一ファイルコンポーネットと言って、

HTMLと、Javascript、Cssを一つのファイルにまとめれるVue.jsの強力な機能なのですね。

jp.vuejs.org

 

モモンガ本にもしっかり書かれていました。すみません。

ページの変遷でつまずく

さすがに同じページを表示するだけではサービスにならないんで、ページを飛ばしたいと思い新たなページを作成。

そして普通のHTMLのようにリンクでページを飛ばそうとしたんですが、全くうまくできず!

一日ハマりました。

 

 

 

いやこれもう無理だろうってなりました。

 

そこで、下記の本を購入。 

Hello!! Vue.js 最新プログレッシブフレームワーク入門 (技術書典シリーズ(NextPublishing))

 

アマゾンの評価では、内容が薄いとか書いてありましたけど、僕レベル()になると、技術書であろうと、薄ければ薄い方が良い!(初心者向けってことですが)

ドキュメントで理解できれば良いですけどね。文章は読めても、なかなか理解ができないんです。

ってことで概要掴めて助かりました。

 

開発環境は設定できているので、飛ばし読みって感じでしたけど、

単一ファイルコンポーネントと、Vue-routerの部分が勉強になりました。この時にvue-routerの存在を知るっていう(モモンガ本にも、実は参考の部分で触れられていました。自分が目に入らないのがいけない)

 

あとはQiitaで、先達に感謝を込めて手を合わせながらカスタマイズ中 

シンプルにその機能だけをコーディングしてくれている記事は本当に助かります。

 

vue-routerの実装に関しては

qiita.com

を参考にさせてもらいました。

モモンガ本では、vue-routeに関しては発展ということで触れられていないので、上記記事はめっちゃ参考になりました。

 

firebaseのデータを取得、表示に関しては、

 

qiita.com

qiita.com

qiita.com

こちらをめっちゃ参考にさせてもらいました。こちらは、モモンガ本にある内容と照らし合わせながら読んで、理解深めると言った感じです。

ちょっと自分の中で抜けていたのは、Createdフックを使って、this.Listen()でデータを最新にさせているというところでした。これもしっかりモモンガ本に書かれているんですが、大雑把な自分の性格なのか、頭に入っていなかったです。

 

とりあえず現段階ではここまで。

また更新あればしていきます。

【PR】