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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-3

Axios を利用して Rails で作成した API を呼び出そう

ここでは、通信ライブラリ Axios を利用して 1章で作成した Rails の API を呼び出します。

まずは、次のようにコードを追記しましょう。

Copied!
└── public    └── first_vue.html(変更前)
html
1234567891011121314151617181920212223242526272829303132333435363738394041
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> </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() { this.message = 'Changed Message' // この行から編集 }, } }) </script> </body> </html>
Copied!
└── public └── first_vue.html(変更後)
html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
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> <!-- ここから追記 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- ここまで追記 --> <title>Snippet App</title> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ message2 }}</p> <button v-on:click="changeMsg">Change</button> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge', // ここから追記する list: [{title:'title1'}, {title:'title2'}] // 説明 2.14 // ここまで追記する } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, changeMsg: function() { this.message = 'Changed Message' // ここから追記する this.message2 = this.list[0]['title'] // 説明 2.15 // ここまで追記する }, } }) </script> </body> </html>

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

ここでは、変数 list として連想配列の配列を定義します。(説明 2.14)

js
1234
Copied!
changeMsg: function() { this.message = 'Changed Message' this.message2 = this.list[0]['title'] // 説明 2.15 }

ここで、list で定義した連想配列の配列の1つ目の要素の title キー から値を取り出して message2 に代入しています。(説明 2.15)

この変更の結果、Change ボタンを押すと下記のような状態になるはずです。

'title1'と表示された画像

次に、以下のように変更を加えましょう。

Copied!
└── public └── first_vue.html(変更前)
html
12345678910111213141516171819202122232425262728293031323334353637383940414243
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> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Snippet App</title> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ message2 }}</p> <button v-on:click="changeMsg">Change</button> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge', list: [{title: 'title1'}, {title: 'title2'}] } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, changeMsg: function() { this.message = 'Changed Message' this.message2 = this.list[0]['title'] // この行から編集 }, } }) </script> </body> </html>
Copied!
└── public └── first_vue.html(変更後)
html
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
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> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Snippet App</title> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ message2 }}</p> <button v-on:click="changeMsg">Change</button> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge', list: [{title: 'title1'}, {title: 'title2'}] } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, changeMsg: function() { this.message = 'Changed Message' // ここから編集する axios.get('/snippets.json') // 説明 2.16 .then(response => ( // 説明 2.17 this.message2 = response.data[0]['title'] // 説明 2.18 ) ) // ここまで編集する }, } }) </script> </body> </html>

changeMsg メソッドの中で、axios という通信ライブラリを用いて Rails で実装した API を呼び出します。 (説明 2.16)

ここで、呼び出した API のレスポンスを .then(response => ())=> () の中で、response として値を渡して処理できます。(説明 2.17)

具体的にここでは1章で sqlite コマンドを用いて登録したデータを json 形式で response として取得し、1件目のタイトルを 変数 message2 に代入します。(説明 2.18)

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

