vuetify.jsの書き方 | 綺麗なコードを書くためのコツ

Vue.js

この記事ではvuetifyで綺麗なコードを書く為のTIPSを紹介します。業務で自分が書いたvuetifyのコードと先輩の書いたコvuetifyのコードの綺麗さが明らかに違いました。この違いを明確することで綺麗なvuetifyのコードが書く為に何をすれば良いのかがわかったのでご紹介します。

grid systemを使うべき

v-colやv-rowを使用する

vuetifyではpa-5やmx-autoなどをクラス名に与えることで簡単にpaddingとmarginを追加することができます。それ故に、ついつい余分なpaddingやmarginを書いてしまいがちです。そうしてclass名が膨れ上がり、汚いコードになってしまいます。

<v-card class="pa-3 mb-3">
  <v-card-title>a</v-card-title>
  <div class="px-3">b</div>
  <div class="px-3">c</div>
</v-card>

こうなることを防ぐためにv-colやv-rowを使ってラップしましょう。ディフォルトでv-colやv-rowにはpaddingやmarginが設定されていますので、良い感じに画面を作ることができます。基本的にvuetifyを使ったコードでdivタグを使う必要性は少ないと覚えておいてください。

<v-row dense>
 <v-col cols="12">
      a
 </v-col>
</v-row>
<v-row dense>
  <v-col cols="12">
      b
  </v-col>
</v-row>
<v-row dense>
 <v-col cols="12">
      c
 </v-col>
</v-row>

またv-rowやv-colでtext-feildやtext-areaなどをラップすると良い感じのUIになることが多いです。

<v-row dense>
  <v-col cols="12">
    <v-textarea
      v-model="hoge"
    />
  </v-col>
</v-row>

divタグではなくtemplateタグを使うべき

無駄なDOMの生成を避けることができる

v-if, v-elseなどを使って表示するDOMを複数定義して、それをdivで囲いがちです。しかしこのようなdivで要素をラップするような方式を取ると無駄にdivのDOMが生成されてしまいます。

<template>
  <div>
    <div v-if="flag">
      <title>hoge</title>
    </div>
    <div v-else>
      <a href="/hoge">hoge</a>
    </div>
  </div>
</template>

このような場面はtemplateを使うようにしましょう。template自体はhtmlタグには変換されないので余分なDOMの生成を回避することができます。

<template>
  <div>
    <template v-if="flag">
      <title>hoge</title>
    </template>
    <template v-else>
      <a href="/hoge">hoge</a>
    </template>
  </div>
</template>

無駄なclassやstyleの記述を減らす方法

denseとno-guttersを使うべき

vuetifyの一部コンポーネントではdenseとno-guttersと呼ばれるpropsを渡すことができます。例えばv-rowやv-listです。次の公式サイトのページのAPIのv-rowの項目を見てください。denseやno-guttersと呼ばれるpropsが渡せることがわかります。

{{ title }}
{{ description }}

denseやno-guttersを使うと、ディフォルト設定されているpaddingを減らすことができます。こうすることでclassにpa-0といったstyleを与えるためのclassを記述する必要がなくなり、コードが綺麗になります。

v-cardを使う時はv-card-textを使うべき

v-cardを使って1つのコンポーネントを作るというのはvuetifyでは良くあるパターンです。大抵の初心者の場合、中の要素とv-cardの境界線が近すぎる問題に遭遇して、中の要素をさらにdivでラップしてp-3などのpaddingを当ててしまいがちです。divではなくv-card-textでラップしましょう。v-card-textは良い感じにディフォルトでpaddingが入っているのでわざわざp-3などのclassを与えてpaddingを微調整する必要はありません。

font-sizeとfont-weightを使うべき

styleでfont-size:12pxやfont-weight:boldなどを記述する必要はvuefiryでありません。vuetifyではあらかじめclassを当てることでこれらのstyleを実現することができます。その一覧は公式サイトにも掲載されています。

{{ title }}
{{ description }}

これらを使ってfont-sizeを変更したときにfont-weightが変更されてしまう場合があるので、それを防ぎたい場合はfont-regularを一緒に書くと良いです。

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました