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

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

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

1. 創れるようになりたい！
2. エンジニアの方ともっと深いコミュニケーションをとりたい

そんな気持ちからぼくは昨年夏からのらりくらりプログラミングを始めたのですが、
少しずつ色々なものへ手を出す良くない学び方をしてきました。

簡潔に言うと、「どれもなんとなくわかるけど結局書けない…」そんな状況です。
（PMとしては良いのかもですが・・・）

そんなぼくですが、ひょんなことからNuxt、firebaseに出会い強烈に興味を持ち、
「これで1つサービスを作ろう！」と思ってつくったサービスが、**[ハッシュタグカウンター](https://hashtag-counter.net)**です。

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

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

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

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

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

##成果物
URL：[ハッシュタグカウンター](https://hashtag-counter.net)
![hashtag-counter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284955/9df174a5-8b37-7754-81e0-2c6392b03ba0.png)

##ソースコード
[Github](https://github.com/yutoc11/hashtag-counter)

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

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

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

- **Ruby：**教材のコピーレベルのポートフォリオなら作れるレベル
- **Ruby on Rails:**教材のコピーレベルのポートフォリオなら作れるレベル
- **HTML&CSS：**基本的なものならググりながら作れるレベル
- **JavaScript：**Progate＋[入門JavaScript フロントエンドエンジニアになるための基本と実践スキル](https://amzn.to/2Hbrv65)を読んだけど何もオリジナルで書いたことない
- **JQuary：**Progateレベルで、模写ではコピペで少し使ってみただけのレベル
- **SQL:**Progateレベルで、基本的なものは実務で使っている

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

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

あまりに評判が良いのでVue.jsは[猫本](https://amzn.to/2NlIirh)をリファレンス的位置付けで購入して、
基本はググりながらの開発をしてきました。

###★公式サイト編
それにしてもたまたまなのか、公式サイトがものすごく優秀でした。
####Vue.js公式ガイド
[Vue.js公式](https://jp.vuejs.org/v2/guide/index.html)
####Nuxt.js公式ガイド
[Nuxt.js公式](https://ja.nuxtjs.org/guide/)
####Vuetify公式ガイド
[Vuetify公式](https://vuetifyjs.com/ja/)

###★Nuxt編

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

[Nuxt.jsでWebサービスを作る～プロジェクト作成から表示まで](https://www.lisz-works.com/entry/nuxt-js-create-project)

[[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ](https://qiita.com/hedrall/items/28504fca6f367edd65de)

[[初心者向け]ゼロから始めるNuxt.js入門](https://qiita.com/Kentaro91011/items/406d8121775f98ddd84d)

[Nuxt.js 入門](https://vuetifyjs.com/ja/)

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

[【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する](https://qiita.com/massa142/items/7de17b214cefb5b9a1d6)

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

[PWAをNuxt.jsで簡単に体験する](https://techblog.scouter.co.jp/entry/2017/12/07/080416)

[【Nuxt.js】axiosのインストール方法と使い方を、プロジェクトの作成から解説](https://public-constructor.com/nuxtjs-with-axios/)

###★Vue編

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

[私がハマったVue.jsのショボいミス](https://qiita.com/fruitriin/items/fe26e3ecb33000a6544e)

[やわらかVu,js](https://scrapbox.io/vue-yawaraka/)

[Vueのライフサイクルフックまとめ](https://techblog.scouter.co.jp/entry/2019/02/27/120000)

[Vue.jsでコンポーネント親子間の値の受け渡し](https://qiita.com/y_sasaki/items/5bbed5439fcfef9f8c40)


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

[Vuex: mapStateの使い方を理解する](https://qiita.com/Statham/items/046649bff81c00ba275e)

[Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う](https://qiita.com/akicho8/items/b4d071ea7eae562f529d)

###★firebase編

####認証

[Nuxt.js + Firebase で google認証する](https://volpe.hatenablog.com/entry/2019/03/28/172057)

[FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月前の自分に教えたいリンク集](https://qiita.com/redshoga/items/da5c0e247e0df314a257)

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

[［Nuxt］Firebase Realtime Databaseを使った基本的なCRUD](https://youj.work/post/firebase-3/)

[Nuxt.jsとFirebase Realtime Databaseを使ってデータを保存する](https://www.non-standardworld.co.jp/20646/)

[firebase realtime databaseのon()とonce()の違い](http://www.stockdog.work/entry/2019/02/03/030706)


###★pug編

[【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】](https://blogenist.jp/2019/06/13/8558/)

[nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)

[Pug(Jade)の基本記法について](https://qiita.com/cotolier_risa/items/135d168eddd6ae6c3409)

[Vue.js製のポートフォリオサイトをPugで書き換えました](https://becolomochi.hatenablog.com/entry/2017/11/05/234922)

[Pugでコメントアウトをする](http://cly7796.net/wp/css/comment-out-by-pug/)

###★Vuetify編

[Vuetifyの使い方(UIフレームワークで手軽に構築)](https://www.wakuwakubank.com/posts/668-vuejs-vuetify/)

###★リリース準備編

[個人開発者がサービスリリースに際してやることリスト](https://qiita.com/you8/items/f943b324f966ff01214e)

[Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法](https://qiita.com/bucchi49/items/d271c4010a3f6c900926)

[Firebaseを使って独自ドメインWebサイトを公開する方法](https://qiita.com/yacchi1123/items/963bdf12c9c4a7a8f67c)

[Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する](https://tech.actindi.net/2018/11/02/084447)

[Nuxt.jsでGoogle Tag Manager+Google Analyticsを使ってみた](https://www.memory-lovers.blog/entry/2019/06/20/113000)

##おわりに

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

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

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