コラム UIコンポーネント ／ UIライブラリ 2026年8月21日公開 著者：Mori

Ignite UI for React × AI エージェント スキル 検証｜スキルで何が変わるのか？

Ignite UI for React と AI エージェントスキルを組み合わせた検証を通じて、開発体験や実装プロセスにどのような変化があるのかを紹介します。

UIライブラリReactAI活用実装・ハウツー
この記事を書いた人
Mori
テクニカルサポートエンジニア

Web・ECの開発・編集（なんでも屋）を経て、現在はお客様の技術サポートを担当。技術だけでなくチームやお客さまの抱える問題の本質を見ることを大切にしている。終業後が本職（👧のなんでも屋）

公開：2026年8月21日

こんにちは、インフラジスティックス・ジャパンの Mori です。

最近は AI がとても便利で手放せないという人も多いと思いますが、機能や新しい情報もどんどん更新されるので、なかなか追いつくのも大変ですよね。今回はそのなかでも「エージェント スキル」をピックアップしました。スキルを使わない場合とでは、どのような違いがでるのか確かめていきます。

今回は Ignite UI for React の公式スキルを使って天気アプリを作っていきます。

先に結果をお伝えしておくと、実際にはスキルの恩恵で最も大きな差となって現れたのは、稼働時間でした。部品の仕様を推測せずに確かめてから書く、公式サンプルと同じ「かたち」で組むといった細かい違いも見られましたが、それよりも大きかったのが所要時間の差です。

本編では、その差がどこで、どう出たのか見ていきたいと思います。 それでは検証をはじめていきましょう。

後日談

本記事では、skills フォルダを退避することで AI がスキルを利用しないように制御していますが、使用するモデルや AI の性質によっては、igniteui-react の npm パッケージに同梱されているスキルフォルダ（./node_modules/igniteui-react/skills/**/*）を発見し、スキルを利用する場面がありました。

スキル利用を前提としているのであれば問題ありませんが、本来利用しないと思い込んでいた場合には大きな問題になり得ます。

AI に関しては良い話だけでなく、不安になる話も耳にします。エージェント スキルに限らず、さまざまな機能を実際にご自身で試し、AI への理解を深めることはとても重要だと感じました。本記事がその一助となれば幸いです。

はじめに

この記事では、Ignite UI for React が公式に提供しているエージェント スキルを実際に使い、 「スキルがあると、AI のコーディングはどう変わるのか？」 を検証します。

検証内容

  • 題材：気象 API「Open-Meteo」のデータを表示する天気アプリ
  • やること：同じプロンプトを、スキル有り／無しの両方で実行
  • 比較ポイント：生成されたコードと画面の違い

Open-Meteo とは？

会員登録や APIキーの発行なしで使える、非商用利用が無料の気象データ API です。世界中の現在の天気や予報、過去の気象データを JSON 形式で取得できるため、今回のような検証用サンプルでも手軽に使えます。

Open-Meteo : https://open-meteo.com/

進め方

進め方は次のとおりです。

  • 検証環境の準備
    • プロジェクトの作成や必要なパッケージのインストールを行います。
  • 検証を行う
    • 簡単な注文のプロンプトで天気カード UI を、スキル有り／無しの両方で作成し、その違いを比較します。

今回の検証では、読者のみなさんも簡単にマネしながら体験いただける内容になっていますので、製品をお持ちでない方も以下の無料トライアルでぜひお試しください。

→ Ignite UI for React 無料トライアル

登録するとすぐにメールが届いて使いはじめられます。そのままこの記事の流れでつかえますので記事を片手にぜひ触ってみてください。

検証環境の準備

ここでは検証に必要な環境を整えていきます。以下の手順で進めます。

  1. 動作環境の確認
  2. プロジェクトを作成する
  3. igniteui-react をインストールする
  4. スキルファイルを配置する

動作環境の確認

