《Vue.js》Vue開発でのPull Requestを出す前にチェックするべき注意点

Vue.js

初心者が注意すべきPull Requestのマナー

1つの修正に1つのcommit

レビュワーから「〜の部分と〜〜の部分を修正してください」という依頼を受けて、ローカルで修正したものをリモートのリポジトリにpushするとき、原則として2つの修正依頼を1つのcommitにまとめてはいけません。レビュワーは1つずつ指摘した修正依頼箇所が直っているかを確認するので、1つのcommitに修正依頼が複数混ざっているとレビュワーの確認負荷が上がり、労力をかけることになります。

命名が長いのはNG

プロパティ、関数の命名でやたらわかりやすさを重視して、やたら長い名前をつけてました。しかしこれもNG。というのもその命名は大体が誤っていることが多かったのです。誤っているか、本来担う機能以上のことを書いているパターンが多かったです。関数に関しては、「その関数は何をするのか」という点に着眼するといいです。詳しくは有名な著書「リーダブルコード」を読むと命名に関するコツが全てわかります。

commit Messageは具体的に書く

commitメッセージは具体的に書きましょう。fix bug といったcommitメッセージはアンチパターンです。後々見返した時になんのbugを修正したのかわからなくなってしまうからです。もっと高レベルのコメントを書きましょう。高レベルというのはプログラムだけではわからない変更背景を文字にして書くことです。

Vue開発におけるのよくある指摘パターン

Vuetiryに余分なオプションがついていないか

マテリアルデザインコンポーネントフレームワーク — Vuetify.js
VuetifyはVue.jsのマテリアルデザインコンポーネントフレームワークです。美しいコンテンツを持つリッチアプリケーションを作成するのに必要不可欠なツールを提供することを目的としています。

vuetiryを使って開発するにあたって、ディレクティブにオプションを設定することが多々あります。例えば以下のdark、これは本当に必要なのか?何のためについているのか?という点を開発者自身が認識していないとまずいです。余分なオプションがついたままcommitしてしまうことになってしまいます。

props, vuexのstateで定義する型は正しいか

propsで受け取るプロパティの、stateで定義する型が本当に意図する型なのか?特にvuexのstateの型は間違っていてもmustationsで値が代入されてしまえばエラーとして表示されないので注意が必要です。

マジックナンバーを使わない

多くのプロジェクトではcontant.jsやその他ファイルにプロジェクトで使用する意味のある数値は定義されているはずです。なので

といったような数値をそのまま使ってしまっている条件文は大抵、先輩エンジニアの方に指摘されますので直しましょう。

vuexのcommitはstoreのactionsに書く

dispatchを叩いて、promise型をvueファイルで受け取って、thenの中でcommitを叩くという書き方はせず、storeのactionsに定義しましょう。vueファイルにはあまりロジック系の処理を書かないようにするのが好ましいです。

積極的にcomponentに分割する

atomic designを採用している開発では、積極的にコードをcomponentに分割しましょう。またcomponentに分割する時は汎用性を考えましょう。他のプロジェクトで使えるくらい汎用性が高いUIパーツを作るのが理想です。もちろんプロジェクト固有のcomponentが生成されても問題はありません。

Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re desig...
筆者
筆者

以上でVue.jsで開発を進める上で注意すべき点の一部の紹介を終わります。普段からPull Requestでの指摘が多い方はどこを指摘されたのかログを取っておくとどこを自分は間違えやすいのかという部分が見えてくるのでおすすめです!

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

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