Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり

昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。
![portfolio.gif](https://qiita-image-store.s3.amazonaws.com/0/314351/5b202d6a-54da-3f1b-e8f5-7587f81005e0.gif)

- [自作ポートフォリオサイト](https://gurutaka.xyz/)

もともと[1週間でVue.jsを使ったポートフォリオを作った記事](https://qiita.com/plus_kyoto/items/a01578b782f17f573510)をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんですね。

それで、Vueでの自作ポートフォリオサイトを１つの目標にしたんですが、想像以上に私には難しく１ヶ月くらいかかりました(^p^)
あと、２回ほど心が折れました(^p^)

そんな過去の私のようにVueで心折れそうな方々が減れば…！という一心で、個人的なVue学習の道のりをご紹介します。

追記：2020/3/25
NuxtでJAMStackなポートフォリオに一新した記事を上げました。こちらも参考になれば幸いです！
[【JAMStack】Nuxt×Contentful×Netlify でポートフォリオサイトを一新。使用技術まとめてみる - Qiita](https://qiita.com/guru_taka/items/197eb88fe24f19f85655)

## STEP1：ドットインストールで勉強
最初は超お世話になってるドットインストールから勉強しました。

- [Vue.js入門](https://dotinstall.com/lessons/basic_vuejs_v2)

Vueの基本的な文法が学べるし、１日にくらいで終わるので良かったです。しかも難易度も高くなかったので、挫折することはありませんでした。

Vueの入門にピッタリの教材だと思います。
## STEP2：　QiitaのVue+Vuexのチュートリアル
次にQiitaのVue.js＋Vuexチュートリアルにトライします。

- [vue.js＋Vuexチュートリアル](https://qiita.com/_P0cChi_/items/ebf8fbf035b36218a37e)

「お問い合わせフォーム作るくらいなら簡単だろうし、ソースもあるから余裕っしょ〜〜〜〜〜〜」って思っていたら、３〜４時間くらい奮闘するも挫折しました(^p^)

「コンポーネント…？　State…？…まじでわからん(真顔)」

親切に一からソースを書く過程が載っているんですが、私には早すぎました。途方に暮れて、他の教材を探すことにします。
## STEP3：ネコ本
![download.jpg](https://qiita-image-store.s3.amazonaws.com/0/314351/ba134ca9-c5c5-0379-0673-4bbeb77b8f56.jpeg)

あまりにもVuexが難しく若干トラウマになったので、基礎の”き”から学ぶことにします。そこで出会ったのが、技術書『基礎から学ぶ Vue.js』です。通称、ネコ本

- [基礎から学ぶ Vue.js:書籍用のサポートサイト](https://cr-vue.mio3io.com/)

マジで神。

- 超わかりやすい
- サポートページが親切すぎる
- 初心者でも理解できる説明(超重要)

ここでコンポーネントについて、多少なりとも理解できるようになりました！
ただですね…ネコ本をもってしても、vuexは「うーん、まだよくわからんなぁ…」ってなって心折れそうでした。

まだこの段階だったら、HPは残っていたんですが、新たに出てきたVue Routerでプチパニック。そして、心が折れました(２回目)

Vueを使いこなせるか、だんだん不安になってきます(半泣き)
## STEP4　じゃんけんアプリの作成
うだうだ悩んでも仕方ないと思い、まずはアプリを作ろう！って心機一転を狙います。た、た、多分、まだ慣れていないだけだからね！

私の経験上、まず最初にじゃんけんアプリを自作できれば、一気に理解が進むという謎のジンクスがあるんです。なので、じゃんけんアプリの作成に挑戦！

でも、どうやって作ればよいのか、わからないじゃないですか…
そこで、「vue じゃんけん」ってググったら、１番最初にでてきた記事がこちら

- [マークアップエンジニアがVue.jsにチャレンジしてじゃんけんゲームを作ってみました。](https://www.actzero.jp/developer/report-19774.html)

控えめにいって神。解説も丁寧で、めちゃくちゃ参考にしながら、作りました！
VueとVue Routerで作られていて、ここで初めて"Vue Router"の概念を理解します。またvueの概念にも徐々に慣れてきたんです！！

そして、第一関門でもあるpropsやemitも使えるようになりました！
やっぱプログラミング学習において、アプリ作成は大正義！！！やっぱり自分で手を動かすと、理解度が桁違いですわ

今後も新しい言語を学ぶ時はじゃんけん作ろうってなりました(決意)
![janken_vue3.gif](https://qiita-image-store.s3.amazonaws.com/0/314351/990366b9-0aa9-d071-5ff5-12c3a6b3b2a9.gif)

ちなみにじゃんけんアプリ作るのに、３日ほどかかっています(爆)

- [Github：じゃんけんVue](https://github.com/gurutaka/janken_vue)

## STEP5：　QiitaのVue+Vuexのチュートリアル(再来)
STEP２で心折れたチュートリアルに再挑戦！

じゃんけんのアプリ作成を通じて、心おられることなく何とか最後までたどり着くことができました。ただvuexにはまだ慣れず、これ何の意味があるんだろう…とか色んな疑問がでたんですね。

「何がわからないのか、わからない」状態から、「わからないことがわかる」状態に前進！ここから疑問をググったり、本を読んだり解決していけるようになりました。

## STEP6：解説書『Vue.js入門 基礎から実践アプリケーション開発まで』
![download-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/314351/a51a9778-a9cd-146e-8b1d-22c0dccd87b8.jpeg)

実はネコ本を買う時に、『Vue.js入門 基礎から実践アプリケーション開発まで』も買いました。

最初に読んだとき
「これマジで入門…？本気でいってる？(逆ギレ)」
と思いました。

でもチュートリアルやじゃんけん作成後には、めちゃくちゃ理解できるようになりました！しかも、解説が超絶親切で、”なぜ〜を使うのか”といった、理由も添えてあるんで、腹落ちしまくれます。

## STEP7 じゃんけんアプリにVuexを導入(断念)
Vuexをざっっっくり理解できるようになったので、STEP4で作ったじゃんけんアプリへVuex導入しようと思いました。

しかし、１時間くらいで挫折（^p^）

モチベーションが続かなかったり、壊しながらやるんだったら新しいモノを作った方が早いんのでは？と思ったからです。

なので、ポートフォリオサイト制作に取り掛かろうと決めました。
## STEP7 ポートフォリオサイト作成
ついに、Vue、Vuex、Vue RouterでSPA対応でポートフォリオサイト作成に挑戦します。

じゃんけんアプリとqiitaのチュートリアルを参考にしながら、大まかな形(モーダルなし)を作れました。

モーダルを作ろうか悩みましたが、個人的にモーダルが好きなのと、勉強にもなると思って取り入れることに！

ここで、また詰まるのですが、ググって解決し、無事に形にできました！

- [自作ポートフォリオサイト](https://gurutaka.xyz/)

## STEP8：デプロイ
最後はデプロイするだけ！だったんですが、npmのバージョンが古かったり、画面が真っ白だったり…とトラブルはありました。

ですが、神すぎる先人の知恵のおかげさまで解決！マジでありがてぇ…

- [【Nuxt.js】npm run dev後にエラー出る時【対処法】](https://taroken.org/nuxt-npm-run-dev-error/)
- [vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話](https://qiita.com/tiwu_official/items/43dc554ec43dd951812a)

最後に[Netrify](https://www.netlify.com/)でデプロイ！噂では聞いていましたが、本当に簡単、かつ爆速でデプロイできることにビビりました笑

２０１９年のやりたいことリストを１つ達成して大満足です！

- [基礎から学ぶVue.js Netlifyへの自動デプロイをしよう](https://cr-vue.mio3io.com/tutorials/netlify.html)

## 最後に
次はNuxtやサーバーサイドと連携させたプロダクトを作ろうと思います！

最後までご覧頂き、ありがとうございました。
Vue初学者の方々の参考になれば幸いです。

## 参考URL
- [Vue.js入門](https://dotinstall.com/lessons/basic_vuejs_v2)
- [vue.js＋Vuexチュートリアル](https://qiita.com/_P0cChi_/items/ebf8fbf035b36218a37e)
- [マークアップエンジニアがVue.jsにチャレンジしてじゃんけんゲームを作ってみました。](https://www.actzero.jp/developer/report-19774.html)
- [基礎から学ぶ Vue.js:書籍用のサポートサイト](https://cr-vue.mio3io.com/)
- [【Nuxt.js】npm run dev後にエラー出る時【対処法】](https://taroken.org/nuxt-npm-run-dev-error/)
- [vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話](https://qiita.com/tiwu_official/items/43dc554ec43dd951812a)