本検証は以下の環境で行いました。

  • OS： Windows 11 / PowerShell
  • Node.js： v20 以上
  • Vite： v5 系（React + TypeScript テンプレート）
  • AI コーディングアシスタント： Claude Code（model は Sonnet 5）

プロジェクトを作成する

まっさらな Vite + React + TypeScript プロジェクトをゼロから作ります。

このコマンド自体は新規プロジェクトを一から作るので、事前に用意しておくファイルはありません。実行前に次の2点だけ確認してください。

  • Node.js / npm が入っているか
node -v
npm -v

Node.js v20 以上であれば OK です。入っていなければ nodejs.org の LTS 版を先にインストールしてください。

あとはプロジェクトを作りたいフォルダ（例: ~/Documents/GitHub/）に cd で移動しておくだけです。

💻 実行するコマンド

npm create vite@latest igniteui-react-skills-weather-demo -- --template react-ts

実行すると、途中でいくつか対話形式の質問が表示されます。今回の選択は以下のとおりです。

  • Which linter to use? → ESLint を選択
  • Install with npm and start now? → Yes を選択

Yes を選ぶと npm install まで自動で完了し、開発サーバーも起動します。

  • 起動確認のメッセージ例：VITE ready / Local: http://localhost:5173/
  • ポート番号は環境によって変わります

Vite プロジェクト作成時のコンソール出力

起動を確認したら、Ctrl+C で一旦停止してください。

その後、プロジェクトフォルダに移動します。

cd igniteui-react-skills-weather-demo

補足

「Install with npm and start now?」で No を選んだ場合は、上記の cd igniteui-react-skills-weather-demo に続けて npm install も実行してください。

igniteui-react をインストールする

💻 実行するコマンド

まずは以下のコマンドを実行して igniteui-react をインストールしましょう。

npm install igniteui-react

執筆時点では “added 16 packages, and audited 44 packages … “ のようなメッセージがコンソールに出力されました。

スキルファイルを配置する

Ignite UI CLI を使うと、1コマンドで MCP 設定・スキルファイルの配置まで完了します。

💻 実行するコマンド

npm i -g igniteui-cli
ig ai-config --assistants generic --agents claude

（node_modules/igniteui-react/skills/ から手動コピーする方法もあります）

npm i -g igniteui-cli を実行すると、執筆時にはこんな警告（npm warn deprecated glob@11.1.0）が出ています。今回はこの警告は特に影響がないため、進めます。

こんな出力（changed 185 packages in 11s）がされていればエラーなくインストールが完了した証なので、ここまで来れば OK です。

このコマンドで、React版で提供されている以下4つのスキルがまとめてインストールされます。

カテゴリname（フォルダ名）内容
Componentsigniteui-react-componentsコンポーネントの選び方と、正しいインストール・インポート・使い方
Theming & Stylingigniteui-react-customize-themeブランドカラーやダークモードなど、見た目のカスタマイズ
Optimizationigniteui-react-optimize-bundle-sizeアプリを軽くする最適化（不要なコードの除去・重い部品の遅延読み込み）
Generate From Imageigniteui-react-generate-from-image-designデザイン画像から React の画面を実装

続けて、スキルのフォルダが正しく作られたか確認します。

💻 実行するコマンド

ls .claude/skills

表にある4つのフォルダ名が表示されれば OK です。

もしフォルダが無い・空の場合は、上の ig ai-config コマンドがエラーなく完了していたか確認し、必要であれば再実行してください。

参考：各AIツールでの認識場所

ステップ 2 前の手順で ig ai-config --agents claude を実行したので、今回の検証環境（Claude Code）向けには すでに .claude/skills/ にスキルファイルが配置済みです。

GitHub Copilot や Cursor、Codex など別の AI ツールを併用する場合は、対応するフォルダにスキルファイルをコピー（もしくは ig ai-config の --assistants オプションを変えて再実行）する必要があります。

ツールプロジェクトスコープ
Claude Code.claude/skills/
GitHub Copilot.github/skills/
Cursor.cursor/skills/
Codex.codex/skills/
汎用（複数対応）.agents/skills/

