【Vue.js】初心者向け勉強マニュアル「独学でWEBアプリを作ろう！」

話の続き、、、でもそれじゃダメだろ、会社はそれで良くても個人として成長できないし何の為にもならない、変化が速いWEB業界だからこそ使わなくとも知っておかなきゃでしょ！

実務で使わないにしろ、自分だけはいつでも使えるようにしておきたいということで、今回は「Vue.js（ビュージェーエス）」について学んでみました、その道のりをこの記事に残しておきますので初心者の方は独学勉強の参考にしてみてください。

はじめに

はじめに話しておかないといけない事が何点かあります、長くないのでサラっと読み流して頂ければなと思います、以下３つです。

• Vue.jsとは？
• Vue.jsを学ぶために必要な知識
• Vue.jsの開発環境（筆者Ver）

Vue.jsとは？

まず最初に「Vue.jsとは？」という話ですが、これは公式サイトで簡潔に説明されていますので引用しておきます。

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。

出典：Vue.js公式サイト

つまりVue.jsとは、MVVMという設計手法を元に作られたJavascriptのフレームワークで、シンプルな記述で簡単に使えて更に大規模なアプリ開発もOK（保守・開発に優れている）という優れもの。

しかも、日本語のドキュメントやネットに落ちている情報が充実している事から学習コストが非常に低いというメリットがある、フレームワークを使ったことがない人にはドンピシャと思われる。

Vue.jsを学ぶために必要な知識

Vue.jsを学ぶために必要な知識としては「HTML」「CSS」「Javascript」、これら３つの基本的な理解が前提で、少なくとも「簡単なコードなら書ける」くらいのスキルがないと学習効率は非常に悪いこと間違いなし、公式ドキュメントにもこう書いていますね（下記引用）

公式ガイドは、HTML、CSS そして JavaScript の中レベルのフロントエンドの知識を前提にしています。フロントエンドの開発が初めてであるならば、最初のステップとして、フレームワークに直接入門するのは良いアイデアではないかもしれません。基礎を学んで戻ってきましょう！他のフレームワークでの以前の経験は役に立ちますが、必須ではありません。

出典：Vue.js公式サイト

もし、「全くの初心者でちょっと自信がありません」ということなら、「プロゲート」と「ドットインストール」でそれぞれ学んできましょう、

Vue.jsの開発環境（筆者Ver）

• OS：Windows（たまにMac）
• エディタ：Visual Studio Code（以下：vscode）
• 拡張機能：Vetur,Vue 2 Snippets（vscode）,Vue.js Devtools（chrome）

OSはWindowsでたまにMacを使っています、Windowsを選んだのは「デスクトップPCだから」という単純な理由です、エディタはMicrosoft製の「Visual Studio Code」を使っています。

vscode環境でVue.jsを効率的に学ぶなら下記の拡張機能は必須です、併せてchromeブラウザにもVue.js専用プラグインを導入しておくと便利です。

vscodeの拡張機能「Vetur」

シンタックスハイライトやコード補完を手助けしてくれます、vscodeでVue.jsを開発するなら必須プラグインかと思います。

vscodeの拡張機能「Vue 2 Snippets」

コードヒントが増えます、とりあえず入れておくべき。他にも「Bracket Pair Colorizer」「Debugger for Chrome」など便利な拡張機能はたくさんあるので適時入れておきましょう。

chromeの拡張機能「Vue.js Devtools」

consoleを使わずdataを確認できたりとデバッグがかなり快適になります、Vue.jsを読み込んでいるサイトにアクセスするとアイコンの色が変わり動作していることを知らせてくれます。

Vue.jsのドキュメントから学ぼう【入門】

Vue.jsを学ぶのに参考書はいりません、正確に言うと最初は参考書なしで後からリファレンスとして参考書を購入し学ぶのがいいかと思います。

幸いなことにVue.jsには日本語完全対応のドキュメントがあり、そこにある情報だけでVue.jsの基本を全て学ぶことができます、チュートリアルに沿って分からない用語はググって対応すれば無料で濃い学びが得られると思います。

ドキュメントを使ってVue.jsを学ぶ時のコツ

Vue.js日本語版ドキュメントにアクセスして読み進めていくと「はじめに」という章からサンプルコードが紹介されると思います、これを写経していくわけですが、ここで３つほどアドバイス。

• 写経する時はコピペ厳禁
• クラウドのエディタは使わない
• コマンドを使ってファイル操作

一つ目は、サンプルコードはコピペせず全て自分で書くようにしましょう、コピペして動かすだけならただのオペレーター。笑、、、データの宣言にしても右に倣えで「message」ではなく「textData」にするなど自分なりに置き換えましょう。

二つ目は、クラウドのエディタは極力使わないようにしましょう、ドキュメント側で用意されている「JSFiddle Hello World example」は確かに便利ですが、最初はローカルにディレクトリやファイルを置いて取り組んだ方がいいです、章ごとにディレクトリを複製して取り組むのがオススメです。

