Vue を実際に動かしてみる!

記事
IT・テクノロジー
これまでは、Vue の公式チュートリアルのページ上でコードを入力して動かしていましたが、実際に利用するにはこのままでは、Vue を利用する事ができません。今回は、公式チュートリアルの前半で学習したような、1ページで機能を実現するようなケースを考えてみます。


インターネットに公開する方法

Vue で開発したアプリをインターネットに公開する方法は幾つかあります。 今回は、一番簡単な方法として、「HTML ファイル」で公開する方法を紹介します。 HTML ファイルならば、通常の Web ページを公開するサービスを利用すればインターネットに公開する事が可能です。 ほとんどの場合は、PC で HTML ファイルを作成して、Web サイトをホスティングしているサーバーにコピー(アップロード)すれば公開できます。今回は、インターネットに公開する方法ではなく、HTML のファイルを作成する方法を紹介します。

HTML ファイルの基本

(*)「<!--」と「-->」の間は、HTMLの記述には関係ありません。この間にはメモのような事を書くことができます。プログラミングでは「コメント」と呼ばれます。
Vue の書き方にも、基本的な枠組みがあったように、HTML にも同じように基本的な枠組みがあります。

<!DOCTYPE html>
<html>
    <head>
        <!-- ヘッダー情報をここに書きます -->
    </head>
    <body>
        <!-- HTMLの本体をここに書きます -->
    </body>
</html>
基本的な枠組みは、上のようになっています。 「!DOCTYPE html」で HTML の記述であることを最初に書きます。 その後で、「html」のタグで囲まれる部分に、「head」と「body」のタグの部分を書くのが標準のスタイルです。「head」のタグの部分には、HTML のページのタイトルなどヘッダー情報を書きます。今回は、タイトルと「Vue の基本機能」を呼び出す「CDN(Contents Delivery Network」の記述を書く事にします。あとは、CSS を記述したファイルを呼び出したりもできます。 「body」の部分には、HTML の本文を書きます。

Vue の記述を追加する

では、この基本的な枠組みの中に、Vue の記述を埋め込みます。

<!DOCTYPE html>
<html>
  <head>
    <script src="h t t p s://unpkg.com/vue@3"></script>
    <title>HTMLファイルにVueの記述を書く</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            message: "Hello",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
まず、 HTML ファイルの中で Vue を使うための情報を、ヘッダー部分に書きます。 タイトルは、「title」のタグで囲みます。

<script src=" h t t p s://unpkg.com/vue@3"></script>

次に、Vue の部品の「template」のタグに書く HTML の部分に相当する部分を作ります。 通常の HTML ファイルの中で書く場合には、次のようにします。

<div id="app">
  <h1>{{ message }}</h1>
</div>
「div」のタグで、HTML のグループを作ります。そこに、「id="app"」と言う名前をつけます。 名前は、何でも構いませんが、Javascript の記述の方で同じ名前を使います。

<script>
      Vue.createApp({
        data() {
          return {
            message: "Hello",
          };
        },
      }).mount("#app");
    </script>
「.mount("#app")」で、Vue の HTML 記述のグループを指定します。 この書き方はこれまで、学習してきた Vue の Javascript の書き方とは、少し違いますが、基本は似ています。ここでは、「Vue.createApp({}).mount("#app);」の様に書きます。これは、これまで学習して来た「export default{}」の部分に相当します。

後は、これまで学習した事と同じです。変数として「message」を作成して、この変数を HTML の部分で表示しています。

後は、この記述を書いた、HTML ファイルを Web ブラウザで表示させると「Hello」が表示されるはずです。Web ブラウザで HTML ファイルを表示させる方法が分かりにくいかもしれませんが、HTML ファイルのアイコンを Web ブラウザ上にドロップすると表示できます。 (上手く説明できない所もあるので、知っている方に聞いてみてください。) ご質問頂いても結構です!

HTML のファイルで、Vue を使う方法のまとめ

では、今回の内容をまとめてみましたおきます。

1. HTML のファイルで、Vue を使う場合、HTML のヘッダ部分で CDN のリンクを指定する
2.「template」のタグの代わりに「div」のタグを使って、「id="xxx"」で名前をつける
3.「script」の中で、「export default {}」の代わりに、「Vue.createApp({}).mount("#xxx")」(「xxx」は、ステップ「2」でつけた名前)
4. 必要ならば、「style」のタグを追加して、CSS を書く。
と言う感じになります。 この方法だと、これまで学習した、「.vue」ファイルで作る、「Vue」の部品とは少し書き方が違います。違いをよく見て間違えないように書いてみてください。

できれば、実際に HTML のファイルを作成して、実際に Web ブラウザで表示させてみてください。

まとめ
今回は、「普通の HTML ファイル」の中で「Vue」を使う方法を紹介しました。 この方法だと、HTML ファイルを作成すれば、これを Web サイトをホスティングしているサーバーにコピーすればインターネットに公開できます。

ただし、この方法は、今まで学習した、Vue の部品とは書き方が少し違うので混乱しやすくなります。 次回は、これまで学習した、「.vue」ファイルを使って実際に Vue を使う方法を紹介します。 2022 年 3 月 17 日にお伝えする予定です。お楽しみに!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す