Edited at

PdMがプログラミングを学び、Nuxt.js/firebase/VuetifyでWebサービスを公開するまでにお世話になった記事32選

はじめまして、ゆと(@utoc11)と申します。初Qiitaなので、まずは簡単なリンク集を投稿してみます。

普段はPdM(プロダクトマネージャー)が本業なのですが、


  1. 創れるようになりたい!

  2. エンジニアの方ともっと深いコミュニケーションをとりたい

そんな気持ちからぼくは昨年夏からのらりくらりプログラミングを始めたのですが、

少しずつ色々なものへ手を出す良くない学び方をしてきました。

簡潔に言うと、「どれもなんとなくわかるけど結局書けない…」そんな状況です。

(PMとしては良いのかもですが・・・)

そんなぼくですが、ひょんなことからNuxt、firebaseに出会い強烈に興味を持ち、

「これで1つサービスを作ろう!」と思ってつくったサービスが、ハッシュタグカウンターです。

1つ強調してお伝えしたいのが、このサービスは独自のロジックほぼなし、CSSもほぼなし、Vueとfirebaseの機能の恩恵を受けまくっているサービスということです。

つまりVueやNuxt、firebase未経験、もはやプログラミング初心者でもこれくらいは作れるのです。VueやNuxt、firebaseの感覚を掴みたい方はぜひ挑戦してみてください。

今回はこのサービスを独自ドメインで公開するまでに、お世話になったページをご紹介します。自分でも作りながら、ブックマークしたりQiitaでストックしたりするのですが、どこにあるのかいまいちわからなくなって毎回ググったりしていたんですよね。

そんなことがこの記事1つストックしていたら不要になるといいなーと思って書いています。プログラミング初心者がVueやNuxt、firebaseを触ってみようかなという時に使ってもらえると幸いです。

開発自体の話は、別途まとめていこうと思っています。


成果物

URL:ハッシュタグカウンター


ソースコード

Github


ぼくのプログラミング関連のスペック

今回のVue、Nuxt、firebaseに関しては全くのど素人です。かつ、以下のように他のスキルも精通しているわけではないです。

(だからこそ、初歩の初歩でつまずく方への心強いリンク集になるかなと思います)



  • Ruby:教材のコピーレベルのポートフォリオなら作れるレベル


  • Ruby on Rails:教材のコピーレベルのポートフォリオなら作れるレベル


  • HTML&CSS:基本的なものならググりながら作れるレベル


  • JavaScript:Progate+入門JavaScript フロントエンドエンジニアになるための基本と実践スキルを読んだけど何もオリジナルで書いたことない


  • JQuary:Progateレベルで、模写ではコピペで少し使ってみただけのレベル


  • SQL:Progateレベルで、基本的なものは実務で使っている


本当にお世話になった記事32選

開発の流れとしては、Vue.jsとNuxt.jsの公式のガイドをざっと読んで、開発スタート。

あまりに評判が良いのでVue.jsは猫本をリファレンス的位置付けで購入して、

基本はググりながらの開発をしてきました。


★公式サイト編

それにしてもたまたまなのか、公式サイトがものすごく優秀でした。


Vue.js公式ガイド

Vue.js公式


Nuxt.js公式ガイド

Nuxt.js公式


Vuetify公式ガイド

Vuetify公式


★Nuxt編


Nuxt入門系:全体像がわかる記事

Nuxt.jsでWebサービスを作る~プロジェクト作成から表示まで

[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ

[初心者向け]ゼロから始めるNuxt.js入門

Nuxt.js 入門


Nuxt+firebaseの全体像がざっくりわかる記事

【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する


その他開発中にNuxtで役立った記事

PWAをNuxt.jsで簡単に体験する

【Nuxt.js】axiosのインストール方法と使い方を、プロジェクトの作成から解説


★Vue編


Vue入門系:全体像がわかる記事

私がハマったVue.jsのショボいミス

やわらかVu,js

Vueのライフサイクルフックまとめ

Vue.jsでコンポーネント親子間の値の受け渡し


その他開発中にVueで役立った記事

Vuex: mapStateの使い方を理解する

Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う


★firebase編


認証

Nuxt.js + Firebase で google認証する

FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月前の自分に教えたいリンク集


リアルタイムデータベース

[Nuxt]Firebase Realtime Databaseを使った基本的なCRUD

Nuxt.jsとFirebase Realtime Databaseを使ってデータを保存する

firebase realtime databaseのon()とonce()の違い


★pug編

【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

nuxt.js(v2)でpug/stylusを利用する

Pug(Jade)の基本記法について

Vue.js製のポートフォリオサイトをPugで書き換えました

Pugでコメントアウトをする


★Vuetify編

Vuetifyの使い方(UIフレームワークで手軽に構築)


★リリース準備編

個人開発者がサービスリリースに際してやることリスト

Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法

Firebaseを使って独自ドメインWebサイトを公開する方法

Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する

Nuxt.jsでGoogle Tag Manager+Google Analyticsを使ってみた


おわりに

ブックマークはしていたり、Qiitaでいいねやストックはしていましたが、意外と改めて読み返すことって少ないですよね。

本記事を書くに当たって、自分自身の復習にもなりました。

次回、もう少し開発についての記事を書いてみようと思います。