javascriptの知識ゼロからvue.jsで業務がこなせるようになるまでのロードマップ

プログラミング未経験からベンチャー企業に入社して半年の自分がvue.jsを実務で使えるようになるまでの学習手順について紹介します。vue.jsを初めて使った時ってmethods?computed?何それ？って状態だと思うんですよ。そういう初歩的な疑問をいち早くなくせる人が1人でも増えればいいなーと思ってます。

前提知識

・エディタが使える(vscodeとか)
・HTML+CSSでコーティングがある程度できるレベル

目標

vue.jsを使ってこのサイトのような感じで作成できるようにする

①Progate

javascriptを初めて触るならまずここから。
基本的にはカリキュラム通り進めればいいんですが、個人的には3章の関数を学ぼう!までを理解できればいいかなーと。
理由は4章以降はクラスの概念とかファイルの分け方などブラウザに表示させる内容とは関係ないので人によっては学んだ感じがしないんですよね。最初はコードを書いたら色が変わった！動いた！っていう体験をした方がモチベーションは上がるのではないでしょうか？そのため3章までは頑張って理解して4章以降は流し見でいいと思います。

②確かな力が身につくJavaScript「超」入門 第2版

javascriptの概念がなんとなくわかった所でもう少し深堀り。
色んな本も見てきましたがカラフル、わかりやすい、サンプルコードつきの3拍子でこの本をおすすめします。
何よりコードを書いたらすぐブラウザに表示されるので勉強してて楽しいです。

③HTML + CSS + javascriptを使ったサイト作成

ここで実際にアウトプットしてみましょう。
何作っていいかわからない！という人は模写でも大丈夫です。
GODIVAのマウスを重ねたらメニューが出るぐらいで大丈夫だと思います。

④いちばんやさしい Vue.js 入門教室

javascriptの知識がある程度身についたらvue.jsにシフトしましょう。
vue.jsの本いろいろ読みましたがこの本が一番わかりやすかったです。
なぜならサンプルコード1行1行丁寧に書いてるからです。
他の本だといきなりライフサイクルフックなど難しいワードが出てくるので挫折してしまう可能性があります。

⑤vue.jsを使ったサイト作成

Vue CLIを使って実際にサイトを作成。
ニュース一覧などをv-forで繰り返し表現できるとGOOD！
vue.jsの理解を深めるためcssのhoverやfocusといった擬似要素は封印してみましょう。
実際に自分はこのサイトを参考に作成しました。

Q&A

サイト作成で挫折した

いい証拠です。足りない知識がわかっているならググるかインプットし直しましょう。それでも挫折しそうなら作成するサイトのレベルを下げましょう。勉強は義務ではないので長続きしなければ意味ありません

他におすすめの教材はないの？

javascript、vue.jsも何冊か本読みましたが2冊目以降はあまり意味なかったなーと思います。
インプットする時間をいち早くアウトプットに回しましょう。