カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-1

Vue.js の基本的な書き方を学ぼう

この章では Snippet アプリを開発するために必要な Vue.js のお作法を学びます。

次のように、文字が表示されるような状態を目指して実装していきます。

まずは、下記のような HTML ファイルを作成しましょう。

Copied!
└── public    └── first_vue.html
html
1234567891011
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(変更前)
html
1234567891011
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(変更後)
html
1234567891011121314
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(変更前)
html
123456789101112
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(変更後)
html
12345678910111213141516
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>

追加箇所の説明をしていきます。

html
123
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(変更前)
html
1234567891011121314
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(変更後)
html
1234567891011121314151617181920212223242526
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>

追加箇所の説明をしていきます。

js
12345678
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にアクセスし、表示できることを確認しましょう。

shell
1
Copied!
$ bundle exec rails server

下記の画像のようになれば OK です。

ここまでできたら、次のように記述して新たな変数 message2 を定義し、表示できることを確認しましょう。

Copied!
└── public └── first_vue.html(変更前)
html
1234567891011121314151617181920212223242526
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(変更後)
html
1234567891011121314151617181920212223242526272829303132
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 です。

ここまでできたら、次の章に進みましょう。

現在のパート (1)
全パート (34)
みんなで助け合おう!
現在のパートのディスカッション 全1件
2-1
杉田雅俊 2020-06-17
質問です

お世話になっております。
こちらルートやコントローラーを設定せずになぜvueが表示されるのでしょうか??
また、なぜpublicフォルダにhtmlを作成するのでしょうか??
よろしくお願いします。