Design Systems & Component Libraries · レッスン

アプリケーションでのコンポーネント利用

さまざまなアプリケーションの状況やフレームワークで、デザインシステムのコンポーネントを効果的にimportして利用する方法を学びます。

「アプリケーションでのコンポーネント利用」はCoddyKit上の無料Design Systems & Component Librariesレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはDesign Systems & Component Libraries学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Design Systems & Component Librariesコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Welcome to Component Consumption!

So you've got a shiny new design system! But how do you actually use those beautiful, pre-built components in your apps?

This lesson will show you how to integrate and utilize components from a design system, making your development process smoother and your UIs more consistent.

The Power of Reusability

Consuming design system components isn't just about making your app look good; it's about efficiency and consistency.

Speed: Build features faster by using pre-made UI blocks.
Consistency: Ensure a unified look and feel across all your products.
Quality: Components are often tested and accessible by default.
Maintainability: Updates to the design system propagate easily.

How Components Are Delivered

Design system components are typically published as packages, similar to other libraries you might use.

These packages are usually distributed via a package manager like npm (Node Package Manager) or Yarn. This allows developers to easily install and update them.

Think of it like an app store for code!

Getting Your Design System Ready

Before you can use components, you need to install the design system package into your project. This is usually a simple command in your terminal.

For example, if your design system components are published under @my-ds/components, you'd run:

npm install @my-ds/components

This command downloads the component library and makes it available to your application.

Bringing Components into Your Code

Once installed, you can import specific components into your application's files. This makes them available for use in your UI.

Imagine you have a Button and a Card component:

import Button from '@my-ds/button';
import Card from '@my-ds/card';

function main() {
  console.log("Components imported successfully!");
  console.log("Ready to use Button and Card in your UI.");
}

main();

Placing Components on the Screen

After importing, you can use the components directly in your application's UI code (e.g., JSX in React, templates in Vue/Angular).

Components often accept props (properties) to customize their appearance or behavior.

import Button from '@my-ds/button';

function renderApp() {
  // In a real app, this would return UI elements.
  // Here, we simulate rendering a primary button.
  const primaryButton = `<button class="ds-button ds-button--primary">Submit</button>`;
  console.log("Rendered a primary button (conceptually):");
  console.log(primaryButton);

  // And a secondary button
  const secondaryButton = `<button class="ds-button ds-button--secondary">Cancel</button>`;
  console.log("Rendered a secondary button (conceptually):");
  console.log(secondaryButton);
}

function main() {
  renderApp();
}

main();

Making Components Interactive

Many components respond to user interactions like clicks, input changes, or hovers. You can attach event handlers to run your own code when these events occur.

This allows your application to react to user actions and update its state.

import Button from '@my-ds/button';

function handleClick() {
  console.log("Button was clicked! Action performed.");
}

function renderApp() {
  // Imagine this button has an onClick prop that calls handleClick
  const interactiveButton = `<button class="ds-button" onclick="handleClick()">Click Me</button>`;
  console.log("Simulating a button click:");
  handleClick(); // Call the handler directly to show its effect
  console.log("Interactive button (conceptually):", interactiveButton);
}

function main() {
  renderApp();
}

main();

How Styles Are Applied

Design system components come with their own styles. How these styles are applied depends on the system:

Global CSS: Styles are loaded once for the whole app.
CSS-in-JS: Styles are coupled directly with components.
Utility classes: Components might expose classes for further customization.

Often, you just import a main stylesheet once, or styles are automatically included with the components themselves.

Global Settings for Components

Some design systems use Context or Providers to manage global settings like themes (light/dark mode), language, or user preferences.

You might wrap your application with a ThemeProvider component to make theme settings available to all components within it, without passing props repeatedly.

Test Your Knowledge

You've learned how to bring design system components into your application and use them.

Which of the following commands is typically used to install a design system component library published as an npm package?

Consuming Components: A Summary

Great job! You've learned the essentials of consuming design system components:

Installing component packages via npm/Yarn.
Importing components into your application.
Using components with props and event handlers.
Understanding how styles and global contexts work.

By leveraging design system components, you build better, more consistent UIs faster. Next, we'll look at handling overrides and customizations.

よくある質問

「アプリケーションでのコンポーネント利用」レッスンは無料ですか？

はい。「アプリケーションでのコンポーネント利用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Design Systems & Component Librariesコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Design Systems & Component Librariesコースには全4レッスンが含まれています。

「アプリケーションでのコンポーネント利用」で何を学びますか？

さまざまなアプリケーションの状況やフレームワークで、デザインシステムのコンポーネントを効果的にimportして利用する方法を学びます。ブラウザで直接実行するハンズオンコードでDesign Systems & Component Librariesを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Design Systems & Component Librariesを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのDesign Systems & Component Librariesは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「アプリケーションでのコンポーネント利用」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このDesign Systems & Component Librariesレッスンでコードを書いて実行できますか？

はい。すべてのDesign Systems & Component Librariesレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Design Systems & Component Librariesに戻る