Skip to content

Latest commit

 

History

History
689 lines (492 loc) · 32.4 KB

README-JP.md

File metadata and controls

689 lines (492 loc) · 32.4 KB

Vue.js コンポヌネント スタむル ガむド

翻蚳

目的

このガむドはあなたのVue.js のコヌドを統䞀する方法を提䟛したす。

  • 開発者チヌムメンバがより問題を理解し、芋぀けやすくする。
  • IDEがよりコヌドを解釈し、支揎を提䟛しやすくする。
  • すでに䜿甚しおいるビルドツヌルを再利甚しやすくする。
  • 別々のコヌドの塊を蓄え、䟛絊しやすくする。

このガむドはDe VoorhoedeによるRiotJS Style Guideに刺激を受け䜜られたした。

目次

モゞュヌルベヌスの開発

垞に単䞀の機胜を持぀小さなモゞュヌルからアプリケヌションを構築したしょう。

モゞュヌルはアプリケヌションの自己完結型の小さな郚品です。特にVue.jsラむブラリはあなたがview-logicなモゞュヌルを䜜れるように蚭蚈されおいたす。

理由

小さなモゞュヌルにするこずで、あなたず他の開発者䞡方にずっお、孊びやすく、理解しやすく、維持しやすく、再利甚しやすく、そしお、 デバッグしやすくなりたす。

方法

各Vueコンポヌネントモゞュヌルのようなものは FIRST: ひず぀のこずに集䞭し (Focused (単䞀責任))、独立しおいお(Independent)、 再利甚可胜で(Reusable)、小さく(Small) そしおテスト可胜 (Testable)でなければなりたせん。

もしあなたのコンポヌネントが倚くのこずをしおいお倧きすぎる堎合、ひず぀のこずだけをする、より小さなコンポヌネントに分けたしょう。 経隓則から蚀うず、各コンポヌネントは行以䞋のコヌドになるようにするのがいいでしょう。たた、䟋えばスタンドアロヌンのデモを远加するこずによっお、 Vueコンポヌネントが独立しお動䜜するこずを確認したしょう。

↑ 目次に戻る

Vueコンポヌネントの名前

各コンポヌネントの名前は、

  • 意味のある名前で: 具䜓的過ぎず、抜象的過ぎず。
  • 短く: たたは語。
  • 発音可胜: それらに぀いお話せるようにしたい。

であるべきです。

さらにVueコンポヌネントの名前は、

  • カスタム芁玠仕様に準拠: ハむフンを含み、 予玄語は䜿甚しない。
  • app- ネヌムスペヌス: 非垞に汎甚的、あるいは語であれば、他のプロゞェクトでも容易に再利甚できる。

であるべきです。

理由

  • 名前は、コンポヌネントに぀いお䌚話するずきに䜿甚されたす。したがっお、それは短く、意味があり、発音可胜でなければなりたせん。

方法

<!-- 掚奚 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<!-- 非掚奚 -->
<btn-group></btn-group> <!-- 短いですが, 発音が困難です。代わりに`button-group`を䜿いたしょう -->
<ui-slider></ui-slider> <!-- 党おコンポヌネントはuiなので、䞭身を衚しおいたせん -->
<slider></slider> <!-- カスタム芁玠仕様に準拠しおいたせん -->

↑ 目次に戻る

コンポヌネントの蚘述をシンプルに保぀

Vue.jsのむンラむンの蚘述は100JavaScriptです。これは非垞に匷力なこずですが、耇雑になる可胜性もあるずいうこずです。 ですので、シンプルな蚘述を保぀ようにしたしょう。.

理由

  • 耇雑なむンラむンの蚘述は刀読困難です。
  • むンラむンの蚘述は他の堎所で再利甚できたせん。これはコヌドの重耇ず腐敗に぀ながりたす。
  • IDEは基本的に匏の構文サポヌト機胜を持っおいないため、自動補完や怜蚌を行うこずができたせん。

方法

もしあたりにも耇雑だったり、刀読困難な堎合はメ゜ッド、たたはcomputedプロパティに移動させたしょう!

<!-- 掚奚 -->
<template>
  <h1>
    {{ `${year}-${month}` }}
  </h1>
</template>
<script type="text/javascript">
  export default {
    computed: {
      month() {
        return this.twoDigits((new Date()).getUTCMonth() + 1);
      },
      year() {
        return (new Date()).getUTCFullYear();
      }
    },
    methods: {
      twoDigits(num) {
        return ('0' + num).slice(-2);
      }
    },
  };
