yuheijotaki.com

フォーム入力バインディングを理解する その11

f:id:jotaki:20190212100544p:plain

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その11

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

f:id:jotaki:20190523095755p:plain

改善点

まだ仕様や使い勝手的な部分で改善できる所がありそうで、メモのため書いておきます。

  • 再読込時にテキストの内容が保存されないようになっているので、localStorage使って保存できるように
  • color: / background: のカラーコード入力時、短縮形の場合は補完機能、エラー時は入力前の値に戻るなどのバリデーション機能
  • フォントのバリエーションをGoogle Fontsから取ってこれるなどバリエーションが多ければなお良い
  • ローカルストレージの削除ボタンで既存のスタイルをデフォルトにリセットする機能
  • 全体的に追加要件に対しては手書きになっている箇所ばかりなので、そこも動的だせたらなお良い

感想

↑のような改善したい点はまだあるのですが、想定していたより短期間で実装できた感触です。 jQuery 版と比べると結構コアなところも時間かからなかったので Vue と localStorage すごいなーという感じです

  • computed と methods の違いがやっと分かってきた気がする
  • Vue.js の枠内でやれることもあるが意外とやれない（もしくは複雑になる）こともあるので、そういう場合は JavaScript で書くところもあるのだなと
  • 今回のようなフォーム要素などあるものは、UIフレームワークなり使ったほうが良さそうな気がするので、そのあたりも知識必要かなと
  • localStorage も初めて触わりましたがやっぱり Cookie と同じような感じで、それでいて扱いやすいのでもっと使いこなせるようにしたい
  • Vue CLI は結局 webpack を使っているので webpack の知識もあったほうがいいなー
  • 今回のページ構成のあるサービスでないので、ルーティング周りや vue-head の使いかたも覚えないとなとか