フロント未経験からVue.jsでアプリを作るまでに参考にした全入門書

筆者はフロント未経験の状態から独学でVue.jsを用いたアプリを作れるようになったエンジニアです。

ここではJavascriptをある程度触れる経験者が、Vue.jsの学習を始めてからアプリを作るまでに参考にした書籍や勉強法をご紹介します。

Vue.js入門者におすすめの学習法

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークのひとつです。内部の状態と画面の表示を連携するのを得意としており、高度で複雑なUIを分かりやすいコードで実装できます。

近年、役割が拡大して複雑な仕様を実装することが増えたフロントエンド界隈では、高度なUIを分かりやすく実装できるVue.jsがとても注目を浴びています。

筆者はVue.jsの学習を始めた当初『フロント未経験』『JavaScriptのスキルもかなり未熟(jQueryにちょっと触れただけ)』という状態でしたが、実際に学習してみるとVue.jsはかなり覚えやすく、また可読性も高いと感じました。

学習法1:公式ドキュメントで仕様を知る

Vue.jsを学習するのにもっとも最適なのは、Vue.jsの公式ドキュメントです。Vue.jsの公式ドキュメントは日本語に訳されており、Vue.jsの仕様のすべてが記されているので、これさえ読めばVue.jsについて隅から隅まで学ぶことができます。

ただし、プログラミング言語の学習にはありがちですが、公式ドキュメントを読むだけですべてを理解できるのはある程度エンジニアとして経験を積んだ人だけです。

『公式ドキュメントを読んで理解できる』能力はエンジニアとして活躍していくにあたってとても大切な能力ですが、一方でエンジニアとしてまだ駆け出しの人や、JavaScriptに慣れていない人は公式ドキュメントだけで学習するのは少々難しいです。

Vue.jsの学習を始めた当時のわたしは他言語のプログラミング言語を含めてもまだエンジニアとしての経験が浅かったので、どの言語を学習するにしても、『公式ドキュメントさえあればあとは大丈夫』という状態は程遠かったです。

当時のわたしのようなまだ歴の浅いエンジニアの人は、公式ドキュメントと並行して入門書でVue.jsを学習するのをおすすめします。

学習法2:Vue.jsの入門書を熟読

少し前までは数の少なかったVue.jsの入門書ですが、現在は分かりやすい入門書が多く登場してきています。

公式ドキュメントと違い、Vue.jsのもっとも分かりやすい部分からはじめて徐々にステップアップしていけるようつくられた入門書は、駆け出しエンジニアやJavaScriptに慣れていないエンジニアがVue.jsを学習するのにぴったりです。

自分の理解力と相談しながらちょうど良さそうなレベルの入門書を購入して、書籍に書いてあることをなぞりながら実際にコードを書いていきましょう。『なぜこう書くのか』『こう書くとどんなことが起きるのか』を考えながらプログラミングをしていけば、自然とVue.jsの基礎が身に付いていきます。

学習法3:Qiitaの記事を読んでコーディング

ときには入門書の説明が不十分で分かりづらいと感じることもあるでしょう。

そんなときに役立つのがプログラマ向けの情報共有サービス『Qiita』です。

Qiitaには日々、さまざまなプログラミング言語や開発を手助けするツール、その他あらゆるエンジニア向けの技術情報が投稿されています。それら投稿の中には、Vue.jsについて入門者向けに解説した記事や、Vue.jsを使って実際にアプリを作ってみた時のコードを載せている記事もあります。

私も新しいことを学習するとき、書籍や公式ドキュメントで理解できないことがあればQiitaで調べることがよくあります。

実践的な記事が多いQiitaを読みながら、Vue.jsのアプリをつくってみると、Vue.jsを扱う技量を高めていけますよ。

入門者はともかく手を動かすこと

さまざまな学習法を紹介しましたが、どういった方法で学習するにしても必ず大切なのは、ともかく自分の手を動かしてプログラムを書くことです。

特にその言語についての学習をはじめたばかりの入門者にとっては、自ら手を動かして挙動を確認することが殊更に大切です。

なぜなら入門者のうちは、読んだだけで理解しようとするより、手を動かしてコードの動きを確認しながら学習した方が効率よく学習していけるからです。実際、私の周りでも「読むだけで理解できるから手を動かす必要はない」というエンジニアはほぼ全くいません。

むしろ面倒臭がらず、積極的に自分で楽しみながらプログラムを動かしてみたがるエンジニアこそが業務でも優秀な活躍を見せている場合が多いです。

