はじめに
どんな言語やフレームワークも学習前の学習手順で迷ってしまいます。僕と同じような悩みを抱えている人も多いのではないかと思います。
そんな僕がVue.jsの学習手順として良いと思った順番について記載していきたいと思います。
対象読者
- Vue.jsの学習手順の参考例を探している方
- これからVue.jsの学習を開始する方
- 学習開始〜オリジナルプロダクト作成完了までの流れが知りたい方
Vue.jsの学習に役立つ記事と、学習手順
学習手順についての記事は多く書かれていると思います。
数十記事を読んで、自分で学習していく中で良いと思った勉強手順が、
①Vue.jsについてまず知る
↓（ここ以降、手を動かすことに集中）
②書籍でまずはサラッと学習
③記事で補完
④練習問題
⑤部分部分のプロダクト作成
⑥プロダクト作成（WebアプリやWebサイト）
⑦もう一度書籍で固める
①Vue.jsでできることを理解する
まずは最初に、
・なぜ、Vue.jsを使うのか？
・Vue.jsを使うと何を実現できるのか？
・Vueと、jQueryの違いは？
・SSR、SPAとは？
あたりを知ることが必要かなと思います。
以下が参考記事です。
【おまけ】
Vue.jsでできること8選。凄さが分かる実用例スニペット集
②書籍で学習
Vue.jsの勉強を始める際に迷ったらまずこれを買うのが良いと言われている書籍です。
基礎から学ぶ Vue.js
サポートページとしてコードの記載されているサイトも用意されているため学習しやすいです。
しかし僕自身は、コンポーネントの章あたりからチンプンカンプンでした。
飲み込みも遅く、特にJSをバリバリ使いこなせるというわけでもないため、1周目ではかなり理解に苦しみました。
同じような境遇の人には、
「感覚だけ掴むために1周してみる。」
また、
③以降に書かれている「アウトプット」7割、
書籍でのインプット3割ぐらいの割合（1日の学習量に対して）で進める事が良いと思います。
③記事で補完
ここでの、記事の補完にはかなりためになったと思います。
書籍で学んだ基礎の重要な部分を掻い摘んで復習出来ます
書籍のように情報量の多いものではパンクしてしまいますが、
記事での要点のみの復習でかなりカバーすることが出来ました。
- Vueプロジェクトの構造を理解する
④練習問題を解いてみる
練習問題。一問一答も個人的には良いと思いました。
記事や書籍通りのコードではなくて、自分で考えて書くことができるので動く仕組みが分かりやすいです。
以下の記事は、超基本的な一問一答問題ですので「何か作り始めるにはちょっと自信がない・・・」って人には最適かなと思います。
解けて、動いた時の喜びもあるのでおすすめです。
⑤機能単位で何か作ってみる
ここで一度簡単なプロダクトを作ってみる
ここで何を作ればいいのか迷ってしまいますよね。
そこで、この記事で書かれていた通り、機能単位で何か作ってみることはアリだと思いました。
「どんな機能が作れるかわからない！」って人のために、他の記事を参考に色々な機能を作ってみました。
例）ハンバーガーメニュー
- 超簡単
例）タブメニュー
- かんたん
例）文字数カウンター
- かんたん
v-modelの使用
例）モーダルウィンドウ
- 普通
モーダルウィンドウ実装では
・コンポーネント
・slot
について学べます。
以下の記事がめちゃくちゃ分かりやすいです。
手順を追って記載されているため、1つ1つ理解しながら進めれます
コンポーネントの理解がちょっと・・・という人は、まずはそこから勉強し直してみても良いと思います。
僕の場合もコンポーネントがなかなか理解できませんでした。
以下記事が分かりやすかったです。参考にどうぞ。
例）カード：シャッフル、追加の処理
*難しい
例）タスク管理アプリ
- 難しい
⑥ここから、一度簡単なプロダクトを作ってみる
ーFirebase + Vue.jsで、Webアプリケーションの作成ー
まずは、こちらの記事
でFirebaseを使ったアプリケーションの作成方法、Vue.jsとの連携方法を学びます。
1つ1つ分かりやすく記載されているため、進めやすいです。
（途中いくつか、エラーで詰まることもありますがググれば出てきます。）
（この辺りで何を作れば良いのか、またわからなくなりました）
続いて、
↑アドレス帳の作成ができます。
一通り、簡単なアプリケーションを作る流れを学事ができます。作りたいものがない人にはおすすめです。
Udemyの動画学習で有料ですが、セール中は1700円ぐらいで購入できます。
手を動かしながら、簡単なwebアプリケーションを1つ作成できる経験になるので、
Vue.jsの知識が全くない状態では苦戦しそうですが、veux、firebaseを使ってwebアプリが完成するまでの流れを知ることができます。
このあとは一度、
・vuexを使う意味
・vuexを使うべきかどうか？
などをググりながら、整理してみるのも良いです。
⑦もう一度書籍で固める
最後に
今回は、個人的にいつも悩んでしまう学習手順について記載してみました。
参考にしていただけると嬉しいです。