</script>

<!-- 非掚奚 -->
<template>
  <h1>
    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
  </h1>
</template>

↑ 目次に戻る

コンポヌネントのpropsをプリミティブに保぀

Vue.jsは耇雑なJavaScriptオブゞェクトを枡せるようになっおいたすが, コンポヌネントのpropsはできるだけプリミティブに保぀ ようにするべきです。耇雑なオブゞェクトの䜿甚を避け、JavaScriptプリミティブず関数のみを䜿うようにしたしょう。

理由

  • 各propの属性を別々に䜿甚するこずにより、コンポヌネントは明確で衚珟力豊かなAPIを持぀こずになりたす。
  • propsの倀ずしおプリミティブずファンクションのみを䜿甚するこずで、コンポヌネントのAPIをネむティブHTML5のAPIに䌌たものにできたす。
  • 各propの属性を䜿甚するこずで、他の開発者がコンポヌネントむンスタンスに䜕が枡されるかを理解しやすくなりたす。
  • 耇雑なオブゞェクトが枡されるず、そのオブゞェクトのどのプロパティずメ゜ッドが実際にカスタムコンポヌネントで䜿われるかがわかりにくくなりたす。これによりコヌドのリファクタリングが難しくなり、腐敗を招くこずになりたす。

方法

プリミティブたたは関数を倀ずしたpropsごずのコンポヌネント属性を䜿甚したす。

<!-- 掚奚 -->
<range-slider
  :values="[10, 20]"
  min="0"
  max="100"
  step="5"
  :on-slide="updateInputs"
  :on-end="updateResults">
</range-slider>

<!-- 非掚奚 -->
<range-slider :config="complexConfigObject"></range-slider>

↑ 目次に戻る

コンポヌネントのpropsの利甚

Vue.jsでは、あなたのコンポヌネントのpropsはあなたのAPIです。頑䞈で予枬しやすいAPIは、他の開発者があなたのコンポヌネントを䜿甚するのを簡単にしたす。

コンポヌネントのpropsはカスタムHTML属性を介しお枡されたす。 これらの属性の倀はVue.jsプレヌンストリング (:attr="倀" たたは v-bind:attr="倀")か、たたは無いこずもありたす。 あなたは コンポヌネントのpropsを利甚 しお、それらの異なるケヌスに察応できるようにしたしょう。

理由

コンポヌネントのpropsを利甚するこずで、あなたのコンポヌネントを垞に機胜するようになりたす防埡的プログラミング。それは埌で他の開発者が、あなたが想定しおいない方法でコンポヌネントを䜿甚する堎合でもです。

方法

  • propsのデフォルト倀を䜿甚したす。
  • 期埅するタむプの倀の怜蚌のために、typeオプションを䜿甚したす。[1*]
  • 䜿甚される前にpropsが存圚するかチェックしたす。
<template>
  <input type="range" v-model="value" :max="max" :min="min">
</template>
<script type="text/javascript">
  export default {
    props: {
      max: {
        type: Number, // [1*] これは'max'propが数倀であるこずを怜蚌したす。
        default() { return 10; },
      },
      min: {
        type: Number,
        default() { return 0; },
      },
      value: {
        type: Number,
        default() { return 4; },
      },
    },
  };
</script>

↑ 目次に戻る

thisをcomponentに割り圓おる

Vue.jsコンポヌネントのコンテキスト内では、 thisはコンポヌネントむンスタンスにバむンドされおいたす。 したがっお、別のコンテキストで参照する必芁がある堎合は、 this がcomponentずしお䜿甚できるこずを確認しおください。

蚀い換えれば: const self = this;のようなコヌディングはもう しないで ください。 Vueコンポヌネントの䜿甚は安党です。

理由

  • ES6を䜿っおいる堎合、thisを倉数に保存しおおく必芁はありたせん。
  • 通垞、アロヌ関数を䜿甚すれば静的スコヌプは保持されたす。
  • ES6を䜿甚しおいないために、アロヌ関数を䜿甚できない堎合は、thisを倉数に栌玍する必芁がありたす。それが唯䞀の䟋倖です。

方法

<script type="text/javascript">
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      console.log(this.hello());
    },
  },
};
</script>

<!-- 非掚奚 -->
<script type="text/javascript">
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      const self = this; // 䞍芁
      console.log(self.hello());
    },
  },
};
</script>

↑ 目次に戻る

コンポヌネント構成

論理的に考えやすく、思考の流れに埓いやすいようにしたしょう. 方法を芋おください。

理由

  • コンポヌネントを明確か぀グルヌプ化されたオブゞェクトずするこずで、コヌドを読みやすくし、開発者はコヌドの基準を簡単に持おるようになりたす。
  • props、data、computed、watches、そしおmethodsをアルファベット順に䞊べるこずで、芋぀けやすくなりたす。
  • 繰り返しになりたすが, コンポヌネントをグルヌプ化するこずで読みやすくなりたす (name、extends、props、dataそしおcomputed、components、 watch、methods、lifecycle methods、など);
  • name属性を䜿いたしょう. vue devtoolsずname属性を䜿うず、開発/テストが容易になりたす。
  • BEM、たたは rscssのようなCSSの呜名方法論を䜿いたしょう。 - 詳现?;
  • Vue.jsの補䜜者Evan Youが掚奚するように、テンプレヌトスクリプト圢匏の.vueファむル構成を䜿甚したしょう。

方法

コンポヌネンのト構成:

<template lang="html">
  <div class="Ranger__Wrapper">
    <!-- ... -->
  </div>
</template>

<script type="text/javascript">
  export default {
    // このちいさな芁玠を忘れないでください
    name: 'RangeSlider',
    // 新しいコンポヌネントを合成したす
    extends: {},
    // コンポヌネントのプロパティ/倀
    props: {
      bar: {}, // アルファベット順
      foo: {},
      fooBar: {},
    },
    // 倉数
    data() {},
    computed: {},
    // 他のコンポヌネントを䜿甚
    components: {},
    // メ゜ッド
    watch: {},
    methods: {},
    // コンポヌネントラむフサむクルフック
    beforeCreate() {},
    mounted() {},
};
</script>

<style scoped>
  .Ranger__Wrapper { /* ... */ }
</style>

↑ 目次に戻る

コンポヌネントむベント名

Vue.jsはすべおのVueハンドラ関数を提䟛し、匏はViewModelに厳密にバむンドされおいたす。各コンポヌネントのむベントは、開発䞭の問題を回避するような良い名前付けのスタむルを適甚したしょう。 以䞋の 理由 を参照しおください。

理由

  • 開発者は奜きなむベント名を自由に䜿うこずができるため、混乱を招く可胜性がありたす。
  • むベントに名前を぀ける自由は、 DOMテンプレヌトの非互換性に぀ながる可胜性がありたす。

方法

  • むベント名前はケバブケヌスにするべきです。
  • あなたのコンポヌネントで倖郚で関心を持぀独自のアクションのため、upload-success、upload-error、さらにはdropzone-upload-success、 dropzone-upload-errorのような固有の名前を぀ける必芁がありたす。(スコヌプ付きプレフィックスを䜿甚する必芁がある堎合は)
  • むベント名は末尟が䞍定圢の動詞(䟋 client-api-load)、たたは名詞(䟋 drive-upload-success)で終わるべきです。(出兞);

↑ 目次に戻る

this.$parentを避ける

Vue.jsは、芪コンテキストにアクセスできるネストされたコンポヌネントをサポヌトしおいたす。 あなたのVueコンポヌネントの倖郚のコンテキストにアクセスするこずは、 モゞュヌルベヌスの開発のFIRSTのルヌルに違反するため、 ** this.$parentの䜿甚を避ける ** べきです。

理由

  • vueコンポヌネントは、他のコンポヌネントず同様に、独立しお動䜜する必芁がありたす。 コンポヌネントがその芪にアクセスする必芁がある堎合、このルヌルは壊されたす。
  • コンポヌネントがその芪にアクセスする必芁がある堎合、別のコンテキストで再利甚するこずはできたせん。

方法

  • 属性/プロパティを䜿甚しお、芪から子コンポヌネントに倀を枡したす。
  • 属性の匏のコヌルバックを䜿甚しお、芪コンポヌネントで定矩されたメ゜ッドを子コンポヌネントに枡したす。
  • 子コンポヌネントからむベントを発行し、それを芪コンポヌネントでキャッチしたす。

↑ 目次に戻る

this.$refsは泚意しお䜿甚する

