じろう

2019年11月02日に参加

学習履歴詳細

[Vue.js]Vue.jsのツボとコツが分かる本 4章〜5-3まで jsonとjsonpファイルを読み込んで処理する [就活]wantedlyのプロフィール文をレビューに基づいて修正

やったこと

■Vue.jsのツボとコツが分かる本4章
Ajaxで商品データを外部ファイルから読み込む
まずJavaScriptでAjaxを使ってみる
次にjQueryでAjax
最後にVue.jsでAjax

■Vue.jsのツボとコツが分かる本5章
自動見積りフォームの作成。オプションにチェックが入ったり、写真の枚数が変わったりと、ユーザーの操作に応じてリアルタイムで見積もり金額が変化、表示されるようなもの
まずはJavaScriptで実装
そのあとVue.jsで実装(途中まで)

■就活
wantedlyのプロフィールをキャリアアドバイザーのレビューを元に修正。

わかったこと

responseにjsonのデータが入ってる。responseを変数に格納してその配列を加工、描画に反映する
jQueryだと$.ajaxという便利なメソッドが使える。メソッドチェーンした.doneには通信成功時に実行したい処理を、.failには失敗時にしたい処理を書く
jsonpを使うことでクロスドメイン制約を回避することができる→Chromeでも表示できる
VSCodeのライブサーバーを使うことでサーバーに置いたJSONPファイルを読み込むというコードで動かすことができた

自動見積りフォームでは、Vue.jsに置き換える際、dataとしてもたせる値と算出プロパティとして用意するものを設計段階で分けることが重要

次やること

自動見積りフォームの完成
jsonpと$.ajaxについて調べる

Rails
Vue.js

2020年06月08日(月)

5.4時間