JavaScriptがやっとできるようになって、これからVue.jsをはじめたい人のための説明記事。

あらすじ

筆者が初心者向けにメンター活動をしている中で、
Vue.jsをはじめるまえに、学習しやすいようにと前置きの説明をガッツリする機会があったので、
どうせならこれからはじめる人にも参考になればいいな、という思いで、
そのときに説明した話を記事にまとめました。

想定している読者は、
HTML/CSS/JavaScriptを使って、TODOリストなどのシンプルなWEBアプリの制作ができるレベルの方を想定しています。
（バニラJavaScriptではなくjQueryを使っていたとしても、WEBアプリの制作ができるレベルであれば、この記事の内容は理解できると思います。）

まず、Vue.jsとは

Vue.jsは、SPA（シングルページアプリ）を作るためのフレームワークです。
（「SPA」と「フレームワーク」については、後で説明します。）
SPAを作るためのフレームワークはVueだけではなく、
ReactやAngularというのも有名です。

どれもSPAを作るという目的は同じなので、どれを使うのが正解という答えは無く、
好みや、現場で使われてる技術に合わせて使うしかないって感じです。

いちおうざっくりとした印象で言えば、下記のようなイメージがあります。

とっつきやすさ: 1位 Vue　/　2位 React　/　3位 Angular
作り込みやすさ: 1位 Angular　/　2位 React　/　3位 Vue
※ 個人の感想です。

SPAってなんやねん

SPAとは、「シングルページアプリ」の省略で、JavaScriptでページを書き換えていくことで動作するアプリのことです。
それまで主流だったサーバーサイド言語のプログラムは、JavaScriptとは違って、ページを移動するときにしか動作させることができません。
（ボタンをクリックした時に画面の表示内容を変更するとか、クリックされたボタンを光らせるとかは、サーバーサイド言語では出来ません。）
それに対して、JavaScriptでメインの機能をつくる場合、ページの移動をしないで動作するアプリになるので
ページが１つだけのアプリ ＝ シングルページアプリ ということになります。

なので、JavaScriptやjQueryで作ってあったとしても、
リンクやフォームを使うようなページの移動をせずに HTML要素の削除や表示、書き換えなどを行うことで画面の表示内容を変更するような作品であれば、広い意味で言えばSPAと言えます。
（あくまで 広い意味で言えば という話です。実際はVueやReactで作ったもののことだけを指してSPAと言う人が多いと思います。）

SPAフレームワークの特徴として「データバインディング」や「コンポーネント化」という機能があります。

データバインディング
jQueryや素のJavaScriptの場合ですと
変数の値をHTMLに表示する場合や、変数の値を参考にしてHTMLに表示する内容を決める場合、
変数の中身が変わったら、いちいちHTMLを書き換えて表示内容を更新してあげる必要がありました。
しかし、SPAフレームワークを使うと、
元となる変数を更新すると、HTMLのほうの内容を勝手に書き換えてくれるような仕組みを作ることができます。
（もちろん、どの変数を元にどの部分を書き換える、というような紐付けは自力で実装する必要がありますが。）
この機能のことを、データバインディングと呼びます。

コンポーネント化
HTMLファイルやCSSファイルは、
一部分だけを切り取って別ファイルに分けておくことができませんでした。
たとえば、サイドメニューとメイン画面があるサイトを作るときに、サイドメニューだけ別ファイルに分けておくような事ができませんでした。
（サーバーサイドのプログラミングを利用すれば、昔から出来ましたが。）

しかし、近年ではHTMLやCSS、JavaScriptに書き込む内容がすごく複雑になってきました。
たとえば、サイドメニューに単純に文字リンクを表示するだけではなく、
文字リンクの横にイメージがわかりやすくなるようなアイコン画像を表示するとか、
現在の表示中のページにだけ、表示中であることをわかりやすくするアイコンを表示するなど。
求められる要素がどんどん増えていって、
書き込まなきゃいけないHTMLやCSSやJavaScriptの内容がどんどん細かく複雑になっています。