Vue.jsはref属性を介しお他のコンポヌネントや、基本的なHTML芁玠のコンテキストにアクセスできるコンポヌネントをサポヌトしおいたす。この属性はthis.$refsを介しお、コンポヌネントたたDOM芁玠のコンテキストにアクセス可胜な方法を提䟛したす。ほずんどの堎合、 this.$refsを介しお 他のコンポヌネント のコンテキストにアクセスする必芁性は避けるこずができたす。このため、間違ったコンポヌネントAPIを避けるためにこれを䜿甚するずきは泚意が必芁です。

理由

  • vueコンポヌネントは、他のコンポヌネントず同様に、独立しお動䜜する必芁がありたす。 コンポヌネントが必芁なすべおのアクセスをサポヌトしおいない堎合、それは悪い蚭蚈/実装です。
  • ほずんどのコンポヌネントでは、プロパティずむベントで十分です。

方法

  • 良いコンポヌネントAPIを䜜りたしょう。
  • 独創的なコンポヌネントの目的に垞に泚意しおください。
  • 特殊なコヌドを曞かないでください。ゞェネリックコンポヌネント内に特殊なコヌドを蚘述する必芁がある堎合は、APIが十分に䞀般的でないか、他のケヌスを管理するために新しいコンポヌネントが必芁になるずいうこずです。
  • すべおのpropsをチェックしお、欠けおいるものがあるかどうか確認したす。 もしあれば、課題を䜜成するかあなたのコンポヌネントを匷化したしょう。
  • すべおのむベントをチェックしたしょう。ほずんどのケヌスで、開発者は子-芪のコミュニケヌションむベントが必芁であるこずを忘れおしたいたす。 そのため、propsを䜿甚した芪-子のコミュニケヌションだけを芚えおいるのです。
  • Propsは䞋ぞ、eventsは䞊ぞ! ゎヌルずしお良いAPIず分離を芁求された堎合、コンポヌネントをアップグレヌドしたしょう。
  • propsやeventsが消耗し、コンポヌネントでのthis.$refsの利甚が利にかなっおいるずきは、それを䜿甚するべきです。 (䞋の䟋を参照しおください).
  • デヌタバむンディングやディレクティブで芁玠を操䜜できない堎合、 (jQuery, document.getElement*, document.queryElementの代わりに) this.$refsを䜿甚しおDOM芁玠にアクセスするこずは良い方法です。
<!-- 良いです。refは必芁ありたせん。 -->
<range :max="max"
  :min="min"
  @current-value="currentValue"
  :step="1"></range>
<!-- this.$refsを䜿甚する堎合の良い䟋です。 -->
<modal ref="basicModal">
  <h4>Basic Modal</h4>
  <button class="primary" @click="$refs.basicModal.hide()">Close</button>
</modal>
<button @click="$refs.basicModal.open()">Open modal</button>

<!-- モヌダルコンポヌネント -->
<template>
  <div v-show="active">
    <!-- ... -->
  </div>
</template>

<script>
  export default {
    // ...
    data() {
        return {
            active: false,
        };
    },
    methods: {
      open() {
        this.active = true;
      },
      hide() {
        this.active = false;
      },
    },
    // ...
  };
</script>
<!-- 発行される可胜性のあるものぞのアクセスは避けたしょう -->
<template>
  <range :max="max"
    :min="min"
    ref="range"
    :step="1"></range>
</template>

<script>
  export default {
    // ...
    methods: {
      getRangeCurrentValue() {
        return this.$refs.range.currentValue;
      },
    },
    // ...
  };
</script>

↑ 目次に戻る

スタむルスコヌプずしおコンポヌネント名を䜿甚する

Vue.jsのコンポヌネント芁玠は、スタむルスコヌプのルヌトずしお非垞によく䜿甚されるカスタム芁玠です。 あるいは、コンポヌネント名はCSSクラスネヌムスペヌスずしお、䜿甚できたす。

理由

  • コンポヌネント芁玠のスタむルをスコヌプするず、コンポヌネントの倖にスタむルが挏れるのを防ぐため、予枬可胜性が向䞊したす。

  • モゞュヌルディレクトリに同じ名前を䜿甚するず、Vue.jsコンポヌネントずスタむルルヌトが同じずころに属しおいるこずを開発者が理解しやすくなりたす。

方法

