プログラミングの入門書やWebサイトには、初歩的なプログラムの例として「Hello world!」が使われることがとても多いです。
Hello world（ハロー・ワールド）は、画面に「Hello, world!」という文字列を表示するだけの簡単なプログラムの通称です。
多くのプログラミング言語において非常に単純なプログラムであり、プログラミング言語の入門としてプログラムを動かすためのプログラミング言語の基本文法の解説例として提示される時に使用されます。
そこで今回は、Vue.jsの入門の初歩のプログラムとして「Hello world!」を作成する方法について簡単に紹介しておきます。
既にVue.jsでアプリケーションを作成したことがある方にとっては、おそらくあまり有益な情報ではないと思いますが、これからVue.jsを始めようとされているプログラミング初心者の方にとっては、役に立つかもしれません。
目次
Vue.jsでプログラミングできるようにするための準備
Vue.jsでアプリケーションを開発（作成）する前に、開発環境を準備する方法を簡単に説明しておきます。
プログラミング用のコードエディター
まずプログラムを記述するためのテキストエディターが必要になります。
自分のお気に入りのエディターがある場合は、それを使っていただいて構いません。メモ帳でもなんでもテキストが編集できるものであれば問題ありません。
Vue.jsに限らずプログラミングに特化したエディターをお探しであれば、ここではVisual Studio Code（VSCode）をお勧めしておきます。ちなみに「Visual Studio Code」は「ヴィジュアルスタジオコード」と読みます。
Visual Studio Codeを利用するためには、PCへインストールする必要があります。難しい手順はありませんが、Visual Studio Codeはデフォルト（既定）でメニューなどが英語になっています。日本語でないと困る方は日本語化する必要があります。
本ブログでも、Visual Studio Codeのインストールと日本語化について、以下の記事にまとめてありますので参考にしてください。
コードエディター（テキストエディター）の準備ができたら、Vue.jsを利用できるようにします。
Vue.jsをCDNで参照する
Vue.jsを利用できるようにする方法にはいくつかありますが、最も簡単な方法はCDN（Content Delivery Network）を利用して、ライブラリ（Vue.js）をインポートする方法です。
CDN経由でVue.jsを利用する際は、HTMLのscriptタグ（スクリプト要素）でCDNの場所を指定します。
|
1 |
<script src="https://unpkg.com/vue@next"></script> |
Vue.jsはCDN以外にもPCにインストールして使用することができます。
Vue.jsのインストールについてお知りになりたい方は、以下の記事を参考にしてみてください。
Vue.jsのHello world!を表示するアプリケーションを作成するために、HTMLファイルを作成します。
コードを書く（Vue.jsで処理を記述する）
作成したファイルに必要最小限のHTMLを記述して、CDNでVue.jsを参照すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello world! With Vue.js!</title> <style> /* ここにスタイルを記述する */ </style> </head> <body> <!-- ここにページのコンテンツを記述する --> <script src="https://unpkg.com/vue@next"></script> <script> // ここにスクリプトコードを記述する </script> </body> </html> |
ここまで準備ができたら、後は「Hello world!」を表示する処理を記述するだけです。
Vue.jsでは、UIの要素（HTML）とコード（JavaScript）、必要に応じてスタイル（CSS）を書くだけでアプリケーションが作れます。
従来のHTMLと全く同じです。
以下に「Hello world!」を表示するアプリケーションのソースコードを示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello world! With Vue.js!</title> <style> .hello-world { color: #41b883; } </style> </head> <body> <div id="app"> <span class="hello-world">{{message}}</span> </div> <script src="https://unpkg.com/vue@next"></script> <script> Vue.createApp({ data: function() { return { message: 'Hello world!' } } }).mount('#app') </script> </body> </html> |
ここでは、CSSに「Hello world!」の文字色を設定するためのスタイルを記述しています。（5行目～9行目）
|
1 2 3 4 5 |
<style> .hello-world { color: #41b883; } </style> |
HTMLにユーザーインターフェース（画面）の要素を配置します。（12行目～14行目）
|
1 2 3 |
<div id="app"> <span class="hello-world">{{message}}</span> </div> |
spanタグ（要素）内の「{{message}}」は「Hello world!」を表示するための場所を示します。
Vue.jsでは「{{}}」で囲んだ部分にコードで設定データの値を表示することができます。（これをマスタッシュ記法やマスタッシュ構文と呼びます。）
このHTMLの部分ががテンプレートになります。
HTMLのテンプレートが記述できたら、あとはVue.jsのコード部分を記述します。（16行目～24行目）
|
1 2 3 4 5 6 7 8 9 |
<script> Vue.createApp({ data: function() { return { message: 'Hello world!' } } }).mount('#app') </script> |
Vue.jsではまずインスタンスというものを作成します。「Vue.createApp({～})」の部分がそれにあたります。
作成したインスタンスにHTMLの要素をマウント（紐づけること）して、HTMLのテンプレートとコードを結びつけます。
インスタンスの作成とマウントについて、詳細をお知りになりたい方は、以下の記事をご覧ください。
こうすることで「Hello world!」が表示できるようになります。
作成したHTMLをブラウザーで開くと以下のような画面が表示されます。
実行結果
ブラウザー（ここではGoogle Chrome）に「Hello world!」という文字が、設定スタイル（ここでは文字色を緑）が適用されて表示されることが確認できます。
本記事の内容は、Vue.jsでのプログラミングの初歩の初歩になりますが、Vue.jsでのプログラミングは、この「Hello world!」が基礎となります。
Vue.jsでのHTML（UI）、CSS（スタイル）、JavaScript（スクリプト）の使い方をしっかりマスターしておけば、これから先に複雑なアプリケーションを作成することになっても応用するだけで対応できます。
ですので、このHello world!アプリケーションは、何も見なくても作成できるぐらいになれるようにすることをお勧めします。
