2019/3/29こんにちは!スギモトです!VuetifyというVue用のUIコンポーネントライブラリをご存知でしょうか。Googleが提唱しているマテリアルデザインに則ったUIコンポーネントがお手軽に利用できるすばらしいライブラリですので、触ったことないという方はぜひ一度お試しください。実際の業務でVuetifyを利用してもう1年以上になるのですが、最近はずいぶんと公式のドキュメントが充実してきた印象があります。公式の解説に加え、日本でもユーザが増えたのか個人のブログや各社の技術ブログなどでも紹介される頻度が上がっており、日本語の記事が増えてきている印象があります。ソースを見ないとイマイチ使い方がわからない!しかも定期的にコンポーネントが増えたり、バージョンアップで便利なプロパティが増えているに説明がない......。いういった部分もあるので、自分が業務でハマった内容を紹介していきたいと思います。各コンポーネントについては、Vuetifyの公式サイトでまあまあ紹介されているので、コンポーネントを利用する際はぜひ確認してみてください。Vuetify公式サイトVuetifyのDatePickerを日本語化してみるVuetifyのセットアップはこちらの記事で軽く紹介しています。Vuetifyでプロジェクトを作成してみる!なぜこれにハマったかというと、VutifyのDatePickerを日本語化すると日付に”日”ってついてくるんですよね(笑)次のように、素直にlocaleを設定するとこんな感じになります。locale="ja-jp"うーん、微妙。日付をフォーマットしたい!利用できるpropsを見ていくと、「day-format」なるものがあるので試して見ました。Date(date).getDate()"それらしくなりましたね!土日に色をつけてみる!公式サイトで紹介されているpropsを見てもそれらしいものがありません。eventsとevent-colorでなんとなくできそうですけど、これはちょっと気持ち悪いですよね。そこでCSSを上書きしてみましょう。例としてこんな感じになると思います。:nth-child(n)を使うのがポイントですね。color:red}うまくいきましたね!日本のカレンダーっぽくなりました。まとめ少し工夫するだけでずいぶんと使い勝手のいいカレンダーになりました。シンプルで便利なUIですので、色々な場面で利用できそうです。ホットケーキミックス」と「極もち」食べ比べてみた!VuetifyのDataTableの列幅を固定にする方法スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。