BEMずOOCSSに基づくネヌムスペヌスプレフィックスずしおコンポヌネント名を䜿いたしょう。 そしお スタむルクラスでscoped属性を䜿いたしょう。 scopedを䜿甚するず、<style>にあるすべおのクラスにシグネチャを远加するようVueコンパむラに指瀺したす。このシグネチャは、コンポヌネントを構成するすべおのタグにコンポヌネントCSSを適甚するようブラりザにサポヌトしおいる堎合匷制し、CSSのスタむリングが挏れないようにしたす。

<style scoped>
  /* 掚奚 */
  .MyExample { }
  .MyExample li { }
  .MyExample__item { }

  /* 非掚奚 */
  .My-Example { } /* コンポヌネント名たたはモゞュヌル名にスコヌプされおおらず、BEM準拠でもありたせん */
</style>

↑ 目次に戻る

コンポヌネントAPIをドキュメント化する

Vue.jsコンポヌネントのむンスタンスは、アプリケヌション内のコンポヌネント芁玠を䜿甚しお䜜成されたす。むンスタンスはそのカスタム属性によっお構成されたす。他の開発者がコンポヌネントを䜿甚するずきのため、これらのカスタム属性コンポヌネントのAPIをREADME.mdファむルに蚘述したしょう。

理由

  • ドキュメンテヌションは、開発者に、そのコヌドのすべおを䌝えるこずなく、コンポヌネントの抂芁を高レベルで衚瀺したす。これにより、コンポヌネントのアクセスが容易になり、䜿いやすくなりたす。
  • コンポヌネントのAPIは、それを構成するカスタム属性のセットです。したがっお、これらは、コンポヌネントを䜿甚する開発しない開発者にずっお特に重芁です。
  • ドキュメンテヌションはAPIを圢匏化し、コンポヌネントのコヌドを倉曎するずきに䞋䜍互換性を維持する機胜を開発者に教えたす。
  • README.mdは最初に読み蟌たれるドキュメントのデファクトスタンダヌドファむル名です。 コヌドリポゞトリホスティングサヌビスGithub、Bitbucket、Gitlabなどは、゜ヌスディレクトリを参照するずきに、READMEファむルの内容を盎接衚瀺したす。これは私たちのモゞュヌルディレクトリにも圓おはたりたす。

方法

コンポヌネントのモゞュヌルディレクトリにREADME.mdファむルを远加したしょう。

range-slider/
├── range-slider.vue
├── range-slider.less
└── README.md

READMEファむルに、モゞュヌルの機胜ず䜿甚方法を蚘述したしょう。 vueコンポヌネントの堎合、APIずしおサポヌトされおいるカスタム属性を蚘述するのが最も圹立ちたす。

Range slider

機胜

range sliderは、スラむダヌレヌルのハンドルを開始倀ず終了倀の䞡方でドラッグしお数倀範囲を蚭定できたす。

このモゞュヌルはクロスブラりザずタッチサポヌトのため、noUiSliderを䜿甚したす。

䜿甚方法

<range-slider> 次のカスタムコンポヌネント属性をサポヌトしおいたす:

属性 型 説明
min 数倀 レンゞの始たりの数倀 (例限)。
max 数倀 レンゞの終わりの数倀 (侊限).
values 数倀[] 任意 開始倀ず終了倀を含む配列。 䟋. values="[10, 20]". デフォルトは[opts.min, opts.max].
step 数倀 任意 むンクリメント/デクリメントの数倀。デフォルトは1。
on-slide 関数 任意 ナヌザヌが開始HANDLE == 0たたは終了HANDLE == 1ハンドルをドラッグしおいるずきに、(values, HANDLE)で呌び出される関数。䟋. on-slide={ updateInputs } component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }.
on-end 関数 任意 ナヌザヌがハンドルのドラッグを停止したずき、(values, HANDLE)で呌び出される関数。

スラむダの倖芳をカスタマむズするにはnoUiSliderドキュメントのStylingセクションを参照しおください。

↑ 目次に戻る

コンポヌネントデモの远加

構成の異なるコンポヌネントのデモを含むindex.htmlファむルを远加し、コンポヌネントの䜿甚方法を瀺したしょう。

理由

  • コンポヌネントのデモは、コンポヌネントが単独で動䜜するこずを瀺したす。
  • コンポヌネントのデモは、ドキュメンテヌションやコヌドを掘り起こす前に、開発者にプレビュヌを提䟛したす。
  • デモでは、コンポヌネントを䜿甚できるすべおの可胜な構成ずバリ゚ヌションを瀺すこずができたす。

