【Vue.js】プログラミング初心者がVue.jsで簡単なWebページを作成する

プログラミング初心者が、「Vue.js」を使って簡単なWebサイトを作成する方法について解説します。

HTMLとCSSについて基礎的な知識を持っていれば（Progateの初級レベル）簡単に開発出来ますので、是非ともチャレンジしてみて下さい。

完成品

この記事では、「Vue.js」を使用して、Cafeの商品案内ページを作る事を目指します。

「商品画像」と「商品説明」を表示させるだけのシンプルなページですが、ここからカート機能等を今後追加していきます。

1.プロジェクトの雛形を作成

1-１：Vue.jsの読み込み（CDN）

CDNを利用して、Vue.jsを読み込み、またローカル環境のJavascriptファイルも読み込みます。

HTMLファイルに、以下のスクリプトを記載すれば完了です。

  <!-- Vue.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="js/main.js"></script>

バージョンを指定するには、「vue@2.5.16」の箇所にバージョンを指定してあげればOKです。

公式サイト（CDNの項目を参照)

1-２：空のVueインスタンスを作成

Javascriptファイルに、空のVueインスタンスを作成し、変数「app」に代入します。

var app = new Vue({
})

1-３：空のルートテンプレート作成

html 側に以下を追記します。

<div id="app">
  <div class="product-image">
    <img src="" />
  </div>

  <div class="product-info">
  </div>
</div>

javascript側に、以下を追記します。elはelementの略で、idのセレクトにはシャープ「♯」を使うことを思い出して下さい。

var app = new Vue({
  el: '#app',
})

2.dataオプションの設定

2-1：dataオプションにプロパティを作成

javascript側に、dataオプションを設定します。

var app = new Vue({
  el: '#app',
  data: {
    product: 'Hot Coffee',
    description: 'Our signature medium-roasted with a smooth, balanced and rich flavor, this is the perfect everyday coffee in a cup.'
  } 
})

dataオプションに「product」と「description」というプロパティを追加している事に注目してください。　

2-3：プロパティの内容を表示

「Mustache構文{{ データオプションのプロパティ名 }}」を追記する事で、dataオプションのプロパティの内容を表示出来ます。

中括弧 {{ }} がヒゲの様に見える事から、Mustache構文と言われています。

<div class="nav-bar"></div>

<div id="app">
  <div class="product-image">
    <img src="" />
  </div>

  <div class="product-info">
    <h1>{{ product }}</h1>
    <p>{{ description }}</p>
  </div>
</div>

<div id=’app’>タグの中に、商品画像を示す「product-image」と商品情報を示す「product-info」を配置し、dataプロパティの内容を渡しています。

また、 <div class=”nav-bar”></div>でナビゲーションバーを導入しています。

2-4：css要素を整える

まずは、HTML側にcssのスタイルシートへのリンクを記述します。

<head>
  <link rel="stylesheet" href="css/main.css">
</head>

次に、それぞれの要素について、cssを書いていきます。

body {
  font-family: tahoma;
  color: #282828;
  margin: 0px;
}

.nav-bar {
  background: linear-gradient(-90deg, #84CF6A, #16C0B0);
  height: 60px;
  margin-bottom: 15px;
}

.product {
  display: flex;
}

img {
  border: 1px solid #d8d8d8;
  width: 70%;
  margin: 40px;
  box-shadow: 0px .5px 1px #d8d8d8;
}

.product-image {
  flex-basis: 700px;
}

.product-info {
  margin-top: 10px;
  flex-basis: 500px;
}

2-5：結果の確認

「index.html」を開いて、途中結果を確認します。

cssが正しくリンクされていないとナビゲーションバーが、Javascriptが正しくリンクされていないと、商品説明が正しく表示されないので、見直しましょう。

3.商品画像の表示

3-1：商品画像を準備

Unsplash等のサイトから、商品画像を取得します。

3-2：img要素を表示させる

商品画像データをリンクさせます。まずは、htmlファイルの「product-image」の箇所をアップデートします。

  <div class="product-image">
    <img v-bind:src="image">
  </div

ポイントは、「v-bind」を使用して、imageというデータに結びつけている所です。

3-3：dataオプションにimageを追加

Javascriptファイルを編集します。

var app = new Vue({
  el: '#app',
  data: {
    product: 'Hot Coffee',
    description: 'Our signature medium-roasted with a smooth, balanced and rich flavor, this is the perfect everyday coffee in a cup.',
    image: './assets/hot-coffee.jpg',
  }
})

「assets」フォルダーの中に「hot-coffee.jpg」という名前でファイルを保存したので、画像にリンクさせます。

4. 結果

最終的に、以下の結果になっていればOKです。

ここから、カートの機能等を実装していきます。

「Vue」学習の超オススメ講座

Vue入門決定版（Udemy）は、Vue開発の基礎から、一歩一歩ステップを踏み、とても丁寧に解説されているとても優良な講座です。

講座では、「ToDo管理アプリ」や、「Bitcoinの価格表示アプリ」を作ることが出来ます。

ランディングページ作成で10万円等、フロントエンド関連で稼げる美味しい案件は沢山あるため、「手っ取り早くプログラミングで稼げる様になりたい！」という人には、オススメです。

早速受講してみる

コード（最終）

index.html

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Cafe</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<div class="nav-bar"></div>

<div id="app">
  <div class="product">
    <div class="product-image">
      <img v-bind:src="image">
    </div>

    <div class="product-info">
      <h2>{{ product }}</h2>
      <p>{{ description }}</p>
    </div>
  </div>
</div>

<!-- Vue.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="js/main.js"></script>

main.css

body {
  font-family: tahoma;
  color: #282828;
  margin: 0px;
}

.nav-bar {
  background: linear-gradient(-90deg, #84CF6A, #16C0B0);
  height: 60px;
  margin-bottom: 15px;
}

.product {
  display: flex;
}

img {
  border: 1px solid #d8d8d8;
  width: 70%;
  margin: 40px;
  box-shadow: 0px .5px 1px #d8d8d8;
}

.product-image {
  flex-basis: 700px;
}

.product-info {
  margin-top: 10px;
  flex-basis: 500px;
}

main.js

var app = new Vue({
  el: '#app',
  data: {
    product: 'Hot Coffee',
    description: 'Our signature medium-roasted with a smooth, balanced and rich flavor, this is the perfect everyday coffee in a cup.',
    image: './assets/hot-coffee.jpg',
  }
})