uni-app について
uni-appは、モバイル、Web、ミニプログラム向けのアプリを開発するためのVue.jsベースのクロスプラットフォームフレームワークです。共通コンポーネントとAPIに加え、条件コンパイルでプラットフォーム固有の処理を記述できます。
主な機能
- 01iOS、Android、HarmonyOS、Webに対応
- 02複数のミニプログラムに対応
- 03再利用可能なUI・フォームコンポーネント
- 04ネットワーク、ストレージ、デバイスAPI
- 05条件コンパイルによるプラットフォーム別処理
活用シーン
- 01複数のモバイルプラットフォーム向けアプリ開発
- 02レスポンシブなWebアプリの開発
- 03ミニプログラムの開発
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/uni-appを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/config-manifest.mdconfig-pages.mdcore-form-components.mdcore-framework.mdcore-view-components.mdfeature-file-operations.mdfeature-lifecycle.mdfeature-location.mdfeature-media-components.mdfeature-navigation.mdfeature-network.mdfeature-storage.mdfeature-system-info.mdfeature-ui-feedback.md詳細
このスキルは uni-app のドキュメントに基づいており、2026-01-30 に生成されました。
uni-app は Vue.js ベースのクロスプラットフォームフレームワークです。iOS、Android、HarmonyOS、Web（レスポンシブ）、およびさまざまなミニプログラムプラットフォーム（WeChat／Alipay／Baidu／Douyin／Feishu／QQ／Kuaishou／DingTalk／Taobao／Jingdong／Xiaohongshu）で動作するアプリケーションを開発できます。
コア
| トピック | 説明 | リファレンス |
|---|---|---|
| コアフレームワーク | プロジェクト構成、プラットフォームのサポート、条件付きコンパイル | core-framework |
| ビューコンポーネント | view、scroll-view、swiper、movable-area、cover-view | core-view-components |
| フォームコンポーネント | input、textarea、picker、checkbox、radio、switch、slider | core-form-components |
機能
UI コンポーネント
| トピック | 説明 | リファレンス |
|---|---|---|
| メディアコンポーネント | image、video、camera、live-player、map | feature-media-components |
| ナビゲーション | navigator、ルーティング、ページナビゲーション | feature-navigation |
| UI フィードバック | トースト、モーダル、読み込み中表示、アクションシート、プルリフレッシュ | feature-ui-feedback |
API
| トピック | 説明 | リファレンス |
|---|---|---|
| ネットワーク | HTTP リクエスト、ファイルのアップロード／ダウンロード、WebSocket | feature-network |
| ストレージ | ローカルストレージ、ファイルシステム、キャッシュ | feature-storage |
| システム情報 | デバイス情報、ネットワーク状態、画面、バイブレーション | feature-system-info |
| ファイル操作 | 画像／動画の選択、ファイルシステム操作 | feature-file-operations |
| 位置情報 | 地理位置情報、地図コンポーネント、住所選択 | feature-location |
| ライフサイクル | アプリとページのライフサイクルフック | feature-lifecycle |
設定
| トピック | 説明 | リファレンス |
|---|---|---|
| pages.json | ページルーティング、タブバー、グローバルスタイル、サブパッケージ | config-pages |
| manifest.json | アプリ設定、権限、プラットフォーム設定 | config-manifest |
プラットフォームのサポート
| プラットフォーム | サポートレベル |
|---|---|
| iOS アプリ | 完全サポート |
| Android アプリ | 完全サポート |
| HarmonyOS Next | 完全サポート |
| H5／Web | 完全サポート |
| WeChat ミニプログラム | 完全サポート |
| Alipay ミニプログラム | 完全サポート |
| Baidu Smart Program | 完全サポート |
| Douyin ミニプログラム | 完全サポート |
| QQ ミニプログラム | 完全サポート |
| Kuaishou ミニプログラム | 完全サポート |
| Feishu ミニプログラム | 完全サポート |
| JD ミニプログラム | 完全サポート |
| HarmonyOS Meta Service | 完全サポート |
主要な概念
条件付きコンパイル
プラットフォーム固有のコードを記述するには、特殊なコメントを使用します。
<view>App only</view>
<view>WeChat only</view>
API の Promise サポート
コールバックを指定しない場合、ほとんどの uni-app API は Promise をサポートします。
const res = await uni.request({ url: 'https://api.example.com' })
クロスプラットフォーム開発のベストプラクティス
- プラットフォーム固有のものではなく、uni-app のコンポーネントと API を使用します
- プラットフォーム固有の機能には条件付きコンパイルを使用します
- すべての対象プラットフォームでテストします
- レスポンシブレイアウトには rpx を使用します
- manifest.json でプラットフォーム間の違いに対応します
コメント
Markdown 対応