個人の練習作品ならともかく、
チームで継続的に修正や機能の追加などをしていく必要があるWEBアプリでは、
これらの内容を全て１つのファイルにまとめておくのはとても大変になりました。
（それに、そのような複雑なパーツを何個も表示させたい場合に、コピーして書き増ししなければいけないのも面倒でした。）

そのため、そんなプロジェクトでも作業がしやすいように、
HTML、CSS、JavaScriptのソースコードを細かく分けておけるような仕組みができあがりました。
その細かく分けた「コンポーネント」を、表示させたいページで読み込むことで、表示させることができるようになりました。

また、別のファイルに分けたものを読み込んで表示させるということは、
同じものを何個も表示させたい場合、そのコンポーネントを繰り返し読み込むだけで良い、という事でもあります。
つまり、同じコードを何個も並べて書かなくていい！というのも、嬉しいポイントです。

この機能のことを、コンポーネント化と呼びます。

仮想DOM
ついでに、SPAフレームワークの特徴を調べるとよく出てくる「仮想DOM」という単語についても軽く触れておきます。
これは、JavaScriptやjQueryの関数でHTMLの内容を直接書き換えるよりも、
「仮想DOM」という仕組みをつかっているSPAフレームワークでHTMLの書き換えを行うほうが、処理速度が早かったり、PCの負担が少なくて済むという話です。
初心者が気にしても仕方のない事なので、詳しくは説明しません。

フレームワーク

ちなみに、フレームワークという概念についても説明しておきます。
フレームワークというのは、ライブラリと似たような感じで、プログラミングの機能を使いやすくまとめてくれたものになります。

ライブラリの場合、ソースコード（.jsファイル）を読み込んで、そこで定義されている関数や変数を使うだけですが
フレームワークは、ソースコードの書き方まで変わってきたり、フォルダのわけ方なども指定されるような仕組みになります。
（つまり「このように書くこと」「このようにフォルダ分けすること」など、プログラミング言語のルールやソースコードよりも外の枠組み（＝フレーム）の働きかた（＝ワーク）まで指定される仕組み、ということで、「フレームワーク」と呼ばれています）

たとえば
Vueのコードでいうと、通常のHTMLでは class や href や src などの属性を書く場所があります。

<a class="link" href="http://example.com">リンク</a>

ここに v-if や v-bind のような、通常のHTMLでは使えないような属性を埋め込むことができるようになります。

<a v-if="ooo" v-bind="xxx" class="link" href="http://example.com">リンク</a>

余談ですが、このようなVueオリジナルの属性は「ディレクティブ」と呼ばれます。
v-if は、JavaScriptのif文のように、trueならこのHTMLを表示する、falseなら表示しないという機能で、
v-bind は、どの変数に対してデータバインディングをするかを指定するための機能です。
ですが、今は覚えなくて大丈夫です。
「HTMLには無かった機能が、Vueを使うことで追加されるんだなぁ〜」という認識で大丈夫です。

Vue独自の作り方で作られたコードは、
コンパイルやビルドを実行することで、やっとHTML/CSS/JavaScriptとして実行できる形に直されます。
コンパイル: Vue独自の書き方で書かれたソースコードを、HTML/CSS/JavaScriptで使える書き方に変換すること。
ビルド: Vue独自のフォルダ構成で配置されているファイルたちを、HTML/CSS/JavaScriptで実際に読み込みができる配置にまとめあげること。
（※フォルダ構成とは、○○というフォルダの中に✗✗、△△、□□というフォルダを作りましょう、✗✗のフォルダには○✗○✗のためのファイルを保存しましょう…みたいな感じです。）
（この「コンパイル」や「ビルド」の機能を使うために、コマンドラインの操作が必要になってきます）

余談。 SPAフレームワークがすごいのか？

