vue.js/vuex/nuxtのおすすめ入門本(書籍)やサンプルコード

プログラミング

vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。

現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです。

【入門本全まとめ】vue.js/vuex/nuxt/firebaseの書籍でおすすめはどれ?

【入門本】基礎から学ぶ Vue.js

図解が多くわかりやすいです。多くのプログラマははじめにこの本を買っているようです。

書籍だけではなくサポートサイトが充実しています.書籍では未掲載のfirebaseでチャットアプリを作ろうみたいなものもあります。

基礎から学ぶ Vue.js
書籍用サポートページ

ただ、個人的に最初にみたのはudemyの動画でした。

【初心者向け】Vue JS 入門決定版!jQuery を使わない Web 開発 (中村祐太)

udemyの講座がおすすめです。中村祐太さんのものは特に初心者向けにうまく構成されている気がします。

「Vue JS 入門決定版!jQuery を使わない Web 開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」です。todoアプリなどを作ります。

Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 100,000 courses and 24 million students. Learn programming, marketing, data science and more.

vuexは続編の「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」で扱っています。

【初心者向け】nuxt.jsのおすすめ本

Nuxt JSは本も出版されていますが、初心者はudemyの「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで(中村祐太)」の方が理解が早いでしょう。vuexやfirebaseの基礎も勉強できます。

Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 100,000 courses and 24 million students. Learn programming, marketing, data science and more.

書籍は次のようなものがでています。

  • Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
  • Vue.js & Nuxt.js超入門
  • NuxtとGoではじめるWebアプリ開発 (技術の泉シリーズ(NextPublishing))

ただ、本やでパラパラとめくったところ、経験者向けの感じがしました。動画をみたあと、一冊もっておいてもいいかもしれません。

【vuexでおすすめ】mapState, mapMutations, mapGetters, mapAcitonsなども解説

よし ぴーさんの「超Vue JS 2 入門 完全パック – もう他の教材は買わなくてOK! (Vue Router, Vuex含む)」はvuexまで解説してくれています。

Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 100,000 courses and 24 million students. Learn programming, marketing, data science and more.

mapState, mapMutations, mapGetters, mapAcitonsなども含みます。書籍ではここまで解説してくれないものが多いです。しかも、かなりわかりやすく初心者向けです

【フレームワーク】bootstamp、Quasar Framewor

フレームワークはbootstampなども有名ですが、何でもできるQuasar Frameworも注目されています。

「Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps」はどうやら開発者本人が解説しているようです。検索やマルチプラットフォームの対応まで対応しています。英語ですが動画なので問題ないでしょう。

udemyではbootstampの動画の取り扱いもあります。

「増補改訂版『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜」あたりがおすすめかも。

Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 100,000 courses and 24 million students. Learn programming, marketing, data science and more.

firebaseとvuejsのおすすめ動画

vue.jsはfirebaseと組み合わせて使う紹介が非常に多いです。firebaseはgoogleが買収したmobile Backend as a Service(mBaaS)です。バックエンドエンジニア不要でもアプリが作れるだろうと言われ、ゲームのunityなどでも使われています。

udemyで「Vue.js + Firebaseで作るシングルページアプリケーション」をfirebase用に一応ゲットしました。この動画はわりと説明があっさりとしているため、慣れている向けという気がしました。

Online Courses - Learn Anything, On Your Schedule | Udemy
Udemy is an online learning and teaching marketplace with over 100,000 courses and 24 million students. Learn programming, marketing, data science and more.

nuxtまでインストールしてしまうなら、「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」の方がおすすめです。

typescriptとvuejsおすすめ本

個人的に読んでいないため、情報提供のみです。

基本プログラミングは型がありで書いた方がよいとも言われます。typescriptはマイクロソフトの言語ですね。

laravelとvuejsのおすすめ本

「Laravel and Vue.js: Learn By Coding」などが出版されています。キンドルアンリミテッドで無料でてていました。個人的に読んでいないため、情報提供のみです。

vue.jsのキンドルアンリミテッドの読み放題

vue.jsでキンドルアンリミテッドの読み放題同人誌がたくさん出回っています。「速習Vue.js 速習シリーズ」は無料で見れます。

vue.jsの本一覧

他にも以下のような書籍が出版されています。

  • Vue.js入門 基礎から実践アプリケーション開発まで
  • 動かして学ぶ!Vue.js開発入門 (NEXT ONE)
  • 改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ)
  • 現場で使えるVue.js tips集 (技術の泉シリーズ(NextPublishing))
  • 後悔しないためのVueコンポーネント設計 (技術の泉シリーズ)
スポンサーリンク

電子書籍のおすすめ比較

vue.jsののサンプルソースコード

codepen、jsfiddle、githubなどで探してみましょう。以前、少し探したものをシェアしておきますね。

vue.jsのcheckbox(チェックボックス)ですべて選択・非選択のサンプル

こちらの記事がとても参考になりました。

Vue.jsで「すべて選択」を実装する - Qiita
checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみま...

少しコードが違います。英語ですが。

Check Uncheck All Checkboxes with Vue.js
Checkboxes are used on the page to allow the user to select multiple items from the list. By Adding check all checkbox it is easier for the users to check unche...

別のやり方もあるようです。

how to select vuejs check all uncheck all checkboxes
Get free JavaScript tutorials, references, code, menus, calendars, popup windows, games, and much more.
vuejs checkbox all - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Vue-Multiselect

選択ライブラリもあるのですね。

Vue-Multiselect | Vue Select Library.
Probably the most complete selecting solution for Vue.js, without jQuery.

selectコンポーネント比較です。

Vue.js用のselectコンポーネント比較 - Septeni Engineer's Blog
こんにちは、まるやまです。 現在仕事でVue.jsを使っていますが、最近そのVue.js用のselectコンポーネントをいくつか試してみたので使った感じや、問題点をまとめてみました。

vue.jsのto doリストのサンプル

定番のtodoアプリです。サンプルがいろいろとありました。

Vue.js Todo App - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Vue.js TodoMVC example - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Attention Required! | Cloudflare
Attention Required! | Cloudflare
スポンサーリンク

vue.jsの環境構築

めも程度に残しておきます。

node.jsをインストール

node.jsをインストールします。npmも一緒にインストールされます。

Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

vue CLIをインストール

vue CLIとはVue.jsの開発を手早く進めるための便利システムです。

npm install -g @vue/cli

確認します。

vue --version

vue.jsのエラー

エラーも覚書程度に残しておきます。

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field xxx)

うっかりりミスでした。

text: this.taskList → taskList: this.taskList

[vuex] unknown getter:

ブラウザのConsoalに出ていたエラーです。

namespacesの指定がされていなかっただけでした。。名前空間を引数に渡すように修正して解決。

ご参考になれば幸いです。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
プログラミング
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました