概要
こんにちは、都内でフロントエンドエンジニアをしてますかめぽんです。フロントエンドですっかりお馴染みになりましたVue.jsですが、サーバーサイドエンジニアやデザイナーなど非フロントエンド領域の方々も触っている方がかなり増えて来たのでは、という印象を受けます。また、Vue.jsを使ってFirebaseやAWS、Netlifyなど様々なサービスと組み合わせて爆速で開発されているかたもかなりいるのでは無いかと思います。さらに、フロントエンドとしてモダンな開発をしたいとなると大概Vue.jsやReact.jsなどモダンなフレームワークやライブラリの習得が必須となっていることが多いです。
そんな中で、「Vue.jsを勉強したいけど正直全然さわれてない。。。」とか「フロントエンド覚えること多いから結局何すればいいのかわからない」とか「勉強してるけど何がわからないかわからない・・・」など、いち早くキャッチアップしたいのになかなか出来ていないと感じている方はいると思います。
結論から言いますと、いち早くキャッチアップをするならいち早く情報のゲシュタルトを作ることが大事です。つまり、大枠を掴むということですね。
今回その大枠を掴むのにぴったりな、概念的な部分のものから実際のVue.jsを使った開発で役立つような記事や書籍などをまとめてみました。
※・・・概念的な記事にはReactやReduxが出てくることもあります。
ターゲット
- これからVue.jsを効果的に勉強して行きたい方
- 何をインプットすればわからない方
- HTML, CSS, javascriptで簡単な実装ができる方
記事まとめ
基本的に以下の構成で進めて行きます。
- 導入編・・・概念的な部分のインプット
- 入門・基礎編・・・文法やお作法をみてみて雰囲気を掴む
- 実践編（CLI環境、環境構築）・・・入門・基礎編でやったことを使って実際の開発にかなり近い環境で開発してみる
- ガイドライン・・・実践のクオリティを高めるためのインプット
導入編
Vue.jsに入る前に、SPA(Single Page Application)や、仮想DOM、Fluxについてインプットすると良いと思います。
Vueを使うと何がおいしいのか、Vue使った設計はどんなようになるか、そもそもSPAって何をしたいのかなどサラッと読んでおくと実際の開発でイメージがつきやすいです。
入門・基礎編
基本的にVueの世界に飛び込むためわかりやすい記事があるので、実際に手を動かしながら文法などについて学んでみると良いです。
エディタでも良いですしCodeSandBoxなどですぐ試すのもおすすめです。書籍や公式では非常によくまとまっているのでいろんなコンテンツがあるのですが、一旦Vue独特の文法について触れる程度で十分かと思います。
実践編(CLI環境)
入門・基礎編では主に文法に触れましたが、今回はSFC(Single File Component)やコンポーネントを使った開発、Vuexを使ったStore構築、Vue-Routerを使ったルーティングなどかなり実践的なものとなっています。
実践編（環境構築）
CLI環境編ではVueが動く前提で開発出来ていたと思いますが、ここではVueが動く環境を実際に構築します。
基本的にはVueもReactもWebpack+Babel+ESLint+Prettierの構成で開発環境を作ることが多いです。そこに、lodaerをなどを組み込みVueファイルを読めるようにしていくとVueで開発ができるようになって行きます。
ガイドライン
ここの記事は必須項目ではありませんが、読んでおくとかなり役立つページになっています。
特にスタイルガイドは実際の開発でも読み直してみるとお互いに共通認識を持ちながらメンテナンサブルな開発を行って行くことが出来ます。
また実践的なコードなども乗っているので、読むだけでかなり役立つかなと思います。
- Vue.jsスタイルガイド
- Vue.jsコツ＆ベストプラクティス
- Vue Patterns
まとめ
いかがだったでしょうか、概念的な部分の導入からガイドラインなどの実践的な記事まで紹介してみました。自分も学習を進めていく上で助けになったものも多かったので、一通り舐めていくと良いかと思います。コンテンツの量的には少し多めな気もしますが、最初は一つ一つを厳密に追っていくのではなくあくまで雰囲気を掴むことが大事なので、最初は本当にサラッと読んでみると良いです。
サラッと読む → 導入部分のインプット → 少し手を動かして体感する → ゲシュタルトが出来てくるのサイクルができればどんどん覚えていけると思います。
ぜひ、楽しいVueライフを送って行って欲しいです。