AI がスキルをちゃんと認識しているか確認してみましょう

お使いの AI に、現在利用できるスキルを聞いてみてください。答えてくれた内容に igniteui-react 系のスキルが含まれていればバッチリです。

MCP を無効にしておく

ig ai-config はスキルファイルだけでなく MCP サーバーの設定（.mcp.json）も一緒に配置します。

MCP が有効なままだと、スキルを OFF にしても AI が MCP 経由で公式ドキュメントを検索できてしまうため、スキル無しの実力を測れません。そこで、検証をはじめる前に MCP を無効にしておきます。

やり方はかんたんで、.mcp.json のファイル名を変えるだけです。

💻 実行するコマンド

# MCP 設定を退避する
Move-Item .mcp.json .mcp.json.disabled

ファイル名が変わると設定ファイルとして読み込まれなくなるので、これだけで MCP は使われなくなります。この先使う予定がなければ、退避ではなく Remove-Item .mcp.json で削除してもかまいません。

記事執筆時点の補足

本記事で紹介しているコマンドは執筆時点で有効なものです。ドキュメントの内容は今後変わる可能性があるため、最新情報は本記事末尾の参考リンクをご確認ください。

準備が整いました。 以降では、実際に AI にコーディングを行ってもらいます。スキルを使う場合と、使わない場合でどのような違いがでるのか、後ほど比較します。

検証を行う

今回の検証では、実装を伴うプロンプトをスキル有り、スキル無しで実行し、その成果物を比較します。 プロンプトでは Open-Meteo API を使った天気カード一覧 UI の実装を依頼します。

検証で実施する5つのステップ

スキルは、所定の場所（今回の Claude Code なら .claude/skills フォルダ）にファイルがあれば AI が自動で読み込みます。そのため、skills フォルダを一時的に別名にして AI から見えなくすれば、スキルを確実に OFF にできます。

この仕組みを使って、同じプロンプトを「スキル無し」「スキル有り」の順に実行し、両方の成果物を残しておいて比較します。具体的には次の5ステップで進めます。

  • ステップ 1: スキル無しでプロンプトを実行する
    • skills フォルダを退避して見えない状態にし、プロンプトを実行する
  • ステップ 2: スキル無しで生成されたファイルを退避する
    • 生成されたファイルを ….withoutSkill.tsx のようにリネームして残す
    • 元のパスを空にして、このあと同じパスに新規作成させるためです
  • ステップ 3: 会話をリセットする
    • AI は直前に自分が書いたコードを覚えているため、会話をリセットしてからスキル有りの実行に進む
  • ステップ 4: スキル有りでプロンプトを実行する
    • skills フォルダを復元し、/スキル名 を明示指定して同じプロンプトを実行する
    • あわせて、プロンプトの中で「退避した .withoutSkill. は絶対に参照しないでください」と伝える
  • ステップ 5: 生成されたファイルを比較する
    • 2つのファイルを見比べる

公平な比較のためのポイント

同じ会話を続けたままスキルを有効にしても、AI は直前に自分が書いたコードを覚えています。また、退避したファイルがプロジェクト内に残っていると、AI がそれを見つけて参考にしてしまうこともあります。

そこで本検証では、「会話のリセット」と、プロンプトに「退避した .withoutSkill. は絶対に参照しないでください」と明記する、という 2 点を行っています。

なお、もっとも厳密なのは、スキル有りとスキル無しをそれぞれ別のプロジェクトで作成して比べる方法です。実行するコマンドは簡単なのでそちらでも良いのですが、今回は AI の仕組み（スキルの読み込みと会話の記憶）を利用した方法で進めます。今後の AI 作業でも使える仕組みなので、どうぞお付き合いください。

検証で実施する5ステップの流れ

それでは検証をはじめましょう。

検証

まずは簡単な注文のプロンプトで、スキルの有無による違いを確認してみましょう。 期待している実装としては Ignite UI for React の IgrCard を使ってくれることです。

