- 公開日: 2020年10月19日
Vue.jsを使ってみよう〜Hello Worldを表示編〜
「人気のVue.jsを使ってみたいけど環境構築が難しそう」
「Vueを使って何ができるのかいまいち分からない」
プログラミングを学んでいる方の中でこのように感じている方もいるのではないでしょうか。そこで今回は環境構築をおこない、実際にコードを書きながらVueの使い方を学んでいきたいと思います。
Vueはリンクを貼り付けるだけで使えたり、シンプルな構文なのでプログラミング初心者におすすめのフレームワークです。図を交えて分かりやすく解説するので、ぜひ本記事を参考にしてくださいね。
Vue.jsとは
まずはVue.jsについて簡単に解説していきます。Vue.jsとはフロントエンド言語であるJavascriptのフレームワークです。
フロントエンド言語はWebページやWebアプリケーションに動きをつけるものを指します。Webアプリケーションではユーザーがストレスなく快適に使用できることが求められるため、フロントエンド言語の需要が高まっています。
Vue.jsを使うメリット
この章ではVue.jsのメリットについて解説していきます。
メリット① 初心者でも簡単に始められる
1つ目のメリットはプログラミング初心者でも簡単に始められる点です。Vue.js以外にも『React（リアクト）』や『Angular（アンギュラー）』などJavascrptのフレームワークは存在しますが、学習コストが高いとされています。
理由としてはWebpack（ウェブパック）などのJavascriptファイルを管理するツールに関する知識が必要となるためです。しかしVue.jsは後述するCDNをHTMLで読み込むだけで動作します。
またシンプルで分かりやすい文法を取り入れているため、他のフレームワークに比べて短期間で習得が可能なのも魅力です。
メリット② SPAを実装できる
2つ目のメリットはSPA（シングルページアプリケーション）を実装できる点です。SPAとは1つのページで複数の機能や表示を実現する仕組みを指します。
これまでのWebアプリケーションやWebページでは、コンテンツを切り替える際にサーバーがその都度HTML（ページ構成する骨組み）を返していました。このような仕組みをMPA（マルチページアプリケーション）と呼んでいます。
MPAではHTMLのやり取りが頻繁に起きるので、読み込みに時間がかかりコンテンツを切り替える際に画面が一瞬真っ白になることがあります。コンテンツ遷移にかかる時間が長いとユーザーはストレスを感じ、Webページから離脱してしまうのです。
一方でSPAはコンテンツを切り替える場合、サーバーは変更があったデータのみ返します。そのためデータの読み込みを高速化した、ユーザーが使いやすいアプリケーションを開発できます。
SPAを取り入れたアプリケーションとして有名なのが「Google Map」です。地図を動かしても画面が真っ白になることなくスムーズに使えるので、多くのユーザーから支持されています。
Vue.jsの開発環境を準備しよう
それでは実際にVue.jsを使うための開発環境を準備していきます。開発環境構築と聞くと難しく感じる方もいるかもしれないので、図を交えて分かりやすく解説していきますね。
必要なフォルダを作成しよう
まずは「Vuedemo」という名前のフォルダを作成してください。作成する場所はPCのデスクトップなど好きな場所で構いません。
次にエディタで作成したフォルダを開いてみましょう。今回はVisual Studio Code（以下VScode）を使用します。
もしVscodeのインストールがまだの方は公式サイトからインストールしてください。Vscodeでフォルダを開けたら、index.htmlとscript.jsフォルダを作成します。
作成できたらindex.htmlファイルを開き、下記コードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuedemo</title>
</head>
<body>
<h1>Hello!!</h1>
<div id="app"></div>
</body>
</html>
vscodeのindex.htmlファイルをブラウザにドラッグ&ドロップすると、「Hello!!」と書かれたWebページを表示できます。
もし上記方法でできない場合は、index.htmlファイルをダブルクリックすることで同じように表示できます。
動作確認ができたら下記コードは今後不要になるので削除しておいてください。
<h1>Hello!!</h1>
Vue Devtoolsを導入しよう
次にVue Devtools（以下Devtools）を導入していきます。DevtoolsはVueで開発する際に非常に便利なツールで、デバッグ（エラーを修正すること）や動作確認できます。
以下の手順にしたがってDevtoolsの導入を進めていきましょう。普段Google Chromeを使っていない方はまずダウンロードしておいてくださいね。
①Google Chromeのウェブストアを開き、検索窓に「vue dev tools」と入力
②「Chromeに追加」をクリック
③ポップアップの「拡張機能を追加」をクリック
④Chromeを開き、設定をクリック
⑤サイドバー の拡張機能をクリック
⑥詳細をクリック
⑦「ファイルのURLへのアクセスを許可する」を有効にする
これでDevtoolsの導入は完了です。
HTMLファイルを編集しよう
今回はCDN（コンテンツデリバリーネットワーク）を利用してVus.jsのファイルを読み込みます。CDNはHTMLファイルにリンクを貼り付けることで、簡単にフレームワークを始められるので非常に便利な方法です。
index.htmlファイルを開き、
