Vueスタイルガイド読解メモ-優先度Bルール-その2

今日はVueスタイルガイドの優先度Bルールの続きを読みます。

jp.vuejs.org

JS/JSX内でのコンポーネント名の形式

JS/JSX内でのコンポーネント名はつねにパスカルケースにするべき
- JSではクラスやプロトタイプのコンストラクタなど異なるインスタンスを持ちうるものはパスカルケースにするのがしきたり
- Vueコンポーネントもインスタンスをもつ
- HTML要素とコンポーネントを見分けられるようになる
Vue.componentで登録したグローバルコンポーネントしか使わないような単純なアプリはケバブケースが推奨

悪い例

Vue.component('myComponent', {})

import myConponent from './MyComponent.vue'

export default {
   name: 'myComponent'
}

export default {
  name: 'my-component'
}

良い例

Vue.component('MyComponent', {})

import MyConponent from './MyComponent.vue'

export default {
   name: 'MyComponent'
}

完全な単語によるコンポーネント名

コンポーネント名には略語よりも完全な単語を使うべき
- 長い名前の方が明快
- タイプが多くなるがエディタの自動補完があるから大丈夫
- 一般的でない略語は常に避けるべき

これ、コンポーネント名というかクラス名とかもそうな気がする。

悪い例

components/
|- SdSettings.vue
|- UProfOpts.vue

良い例

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

プロパティ名の型式

プロパティ名は、定義は常にキャメルケース、テンプレートやJSXではケバブケースにするべき
- JSの中ではキャメルケースが自然、HTMLではケバブが自然だから

コンポーネント名はそうだと思っていたが、popsもケバブケースで指定できたのね。

悪い例

props : {
  'greeting-text' : String
}

<WelcomeMessage greetingText="hi" />

良い例

props : {
  'greetingText' : String
}

<WelcomeMessage greeting-text="hi" />

しかし、このルールってどこまで浸透しているんだろうか。コンポーネント名はHTMLタグと見分けつけやすいからキャメルケースと言っているのに、propsはケバブなんか。

vuetifyはtemplate内だとpropsはケバブになってそうだな。

複数の属性をもつ要素

複数の属性を持つ要素は、1行に1要素ずつ書く
- JSでも複数のプロパティを持つ要素は複数の行に分けて書くのは良い習慣だと考えられている
  - 読みやすいから

悪い例

<img src="xxxxx" alt="vue Logo">
<MyComponent foo="a" bar="b" baz="c" />

良い例

<img 
  src="xxxxx" 
  alt="vue Logo"
>
<MyComponent 
  foo="a" 
  bar="b" 
  baz="c" 
/>

確かに、prettierでもそのようにフォーマットされるわ。

テンプレート内での単純な式

複雑な式は算出プロパティかメソッドにリファクタリングして、コンポーネントのテンプレートには単純な式だけを含むようにすべき
- テンプレート内に複雑な式があると宣言的じゃなくなる
- どのように算出するかではなく、何が表示されるべきかを記述するようにすべき

悪い例

{{
  fullName.split(' ').map(function (word) {
     return word[0].toUpperCase() + word.slice(1)
   }).join(' ')
}}

良い例

{{ normalizedFullName }}

computed : {
  normalizedFullName : function() {
    fullName.split(' ').map(function (word) {
       return word[0].toUpperCase() + word.slice(1)
     }).join(' ')
  }
}

単純な算出プロパティ

複雑な算出プロパティは、単純なプロパティでに分割するべき
- 単純な良い名前を持つ算出プロパティは
  - テストしやすい
  - 読みやすい
  - 要求の変更を受け入れやすい

悪い例

computed : {
  price : function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
       basePrice - basePrice * (this.discountPercent || 0)
    )
  }
}

良い例

computed : {
  basePrice : function() {
    return this.manufactureCost / ( 1 - this.profitMargin)
  },
  discount : function() {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function() {
    return this.basePrice - this.discount
  }
}

圧倒的に、良い例の方がわかりやすいな。

引用符付きの属性値

空でなHTML属性の値は常に引用符でくくるべき
- HTMLでは空白を含まない属性値は引用符でくくらなくても良いが、読みづらくなる
  - 空白を避けるようになってしまうため

悪い例

<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

良い例

<input type="text">
<AppSidebar :style="{ width : sidebarWidth + 'px' }">

なるほど、悪い例のstyle属性は空白を入れられないから、詰まった感じになっちゃって読みにくいね。

ディレクティブの短縮記法

ディレクティブの短縮記法は常に使うか、全くつかわないかのどちらかにすべき
- v-bind:に対する:
- v-on:に対する@
- v-slot:に対する#

悪い例

<input
  v-bind:value="hoge"
  :placeholder="fuga"
>

<input
  v-on:input="hoge"
  @focus="fuga"
>

<template v-slot:header></template>
<template #footer></template>

良い例

// 省略記法を使うパターン。使わないにそろえてもよい
<input
  :value="hoge"
  :placeholder="fuga"
>

<input
  @input="hoge"
  @focus="fuga"
>

<template #header></template>
<template #footer></template>

終わったー！ちまちまと読んでいたから３日くらいかかってしまった。次は「優先度Cのルール」を読みます。