Copied!
└── public    └── first_vue.html(変更前)
html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
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> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Snippet App</title> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ message2 }}</p> <button v-on:click="changeMsg">Change</button> <!-- この次の行に追記 --> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge', list: [{title: 'title1'}, {title: 'title2'}] } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, changeMsg: function() { this.message = 'Changed Message' axios.get('/snippets.json') .then(response => ( this.message2 = response.data[0]['title'] ) ); }, // この行から追記 } }) </script> </body> </html>
Copied!
└── public └── first_vue.html(変更後)
html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
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> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Snippet App</title> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ message2 }}</p> <button v-on:click="changeMsg">Change</button> <!-- ここから追記する --> <ul> <li v-for="data in list">{{ data.title }}</li> <!-- 説明 2.19 --> </ul> <button v-on:click="listSnippet">listSnippet</button> <!-- 説明 2.20 --> <!-- ここまで追記する --> </div> <script> new Vue({ el: '#app', data () { return { message: 'Hello Vue!', message2: 'Hoge', list: [{title: 'title1'}, {title: 'title2'}] } }, mounted () { this.setMsg(); }, methods: { setMsg: function () { this.message = 'Set Message'; }, changeMsg: function() { this.message = 'Changed Message' axios.get('/snippets.json') .then(response => ( this.message2 = response.data[0]['title'] ) ); }, // ここから追記する listSnippet: function() { axios.get('/snippets.json') .then(response => ( this.list = response.data // 説明 2.21 ) ); } // ここまで追記する } }) </script> </body> </html>

v-fordata () で定義した 配列 list の各要素を data として1つ目から最後まで反復して処理させます。(説明 2.19)

v-on:click で button 要素をクリックした時に実行するメソッドを指定します。ここでは listSnippet としました。(説明 2.20)

js
1234567
Copied!
listSnippet: function() { axios.get('/snippets.json') .then(response => ( this.list = response.data // 説明 2.21 ) ); }

今度は、response.data で配列になっている状態のまま 変数 list に代入します。(説明 2.21)

これができたら、次のステップに進みましょう。次は、データ投稿用のメソッドを定義して実行してみます。

現在のパート (4)
全パート (34)
みんなで助け合おう!
現在のパートのディスカッション 全4件
2-3
中尾 広和 2021-05-22
質問になります

"newtitle"の出力はされるのですが、出力される順番が違っていたため、お手数ですがご確認頂けますか?

発生している問題

listSnippetボタンを押すと、newtitleが一番下に表示される。

エラー画面をスクショで添付してください

<vueファイル>
https://gyazo.com/1d6f8c24ebe729560f04b6f241427c69
<snippet.jsonファイル>
https://gyazo.com/1367e6a9b4f3446a2f8ab18344e445e3

試したこと

スペルチェックやコロンのつけ忘れが無いか確認

2-3
Tomohiro Hagino 2020-08-01
セミコロンについて

コードの処理のカッコの末尾にセミコロンをつけるときと省略している時の違いがわからないです。

どのように判断して記述していけば良いでしょうか?

2-3
micabi 2020-05-07
質問です

thenメソッドの書き方について

説明説明 2.17〜説明 2.18にかけてのaxiosの挙動について質問します。
axiosを初めて使うためよくわかりません。

ES6の記法で書くと期待通りにイベントが成功するのですが、
ES5の記法で書くとブラウザの表示が変化しません。(console.logでは"title1"がちゃんと出力されます)

Promiseの場合だとどちらで書いても動いたので「axios then」などで
調べてみましたが、console.logでresponseを出力する例しかヒットせず
理由がわかりませんでした。

axiosはES6記法でないと動かないのでしょうか?
それともVueとの相性の問題なのでしょうか?

Copied!
OKな例 changeMsg: function(){ this.message = "Canged Message"; axios.get('/snippet_apps.json') .then((response) =&gt; { // ES6 console.log(response.data[0]['title']); // "title1" this.message2 = response.data[0]['title']; // "Hoge"が"title1"に変化 }); }

functionで記述するとconsole.logには"title1"が出力されるのですが、
ブラウザでは"Hoge"が変化しません。

Copied!
NGな例 changeMsg: function(){ this.message = "Canged Message"; axios.get('/snippet_apps.json') .then(function(response){ // ES5 console.log(response.data[0]['title']); // "title1" this.message2 = response.data[0]['title']; // "Hoge"のまま }); }
2-3
イノキ 2020-02-07
質問です

axiosのデバックの方法を教えていたけますでしょうか?

例えば、以下のresponseの中身がどういった値が入っているの確認方法がわかりません。

Copied!
changeMsg: function() { this.message = 'Changed Message' axios.get('/snippets.json') .then(response =&gt; ( this.message2 = response.data[0]['title'] ) ); },

console.log(response)とかを差し込めば良いのでしょうか?