頭の中のシミュレーションだけで理解する必要は全くありません。恥ずかしがらず、ともかくたくさんプログラムを書いていきましょう。手を動かして、考えて、また手を動かして…を繰り返している内に多くのことを理解し、身につけることができますよ。

基礎を理解したら自作アプリをどんどん作ろう

Vue.jsの基本的な仕様について理解したら、次は自作アプリを作りながらスキルアップを図りましょう。仕様を覚えるための簡単なコードとは違い、実現したいものを定めて制作するアプリ開発は、Vue.jsのみならず、どういった言語やライブラリ・フレームワークを作るにあたっても重要な学習法です。

書籍やWeb上の記事に書かれたコードをなぞるのと違い、自作アプリを作っていると、想定外のことがたくさん起きます。そういった想定外のことに対処しているうちに、書籍や記事だけでは覚えることのできない細かな仕様や、応用の仕方を学んでいくことができます。

作ったVue.jsアプリを公開してスキルを高める

さらにもうワンステップ、自分の技量をあげたい人は自作アプリをWeb上で公開するのをおすすめします。

入門者が制作したVue.jsアプリを公開しようとすると、まず最初にぶつかる壁が『どうすればアプリをWeb上に公開できるのか』という問題です。Vue.jsアプリであれば、FirebaseやHerokuのようなクラウド上の開発プラットフォームを利用して公開する人が多いのですが、入門者にとってはこれらプラットフォームと自作Vue.jsアプリをどう連携するかということも、学習すべき大切な知識です。

アプリを公開する過程でこういった知識が養われて、Vue.jsアプリの開発についてより専門的な知識を身につけられます。

さらに、アプリを公開するとフィードバックをもらえるという利点もあります。SNS等で繋がった同じく駆け出しのVue.js入門者や、ベテランのエンジニアからもらえるフィードバックで、さらにVue.jsの理解を深めたり、アプリ開発の知見を得たりすることができます。

Vue.jsを始めるなら「基礎から学ぶ Vue.js」

ざっくり感想

結論からいうと、Vue.js入門者は迷ったらこれを購入して学習を進めていけば、Vue.jsについてひと通りのことは覚えることができます。

ただしJavaScript自体の解説はあまりありません。なのでJavaScriptそのものの経験が薄い人は、別の入門書から始めるのがおすすめです。

目次と内容

「基礎から学ぶVue.js」は全部で9つのチャプターに分かれています。

チャプターとその内容についてまとめました。以下の通りです。

チャプター内容
CHAPTER 1 Vue.jsとフレームワークの基礎知識Vue.jsとは何かということから、基本仕様とインストール方法についての解説
CHAPTER 2 データの登録と更新Vue.jsのデータバインディング機能についての解説
CHAPTER 3 イべントとフォーム入力の受け取りVue.jsにおけるイベント操作についての解説
CHAPTER 4 データの監視と加工算出プロパティやウォッチャ、フィルタやカスタムディレクティブを利用したデータの監視と加工についての解説
CHAPTER 5 コンポーネントでUI部品を作るコンポーネントの定義方法や、コンポーネント間の通信・バインディング等の解説
CHAPTER 6 トランジションとア二メーショントランジションとは何かということから、トランジションを利用した簡単なアニメーション実装の解説
CHAPTER 7 より大規模なアプリケーション開発Vue-CLIを導入し、単一ファイルコンポーネントとしてVue.jsを扱う方法を解説
CHAPTER 8 Vuexでアプリケーションの状態を管理する規模の大きなVue.jsアプリケーションの状態管理のためのパターン・ライブラリであるVuexの基本を解説
CHAPTER 9 Vue RouterでSPAを構築するVue.jsのSPAにURLごとのルーティング機能を付与するVue.js公式プラグイン「Vue Router」の基本を解説

このように、「基礎から学ぶVue.js」は段階を踏んで本格的なVue.jsアプリを作成できるような構成になっています。Vue.jsの基本は一通り網羅されているので、この本をVue.jsの公式リファレンス代わりに使うにもちょうど良いですよ。

基礎から学ぶ Vue.jsの公式Webサイトが親切

基礎から学ぶVue.jsは、書籍内のデモ用ソースコードを公式Webサイトで公開しています。なので、書籍を読みながら実際にソースコードを動かしてみたいとき、すぐにWeb上からそれらのコードを持ってくることができるのでとても学習しやすいです。

さらに公式Webサイト内で、オンライン上でVue.jsを動かすためのオンラインエディタの紹介や、書籍内では載せきれなかったVue.jsの応用的な内容の解説などもされています。Vue.jsの理解を深めていくときにとても便利なので、これらを活用しながら学習をすすめていくとよいでしょう。

