🔥 Vue のヒント #26: 6 レベルのコンポーネントの再利用性

このニュースレターは、2021 年 9 月 15 日に私のリストに送信されました.Sign up here このようなメールを毎週受け取るには!

へよ、

Nuxt Nation は今日開催されます (このメールを開く時期によっては、今すぐかもしれません).

アクションの一部をまだキャッチできる可能性があります: Nuxt Nation

それまでの間、ここにいくつかのヒントがあります.

— マイケル

🔥 6段階の再利用性

reusable components に関する私のコースでは、このフレームワークを取り上げており、コンポーネントで使用できる 6 つの異なるレベルの再利用性について概説しています.

再利用性の 6 つのレベルは次のとおりです.

テンプレート — コンポーネント内にコードをラップして再利用する

構成 — さまざまな動作を可能にする構成プロップの使用

適応性 — コンポーネントを将来的に保証できるようにする

反転 - 他のコンポーネントにプロセスを制御させる

拡張 — コンポーネント全体で再利用性を使用する

ネスティング — コンポーネントの強力な階層の作成

これについては、this excerpt from the course で詳しく説明します.

🔥 グリッド テンプレート エリア

複雑なレイアウトが複雑な場合もあります.しかし、 grid-template-areas を使用すると役に立ちます!

<section>
  <header>Page header</header>
  <nav>Nav bar</nav>
  <main>Content goes here!</main>
  <footer>Not for your feet</footer>
</section>

この HTML では、最初に各要素に grid-area 個の名前を付けます.

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

これで、レイアウトを説明できます.

section {
  /* ... some other CSS grid set up here */
  grid-template-areas: "header header"
                       "nav    main"
                       "footer footer";
}

また、モバイル用に 1 列のレイアウトが必要な場合 (楽しみのために下部にナビゲーションを配置):

section {
  grid-template-areas: "header"
                       "main"
                       "nav"
                       "footer";
}

ページが grid-template-areas でどのようにレイアウトされているかを正確に確認するのは非常に簡単です.

📜 Vue で役立つパターン

コンポーネント階層をフラットにするためにカスタム要素を使用することに私は同意しませんが、Brennan はこの記事で役に立つヒントとパターンをたくさん紹介しています.

いつもローディング状態のものを使っています.

ここでそれを読んでください:

🗞 ニュース: Nuxt Nation は今日

Don't miss it!

また、今後 2 か月以内にさらに 3 つのカンファレンスが予定されており、すべてオンラインでアクセスでき、2 つの (限定的な) 対面体験が提供されます.

Vuejs Global (Amsterdam) — 10 月 1 日と 4 日 — アムステルダムおよびオンライン

Vue.js Conference (London) — 10 月 20 ～ 21 日 — ロンドンおよびオンライン

VueConf Toronto — 11 月 22～23 日 — 無料 + オンライン

💬 2種類の言語

「言語には 2 種類しかありません.人々が不平を言う言語と、誰も使用しない言語です.」 — ビャルネ・ストロストラップ

🧠 間隔反復: Vue Testing Library

何かを長期記憶に定着させる最善の方法は、定期的に復習することです.

実際にこれらのヒントを思い出すことは、単に気を散らすだけでなく、はるかに役立つので、数週間前のヒントを思い出してください.

私のお気に入りのテスト ツールの 1 つは Vue Testing Library です.

test('displays correct text', () => {
  const { getByText } = render(MyComponent);
  getByText(/Fail the test if this text doesn't exist/);
})

これは vue-test-utils の上に構築されているため、ユーザーが実際にアプリを操作する方法に近いテストを簡単に作成できます.

ユーザーは特定のテキストを探すか、クリックするボタンを探します.彼らは nth child of a div with the class .booking-card-container を探しません.

この方法でテストを作成すると、テストが理解しやすくなり、作成が簡単になり、コードの変更に対してより堅牢になります.このテストは実装に関係していないため、重いリファクタリングを行っても問題が発生する可能性は低いです.

このアイデアが初めての場合は、テスト ライブラリ guiding principles の詳細を読むことを強くお勧めします.

毎週限定のヒントと洞察

毎週、8135 人の他の Vue 開発者と、これらのような get exclusive tips and insights 人があなたの受信トレイに直接配信されます.

You have great content in your emails. I seriously learn something from every one of them. — Titus Decali

Thanks for another beautiful tip 🙏 — Victor Onuoha

Loving these, and the spaced repetition — Mark Goldstein

Sign up here