【Vue】現場のコードについて【TypeScript】
・未経験者から初現場の様子を聞きたい
・Vueの現場はどんな感じなのか知りたい
・実際の現場のコードが知りたい
という方々は是非ご一読ください。
本記事のテーマ
【Vue.js】エンジニア初現場のコードについて
目次
- 現場に入るまでの流れと初日〜環境構築
- 担当営業が案件紹介
- 先方と面談
- 合否通知
- アサイン
筆者について
- 未経験（花屋見習い）独学でフロントエンドエンジニアへ転職
- VueとTypeScriptのモダンフロントエンド環境でWebアプリ開発
前置きメッセージ
僕は未経験からSES企業に転職し、Vue+TypeScriptの環境で開発をしています。
そんな中、フロントのリーダーと現場のコードはもっとここをこうした方がいいよねという話をします。
あくまで個人の域は出ませんが、長年開発をやってきた方と話した結果を反映しているので、ある程度信用に足る内容ではないかと思います。
現場のコード
現場といってもいろんな背景を持つ人々がコードを書いています。
Vueをやってるからといって必ずしもフロントエンドエンジニアというわけではありません。
昔はバックエンドと設計をやっていたけど人が足りないからフロントのコードを書いている人もいます。
そんな中、モダンで柔軟な書き方で統一されてる方が珍しいです。
反例としてかなり勉強になった部分があるので、それを用いて書いていきます。
emitはtemplate内でしよう
※CompositionAPIのsetup関数を前提としております。
setup() {
const onClick = () => {
emit('onClick')
}
return {
onClick,
}
}
👇 このコードってこうできますよね？
@click="$emit('onClick')
驚異の３行節約。
たった3行、されど3行。行数の節約はかなり大事です。
ファイルを肥大化させずにコードを書く意識につながるからです。
下に書く場合、拡張性のあるコードにしといて後で処理を追加しやすくするというメリットがあります。
上に書くと依存箇所すべて書き直す必要があるので、一箇所書きなおすだけでいいと。
しかしそれは、「毎度、依存関係を探るためにtemplate側でイベントの発火を確認して、全体検索でsetup内の記述箇所を探る」よりしんどいことですか？
探ってみた結果emitしているだけ、というのは何回もやると少しずつモヤモヤが溜まります（笑）
さらに、１つ２つ処理を追加するだけならtemplate側で全然問題ないと思います。
👇 こんな感じです。
@click="() => {
$router.push('/')
$emit('onClick')
}"
これだと結果的に3行増えるんですが、
・依存関係を探る必要がないからイベント発火箇所で何がしたいかわかる
という大きなメリットがあります。
1000行単位のvueファイルでも同じイベントを使っている箇所は多くても4、5箇所なので、
そこまで神経質に変更に備える必要はないと思います。
いつもの開発を見通しよく快適にしといて、変更があったときは適宜変更するで十分間に合います。
required: falseじゃなくてdefault値を書こう
👇 こういうやつです
props: {
userName: {
type: String,
required: false
}
}
Propsのrequired初期値はfalseとなっています。
プロパティ
【Vue】propsを使いこなす。typeやプロパティの設定方法と注意点
であれば、書く必要はありません。
👇 これでいいです
props: {
userName: {
type: String,
}
}
👇 もっというとこうがいいです。
props: {
userName: {
type: String,
default: 'ユーザー名は設定されていません。'
}
}
必須項目じゃないということは
・なんらかの初期値が設定されている
・文字列の場合、空文字
のパターンが多いです。
👇 空文字の場合は空文字を設定します。
props: {
userName: {
type: String,
default: ''
}
}
・初期値が明示的でわかりやすい
・どんな値が入ってくるか予想がつく
という点でメリットがあります。
2つ目は特に大きく、チーム開発で変数名だけだとこれなんのパラメーター？？？となるときが多々あります。
（本当は変数名だけで察せるのが理想ですが。。。）
しかし、初期値があるとなんとなく予想をつけることができます。
必要じゃないものは書かない。
チーム開発をうまく回すために初期値を設定するということを心がけましょう。
v-forの:keyはindexじゃない方がいい
これによってどんな問題が発生するか。
結論から言うと、index番号の繰り上がりによるユニークキーの消失です。
ちょっとよくわからないですよね。解説します。
👇 該当のコード
<ul>
<li v-for="(user, index) in userList" :key="index">
{{ user.name }}
</li>
</ul>:keyはv-bind:keyの短縮形です。
これは、リスト要素一つ一つに対してユニークキーをつけるための処理です。
つけないとVue側でエラーが出ます。
ユニークキーというのは一意なキー（それを判別するために確実に一つしか存在しない値）のことです。
indexは果たしてそうでしょうか。
例えば途中のリストが消されたとしましょう。
するとindexは繰り上がります。つまり、リストが消される前と違うindexが割り振られます。
これは一意ではないです。ただそれだけを判別するための一意な値ではなくなります。
ここから言えるのは、indexではユニークではない別のキーが振られる可能性があるという点です。
もしindexを参照するイベントが入っていたとき想像とは違う処理になるかもしれません。
それは避けるべきです。indexではなくユニークキーを指定しましょう。
では具体的にどうするべきか。
👇 リストに故意的に設定するか、大体はサーバー側からハッシュキーが含まれ返ります。
ハッシュキー・・・ユニークキー
const userList = [
{
id: 1,
name: 'user1'
},
{
id: 2,
name: 'user2'
},
]
idはそのオブジェクトにしか付与されない値なので一意です。
途中のリストが削除されても繰り上がりません。
