api-debugging

React.jsでShadcn/UIを使う方法

shimizu chioka

Updated on 2024年9月6日 5分読む

モダンで洗練されたユーザーインターフェースを構築することは、フロントエンド開発者の主な目標の一つであり、コンポーネントライブラリの普及により、その作業はさらに簡単になりました。今日は、Shadcn/UI、強力でカスタマイズ可能なコンポーネントライブラリをReact.jsのために紹介します。React.jsが初めての方でも、経験豊富な開発者でも、Shadcn/UIは通常の大規模フレームワークの無駄を排除しつつ、アプリのデザインを向上させることができます。さらに、設定のステップバイステップをお手伝いし、APIや、開発をスムーズにするためのツールのApidogの活用方法についても説明します。

この投稿の終わりまでに、あなたのReact.jsプロジェクトでShadcn/UIを使用する方法について、明確な理解を持つことができるでしょう。また、独自のAPIを構築している場合や、他のAPIで作業している場合は、Apidogを無料でダウンロードすることを忘れないでください—APIのテストや開発を行う際の救世主です。

ボタン

では、始めましょう！

Shadcn/UIとは？

設定に入る前に、まずShadcn/UIが何であり、なぜあなたのReact.jsプロジェクトにとって優れた選択肢なのかを定義しましょう。

Shadcn/UIは、特にReact.jsのために構築されたカスタマイズ可能なコンポーネントライブラリです。Material UIやBootstrapのような大規模フレームワークとは異なり、Shadcn/UIはコンポーネントの外観や感触をよりコントロールできることに重点を置いています。基本的なビルディングブロックを提供し、事前定義されたテーマに縛られることなく、独自のインターフェースを作成することができます。

なぜShadcn/UIなのか？

軽量：使用しないコンポーネントをたくさんバンドルするような重いライブラリとは異なり、Shadcn/UIは必要なものだけを提供します。
カスタマイズ可能：プロジェクトのユニークな要件に従って、コンポーネントのスタイルや構造を調整できます。
React.js用に最適化：React.jsとのシームレスな統合により、設定を調整するのではなく、コードを書くことに集中できます。
API対応：このライブラリはApidogのようなAPIツールと互換性があり、Reactアプリ内でAPIエンドポイントを管理・テストしやすくなります。

ステップバイステップガイド：Shadcn/UIをReact.jsプロジェクトで使用する方法

Shadcn/UIが何であるかを理解したので、これをReact.jsプロジェクトに統合するステップバイステップのプロセスを見ていきましょう。このガイドでは、あなたがReactの基本を既に理解していること、そしてあなたのマシンにNode.jsがインストールされていることを前提としています。

1. 新しいReact.jsプロジェクトを作成する

すでにReact.jsプロジェクトが設定されている場合は、このステップをスキップできます。それ以外の場合は、以下のコマンドを使用して新しいプロジェクトを作成できます：

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

これにより、my-shadcn-ui-appという名前の新しいReact.jsプロジェクトが作成され、開発サーバーが開始されます。これで、デフォルトのReactアプリが稼働しているのを確認できるはずです。

2. Shadcn/UIをインストールする

プロジェクトに手動で依存関係を追加します。

Tailwind CSSを追加する

コンポーネントはTailwind CSSを使用してスタイルが定義されています。プロジェクトにTailwind CSSをインストールする必要があります。

Tailwind CSSのインストール手順に従って、始めましょう。

依存関係を追加する

プロジェクトに以下の依存関係を追加します：

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

アイコンライブラリを追加する

defaultスタイルを使用している場合は、lucide-reactをインストールします：

npm install lucide-react

new-yorkスタイルを使用している場合は、@radix-ui/react-iconsをインストールします：

npm install @radix-ui/react-icons

パスエイリアスを設定する

@エイリアスを使用しています。tsconfig.jsonで以下のように設定します：tsconfig.json

{
  "compilerOptions": {   
	"baseUrl": ".",
        "paths": {
        "@/*": ["./*"]
        }
    }
}

@エイリアスは好みに応じたものです。他のエイリアスを使用することもできます。

~のような異なるエイリアスを使用している場合は、コンポーネントを追加する際にインポートステートメントを更新する必要があります。

これで、プロジェクトにコンポーネントを追加し始めることができます。

3. Shadcn/UIコンポーネントをインポートして使用する

楽しい部分に飛び込みましょう—あなたのReact.jsアプリにいくつかのShadcn/UIコンポーネントを追加します。あなたのsrc/App.jsファイルで、Shadcn/UIのコンポーネントの一つであるボタンコンポーネントをインポートして使用することから始めます。

以下はその例です：

import React from 'react';
import { Button } from 'shadcn-ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>ようこそ、私のShadcn/UIアプリへ</h1>
        <Button variant="primary">クリックしてね！</Button>
      </header>
    </div>
  );
}

