プログラミング初心者が、「Vue.js」を使って簡単なWebサイトを作成する方法について解説します。
HTMLとCSSについて基礎的な知識を持っていれば(Progateの初級レベル) 簡単に開発出来ますので、是非ともチャレンジしてみて下さい。
完成品
この記事では、「Vue.js」を使用して、Cafeの商品案内ページを作る事を目指します。
「商品画像」と「商品説明」を表示させるだけのシンプルなページですが、ここからカート機能等を今後追加していきます。
1.プロジェクトの雛形を作成
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です。
1-2:空のVueインスタンスを作成
Javascriptファイルに、空のVueインスタンスを作成し、変数「app」に代入します。
var app = new Vue({ })
1-3:空のルートテンプレート作成
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', } })