今回は少しだけ機能の要望も加えて、スキル有り・無しで所要時間にどれくらい差が出るかも見てみます。

ステップ 1: スキル無しでプロンプトを実行する

💻 実行するコマンド
# .claude/skills を丸ごと退避（AI から見えなくする）
Move-Item .claude/skills .claude/skills.disabled
🤖 AI に送るプロンプト
Ignite UI for React（igniteui-react）を使って、Open-Meteo API から取得した複数都市の現在の天気をカード一覧で表示する UI を作って。
コンポーネントは src/components/WeatherCards.tsx に作成して。
あわせて、以下の機能も実装して。
- 都市を追加・削除できるようにする
- カードをドラッグ&ドロップで並び替えできるようにする（対応する部品があれば、それを使う）
処理が完了したら、処理開始から完了までの経過時間を提示してください。

上記のプロンプトを実行すると、以下のような画面が生成されました。

注意

AI の回答はモデルのバージョンや実行タイミングなどによって変わります。同じプロンプトを読者の方が実行しても、必ずしもこの画面と完全に同じ結果にはなりません。

スキル無しで生成された天気カード UI

Weather data by Open-Meteo.com

期待どおり IgrCard を利用してくれました。また、都市の追加やドラッグアンドドロップも実装されました。最初の実装としては問題はないように思います。通常はここから細かい手直しをしていきます。

ステップ 2: スキル無しで生成されたファイルを退避する

注意

プロンプトでファイルパスを指定していますが、AI の実装のしかたによっては別のファイル名や構成になることがあります。実行前に、AI の回答やエディタのファイル一覧で実際に生成されたファイルを確認し、パスをコマンドに合わせて書き換えてください。

💻 実行するコマンド
Move-Item src/components/WeatherCards.tsx src/components/WeatherCards.withoutSkill.tsx
Move-Item src/components/WeatherCards.css src/components/WeatherCards.withoutSkill.css

AI は .tsx だけでなく CSS ファイルもあわせて作成することがあります。生成されたファイルは一式まとめて退避しておきましょう。

ステップ 3: 会話をリセットする

このまま次のプロンプトを送ってしまうと、AI は直前に自分が書いたコードを覚えたままになります。それでは「スキルの効果」を見ているのか「覚えている内容の再現」を見ているのか分からなくなるため、ここで一度会話をリセットします。

🤖 AI に送るプロンプト
/clear

これで直前までの会話の記憶がクリアされ、まっさらな状態からスキル有りの実行に進めます。

ステップ 4: スキル有りでプロンプトを実行する

💻 実行するコマンド
# 退避したフォルダを元に戻す
Move-Item .claude/skills.disabled .claude/skills
🤖 AI に送るプロンプト
/igniteui-react-components
Ignite UI for React（igniteui-react）を使って、Open-Meteo API から取得した複数都市の現在の天気をカード一覧で表示する UI を作って。
コンポーネントは src/components/WeatherCards.tsx に作成して。
あわせて、以下の機能も実装して。
- 都市を追加・削除できるようにする
- カードをドラッグ&ドロップで並び替えできるようにする（対応する部品があれば、それを使う）
処理が完了したら、処理開始から完了までの経過時間を提示してください。
なお、ファイル名に .withoutSkill を含むファイル（例: WeatherCards.withoutSkill.tsx）は以前の検証用の退避ファイルです。決して開いたり、参考にしたりしないでください。

上記のプロンプトを実行すると、以下のような画面が生成されました。

スキル有りで生成された天気カード UI

Weather data by Open-Meteo.com

表示項目が控え目ですが、これはスキルとは関連しないものと想定しています。レイアウトやデザインが異なるのは AI が都度考えて作業をしてくれているためですね。こちらも期待どおり IgrCard を使ってくれました。大きな仕様漏れもなく、ここから細かい手直しをしていくのはそれほど難しい作業ではなさそうです。

スキル無し、スキル有りで画面を作成しましたが、いずれも指示した機能を実装することができていました。

ステップ 5: 生成されたファイルを比較する

それでは以下の２ファイルを比較してみましょう。

  • WeatherCards.tsx（スキル有り）
  • WeatherCards.withoutSkill.tsx（スキル無し）

今回は AI に比較を依頼しました。

🤖 AI に送るプロンプト
src/components/WeatherCards.tsx（スキル有り）と src/components/WeatherCards.withoutSkill.tsx（スキル無し）を比較して。
AとBのコードの違いと、エージェント スキルをはじめて利用する人にも分かりやすい総評をまとめて。

試してみよう

/ を入力するとインストール済みスキルが候補表示されます。igniteui-react-components を選ぶと、そのスキルを読み込んだ状態でプロンプトを処理します。

結果

AI はもっとたくさんの情報を与えてくれましたが、それをまとめると以下のようになりました。

見た目に違いはあるが、部品の使い方はどちらも正しく書けていました。

スキルが効いたところ
使う部品の仕様を、推測せずに確かめてから書いた
公式サンプルと同じ「かたち」でカードを組んだ
必要な前準備（設定ファイルの作成）を自分から行った

スキル無し、スキル有りのいずれも、これくらいの実装では大きな差はなく、完成したコードでもスキルの恩恵で大きく品質に差をつけることはありませんでした。

その反面、実装にかかった所要時間を求めたところ、大きな差となって現れました。

プロンプトを渡し、実装、テストなどを含めた所要時間は以下のとおりです。

所要時間
スキル無し約 29 分
スキル有り約 9 分

検証結果のまとめ：コードの品質は同等で、所要時間に約20分の差

いかがでしょうか。その差はなんと 20 分でした。

この所要時間には、実装の他に Claude Code が行ったテストなどの時間も含まれるため、一概にスキルの有無だけの差とは言えませんが、それでもこれだけの差があるとスキルの恩恵としては十分に感じます。

また、今回は試行回数や消費クレジットについては確認できませんでしたが、稼働していた時間にこれだけの差があると、消費クレジットに関してもそれなりに差がでているのではないでしょうか。

全体まとめ

今回の検証を通じて、スキルによる事前知識があることで、AI が遠回りせずに実装を進められることを実感しました。

部品の仕様を都度推測で確かめる手間や、公式の書き方に近づけるまでの試行錯誤が減ったことで、所要時間の短縮につながっていたのだと思います。時間が短縮された分、消費クレジットについても、同様に抑えられている可能性が高いのではないでしょうか。

スキルの事前知識が遠回りを減らし、所要時間の短縮につながる流れ

おわりに

今回、Ignite UI for React の公式 エージェント スキルを実際に使って、「スキルがあると、コーディングは本当に変わるのか？」を検証してみました。

結果としては、スキルがあると部品の仕様を確かめてから書く、公式と同じ「かたち」で組む、必要な前準備を自分から行う、といった違いが見られました。

つまりエージェント スキルは、AI の知識をより確実に引き出し、「正しい作法」に沿ったコードを書かせてくれる存在です。ファイルを置くだけで効果が出るお手軽さも含め、導入の価値は十分にあると感じました。

そしてなにより、今回の検証で見えた所要時間の差は、利用者にとって特に魅力的なポイントだと思います。AI コーディングアシスタントの利用が欠かせないものになっていくなかで、消費クレジットや費やす時間を目に見えて減らせることは、導入を決める大きな後押しになるのではないでしょうか。

これから Ignite UI for React を AI コーディングアシスタントと一緒に使う方は、ぜひエージェント スキルをお試しください。

参考リンク

この記事に関連する製品・サービス

関連記事

AI活用グリッド

【2026年】GitHub Copilot Agent Skills 入門｜スキル（SKILL.md）を設定することで Ignite UI のグリッドとダークモードをAIで自動コーディングする

2026.04.23 ／ 田上 正基
AI活用入門・はじめて

AI と一緒に IG 製品使って WPF アプリ開発して寝てる間に仕事終わってる夢を叶えたい

2025.12.29 ／ Mori