三つ目は、コマンド（ターミナル）を使ってファイル操作を行うようにしましょう、こういったフレームワークを使うならコマンド操作に慣れておくとエンジニアとして有利です、パス移動にファイル作成、ディレクトリの名前変更に複製などコマンドで簡単に出来る操作はエディタの機能に頼らずコマンド行いましょう。

※コマンド（ターミナル）を簡単に操作できるのもvscodeの強みです。

以上に注意しながら公式ドキュメントの「内部」の章まで進めれば、Vue.jsの基本は理解したと言っていいかなと思います、脱初心者おめでとうございます。

学習の流れ（補足）

先ほど解説した「写経する時はコピペ厳禁」の部分を補足する形で学習の流れについて補足しておきます。

「vuejs」というディレクトリを作成しておいて、その中に章ごとのサンプルコードをディレクトリ単位で作成しておくといいかと思います、ディレクトリ名は「sample-01」としておくと分かりやすいかと思います。

上のコードにあるように、サンプルコードでよく見かける「message」というデータ宣言は「textData」と置き換えるなど工夫しましょう、大事なのは「こう書いても同じ結果が返ってくるだろう」と考える事です。

Vue.jsでWEBアプリを作って学ぼう【中級】

ドキュメントやネットに落ちている情報で基本的な部分を学んだら、Vue.jsを使ってWEBアプリを作ってみましょう、最初は簡単なものから作成して徐々に規模を大きくして反復しつつ学べばいいかと思います。

ただ、ドキュメントで学んだ知識だけで何か作ろうとすると「趣味レベル」で終わってしまいそうなので、「Vue CLI」と呼ばれる開発ツールを使って本格的に取り組むのがベストかと思います。

定番の開発ツール「Vue CLI」を知る

まず最初に「Vue CLI」とは？、、、Vue.jsでアプリ開発をする時の定番ツールで、環境構築からプロジェクトの作成及びテンプレートファイルの準備を手助けしてくれます、設定も対話形式で進められるので簡単にWEBアプリ開発の環境を作ることができます。

定石通りに解説されても正直「？」だと思うので、実際に「Vue CLI」をインストールてローカルサーバーを立ち上げるところまで見ていきましょう、難しいことは一切しないので構える必要はありません😁

「Vue CLI」をインストールしてみる

実は「Vue CLI」については公式で紹介されていて導入手順も書いてたりします、最初は読み飛ばした方も多いのではないかと思います（下記参考）

「Vue CLI」を使うには「Node.js」や「npm」の知識が必要だけどお前大丈夫か？使えんのか？使えないならやめとけ！！と言っていますが（解釈。笑）問題ありません、コマンドから下記の手順で「Vue CLI」をインストールし使ってみましょう。

①：「Node.js」をインストール

「Node.js」をインストールします（既に入っている方は不要）、インストールされているかどうかはnode --versionで確認できます、Verが返ってきたらインストール済みということです。

②：「Vue CLI」をインストール

npm install -g vue-cliと入力して「Vue CLI」をインストールします、Macユーザーの方は先頭にsudoが必要かもしれません、とりあえずはこれで「Vue CLI」を導入することが出来ました。

この後「Vue CLI」を使ってWEBアプリの雛形を作成する手順について解説します、ローカルサーバーの立ち上げまで行いますのでしっかり付いてきてください。

「Vue CLI」を実際に使ってみる

①：適当にディレクトリを用意する

適当にディレクトリを用意します、ディレクトリ名は自由に決めて下さい、その中にVue.jsのプロジェクトを作成していきます、私は「vuejs」にしました。

※ディレクトリを作成したらそこにパスを通しておいてください、下に参考画像を置いておきます、vscodeなら作成したディレクトリでエディタを開き直せば勝手にパスを通してくれているはず。

②：プロジェクトを作成する

vue create hellow-vuecliと入力してプロジェクトを作成します（「hellow-vuecli」の部分は任意の名前に置き換えてOKです）、その後対話形式で設定をしていくわけですが、よく分からないと思うので全てEnterでOKです。

最後まで設定するとプロジェクト（ここでは「hellow-vuecli」）の中に、Vue.jsでWEBアプリを作成する際に必要なテンプレートがセットされていると思います、自分で用意するのは大変なのでこれは楽😂

③：ローカルサーバーを立ち上げて確認してみよう

作成したプロジェクト（ここでは「hellow-vuecli」）にパスを通して（cd hellow-vuecli）、npm run serveでローカルサーバーを立ち上げます。

http://localhost:8080/にアクセスして上のような画面が表示されれば成功です、コマンドで「Ctrl+C」とすれば閉じることができます。

以上で「Vue CLI」を使ったWEBアプリの土台作成は完了です、お疲れさまでした、、、と言いたいところですがここからが本番です、各ファイルをいじってどういう構成になっているのかちょっとずつ把握していきましょう（ここは自分でやろう）😁

