vue.js/vuex/nuxt/firebaseのおすすめ入門本・動画やサンプルコード

プログラミング

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

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

【入門本全まとめ】vue.js/vuex/nuxt/firebaseの書籍一覧

【初心者向け】Vue.jsのおすすめ動画

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

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

です。todoアプリなどを作ります。

Udemy

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

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

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

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

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

ただ、個人的に最初にみたのはudemyの動画でした。上記の本はDMMの半額セールで一応買いましたよ

dmm電子書籍の評判・口コミ(50%ポイント還元は半額で最安!?)
dmm電子書籍を利用しているため、dmm電子書籍の評判・口コミについてまとめていきます。 公式サイトはこちらです。 DMM電子書籍の公式サイト dmm電子書籍の評判・口コミ/評価、50%ポイント還元は半額で最安!? DM...

【初心者向け】Vuex、axios、Authenticationのおすすめ動画

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

はvuexまで解説してくれています。

Udemy

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

その他、ボーナス講座でaxiosを使ってhttpサーバーに通信する方法や、Authenticationもあります。

【初心者向け】Nuxt.JSのおすすめ本・動画

Nuxt JSは本も出版されていますが、初心者はudemyの

「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで(中村祐太)」

の方が理解が早いでしょう。vuexやfirebaseの基礎も勉強できます。

Udemy

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

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

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

【初心者向け】bootstampのおすすめ本・動画

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

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

あたりがおすすめかも。

Udemy

firebaseのおすすめ本

firebaseは今までパッとする本がなかったのですが、技術の泉シリーズ(NextPublishing)から販売されました。NextPublishingは電子書籍ファーストのインプレス出版社です。書店ではあまり置いていないかもしれません。

他の出版社のセールの傾向はこちらの記事にまとめてあります。

翔泳社、技術評論社、オライリーなどit系技術書のおすすめ電子書籍のセール傾向全まとめ
it関連の電子書籍の本をよく買います。そこで自分の経験をもとに、各社のセールの傾向を覚書がてらまとめてみました。出版社によっては太っ腹セールがあるのでおすすめですよ。 キンドルのIT書籍のセールの動向 キンドルは10月に開始...

Quasar Frameworのおすすめ本・動画

何でもできるQuasar Frameworも注目されています。

「Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps」はどうやら開発者本人が解説しているようです。

検索やマルチプラットフォームの対応まで対応しています。英語ですが動画なので問題ないでしょう。

Udemy

firebaseとvuejsのおすすめ動画

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

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

Udemy

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

typescriptのおすすめ本や動画

次の教材がいいですかね。

よしぴー (Yoshipi)さんの「超TypeScript入門完全パック(2020) – もう他の教材は買わなくてOK!」

よしぴーさんの説明はudemy講師の中でも1番わかりやすいかも。

Udemy

書籍もありますが、個人的に読んでいないため、情報提供のみです。

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

laravelとvuejsのおすすめ本

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

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

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

詳しくはこちらの記事をみてください。

2020年kindle unlimited(キンドルアンリミテッド)のおすすめ(漫画全巻無料/小説/雑誌他ラインナップ)
ebookbrainが2020年キンドルアンリミテッド (kindle unlimited)のおすすめをまとめていきます。個人的な興味に基づいて、漫画全巻、小説、雑誌、英語、プログラミングなどのジャンル別に一覧でいきますね。kindle u...

vue.jsの本一覧

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

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

電子書籍のおすすめ比較

【個人的なおすすめ】vue.js/vuex/nuxt/firebaseの教材は安い!

書籍と動画全部まとめておすすめはどれでしょう。

udemyの講座は安かったのでだいたい全部買ったし、本屋でだいたいの本はペラペラ立ち読みしたのですけど、開発初期にわりとよく見たのは以下のものです

ほぼudemyになりますね。

Udemy

ただ、firebaseの日本語講座は充実しておらずおまけ程度です(英語の講座ならあります)。firestoreだけは書籍をおすすめします。

スポンサーリンク

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 - Code Playground
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 - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Vue.js TodoMVC example - JSFiddle - Code Playground
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のおすすめ拡張機能

Vue.js Extension Packがありますが、いろいろとインストールされすぎます。

個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。

CLI、vuexが便利ですかね、やっぱ。

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

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

コメント

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