Vue.jsを使ってみよう〜Hello Worldを表示編〜


Vue.jsを使ってみよう〜Hello Worldを表示編〜

「人気のVue.jsを使ってみたいけど環境構築が難しそう」
「Vueを使って何ができるのかいまいち分からない」

プログラミングを学んでいる方の中でこのように感じている方もいるのではないでしょうか。そこで今回は環境構築をおこない、実際にコードを書きながらVueの使い方を学んでいきたいと思います。

Vueはリンクを貼り付けるだけで使えたり、シンプルな構文なのでプログラミング初心者におすすめのフレームワークです。図を交えて分かりやすく解説するので、ぜひ本記事を参考にしてくださいね。

目次
  1. Vue.jsとは
  2. Vue.jsを使うメリット
  3. メリット① 初心者でも簡単に始められる
  4. メリット② SPAを実装できる
  5. Vue.jsの開発環境を準備しよう
  6. 必要なフォルダを作成しよう
  7. Vue Devtoolsを導入しよう
  8. HTMLファイルを編集しよう
  9. Javascriptファイルを編集しよう
  10. Vueインスタンスを作成しよう
  11. elプロパティを作成しよう
  12. dataプロパティを作成しよう
  13. ブラウザで文字を表示させよう
  14. Devtoolsで値を確認しよう
  15. まとめ

Vue.jsとは

まずはVue.jsについて簡単に解説していきます。Vue.jsとはフロントエンド言語であるJavascriptのフレームワークです。

image

フロントエンド言語は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)を使用します。

image

もしVscodeのインストールがまだの方は公式サイトからインストールしてください。Vscodeでフォルダを開けたら、index.htmlとscript.jsフォルダを作成します。

image

作成できたら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ページを表示できます。

image

もし上記方法でできない場合は、index.htmlファイルをダブルクリックすることで同じように表示できます。

image

動作確認ができたら下記コードは今後不要になるので削除しておいてください。 <h1>Hello!!</h1>

Vue Devtoolsを導入しよう

次にVue Devtools(以下Devtools)を導入していきます。DevtoolsはVueで開発する際に非常に便利なツールで、デバッグ(エラーを修正すること)や動作確認できます。

以下の手順にしたがってDevtoolsの導入を進めていきましょう。普段Google Chromeを使っていない方はまずダウンロードしておいてくださいね。

Google Chromeのウェブストアを開き、検索窓に「vue dev tools」と入力 image

②「Chromeに追加」をクリック image

③ポップアップの「拡張機能を追加」をクリック image

image

④Chromeを開き、設定をクリック image

⑤サイドバー の拡張機能をクリック image

⑥詳細をクリック image

⑦「ファイルのURLへのアクセスを許可する」を有効にする image

これでDevtoolsの導入は完了です。

HTMLファイルを編集しよう

今回はCDN(コンテンツデリバリーネットワーク)を利用してVus.jsのファイルを読み込みます。CDNはHTMLファイルにリンクを貼り付けることで、簡単にフレームワークを始められるので非常に便利な方法です。

index.htmlファイルを開き、タグの直前に下記コードを貼り付けます。このコードによりVue.jsを使用可能になります。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsの公式ページに同じコードが掲載されているので、今後CDNを利用する際はこちらを確認してくださいね。

次にJavascriptファイルを読み込むために下記コードをCDNのコードの下に貼り付けてください。これにより事前に作成していたscript.jsファイルを読み込めます。

<script src="script.js"></script>

ここまででVue.jsを読み込む準備ができました。

Javascriptファイルを編集しよう

この章から実際にVue.jsのコードを書いていきたいと思います。Vue.js特有の用語が出てきますので、コードを書きながら覚えていきましょう。

Vueインスタンスを作成しよう

Vue.jsを使用するには「Vueインスタンス」を作る必要があります。インスタンスとはクラス(設計図)を基に作られたものです。

クラスとインスタンスの関係は下図のように表せます。クラスという設計図には名前や色などの項目がありますが、情報は空の状態です。

image

車として実体化させるために名前:Aや色:青色など情報を与えます。これで出来上がったものがインスタンスです。

VueクラスからVueインスタンスを作成するには下記コードをscript.jsに貼り付けます。new Vueの部分がインスタンスを生成する命令です。

new Vue({

})

{}の中にプロパティ(キー)値(バリュー)のセットを挿入して使います。先程の車の例で言うと、プロパティが「名前」や「色」であり値は「A」や「青色」の部分です。

elプロパティを作成しよう

Vueインスタンスを作成しただけでは、htmlファイルと連携させることはできません。htmlのどの部分に対して変更を加えるのか指定するために、script.jsで下記のようなコードにしてください。

new Vue({
    el:'#app'
})

el:’#app’の部分は事前に作成しておいたindex.htmlの「

」に対して変更すると言う意味になります。この表記がないとVueはどの部分が対象なのか分からないため、script.jsの内容が正しく反映されません。

dataプロパティを作成しよう

次にインスタンスの中にdataプロパティを追加してみましょう。dataプロパティはVue.jsで扱うデータを保管しておく場所です。

dataの中にある情報を引き出してHTMLに反映させることができます。では、script.jsのコードを下記のように変更してみましょう。

new Vue({
    el:'#app',
    data(){
        return{
            text:"hello world!"
        };
    }
})

dataプロパティを記述する場合は必ずreturnも忘れないようにしてください。ここまででJavascriptの準備は完了です。

ブラウザで文字を表示させよう

いよいよVue.jsの内容をHTMLに反映させていきます。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>
    <div id="app">
        <p>{{text}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="script.js"></script>
</body>
</html>

{{text}}の部分は、先程script.jsで作成したdataプロパティの値を持ってきています。ちなみに{{}}はMustache構文と呼ばれ、HTMLのテキスト部分にデータを反映させるために使用します。

image

index.htmlをブラウザで開いてください。下画像のように「hello world!」が表示されていればOKです。

image

Devtoolsで値を確認しよう

最後にDevtoolsで値を確認していきます。下記手順でDevtoolsを開いてください。

①ブラウザで右クリックして、「検証」を選択 image

②下図の矢印をクリックして、「Vue」を選択
image

image

Devtoolsを開けたら、「Root」部分をクリックしてみましょう。そうするとdataに保存した内容が返ってきます。

image

また「text:"hello world!"」をダブルクリックすることで、好きな値に変更することができます。試しに「text:"hello codecamp!"」と変えてください。

image

そうするとブラウザの表示も変わることを確認できます。

image

このようにどのような値が返ってきているのか確認できるので、エラーが起きた場合などにDevtoolsは使えます。今後Vue.jsを使う際は頻繁にDevtoolsを確認すると良いでしょう。

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

ここまでVue.jsの開発環境構築やVueの構文について学んできました。CDNを使うことで簡単に使えるなど、Vueは初心者の方におすすめのフレームワークです。

ぜひ皆さんもコードを書き換えて、使い方に慣れていきましょう!


関連記事

ヤマモト
この記事を書いた人
ヤマモト
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp