# Elastic UI デザインシステム

## Elastic UI デザインシステムのインターフェースプレビュー

メッセージまたは重大度でイベントストリームを絞り込み、個々のイベントを保存し、結果が空のときはクリアして、ライトとダークの表示を切り替えます。

## Elastic UI デザインシステムのデザインリファレンス

Elastic UI 123.0.0、Borealisテーマ8.1.0、React 18.3.1を使用。表には公開済みテーマJSONの名称を使用しています。これらはエクスポートキーであり、useEuiThemeオブジェクトのパスをそのまま示すものではありません。実際のプレビューではネイティブのReactテーマAPIを使用します。

### Borealisのセマンティックカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| euiColorPrimary | light: #0B64DD; dark: #61A2FF | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiColorSuccess | light: #008A5E; dark: #24C292 | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiColorWarning | light: #FACB3D; dark: #FACB3D | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiColorDanger | light: #C61E25; dark: #F6726A | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiColorFullShade | light: #07101F; dark: #FFFFFF | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiTextColor | light: #384861; dark: #B4C1D5 | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
| euiTextSubduedColor | light: #516381; dark: #98A8C3 | 公開済みテーマのエクスポート名です。Reactではこれらの値をハードコードせず、useEuiThemeを通じて対応するセマンティックロールを使用してください。 |
### スペーシングスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| euiSizeXS | 4px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSizeS | 8px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSizeM | 12px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSize | 16px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSizeL | 24px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSizeXL | 32px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
| euiSizeXXL | 40px | レイアウトのリズムを整えるには、対応するサイズのEuiSpacer/FlexGroupを使用してください。このテーマのエクスポートでは基本単位は16pxです。 |
### タイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| euiFontSizeXS | 12px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSizeS | 14px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSize | 14px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSizeM | 16px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSizeL | 20px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSizeXL | 24px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiFontSizeXXL | 30px | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
| euiLineHeight | 1.5 | 公開済みのタイポグラフィリファレンスです。コンポーネントの階層にはEuiText/EuiTitleのバリアントを使用してください。 |
### 境界線と形状

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| euiBorderWidthThin | 1px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderWidthThick | 2px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderColor | #E3E8F2 | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderRadiusInline | 4px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderRadiusControl | 8px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderRadiusPanel | 12px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
| euiBorderRadiusFrame | 16px | インライン、コントロール、パネル、フレームで形状を使い分けてください。すべてに同じ角丸を適用すると、階層が失われます。 |
### フォーカスとモーション

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| euiFocusRingSize | 2px | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
| euiFocusBackgroundColor | #ECF1F9 | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
| euiAnimSpeedExtraFast | 90ms | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
| euiAnimSpeedFast | 150ms | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
| euiAnimSpeedNormal | 250ms | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
| euiAnimSpeedSlow | 350ms | 内部の.euiセレクターを上書きせず、ネイティブのフォーカスとモーションの動作を維持してください。 |
### このエクスプローラーでのネイティブなAPIの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| EuiProvider | colorMode="light" \| "dark" | テーマコンテキストとEmotionスタイルを提供します。 |
| useEuiTheme | { euiTheme } | カスタム要素とEuiHealthのセマンティックカラーを解決します。 |
| EuiBasicTable | items · itemId · columns | 安定したIDを使って、表示対象として制御されているコレクションを描画します。 |
| EuiFieldSearch | value · onChange · incremental | アプリケーションが、ローカルの6件のイベントコレクションを絞り込みます。 |
| EuiButtonGroup | options · idSelected · onChange | 凡例を表示する、制御可能な重大度フィルター。 |
| EuiHealth | color + readable child label | ステータスドットは重大度を示す語句を補うものであり、置き換えるものではありません。 |
## Elastic UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Elastic UI デザインシステムエクスプローラーの構成

### 汎用ダッシュボードではなく、調査用のワークスペース

> このサンプルには、コンパクトな概要統計が3つと、単一のイベントストリームがあります。検索フィールドと重大度グループでストリームを絞り込み、各行から個別に保存できます。操作をイベントのそばに配置することで、絞り込んだ状態を保ったまま、必要な情報を収集できます。概要ではライブトラフィックを装わず、サンプルイベント数を明示しています。

### 現在のテーマ境界を使用する

この例では、EUI 123.0.0とBorealis 8.1.0を組み合わせています。リファレンスの値は公開済みのこのテーマに基づくもので、古いAmsterdamのスクリーンショットから取ったものではありません。EuiProviderが表示モードとスタイルコンテキストを管理します。アプリケーションの状態はテーマ計算の外部に保たれるため、表示を切り替えても保存済みイベントや現在の検索クエリはリセットされません。

## Elastic UI デザインシステムのセマンティックカラーの役割

### 重大度を意味のある関係性として表現する

このアプリケーションでは、Info にプライマリロール、Warning に警告ロール、Error に危険ロールを割り当てています。EuiHealth はドットの横に重大度を表す語句を表示します。この対応付けはアプリケーションのポリシーであり、プライマリカラーの要素がすべて情報の重大度を示すわけではありません。エラー件数やイベントラベルにも、読みやすいテキストが必要です。

### アクティブなテーマから色を解決する

Screen は useEuiTheme を呼び出し、解決された色をキャンバス、本文テキスト、ヘルスインジケーターに使用します。エクスポートテーブルにはライトモードとダークモードの値を併記して、違いを確認できるようにしています。1つの16進カラー値を両方のモードに流用したり、生成された Emotion のクラス名を指定して無理に合わせたりしないでください。

## Elastic UI デザインシステムの文字組みと数値の階層

### 数値を強調する前に、統計の文脈を示す

EuiStat は、6件のサンプルイベント、1件のエラーイベント、保存済み件数に説明を添えて表示します。数値だけでは意味が曖昧になります。EuiTitle で調査内容を示し、EuiText で対象期間とサンプルデータであることを補足します。ストリームの見出しは、2つ目のページタイトルではなく、より小さな見出しにします。

### コンパクトな表示でもログテキストを読みやすく保つ

Borealis は、基準となる行の高さを1.5とする14pxの基本サイズに加え、12/16/20/24/30pxの文字サイズを用意しています。タイムスタンプとサービス名の列幅は一定にし、イベントメッセージには可変幅を割り当てます。この例では、ネイティブのフォントスタックから利用可能なシステムフォントを使用しており、Inter の外部フォントアセットを読み込む仕様ではありません。

## Elastic UI デザインシステムの基本テーブルと制御されたフィルター

### 表示とフィルタリングを分離する

EuiBasicTable には、フィルタリング済みの項目を渡します。列にはフィールドまたはカスタムレンダラーを指定し、itemId には安定したイベントIDを使用します。EuiFieldSearch でクエリの状態を更新し、EuiButtonGroup で選択中の重大度IDを更新します。表示する項目をテーブルに渡す前に、アプリケーション側で両方の条件を組み合わせます。

1. サービス名またはメッセージの一部を入力します。

2. Error または Warning を選ぶと、重大度による条件が追加されます。

3. 行のアクションから該当するイベントを保存します。

4. フィルターをクリアし、保存したイベントにマークが残っていることを確認します。

### 行の位置ではなくイベントIDで保存する

Save event アクションは、ローカルのセットにIDを追加または削除します。並べ替えやフィルタリングで配列内の位置が変わっても、ブックマークが別のイベントを指すことはありません。この例では、メッセージ内に「ローカルに保存済み」と表示し、アクションを「保存を解除」に切り替えることで、操作の結果を明確にし、元に戻せるようにしています。

## Elastic UI デザインシステムのスペーシングとレスポンシブなデータ表示

### グループ間でネイティブのスペーシングスケールを使う

公開されているサイズは4、8、12、16、24、32、40pxです。EuiSpacer と EuiFlexGroup で、サマリー統計、フィルター、イベントテーブルの間隔を設けます。EuiPanel がコンテナーの形状を担い、テーマによって、パネルの12px、コントロールの8px、フレームの16pxという角丸の違いを表現します。

### ページをモバイルのビューポート内に収める

サマリーとフィルターのグループは、ネイティブの FlexGroup の動作によって折り返されます。テーブルは幅640pxのアプリケーション最小幅を保つ、範囲を限定した水平スクロール領域に配置します。ページ全体が横にはみ出すことなく、タイムスタンプ、メッセージ、アクションの対応関係を維持できます。本番環境のテーブルでは、実際の列構成に合わせて、ドキュメントに記載されたレスポンシブテーブルのオプションを選択できます。

## Elastic UI デザインシステムの検索、空の状態、保存済みの状態

### 検索結果が0件なら、すぐに実行できる復帰操作を示す

該当するクエリでは、「現在のフィルターに一致するイベントはありません」と「フィルターをクリア」アクションを表示します。クエリと重大度をリセットすると、保存済みIDを変更せずに6件すべてのサンプルイベントが再表示されます。テーブル上部の件数は、丁寧なライブリージョンを通じて一致したイベント数を通知します。

### ローカル保存はインシデント対応ワークフローではない

イベントを保存すると、行のラベルと保存済み件数が変わります。Elasticsearch への接続、インシデントの作成、再読み込み後の状態保持は行いません。実際の調査製品として提供する場合は、保存した項目が永続化されると謳う前に、ドキュメント化された永続化エンドポイントを追加し、処理中または失敗の応答を報告する必要があります。

## Elastic UI デザインシステムのテーブルアクションのアクセシビリティ

### プレースホルダーとは別にフィルター名を設定する

検索にはアクセシブルな名前を付け、ボタングループには重大度の凡例を設定します。テーブルの列には説明的なヘッダーを付け、各行のアクションにはネイティブの EuiButtonEmpty を使用します。EuiHealth にはテキストが含まれるため、ステータスを色だけで伝えることはありません。サンプルデータを置き換える場合も、これらの要件を維持してください。

- 重大度は見えるテキストで示す。

- テーブルのキャプションと列名を維持する。

- 保存状態を安定したイベントIDに関連付ける。

### キーボード操作と視覚的な状態を一致させる

ユーザーは検索にフォーカスし、重大度フィルターを選び、行のアクションに移動し、表示設定を切り替えられます。2pxのフォーカスリングはテーマの基準の一部です。行を保存した後とフィルターをクリアした後に、絞り込まれた項目をテストしてください。アクションラベルと保存済み件数が引き続き一致している必要があります。

## Elastic UI デザインシステムのセットアップとテーマの統合

### ドキュメントに記載された peer dependencies をインストールする

公式のセットアップガイドでは Yarn を使用し、EUI とあわせて Borealis、Emotion、datemath、moment を記載しています。この例は React 18 で動作し、ツリーを StrictMode でラップしていません。以下のセットアップでは、これらの制約を明示し、新規作成したアプリケーションの React 19 を暗黙に引き継がないようにしています。

### エントリーファイル全体を実装例として扱う

以下の例には、プロバイダー、データセット、制御された状態、列のレンダラー、フィルターコントロール、createRoot エントリーが含まれています。Vite のスキャフォールドが index.html を提供します。このネイティブな例は esbuild でバンドルし、ブラウザーで動作を確認しています。公式のセットアップガイドには、Vite やその他の Webpack 以外のバンドラーに関する注意事項が記載されています。本番環境で使用するバンドラーは、個別にテストしてください。

## Elastic UI デザインシステムのコンポーネント例

### main.jsx — ネイティブなログエクスプローラーの完全な例