↑ 目次に戻る

コンポヌネントファむルをLintする

Lintersはコヌドの䞀貫性を高め、構文゚ラヌの远跡に圹立ちたす。.vueファむルはプロゞェクトにeslint-plugin-htmlを远加しおlintするこずができたす。vue-cliを䜿甚すれば、ESLintをデフォルトで有効にしおプロゞェクトを開始できたす。

理由

  • コンポヌネントファむルのLintは、すべおの開発者が同じコヌドスタむルを䜿甚するようにしたす。
  • コンポヌネントファむルのLintは、遅くなる前に構文゚ラヌの远跡をするのに圹立ちたす。

方法

lintersがあなたの*.vueファむルからスクリプトを抜出するためには, スクリプトを<script>コンポヌネントの䞭に眮き、 コンポヌネントの蚘述をシンプルに保぀ようにしおください (lintersはそれらを理解できないので)。 グロヌバル倉数vueずコンポヌネントのpropsを蚱可するようにリンタヌを蚭定したす。

ESLint

ESLintには、コンポヌネントファむルからスクリプトを抜出するための远加のESLint HTML pluginが必芁です。

ESLintを.eslintrcファむルに蚭定したす。(IDEもそれを解釈するこずができたす):

{
  "extends": "eslint:recommended",
  "plugins": ["html"],
  "env": {
    "browser": true
  },
  "globals": {
    "opts": true,
    "vue": true
  }
}

ESLint実行

eslint src/**/*.vue

JSHint

JSHintは (--extra-extを䜿甚しお)HTMLをパヌスでき、(--extract=autoを䜿甚しお)スクリプトを抜出できたす。

JSHintを.jshintrcファむルに蚭定したす。 (IDEもそれを解釈するこずができたす):

{
  "browser": true,
  "predef": ["opts", "vue"]
}

JSHint実行

jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/

泚意: JSHintはvueを拡匵子ずしお受け入れず, htmlだけを受け入れたす。

↑ 目次に戻る

必芁に応じおコンポヌネントを䜜成する

理由

Vue.jsはコンポヌネントフレヌムワヌクに基づいおいたす。コンポヌネントの䜜成タむミングを知らないず、次のような問題が発生する可胜性がありたす。

  • コンポヌネントが倧きすぎる堎合は、おそらく再䜿甚し、維持するこずは困難です。
  • コンポヌネントが小さすぎるず、プロゞェクトが浞氎し、コンポヌネント間の通信が困難になりたす。

方法

  • あなたのプロゞェクトのニヌズに合わせおコンポヌネントを構築するこずを垞に忘れないでください。しかし、それらのコンポヌネントが取り出せるず考えるようにしおください。ラむブラリのようにプロゞェクトから取り出せれば、より堅牢で䞀貫性のあるものになりたす。
  • 既存のコンポヌネントや安定したコンポヌネントにコミュニケヌションpropsやeventsを組み蟌むこずができるため、できるだけ早くコンポヌネントを構築する方が良いでしょう。

ルヌル

  • たず、できるだけ早くモヌダル、ポップオヌバヌ、ツヌルバヌ、メニュヌ、ヘッダヌなどの明癜なコンポヌネントを䜜成しおみおください。あなたの珟圚のペヌゞ、たたは党䜓的に、あなたが埌で必芁ずなるこずをあなたが知っおいるコンポヌネントを。
  • 第に、新しい開発ごずに、ペヌゞ党䜓たたはその䞀郚分に぀いお、急いで開発する前に考えおみおください。その䞀郚がコンポヌネントであるこずが分かっおいる堎合は、䜜成しおください。
  • 最埌に、もし確信がなければ、コンポヌネントを䜜らないでください"埌で圹立぀かもしれない"コンポヌネントであなたのプロゞェクトを汚染するのを避けたしょう。それらは空っぜで、氞遠にそこにあるだけかもしれたせん。プロゞェクトの残りの郚分ずの互換性の耇雑さを避けるために、その状態になっおいたこずに気づいたらすぐにそれを分解するよう泚意しおください。

↑ 目次に戻る

貢献するには

フォヌクしおプルリク゚ストを送るか、Issueを䜜っおください。

翻蚳è€