今回はVue.js チュートリアルをおこなっていて、改めて自分が理解できていないことをまとめました。実際におこなったチュートリアルは「基礎から学ぶ Vue.js」の付録についていたものです。
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
ローカルストレージ API の使用
ユーザのブラウザに情報を保存する方法です。自分は勉強を始めたとき、Vue.jsとFirebaseを使って実装をはじめてしまったために通らない道でした。どの環境でもある機能ですし、簡単なプロトタイプを作るときは積極的に使っていこうと思いました。 まずはローカルで使えるデータベースのように捉えればよく、データの追加・データの取得、データの削除ができることがわかりました。
- データの追加
localStorage.setItem(keyName, keyValue)keyValueには文字列しか保存できない
- データの取得
localStorage.getItem(keyName)
- データの削除
localStorage.removeItem(keyName)
データ追加の「keyValueには文字列しか保存できない」に対する対策は、JSON.stringify(obj)を使いJSON 文字列に変換して使うようにすると良いということがわかりました。
ref 属性
ref属性をつけると、DOMに直接アクセスすることができることがわかりました。
過去に何度も様々なところでthis.$refs.hogeって書いてありましたが、ちゃんと調べずに使っていました。
公式ガイドにも次のURLで記述がありました。
https://jp.vuejs.org/v2/guide/components-edge-cases.html#子コンポーネントインスタンスと子要素へのアクセス
次の記事は、Reactではありますがidを使うよりrefを使ったほうが便利なようです。
Reactではidよりrefを使ったほうがいい - Qiita
watch オプションの「ウォッチャ」機能
多くの場合では算出プロパティの方が適切ではありますが、カスタムウォッチャが必要な時もあるでしょう。データの変更に対して反応する、より汎用的な watch オプションを Vue が提供しているのはそのためです。データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。
算出プロパティのcomputedと似ている機能かつ、computedを使用されるケースが多く、出会いませんでした。非同期などの重い処理をwatchに任せるのが望まれるようで、computedはgetter・setterのようなときにつかうのがよいことがわかりました。引数に変更前の値と変更後の値が設定されるのも特徴でした。
まとめ
どれも基本的な機能ではありましたが、調べてブログにまとめてみました。 もともとはVue.jsとTypeScriptでToDoリストを作って素振りをしてみようと思って始めたのですが、うまくいかずに一度Vue.jsでtodoリストを作るところに戻ってきました。思い返せば、Vue.jsでもToDoリストを作ったことがなかったので心を新たに実施してみましたが非常に学びが多いものでした。
プログラミング問わず、自分が作りたいものを動くように作れるだけでもちろんよいと思います。しかし、ある程度先に進んだときに基本的なところに立ち戻って見ると新しい発見があるんじゃないかと思います。自分の中に「型」をしっかり作ってから「型破り」なことをしていきたいです。
