Vue.js初心者の自分が、これまで試してみた書籍やUdemyの動画、参考サイトについて紹介します。
読んでみたVue.js関係の書籍
Webデザインの現場で使えるVue.jsの教科書
Vue.jsを始めて学ぶ人にはオススメの書籍です。
本の構成はVue.jsの基本的な使い方と、後半で「診断アプリ」や「ショッピングカート」など具体的なアプリを作っていくことになります。
初心者向けらしく「Vue.jsとは?」という所からの解説になります。
サンプルコードも「HTML」「CSS」「Vue.js」とキッチリ載っているので初心者にも分かりやすいと思います。Vue CLI についての解説はありません。
ただ、初心者向けと言ってもHTML/CSS/Javascriptの基本的な知識は必要となります。
試してみたUdemy動画
最短・最速で学ぶ Firebase Hosting + Vue Todoアプリ実装
Firebaseを導入してVue.jsでToDoリストをデプロイするまでを解説しています。
全体的にサクサクと進んでいきます。全くの初心者には説明不足に感じるかもしれません。
Firebaseへのデプロイまでの一連の流れを把握するには最適だと思います。
レビューを見るとこの講座の評判もよく、なにより「無料」なので見ておいて損はないと思います。
≫ 最短・最速で学ぶ Firebase Hosting + Vue Todoアプリ実装
Vue JS入門決定版!jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
レビューの評価も高く、初心者にはオススメの講座です。
内容的には本当に初学者向けで、Vue.jsの基本的な使い方の説明から始まって、途中「ToDOアプリ」「BitCoin価格表示アプリ」を作成して、最後に「Vue Router」「Vue CLI」に軽く触れる感じです。
トータル8.5時間と長い講座ですが、一動画自体の長さは3~5分程度と短く、通勤時などのスキマ時間にも見やすい内容となっています。
「Vue Router」「Vue CLI」に関しては本当に概要の説明と基本的な部分だけなので、「Vue Router」「Vue CLI」について学びたい人は別途他の講座を購入することをオススメします。
≫ Vue JS入門決定版!jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
Vue.js + Firebaseで作るシングルページアプリケーション
前半でVue.jsの基本を学び、後半でFirebaseを使った基本的な流れを解説というような内容です。
全体的にちょっと駆け足に感じられますが、Vue.js+FirebaseでSPAを作成するイメージを掴むには丁度いいかと思います。
ただ、完全な初学者には説明不足に感じる部分もあると思うので、初学者にはちょっとハードルが高いように思います。
≫ Vue.js + Firebaseで作るシングルページアプリケーション
Udemyでの講座の購入について
Udemyではどの講座でも、講義内容についての目次がありますし、一部講義内容を無料で視聴できるので、購入する前に確認しておくと失敗しづらいでしょう。
また定期的に、と言うかかなり頻繁にセールをやっています。セールになると一講座だいたい¥1,500~2,000程度になるので、セール時にまとめて購入するのがオススメです。
¥1,500~2,500程度なら書籍を購入するよりも安く済みます。
Udemyでは有料講座だけでなく無料の講座もたくさんあるので気になるものがあれば視聴してみてください。
参考サイト
Vue.js
Vue.jsの公式サイト。ドキュメント、リファレンスともに日本語に翻訳されており充実した内容になっています。辞書代わりに。
≫ Vue.js
基礎から学ぶ Vue.js
書籍「基礎から学ぶ Vue.js」のサポートサイト。
このサイトにあるチュートリアルが良くできていてオススメです。
チュートリアルは「ToDoリストを作りながら学習しよう!」「Vue.js+Firebaseで認証付きチャット」「Vue.js+Netlifyで自動デプロイ」の計3つ。
書籍もVue.jsの初心者向けの定番の本(通称:猫本)なので、興味がある人はそちらの書籍の方もチェックしてみて下さい。
やわらかVue.js
手書きのイラストでゆるく(わかりやすく)解説しています。コラム的なものもあって単純に読み物としても面白いです。このサイト内でも他に参考になるサイトの紹介もあって、リンク集として活用できます。
-
Vue.jsで文字数カウンターを作る
仕様とコード 勉強がてらvue.jsを使って「文字数カウンター」を作ってみました。 仕様的には、入力された文字数を「空白スペースを含めた文字数」と「空白スペースを含めない文字数」の2パターンを出力する ...
続きを見る
-
Vue.jsのサンプル、実例がまとめられているサイト5選
Vue.js Vue.js orgの公式サンプル集。ToDOのサンプルなど12のサンプルを掲載しています。ブラウザ上から試せます。 ≫ Vue.js Vue.js Examples Vue.jsのサン ...
続きを見る