SPAフレームワークはとてもありがたい機能ですが、
フロントエンドで色々できるようになったのは、
SPAフレームワークの進歩というより、JavaScript自体の進歩です。

昔のJavaScriptは、jQueryを使わないとどうしようもないくらい、
できることが少なかったり、ブラウザごとに動き方が全然違ったりしていたそうです。

それがJavaScriptのたゆまぬ進歩により改善されていったことで、
このようなことが実現可能になり、
SPAフレームワークはそれを使いやすくしただけ、という感じです。

コマンドラインの操作

さて、さきほど軽く触れた通り、Vueの機能をフルで扱うためには、
コマンドラインの操作を習得する必要があります。
Vueをやる上でっていうのは、いったん忘れて、まずはコマンドラインを操作する方法をひととおり理解しましょう。

まだ、コマンドライン操作を習得していない場合は、下記の記事を参考に、学んでください。
JavaScriptがやっとできるようになって、これからLinuxコマンドをはじめたい人のための説明記事。
※コマンドラインの解説記事は作成中です。

これ以降の章は、コマンドラインの操作ができる前提で説明していきます。

npm

Vueを使う上で使いたい機能をまとめて導入してくれる「Vue-CLI」や「Vite」というシステムがあります。
（使いたい機能とは、コードをコンパイルをする機能だったり、作品をプレビューする機能だったり、色々です。）

これをインストールするために、
コマンドラインで「npm」というパッケージ管理システムをインストールする必要があります。

もし、ご自身のPCにnpmをインストールした記憶がなければ、
npmをインストールする方法を検索して、インストールしてください。

パッケージ管理システムとは何なのかを軽く説明しますと、
まず「パッケージ」というのは、Vue-CLIのようなシステムのことです。
それをインストールしたり、アンインストールしたり、違うバージョンをインストールしなおしたり、という「管理」が
コマンドで気軽にできるようにしてくれているのが「パッケージ管理」のシステムになります。

ざっくり理解するなら、MacやiPhoneで言うAppStoreみたいなものだと思ってください。

Vueを学びはじめよう！

Vueを学ぶなら、せっかく公式ドキュメントの日本語版があるので、
まずはそちらを読んでみましょう。

まずは「基本的な使い方」の章まで読み進めて、終わったら、練習作品にとりかかるのが良いと思います。
「基本的な使い方」の後の章は、必要になったときに少しずつ読むような感じで大丈夫です。

練習作品ってどんなものを作ればいいの？と思う場合、
もし、以前にJavaScriptやjQueryで作ってたSPAがあるなら、
それと同じものをVueで再現してみるのがオススメです。
もし無いなら、TODOリストや掲示板など、基本的なCRUDの機能を含む、
あまり余計な機能をつけないシンプルなアプリを作ってみるといいと思います。

ドキュメントを読む自信がない人へ

Vueの作者は中国人です。
中国語または英語の文章をもとに日本語の文章がつくられてるので、
わかりづらい部分は沢山あると思います。

ですが、今後ドキュメントを読めるエンジニアになる（＝自分でいろいろ出来る力を身につける）ためには、
「わからない部分をスルーしない」というのも大事なことなので、
いままで難しい資料を読むことを避けてきた人たちも、これを機に練習していきましょう。

わからなければ、わかりやすいサイトをググるか、
質問できる相手を見つけるなりして、解決しながら進めるというのを意識しましょう。
（ドキュメントの中には「今は気にせず読み進めてOK。」という部分もあると思いますが。）

また、未来の自分のために、
解決できた部分は、自分なりに分かりやすい言葉に言い換えて、しっかりメモしておくことが大事です。

「インストール」の章について

「はじめに」の章にある「インストール」の説明ボタンを押すと、色々なインストール方法が説明されています。
この章、Vueのシステムをインストールする方法がいくつも解説されているのに加えて、
Vue DevToolsという、Vueのインストールとは直接関係のないツールの話や、
「バンドラ」「サーバーサイドレンダリング」「ランタイム」などの、
最初に言われてもわからないような話まで、まとめて説明されています。

