本文へジャンプ

スタイルガイド

Status Notice

このスタイルガイドは現在少し古くなっています。ほとんどの例は Options API のみで、<script setup> や Composition API に関するルールは存在しません。今後、改善する予定です。

このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための素晴らしい参考資料となります。しかし、どんなスタイルガイドもすべてのチームやプロジェクトにとって理想的であるとは考えていません。そのため、過去の経験、周囲の技術スタック、および個人的な価値観に基づいて、注意深い逸脱が奨励されます。

ほとんどの場合、一般的な JavaScript や HTML に関する提案も避けています。セミコロンや末尾のカンマの使用は気にしません。 HTML の属性値がシングルクオートで囲まれているかダブルクオートで囲まれているかも気にしません。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません。

最後に、私達はルールを 4 つのカテゴリーに分けました:

ルールのカテゴリー

優先度A:必須(エラー対策)

これらのルールはエラーを防ぐのに役立ちますので、何としても学んで守ってください。例外はありますが、非常にまれで、 JavaScript と Vue の両方の専門的な知識を持つ人のみが行うべきことです。

これらのルールは、ほとんどのプロジェクトで可読性および/または開発者の経験を向上させることが判明しています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はまれで、十分に正当化されるべきです。

同じくらい良いオプションが複数ある場合、一貫性を確保するために任意の選択をすることができます。これらのルールでは、それぞれ許容可能なオプションを説明し、既定の選択を提案します。つまり、一貫性があり、良い理由を持ち続ける限り、独自のコードベースで自由に異なる選択肢を作ることができます。ですが、良い理由はあるのでしょうか!コミュニティーの標準に合わせることで、あなたは:

  1. 直面するコミュニティーのコードを容易に理解できるように脳を慣れさせます。
  2. ほとんどのコミュニティーのコードサンプルを変更なしにコピーして貼り付ける事ができます。
  3. 少なくとも Vue に関しては、ほとんどの場合、新たな人材はあなたのコーディングスタイルよりも既に慣れ親しんだものを好みます。

優先順位D:注意深く使用する

Vue のいくつかの機能は、まれなエッジケースに対応するため、またはレガシーコードベースからの移行をよりスムーズにするために存在します。しかし、使いすぎると、コードのメンテナンスが難しくなったり、バグの原因になったりすることがあります。これらのルールは、潜在的にリスクの高い機能に注目し、いつ、なぜ、それらを避けるべきかを説明するものです。

スタイルガイドが読み込まれました