Vue.js
自分なりの解釈
今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦
少し躓いたところを忘備録として記録します。
親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。
その際に使うのがbeforeRouteEnter
さらにnext((vm) => {}
としてthisの代わりにvmでインスタンス内にアクセスするイメージ
書き方がややこしく感じてなかなか頭に入らない。。。
next()の中に vm => {} さらにその中に
vm.$nextTick()でさらにその中に
() => {} でこの中に処理を書く。。。
普段から使って慣れないと覚えられる気がしない。。。
Vue.js
自分なりの解釈
今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦
少し躓いたところを忘備録として記録します。
親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。
その際に使うのがbeforeRouteEnter
さらにnext((vm) => {}
としてthisの代わりにvmでインスタンス内にアクセスするイメージ
書き方がややこしく感じてなかなか頭に入らない。。。
next()の中に vm => {} さらにその中に
vm.$nextTick()でさらにその中に
() => {} でこの中に処理を書く。。。
普段から使って慣れないと覚えられる気がしない。。。
Vue.js
自分なりの解釈
今日学習した処理の流れ
子側のコンポーネントから親側のコンポーネントに$emitを使って値を渡す。
親側は渡された値を参考にメソッドでdataを作成。
作成後、別のコンポーネントへpropsを使用してdataを渡す。
propsで受け取ったdataを使用してコンポーネント内で表示する。
propsで受け取ったdataを正しく表示するためにナビゲーションガードという仕組みを使用する。
ナビゲーションガードとはコンポーネント間の表示を切り替える間に処理を挟み込むような仕組みで挟みこむタイミングや場所によって記述する方法が異なる。
今日使用したのはpropsで取得した値をコンポーネント内のdataに値を代入する時に、DOM更新を待ってから代入処理を実行するために使用した。
この時に使用したのがbeforeRouteEnterで引数に移動前コンポーネントの$routeを表すfromと移動先の$routeを表すtoとnextがある。
nextのコールバック関数が呼び出される。
nextの中ではインスタンス内を表すthisが使用できない。
thisの代わりにnext(vm => {})とすることでthisの代わりにvmで情報を取得できるようになる。
6/11 Vue.js
振り返り
今日は何も見ずにGoogle Books APIsを使用してデータの取得、vuetifyを使用してのデータの表示、コンポーネント間でのデータのやり取り、ローカルストレージへのデータ保存の実装に挑戦。
Google Books APIsを使用してデータの取得
特につまることなく実装できたが今はGoogle Books APIsを使用するためのURLの作成という形で覚えてしまっているので、他のAPIを使用する時に適切な形で対応できるように心がける。
vuetifyを使用してのデータの表示
グリッドシステムを使用した実装はまだ不慣れ。
理屈はなんとなく理解できているがタグの量が増えるにつれて少し混乱した。便利な技術なので慣れてサクサク書けるようにする。
コンポーネント間でのデータのやり取り
今回は特に問題なく実装できた。
子側から親側に値を渡す時にthis.$emitを使用することと親側でのデータの取得方法を忘れないようにすれば問題ない。
ローカルストレージへのデータ保存
最初は保存の際に少しだけ記述を誤っていたので保存できず。
すぐに修正できたのでOK。
普段はあまり使用することのない技術だと思うのでなんとなく仕組みを理解する程度に留めておく。
6/10 処理速度について
今まであまり意識する機会がなかった処理速度について少し調べました。
ほとんどの内容は今の自分にはまだまだ理解できない部分でしたが、その中でも気づきがあった部分のみ忘備録として記録します。
i.nil? は i == nil より4倍から5倍近く処理が早い。
nilかどうかの検証にはnil?を使用した方がよさそうです。
文字の追加
文字の追加には += より << やcontactを使用する方がよい。
+=は重たくなるから注意が必要なようです。
今まで+=で処理していたことしかなく文字列に<<が使用できることも知らなかったので学びになりました。
i * I は i **2 より1.8倍速いらしい。
処理速度を意識するような開発をしたことはないですが、アルゴリズムの最適化など日頃から考えるクセをつけたいと思います。
6/9 Vue.js
自分なりの解釈
コンポーネントを跨いでデータをローカルストレージに保存する流れ
子側のコンポーネントから親側に値を渡してローカルストレージに保存する必要がある。
子側から値を渡すためにthis.$emit('任意のイベント名', 渡したい値)とする。
親側でrouter-viewタグで@任意のイベントとして値を受け取りつつメソッドを実行する。
実行するメソッドの引数にeを渡すことで、子側から渡された値がeから取り出せる。
eから必要な情報を必要な形に加工して親側のdataに保存。
保存したらローカルストレージに保存するメソッドを実行
JSON.stringify(加工したいdata)でインスタンス化する
オブジェクトのままだとローカルストレージには保存できないので保存できる形に変更している。
localStorage.setItem(名前, インスタンス)とすることでローカルストレージに保存できる。
初めてローカルストレージを使用したので少し知識が曖昧な部分がある。
コードを削除して1から思い出しながら記述していく。
6/8 Vue.js
自分なりの解釈
googlebook APIを使ってデータを取得後表示するまでの流れ
vuetifyのv-text-fieldコンポーネントにv-modelで入力値をdataと紐付ける
v-btnタグで検索ボタンを作成しクリックで検索メソッド発火
検索内容のkeywordをURLに組み込む必要がある
検索メソッドでURLの共通部分を定数化
keyword部分を定数化してnew URLsearchParamsに渡すことでURLとして使える形のインスタンスを生成
fetchでURLの共通部分 + keyword部分とすることで入力された値にヒットするデータが返ってくる。
返ってきたデータをjson形式に変換しつつ定数へ
レスポンスの定数をfor分で繰り返しながら必要な中身を取り出してdataに準備していた配列に入れていく。
配列のdataをv-forを使って繰り返し表示する。
v-row v-colでグリッドシステムを使用、v-cardで1つのデータをきれいにまとめて表示を整えると見栄えが良くなる。
コードを消してまた明日1から作ってみる。
