教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この章では Snippet アプリを開発するために必要な Vue.js のお作法を学びます。
次のように、文字が表示されるような状態を目指して実装していきます。
まずは、下記のような HTML ファイルを作成しましょう。
Copied!└── public
└── first_vue.html
html1234567891011 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Snippet App</title>
</head>
<body>
</body>
</html>
次に、作成したファイルに対して、Vue.js を実行するためのソースを読み込みます。
ここでは CDN (Contents Delivery Network) 上のソースを読み込ませます。
※ CDN とは平たく説明するとインターネット上でファイルをコピーして多くの人が使えるようにする仕組みです。詳しくは こちら などをご覧ください。
Copied!└── public
└── first_vue.html(変更前)
html1234567891011 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- この次の行に追記 -->
<title>Snippet App</title>
</head>
<body>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ここから追記する -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- ここまで追記する -->
<title>Snippet App</title>
</head>
<body>
</body>
</html>
次に、下記のように記述していきましょう。
Copied!└── public
└── first_vue.html(変更前)
html123456789101112 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<!-- ここに追記 -->
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html12345678910111213141516 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<!-- ここから追記する -->
<div id="app"> <!-- 説明 2.1 -->
<p>{{ message }}</p> <!-- 説明 2.2 -->
</div>
<!-- ここまで追記する -->
</body>
</html>
追加箇所の説明をしていきます。
html123 Copied!<div id="app"> <!-- 説明 2.1 -->
<p>{{ message }}</p> <!-- 説明 2.2 -->
</div>
<div id="app"></div>
で囲まれた部分に JavaScript 側で処理した後の状態を反映させる内容を記載しました。(説明 2.1)
また、message
がこの後で定義する変数名となります。(説明 2.2)
その次に、下記のような追記を行います。
Copied!└── public
└── first_vue.html(変更前)
html1234567891011121314 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div> <!-- この次の行に追記 -->
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314151617181920212223242526 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- ここから追記する -->
<script>
new Vue({ // 説明 2.3
el: "#app", // 説明 2.4
data() { // 説明 2.5
return {
message: "Hello Vue!"
};
}
});
</script>
<!-- ここまで追記する -->
</body>
</html>
追加箇所の説明をしていきます。
js12345678 Copied! new Vue({ // 説明 2.3
el: '#app', // 説明 2.4
data () { // 説明 2.5
return {
message: 'Hello Vue!'
}
}
});
ここでは、<script>
タグを利用して Vue.js 用の JavaScript の記述を行いました。
new Vue ({})
で Vue オブジェクトを定義しています。{}
内部で Vue.js の書式に従って記述する事により、HTML内へ処理結果を反映させることができます。(説明 2.3)
el: '#app'
の部分では、 Vue.js の形式で書かれたコードの実行結果を反映させる html 要素の id を指定しました。(説明 2.4)
また、data () {}
の {}
で囲まれた部分に書かれた箇所では変数の定義と初期値の代入を行うことができます。(説明 2.5)
ここまでできたら、下記コマンドでサーバーを立ち上げた後、localhost:3000/first_vue.htmlにアクセスし、表示できることを確認しましょう。
shell1 Copied!$ bundle exec rails server
下記の画像のようになれば OK です。
ここまでできたら、次のように記述して新たな変数 message2 を定義し、表示できることを確認しましょう。
Copied!└── public
└── first_vue.html(変更前)
html1234567891011121314151617181920212223242526 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p> <!-- この次の行に追記 -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!' // この次の行に追記
}
}
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314151617181920212223242526272829303132 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<!-- ここから追記する -->
<p>{{ message2 }}</p>
<!-- ここまで追記する -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
// ここから追記する
message2: 'Hoge'
// ここまで追記する
}
}
})
</script>
</body>
</html>
下記の画像のようになれば OK です。
ここまでできたら、次の章に進みましょう。