「基礎から学ぶ Vue.js」を読んだら次は「Vue.jsとFirebaseで作るミニWebサービス」でアプリ開発の力を付ける

ざっくり感想

「アプリをつくりながら学習したい!」という人におすすめの一冊です。(私自身も同書籍からVue.jsの学習をはじめました)

同書ではFirebaseというGoogleのサービスを利用して、ログイン機能等を組み込みながらVue.jsのアプリを制作・Web上に公開していきます。

このFirebaseとは、2020年現在もっとも注目されているmBaaS(mobile Backend as a Service)です。ログイン機能や、リアルタイム性に優れたNoSQLデータベース、そのほかにも様々な機能でアプリ開発をサポートしてくれます。

Firebaseの機能を使って、自作アプリをWeb上に公開できるよう作りながらVue.jsを学習できるので、実践的な学習方法が好きな人にはぴったりの書籍です。

目次と内容

「Vue.jsとFirebaseで作るミニWebサービス」は全部で8つの章から成ります。

各章の内容についてまとめました。以下の通りです。

内容
第1章 はじめに同書の構成やターゲットについての説明のほか、Node.jsやnpmの解説、さらに公式ハッシュタグで質問すると著者が回答してくれることなどを説明
第2章 サーバーレスシングルページアプリケーションの基本SPAやサーバーレスの意味、Firebaseについての解説
第3章 開発環境のセットアップとデプロイまでの流れWebpack、Vue CLI、Firebaseのセットアップ・デプロイについての説明のほか、Vue.jsの単一ファイルコンポーネント(SFC)について解説
第4章 Googleアカウントでのユーザ登録と、ログイン状態の判別Firebaseを用いて「Googleアカウントでのログイン機能」を自作アプリに実装する方法について解説
第5章 エディターの作成:データベース作成とデータ保存Vue.jsとFirebaseで「マークダウン記法でメモを残せるサーバーレスシングルページアプリケーション」を作成する方法を解説
第6章 見た目を整えるリセットCSSやCSSフレームワークを用いながら、自作アプリの見た目を整える方法を解説
第7章 Webサービスとして公開するまでの必要な準備自作アプリをWeb上に公開するにあたって必要なセキュリティ対策の説明や、Vue Routerを用いて複数ページのアプリを作る方法の解説
最後に同書で解説した内容からさらにステップアップしていきたい人のために、「次にどんな機能を実装したら勉強になるか」を紹介

これができれば、認証付きのアプリは一旦公開できるレベル

同書籍を一通り学べば、「認証機能付きのアプリを自作し、Web上に公開できる程度の実力」が身につきます。

アプリの制作・公開の両方ができれば、今後はVue.jsの学習を自走しながら進めていくことができます。どんどんアプリを作ってスキルアップを図りましょう。

参考にしたQiitaのVue.js入門記事

Vue.jsはエンジニアの技術情報共有サイト「Qiita」にもたくさんの解説記事が投稿されています。その中でも、私がVue.js学習中に参考にした記事をピックアップします。

jQuery から Vue.js へのステップアップ

Vue.js初学者の人の中には、「jQueryなら触ったことがあるけど…」という人もいると思います。

JavaScriptのライブラリの中で長い歴史があり、もっとも多くの人に使われているライブラリ「jQuery」は、業務においても様々なプロジェクトで用いられてきました。同記事は、そんなjQueryからVue.jsへステップアップしていくために、jQueryとVue.jsのコードの比較を丁寧に説明してくれています。

「jQueryなら書けるけど他はちょっと…」という人は、同記事を読んで少しずつjQueryで出来ていたことをVue.jsでも出来るようになっていきましょう。

参考 jQuery から Vue.js へのステップアップQiita

Vue.js「コンポーネント」入門

Vue.jsをしっかり活用するなら必須となるのが「単一コンポーネントファイル(SFC)」を利用した開発方法です。

同記事では、その単一コンポーネントファイルについて丁寧に解説されています。

具体的には、単一コンポーネントファイルの構成、書き方、そして親コンポーネントと子コンポーネント間のデータの受け渡しについて説明されています。

特に「子コンポーネントから親コンポーネントへのデータの受け渡し」はVue.js初学者にとって少しややこしいところなので、同記事をよく読んでしっかり自分のものにすると良いでしょう。

参考 Vue.js「コンポーネント」入門Qiita

10分で基礎がわかるVue.js-入門

同記事ではVue.jsの基礎を分かりやすく1ページにまとめて解説してくれています。