EuiProvider と Borealis を使い、重大度と検索でのフィルタリング、およびイベントのローカル保存状態に対応した制御可能なイベントテーブルを構築できます。

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  EuiProvider,
  EuiPanel,
  EuiTitle,
  EuiText,
  EuiSpacer,
  EuiFlexGroup,
  EuiFlexItem,
  EuiFieldSearch,
  EuiButtonGroup,
  EuiButtonEmpty,
  EuiBasicTable,
  EuiHealth,
  EuiStat,
  EuiSwitch,
  EuiCallOut,
  useEuiTheme,
} from "@elastic/eui";
const logs = [
  {
    id: 1,
    time: "09:42:18",
    service: "gateway",
    message: "Request completed",
    level: "Info",
    duration: 42,
  },
  {
    id: 2,
    time: "09:42:21",
    service: "worker",
    message: "Retry queued after timeout",
    level: "Warning",
    duration: 1200,
  },
  {
    id: 3,
    time: "09:42:24",
    service: "gateway",
    message: "Upstream connection refused",
    level: "Error",
    duration: 800,
  },
  {
    id: 4,
    time: "09:42:29",
    service: "indexer",
    message: "Batch indexed",
    level: "Info",
    duration: 180,
  },
  {
    id: 5,
    time: "09:42:32",
    service: "worker",
    message: "Job completed",
    level: "Info",
    duration: 94,
  },
  {
    id: 6,
    time: "09:42:36",
    service: "gateway",
    message: "Upstream connection restored",
    level: "Info",
    duration: 51,
  },
];
function Screen({ dark, setDark }) {
  const { euiTheme } = useEuiTheme();
  const [query, setQuery] = useState(""),
    [level, setLevel] = useState("all"),
    [saved, setSaved] = useState([]);
  const visible = logs.filter(
    (x) =>
      (level === "all" || x.level === level) &&
      (x.service + " " + x.message).toLowerCase().includes(query.toLowerCase()),
  );
  const colors = {
    Info: euiTheme.colors.primary,
    Warning: euiTheme.colors.warning,
    Error: euiTheme.colors.danger,
  };
  const columns = [
    { field: "time", name: "Time", width: "105px" },
    { field: "service", name: "Service", width: "105px" },
    {
      field: "message",
      name: "Event",
      render: (value, item) => (
        <span>
          {value}
          {saved.includes(item.id) ? " · Saved locally" : ""}
        </span>
      ),
    },
    {
      field: "level",
      name: "Level",
      width: "110px",
      render: (value) => <EuiHealth color={colors[value]}>{value}</EuiHealth>,
    },
    {
      name: "Action",
      width: "110px",
      render: (item) => (
        <EuiButtonEmpty
          size="xs"
          onClick={() =>
            setSaved((v) =>
              v.includes(item.id)
                ? v.filter((id) => id !== item.id)
                : [...v, item.id],
            )
          }
        >
          {saved.includes(item.id) ? "Unsave" : "Save event"}
        </EuiButtonEmpty>
      ),
    },
  ];
  return (
    <main
      style={{
        padding: 24,
        background: euiTheme.colors.backgroundBasePlain,
        color: euiTheme.colors.textParagraph,
      }}
    >
      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
        <EuiFlexItem>
          <EuiText size="xs">
            <p>ELASTIC UI · LOG EXPLORER</p>
          </EuiText>
          <EuiTitle size="m">
            <h1>Investigate gateway events</h1>
          </EuiTitle>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
          <EuiSwitch
            label="Dark mode"
            checked={dark}
            onChange={(e) => setDark(e.target.checked)}
          />
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="l" />
      <EuiFlexGroup>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat title="6" description="Sample events" titleSize="m" />
          </EuiPanel>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat
              title="1"
              description="Error event"
              titleSize="m"
              titleColor="danger"
            />
          </EuiPanel>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiPanel>
            <EuiStat
              title={String(saved.length)}
              description="Saved in this preview"
              titleSize="m"
            />
          </EuiPanel>
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="l" />
      <EuiPanel>
        <EuiTitle size="xs">
          <h2>Event stream</h2>
        </EuiTitle>
        <EuiText size="s">
          <p>09:42:18–09:42:36 · fictional data · no live telemetry</p>
        </EuiText>
        <EuiSpacer size="m" />
        <EuiFlexGroup alignItems="center">
          <EuiFlexItem>
            <EuiFieldSearch
              fullWidth
              aria-label="Search log events"
              placeholder="Search service or message"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              incremental
            />
          </EuiFlexItem>
          <EuiFlexItem grow={false}>
            <EuiButtonGroup
              legend="Filter severity"
              options={[
                { id: "all", label: "All" },
                { id: "Warning", label: "Warning" },
                { id: "Error", label: "Error" },
              ]}
              idSelected={level}
              onChange={(id) => setLevel(id)}
            />
          </EuiFlexItem>
        </EuiFlexGroup>
        <EuiSpacer size="m" />
        <EuiText size="xs">
          <p aria-live="polite">{visible.length} matching events</p>
        </EuiText>
        <div style={{ overflowX: "auto", maxWidth: "100%" }}>
          <div style={{ minWidth: 640 }}>
            <EuiBasicTable
                  responsiveBreakpoint={false}
              items={visible}
              itemId="id"
              columns={columns}
              tableCaption="Fictional application events"
              noItemsMessage="No events match the current filters."
            />
          </div>
        </div>
        {!visible.length && (
          <EuiButtonEmpty
            onClick={() => {
              setLevel("all");
              setQuery("");
            }}
          >
            Clear filters
          </EuiButtonEmpty>
        )}
      </EuiPanel>
      <EuiSpacer size="l" />
      <EuiCallOut size="s" title="Local investigation workspace">
        Saving an event only changes this preview. No query is sent to
        Elasticsearch and no incident is created.
      </EuiCallOut>
      <EuiSpacer size="m" />
      <EuiText size="xs">
        <p>
          Native Elastic UI 123.0.0 · Borealis 8.1.0 theme · controlled filters
          and table actions.
        </p>
      </EuiText>
    </main>
  );
}
function App() {
  const [dark, setDark] = useState(false);
  return (
    <EuiProvider colorMode={dark ? "dark" : "light"}>
      <Screen dark={dark} setDark={setDark} />
    </EuiProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

コードリファレンス

- このエントリーを React のスキャフォールドで src/main.jsx として保存します。このエントリーでは、意図的に StrictMode を有効にしていません。

- 幅640pxの制約付きテーブル領域はアプリケーションの CSS です。すべてのコンポーネントの見た目には EUI を使用しています。

### テーマに対応したカスタムの補足

カスタムマークアップを生成されたコンポーネントクラスに結び付けず、プロバイダー内でアクティブなテーマを使用します。

```
import React from 'react';
import { useEuiTheme } from '@elastic/eui';
export function InvestigationNote({ children }) {
  const { euiTheme } = useEuiTheme();
  return <aside style={{ padding: euiTheme.size.m, color: euiTheme.colors.textParagraph, borderLeft: `2px solid ${euiTheme.colors.primary}` }}>{children}</aside>;
}
```

コードリファレンス

- EuiProvider の下に InvestigationNote をレンダリングします。このノートには選択した表示モードが引き継がれます。

## Elastic UI デザインシステムのAIエージェント設定

### 実装の出発点

EUI の公式ガイドでは、Yarn によるインストールと React 18 のサポートについて説明しています。Webpack 以外のバンドラーには既知の注意事項があります。このネイティブの例は esbuild でバンドルし、ブラウザーでテストしています。スキャフォールドでサポートされているバージョンの Node.js を使用してください。

```
yarn create vite elastic-investigation --template react
cd elastic-investigation
yarn add react@18.3.1 react-dom@18.3.1 @elastic/eui@123.0.0 @elastic/eui-theme-borealis@8.1.0 @elastic/datemath @emotion/react @emotion/css moment
# Replace src/main.jsx with the complete example above.
yarn dev
```

### あなたのプロジェクト向けプロンプト

```
Elastic UI 123.0.0、Borealis 8.1.0、React 18 を使ってログ調査画面を構築します。提供されたテーマのエクスポートとネイティブソースを使用してください。EuiProvider、状態を制御する EuiBasicTable、アクセシブルな検索と重大度フィルターを実装します。安定したイベント ID で保存し、フィルタリング後もブックマークを保持します。また、ローカルのUI状態と、実際の Elasticsearch クエリや永続化の応答を明確に区別してください。モバイルではテーブルが画面内に収まるようにします。
```

## Elastic UI デザインシステムの情報源と対象範囲

OpenDesign が作成したガイドと、Borealis 8.1.0 を使用するネイティブ Elastic UI 123.0.0 上の架空のローカルログエクスプローラーです。サンプルイベントはリアルタイムのテレメトリーではなく、保存操作はメモリー内でのみ行われます。EUI には Elastic／SSPL のライセンス選択肢があります。配布形態に応じて、公式パッケージのライセンスを確認してください。

- 公式の設定 プロバイダー、インストール、ピア依存関係、環境のサポート。

- Basic Table API 列定義、レンダラー、ネイティブテーブルの動作。

- Borealis ライトテーマのエクスポート このリファレンスで使用するバージョン管理された値。

- EUI のソースとライセンス ネイティブ実装とライセンス情報。

## Elastic UI デザインシステム関連リソース

### Emplifi Soul

Soulのデータテーブルの仕様を、6ピクセルの間隔、階層化されたカラーの役割、コンパクトなInterの文字組みとあわせて確認してください。一括選択、欠損データの表記、集計行を比較したうえで、確認済みの非公開 React パッケージのエントリーポイントを調べてください。

### Esri Calcite

集中的な空間ツールに役立つ Calcite の実践的なリファレンスです。意味に即した界面表面と青いアクション、コンパクトな検査パネル、実際の入力 API、サイトレビューの完全なローカル実例を掲載しています。

### GitLab Pajamas

技術ワークフロー向けの Pajamas ガイド。実際のセマンティックトークン、可変のタイポグラフィと間隔、段階的なパイプラインインスペクター、読みやすいエラー出力、そしてローカル限定のリトライシミュレーションを紹介します。


- [実装リファレンス](https://eui.elastic.co/docs/components/tables/basic/)
- [ソース](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json)
- [ソース](https://eui.elastic.co/docs/components/tables/basic/)
- [コードリファレンス](https://eui.elastic.co/docs/components/tables/basic/)
- [コードリファレンス](https://eui.elastic.co/docs/getting-started/setup/)
- [公式の設定 プロバイダー、インストール、ピア依存関係、環境のサポート。](https://eui.elastic.co/docs/getting-started/setup/)
- [Basic Table API 列定義、レンダラー、ネイティブテーブルの動作。](https://eui.elastic.co/docs/components/tables/basic/)
- [Borealis ライトテーマのエクスポート このリファレンスで使用するバージョン管理された値。](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json)
- [EUI のソースとライセンス ネイティブ実装とライセンス情報。](https://github.com/elastic/eui)