かなりごちゃごちゃしてて分かりづらいのですが、とりあえず必要なのは

• Vue DevTools
• Vue-CLI または Vite のどちらか１つ

だけです。

ただし、Vue公式ドキュメントでは、Vue-CLIを初心者が使うことは推奨しないと書かれています。
Vueの場合、コンパイルする必要がないような機能（データバインディングなど）であれば、
jQueryのようにscriptタグで読み込む方法で使うことができます。
（この方法は「CDN」と言います）

しかし、現場では全ての機能を使いたいので、そのような使い方はほとんどしません。
もしあなたが「Vueの一部の機能だけを先に練習したい」と思っている場合は、
公式ドキュメントに従って、Vue-CLIやViteを使わない方法で練習するのもアリだと思います。

Vue-CLI と Vite について。

さて、先程から Vue-CLI と Vite どちらでもいいという話をしてますが、
そろそろ「じゃあどっち選べばええねん！」とプンスカしている人も増えてきたと思うので、説明します。

まず、この２つは、どちらもVueの開発に必要なシステムをまとめて実行できるようにしてくれるパッケージです。

主な機能

• プロジェクト用のフォルダの作成（Vueが指定しているフォルダ構成で作成してくれます。）
• プロジェクトのプレビュー（Vueで作ったアプリを、Webブラウザで表示してくれる機能）
• ホットリロード（ファイルを保存すると自動でコンパイルしつつ、プレビューしてあるページに変更を反映してくれる機能）
• 実際に本番にあげるときの本番用のコンパイル＆ビルド（本番用は少し時間がかかるため、ホットリロードのように保存するたびに実行してたらキリがないので、手動でコマンドをたたく必要があります）

Vue-CLI と Vite も、導入する目的は同じです。
どちらを選んでもメリット・デメリットがあるので、どちらを使いたいかは各自で選んでください。

Vue-CLI
昔から使われてきた方法です。こちらを使ったノウハウが溜まってる会社のほうが多いと思います。
昔からあるので、ネットで検索したときの情報量が Vite に比べて、多いです。
人に聞くときも、だいたいこちらを使った経験がある人が多いので、回答をもらいやすいと思います。
ただし公式ドキュメントに日本語版がありません。
Vite
Vueの最新のバージョン（３系）で新しく登場した方法です。
Vue-CLIよりも動作が早いですし、
わざわざ新しく作られた仕組みなので、Vue-CLIよりも簡単に操作できるようにもなってるんじゃないでしょうか？
使ったことがない人が多いと思うので、質問に答えてもらうのは少し大変かもしれません。
公式ドキュメントに日本語版があります。

練習作品の土台（プロジェクト用のフォルダ）を作ってみよう

Vue-CLI と Vite どちらを使うか選びましたら、
npmを使ってインストールしちゃってください。

Vue-CLIについては公式ドキュメントが英語なので、
「vue cli プロジェクト作成」などで、ググってわかりやすい資料を見つけるといいと思います。
たとえばこことか。
（Viteは公式ドキュメントに日本語がありますが、わかりづらかったら、同じようにググってみても良いと思います。）

まずは下記の作業をやってみましょう。

1. プロジェクト用のフォルダの作成
2. プロジェクトのプレビュー（１のプロジェクト作成の時点で、テスト表示用のページが最初から作られているので、それを表示できればOK）
3. ホットリロード（ファイルを保存すると自動でコンパイルしつつ、プレビューしてあるページに変更を反映してくれる機能）

これができたら、ここから先は、Vueの公式ドキュメントを読み進めて、
実際にソースコードを書き換えたり作ったりして、説明されていることを試しながら学んでいくと良いと思います。

おわり

はじめてのフレームワークですから、最初は誰もが頭を抱えるかと思います。
やさしく相談にのってくれる先輩が身近にいると、支えになるかと思います。

がんばってください！