export default App;

Shadcn/UIのButtonコンポーネントがインポートされ、Appコンポーネントで使用されています。さまざまなpropsを使用してカスタマイズできます。この場合、ボタンにプライマリスタイリングを与えるために、variant="primary"プロップを使用しています。

4. Shadcn/UIテーマをカスタマイズする

Shadcn/UIの最も優れた点の一つは、そのカスタマイズ性です。コンポーネントを調整して、アプリの独自のデザイン言語に合わせることができます。

Shadcn/UIでは、グローバルに適用できるカスタムテーマを定義できます。以下の手順で行います：

a) カスタムテーマファイルを作成する

まず、srcディレクトリにtheme.jsという新しいファイルを作成します。このファイルで、次のようにカスタムテーマを定義します：

const theme = {
  colors: {
    primary: '#ff6347', // トマト色
    secondary: '#4caf50', // 緑色
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Georgia, serif',
  },
};

export default theme;

b) コンポーネントにテーマを適用する

カスタムテーマが定義されたので、ThemeProviderコンポーネントを使用してコンポーネントに適用できます。次のようにsrc/App.jsファイルを更新します：

import React from 'react';
import { Button, ThemeProvider } from 'shadcn-ui';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
          <h1>ようこそ、私のShadcn/UIアプリへ</h1>
          <Button variant="primary">クリックしてね！</Button>
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

この更新されたコードでは、Shadcn/UIからThemeProviderをインポートし、カスタムthemeをプロップとして渡してアプリ全体をラップしました。

5. Shadcn/UI + ReactプロジェクトでのApidogによるAPI管理

フロントエンドがShadcn/UIで素晴らしく見えているので、今度はAPIに接続して機能を持たせる時です。ここでApidogが役立ちます。Apidogについて聞いたことがない場合、これはAPIテスト、ドキュメント作成、および開発者間のコラボレーションを簡素化する強力なAPI管理ツールです。

なぜReact.jsアプリでApidogを使用するのか？

APIテストが簡単：Reactプロジェクト内でAPIエンドポイントをテストできます。
シームレスなコラボレーション：Apidogを使用すると、チームとAPIドキュメントを生成・共有できます。
開発を加速：APIレスポンスを簡単にモックし、開発プロセスを加速できます。

API呼び出しにApidogを使用する

たとえば、天気APIからデータを取得するReact.jsアプリを構築しているとします。ここで、API呼び出しを管理するためにApidogを使用する方法を示します：

ステップ1：Apidogを開いて、新しいリクエストを作成します。

ステップ2：テストエディタでAPIエンドポイントのURLを入力し、HTTPメソッドを選択し、必要なヘッダー、パラメーター、またはボディデータを追加します。たとえば、以前に作成したシンプルなメッセージを返すルートをテストできます：

ステップ3：送信ボタンをクリックして、テスト結果を確認します。ステータスコード、レスポンスタイム、およびAPIのレスポンスボディが表示されるはずです。たとえば、次のような結果が見えるはずです：

ApidogはAPIテストのための優れたツールで、ウェブサービスの品質、信頼性、パフォーマンスを確保するのに役立ちます。また、APIをテストするためにコードを書く必要がなく、ソフトウェアをインストールする必要もないため、時間と労力を節約することができます。ブラウザを使って、Apidogのユーザーフレンドリーなインターフェースや機能を楽しむだけで済みます。

6. Shadcn/UIとApidogをReact.jsで使用する際のベストプラクティス

Shadcn/UIとApidogを最大限に活用するために、従うべきベストプラクティスを以下に示します：

パフォーマンスを最適化する：バンドルサイズを小さく保つために、必要なShadcn/UIコンポーネントのみを使用します。
コンポーネントをモジュール化する：UIを小さな再利用可能なコンポーネントに分割します。
APIをテストする：Apidogを使用してAPIエンドポイントを徹底的にテストし、期待通りに動作していることを確認します。
バージョン管理を使用する：変更を定期的にコミットして、進捗を失わず、チームと効果的にコラボレーションします。

結論：Shadcn/UIとApidogを使ったReact.jsアプリの構築

おめでとうございます！これで、あなたのReact.jsプロジェクトでShadcn/UIを使用するためのすべての知識を持つことができます。ライブラリの設定からコンポーネントのカスタマイズまで、美しいUIを作成することがどれほど簡単であるかを学びました。また、Apidogを使用することで、API呼び出しの管理が非常に簡単になります。

内部ツールを構築する場合でも、顧客向けのアプリケーションを作る場合でも、Shadcn/UIを使用することで独自のものを作成する柔軟性が得られ、ApidogはAPIワークフローをスムーズにします。

P.S. APIに取り組んでいる場合は、Apidogを無料でダウンロードするのをお忘れなく—開発やテストの時間を数時間節約することができます！

ボタン