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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-2

メソッドを定義しよう

ここでは、Change ボタンを押すことによって、Set MessageChangd Message に変わるような実装を行なっていきます。

まずは、次のように追記をしていきましょう。

Copied!
└── public └── first_vue.html(変更前)
html
12345678910111213141516171819202122232425262728
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>
Copied!
└── public └── first_vue.html(変更後)
html
1234567891011121314151617181920212223242526272829303132333435363738
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' } }, // ここから追記する mounted () { // 説明 2.7 this.setMsg(); // 説明 2.8 }, methods: { // 説明 2.9 setMsg: function () { // 説明 2.10 this.message = 'Set Message'; // 説明 2.11 } } // ここまで追記する }) </script> </body> </html>

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

mounted とすることで、アプリが立ち上がった最初のタイミングで実行される関数を定義できます。(説明 2.7)

this とすることで、Vue オブジェクト自身を指す事になります。this.setMsg() とすることで、これから定義する setMsg メソッドを実行できます。(説明 2.8)

methods とすることで、Vue オブジェクト内に関数を定義できます。(説明 2.9)

この中でsetMsg : fucntion() {} と記述して処理を定義します。(説明 2.10)

this.message とすることで、Vue オブジェクトの data 内で定義した変数 message を参照できます。ここではその 変数 message に対して 'Set Message' という文字列を代入させています。(説明 2.11)

ここまでできたら、次のステップに進みましょう。

Copied!
└── public └── first_vue.html(変更前)
html
123456789101112131415161718192021222324252627282930313233343536
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' } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; } // この行から追記 } }) </script> </body> </html>
Copied!
└── public └── first_vue.html(変更後)
html
123456789101112131415161718192021222324252627282930313233343536373839404142
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> <button v-on:click="changeMsg">Change</button> <!-- 説明 2.12 --> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge' } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, // ここから追記する changeMsg: function() { // 説明 2.13 this.message = 'Changed Message' }, // ここまで追記する } }) </script> </body> </html>

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

v-on:click="changeMsg" で click が行われた時に changeMsg メソッドを実行するという意味になります。(説明 2.12)

ここでは setMsg メソッドと同じように changeMsg メソッドを定義してボタンクリックに応じで処理が行われることを確認します。(説明 2.13)

上記のように、Change ボタンを押すことによって Set MessageChangd Message に変わります。

ここまでできたら、次のステップに進みましょう。

現在のパート (0)
全パート (34)
みんなで助け合おう!
現在のパートのディスカッション 全0件