Vue.jsの基本的な使い方を一通り網羅してまとめてくれているので、Vue.js公式ドキュメントの代わりに、どんな仕様だったかをおさらいしたい時にさらっと確認するのにおすすめの記事です。

同記事では全てのVueのコードが、コードを自分でアレンジして動かしながら確認できるサービス「CodePen」で書かれているので、解説中のコードに手を加えて分かりやすく動作確認することが出来ます。

参考 10分で基礎がわかるVue.js-入門Qiita

ステップアップしたい人向けVue.js書籍

Vue.jsの基礎を一通り学んだら、次は応用です。Vue.jsライブラリを作ったり、Vue.jsの拡張フレームワークであるNuxt.jsを使いこなして中・大規模アプリの開発もできるようになるおすすめ書籍をふたつピックアップしました。

現場で使えるVue.js tips集

タイトルの通り、同書籍では実際の業務で必要とされるレベルのVue.jsのスキルが身につくよう、実践的なお問い合わせフォームの開発や、そのライブラリ作成、さらにVue.jsのユニットテストやその他業務で必要とされる各種ライブラリについて解説されています。

Vue.jsの現場を経験してきた著者が解説する同書籍は、現場におけるVue.jsでの開発のポイントをうまく突いており、これからVue.jsを仕事でも積極的に携わっていきたい人にぴったりの書籍です。

書籍内のコードはGitHub上で誰でも見れるようになっているので、書籍内の解説を読みながら実際に手を動かしてコードを動かすとより効率よく学習を進めることが出来ます。

Vue.js & Nuxt.js超入門

同書籍は「超入門」とありますがVue.jsのスキルをNuxt.jsにステップアップしていきたい人にとってもおすすめの一冊です。

Vue.jsの拡張フレームワークであるNuxt.jsは実際の業務でも頻繁に使われます。サーバーサイドレンダリングを行うアプリをはじめ、様々なタイプのVue.jsアプリ開発を強力にサポートするNuxt.jsを使いこなすことができれば、アプリ開発を高速化することが出来ます。

同書籍ではそんなNuxt.jsについて詳しく解説している他、axiosを利用したHTTP通信の実装や、Googleのサービス「Firebase」をVue.jsアプリで活用する方法などについても触れられています。

Vue.jsを含め、エンジニア向け入門書は商業誌だけでなく、同人誌もある

実際にアプリを作りながら学習を進めたいエンジニア向けの書籍が同人誌には豊富

エンジニア向けの技術系書籍は商業書だけではありません。

個人が出品する非商業の書籍(同人誌)の中にも、優れた技術系書籍が豊富にあります。

中には内容がとても分かりやすく、商業誌として出版されることになったものも多いです。

また、技術系同人誌は「新しい技術に敏感」という特徴もあります。個人が出品する同人誌は、出版までに長い時間の要する商業誌よりも早いタイミングで新しい技術に触れることが出来るので、比較的新しい技術の習得をしたい人にとってもおすすめです。

技術書専門の同人誌即売会『技術書典』

そんな技術系の同人誌ですが、国内では『技術書典』という同人誌即売会で購入することが出来ます。2016年から年に2回ほどのペースで開催されており、毎回様々な分野のエンジニアが「技術」に関わる書籍を出品しています。

個人制作のため、出品される技術書は分野もレベルも様々です。自分が知らない分野について気になる書籍を購入して、エンジニアとしての知識の幅を広げるのも技術書典の楽しみ方のひとつです。

ネットショップサービス『Booth』にも入門書が豊富

技術系同人誌が手に入るのは技術書典だけではありません。pixivが運営するネットショップサービス『Booth』でも、技術系同人誌が手に入ります。

過去の技術書典で出品していたサークル(同人誌即売会における出品者。個人の場合も複数人の場合もある)の技術系同人誌も、電子書籍としてBoothで販売されている場合があるので、こちらから目的の技術系同人誌を探すのもおすすめです。

実際に、Vue.jsについて解説した技術系同人誌も多く出品されています。電子書籍として購入してすぐに読めるので、手っ取り早く書籍の内容に触れたい人にもおすすめです。

まとめ

商業誌のみならず、Web上の解説記事から同人誌まで様々な媒体でVue.jsは学習出来ます。

たとえフロントエンジニアとしての経験がなくとも、自分のレベルや好みに合わせた書籍や解説サイトを選んで、手を動かしながら学習していけば必ずVue.jsの技術を身につけていくことができます。

書籍や解説記事、公式ドキュメントなどを片手に、手を動かしながら着実にVue.jsのスキルを身につけていきましょう。