機能単位で何か作ってみる【サンプル紹介】

さっきの続きです、、、「Vue CLI」でプロジェクトを作れるようになったら、実際にファイルをいじってみましょうと丸投げしたわけですが、ちょっと不親切かなと思ったので方向性だけアドバイスしたいと思います（何様だよ😂）

結論から言うと、機能ごとに色々作っていきましょう。

具体的に言うと、自分が作ってみたいWEBアプリの要件を細分化して、実装するために必要な機能をそれぞれプロジェクト単位で作成していく、最後に一つのプロジェクトにガッチャンコ（組合わせ）するとWEBアプリが完成するイメージです。

自己流なので効率的かどうかは分かりませんが、私は他言語を学ぶ時も同じやり方で覚えてきたので方法としてはありなのかなと思っています、ちょいとサンプルを作ってみましたので紹介しておきます。

タブ切り替え機能

Vue.jsでタブ切り替え機能を実装してみました、やっている事は左にあるvueファイルを見てもらえれば分かると思います、ヘッダーとフッターとナビは共通パーツとしてコンポーネントにして設置、クリックしたタブによってapp01～app03.vueを切り替えているわけです。

しっかりスタイルすればそれっぽく見えると思います（手抜きでゴメン😂）、APIやRSSを利用して記事を引っ張ってくればスマートニュース風のWEBアプリなんかも作れると思います。

入れておくと便利なモジュール・その他

Scss（Sass）を使えるようにする

コマンドからnpm install sass-loader node-sass --save-devと入力すればスタイルでScss（Sass）が使えるようになります、無駄なコードが減りVueファイルの可読性も高くなるので是非入れておきましょう。

スタイルを初期化する（ResetCSSの適用）

ResetCSSを使ってスタイルを最適化させたい時は、プロジェクトディレクトリにパスを通したあと、npm install -D normalize.cssで「normalize.css」をインストールします。

後はこれをApp.vueの<script>内で下記のように読み込むだけです。

import 'normalize.css'

UIフレームワークを使って学ぼう【上級】

Vue.jsに慣れてくるとコンポーネント構築が面倒になってきまして、何かUIで使えるフレームワークないのかなと探してみたところ、「欲しいな」と思ったものは大体用意されているのがこの世界、「Vuetify」とやらを発見しました。

「Vuetify」にはマテリアルデザインのコンポーネントがたくさん用意されており、簡単にWEBアプリのUIを構築できるみたいです、他にもWEB制作で馴染みあるBootstrapベースの「Bootstrap + Vue」、モバイル特化型の「Onsen UI for Vue」などUIフレームワークは色々ありましたが、今回は「Vuetify」を使ってみたいと思います。

※「Vuetify」の導入方法については割愛、私は下の記事を参考にしました。

「Vuetify」で何か作ってみる【サンプル】

早速「Vuetify」を使って何か作ってみました、やりたいことや欲しい機能はその都度ググれば結構でてきます、ドキュメントにあるコンポーネントをコピペすればすぐに使えるので楽でしたね。

Vue.jsの勉強に役立つサイトまとめ

Vue.jsの勉強に役立ちそうなサイトや記事をまとめておきます、中にはサンプルコードを公開しWEBアプリの作り方までしっかり解説しているものもあるので、かなり参考になると思います。

• Vue.js日本語版ドキュメント
  先ほども紹介しましたが一応置いておきます、Vue.jsのドキュメントは本当に優秀というか分かりやすくていいですよね、初心者はまずここから。
• 第一回 Vue.jsでWebアプリをつくろう！
  Vue.jsによるWEBアプリ開発を時計アプリを作りながら学べます、環境構築から具体的に解説されているので初心者の方でも挫折することなく進められると思います。
• 第二回 Vue.jsでWebアプリをつくろう！
  先に紹介した記事の第二回で、WEBアプリ開発を深堀りした形で非同期処理やローディング実装に着目した部分を学べます、個人的には第三回もやってほしいと思えるくらいしっかり解説されています。

終わりに

この記事の内容は随時更新していく予定です、学習して後からまとめて記事に追記という形をとりますので不定期更新になるかと思います、その点よろしくお願いします。

最近はPythonやSwiftを中心に独学を進めていましたが、「たまにはJavascriptも！」といざ触ってみると楽しいもので、実務で多用するjQueryは使い回しばっかでつまらなかった分Vue.jsが魅力的に感じるのかも。笑

おかげでSwiftがほったらかしなんだよなぁ、、、すいません。

余談：WEBエンジニアとしての自分

WEBエンジニアとして働いている私ですが、Web制作会社の業務って同じレベルのものを量産していくのが基本で、プログラムは使い回しで調整しつつ組み込んでいくことが多いんですね。

新しく何かを作る時も部分的かつ小さいレベルで行われるので、、、ってすいません何が言いたいかっていうとエンジニアとして生きていくならWeb制作会社じゃ厳しいというか狭い！ってこと。

Vue.jsを学べるオススメの参考書