• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

expo-module

プラグイン
expo
ライセンス
MIT
ソース
GitHub で見る ↗
説明

フレームワーク(オープンソースソフトウェア)。Expo モジュール API(Swift、Kotlin、TypeScript)を使用して、Expo のネイティブモジュール(スマートフォンの基本機能と直結したプログラム部品)とビューを作成・記述するためのガイドです。 モジュール定義 DSL(ドメイン固有言語)、ネイティブビュー、共有オブジェクト、設定プラグイン、ライフサイクルフック(動作段階での処理)、自動リンク、型システムについて説明しています。 **次のような場合に使用:** Expo 用のネイティブモジュールを新しく構築または修正する場合 **注意:** 既存の Swift モジュールを定義 DSL から Expo モジュール API 2.0 マクロ(短縮記法)に移行させる場合は、このガイドではなく expo-migrate-module(expo-experiments プラグイン内)を使用してください。

原文を表示

Framework (OSS). Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo. Not for migrating an existing Swift module from the definition DSL to the Expo Modules API 2.0 macros; use expo-migrate-module (from the expo-experiments plugin) for that.

ユースケース
  • Expo用のネイティブモジュールを新しく構築
  • 既存のネイティブモジュールを修正
  • モジュール定義DSLを記述
  • ネイティブビューを作成
本文(日本語訳)

Expo モジュール作成ガイド

Expo Modules API(開発者向けアプリケーションインターフェース)を使用して、ネイティブモジュール(iOS・Android・Web用の機能拡張)とビュー(画面要素)を構築するための完全リファレンスです。Swift(iOS)、Kotlin(Android)、TypeScript に対応しています。

使用する場面

次のような場合に使用:

  • 新しい Expo ネイティブモジュールまたはネイティブビューを作成する
  • カメラ、センサー、システムAPI など、ネイティブ機能を Expo アプリに追加する
  • プラットフォーム固有の SDK(開発キット)を React Native で使えるようにラップする
  • ネイティブプロジェクトファイルを修正する設定プラグイン(自動調整機能)を構築する
  • 既存の Expo モジュールに Android、Apple、Web サポートを追加する
  • expo-module.config.json、設定プラグイン、またはライフサイクルフック(段階的な処理)を編集する

既存の Swift モジュールを定義 DSL(領域固有言語)から Expo Modules API 2.0 マクロ(@ExpoModule、@JS、@Event)に移行する場合は、代わりに expo-migrate-module スキル(expo-experiments プラグインから提供)を使用してください。

リファレンス資料

必要に応じて以下の資料を参照してください:

references/
  create-expo-module.md      スキャフォルディング(ひな形生成)とプラットフォーム追加の流れ、デフォルト設定、注意点
  native-module.md           モジュール定義 DSL: 名前、関数、非同期関数、プロパティ、定数、イベント、型システム、共有オブジェクト
  native-view.md             ネイティブビューコンポーネント: ビュー、プロパティ、イベント発行、ビューのライフサイクル、参照ベースの関数
  lifecycle.md               ライフサイクルフック: モジュール、iOS アプリ/AppDelegate、Android アクティビティ/アプリケーションリスナー
  config-plugin.md           設定プラグイン: Info.plist、AndroidManifest.xml の修正、ネイティブコードでの値の読み取り
  module-config.md           expo-module.config.json のフィールド、ファイル配置、自動リンク動作

クイックスタート

ネイティブモジュールのファイルやフォルダを手作業で作成するより、create-expo-module を使ってください。実際のところ、最善の方法は通常、まずひな形を生成してから、その上に機能を築くことです。ひな形は、期待されるレイアウト、expo-module.config.json、podspec(iOS の依存管理)または Gradle(Android のビルドツール)ファイル、TypeScript バインディング(言語間の橋渡し)、スタンドアロン例アプリの流れをセットアップしてくれます。

既存の Expo モジュールにもう一つのプラットフォームを追加するだけなら、ネイティブディレクトリを手作業でコピーする代わりに create-expo-module add-platform-support を使ってください。

モジュールのスキャフォルディングまたは拡張前に、references/create-expo-module.md をご確認ください。以下をカバーしています:

  • ローカルモジュール vs スタンドアロンモジュール
  • --platform、--features、--barrel、--package-manager、非対話型モード
  • expo.autolinking.nativeModulesDir
  • add-platform-support の動作と注意点

推奨される作業フロー

  1. まずスキャフォルド(ひな形)のタイプを選びます:

    • ローカルモジュール — 1つのアプリ向け
    • スタンドアロンモジュール — 再利用、モノレポ(複数プロジェクト一元管理)、公開向け
  2. 必要なネイティブ expo-module の機能を決めます。

    • ユーザーの指示に基づいて、どのひな形生成機能が役立つか判断します。
    • 利用可能な機能: Constant(定数)、Function(関数)、AsyncFunction(非同期関数)、Event(イベント)、View(ビュー)、ViewEvent(ビューイベント)、SharedObject(共有オブジェクト)
  3. 意図的にスキャフォルディングします:

    • 明確なスラッグ(識別子)またはパスを渡す
    • デフォルトに頼らず、--platform を意識的に選択する
    • --features を使用して、次のステップで実装に合わせて修正するサンプルコードを選びます。
  4. 生成されたサンプルコードを実装に置き換えます。

  5. 後で新しいプラットフォームを追加する場合は、手作業ファイルコピーより add-platform-support を優先します。

スキャフォルディングの実践ルール

  • 機能サンプルは オプト・イン(明示的に選択)です。機能を選択しなければ、生成されたモジュールは最小限です。
  • ViewEvent は View を含みます。
  • ローカルモジュールはデフォルトでは index.ts の集約ファイル(エクスポートをまとめたファイル)を生成しません。必要な場合のみ --barrel を使ってください。
  • 非対話型ローカルスキャフォルディングでは、ポジショナル引数の スラッグまたはパスを明確に渡してください。--name はフォルダ名ではなく、ネイティブクラス名を変更します。
  • ローカルモジュールは、expo.autolinking.nativeModulesDir が設定されている場合はそこに、そうでなければ modules/ に配置されます。
  • スタンドアロンモジュールは独自のパッケージメタデータ、スクリプト、通常は例アプリを持ちます。ローカルモジュールはホストアプリのツールを使用します。

コアファイル構造

Swift と Kotlin の DSL は同じ構造を共有しています。Swift は通常最も分かりやすい主要例です。機能固有の詳細はリファレンスを参照してください。

モジュール構造リファレンス

Swift と Kotlin の DSL は同じ構造を共有しています。以下は両プラットフォームをリファレンス用に示します。他のリファレンスファイルでは、Kotlin パターンが意味を持つ場合を除き、Swift が主要言語として示されています。

Swift(iOS):

import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}

Kotlin(Android):

package expo.modules.mymodule

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    Function("hello") { name: String ->
      "Hello $name!"
    }
  }
}

TypeScript:

import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}

expo-module.config.json

{
  "platforms": ["android", "apple"],
  "apple": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["expo.modules.mymodule.MyModule"]
  }
}

注: iOS ではクラス名のみを使用します。Android では完全限定クラス名(パッケージ+クラス)を使用します。すべてのフィールドについては references/module-config.md をご覧ください。

フィードバック投稿

このスキルでエラーや誤解を招く情報、古い情報に遭遇した場合は、Expo の改善を支援するため報告してください:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-module" "<具体的なフィードバック>"

具体的で対応可能な内容がある場合にのみ投稿してください。できるだけ関連コンテキストを含めてください。

AI エージェントが繰り返し失敗した場合、またはユーザーが Expo タスクを引き継がなければならなかった場合は、expo-skill-feedback スキルをロードして上記コマンドの代わりに eval-candidate フロー(評価候補ワークフロー)に従ってください。

原文(English)を表示

Writing Expo Modules

Complete reference for building native modules and views using the Expo Modules API. Covers Swift (iOS), Kotlin (Android), and TypeScript.

When to Use

  • Creating a new Expo native module or native view
  • Adding native functionality (camera, sensors, system APIs) to an Expo app
  • Wrapping platform SDKs for React Native consumption
  • Building config plugins that modify native project files
  • Adding Android, Apple, or web support to an existing Expo module
  • Editing expo-module.config.json, config plugins, or lifecycle hooks

To migrate an existing Swift module from the definition DSL to the Expo Modules API 2.0 macros (@ExpoModule, @JS, @Event), use the expo-migrate-module skill (from the expo-experiments plugin) instead.

References

Consult these resources as needed:

references/
  create-expo-module.md      Scaffolding and add-platform-support workflow, defaults, and quirks
  native-module.md           Module definition DSL: Name, Function, AsyncFunction, Property, Constant, Events, type system, shared objects
  native-view.md             Native view components: View, Prop, EventDispatcher, view lifecycle, ref-based functions
  lifecycle.md               Lifecycle hooks: module, iOS app/AppDelegate, Android activity/application listeners
  config-plugin.md           Config plugins: modifying Info.plist, AndroidManifest.xml, reading values in native code
  module-config.md           expo-module.config.json fields, file placement, and autolinking behavior

Quick Start

Prefer create-expo-module over manually creating native module files and directories. In practice, the best path is usually to create the scaffold first and then build on top of it. The scaffold sets up the expected layout, expo-module.config.json, podspec or Gradle files, TypeScript bindings, and the standalone example app flow.

If an existing Expo module only needs another platform, use create-expo-module add-platform-support instead of manually copying native directories.

See references/create-expo-module.md before scaffolding or extending a module. It covers:

  • local vs standalone modules
  • --platform, --features, --barrel, --package-manager, and non-interactive mode
  • expo.autolinking.nativeModulesDir
  • add-platform-support behavior and quirks

Recommended Workflow

  1. Choose the scaffold type first:
    • Local module for one app
    • Standalone module for reuse, monorepos, or publishing
  2. Determine native expo-module features that you will need.
    • Based on the user's instructions determine which feature scaffolding will be useful.
    • Available features: Constant, Function, AsyncFunction, Event, View, ViewEvent, SharedObject
  3. Scaffold deliberately:
    • pass an explicit slug or path
    • choose --platform intentionally instead of relying on defaults
    • use --features to choose code samples which you will modify in the next step to match the real implementation.
  4. Replace generated example code with the real implementation.
  5. If you add a new platform later, prefer add-platform-support over manual file copying.

Practical Scaffolding Rules

  • Feature examples are opt-in. A newly scaffolded module may be minimal if no features were selected.
  • ViewEvent implies View.
  • Local modules do not generate an index.ts barrel by default. Use --barrel only if you want one.
  • In non-interactive local scaffolding, pass the positional slug or path explicitly. --name changes the native class name, not the folder name.
  • Local modules live in expo.autolinking.nativeModulesDir when configured, otherwise in modules/.
  • Standalone modules have their own package metadata, scripts, and usually an example app. Local modules use the host app's tooling instead.

Core File Shapes

The Swift and Kotlin DSL share the same structure. Swift is usually the clearest primary example; consult the references for feature-specific details.

Module Structure Reference

The Swift and Kotlin DSL share the same structure. Both platforms are shown here for reference — in other reference files, Swift is shown as the primary language unless the Kotlin pattern meaningfully differs.

Swift (iOS):

import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}

Kotlin (Android):

package expo.modules.mymodule

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    Function("hello") { name: String ->
      "Hello $name!"
    }
  }
}

TypeScript:

import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}

expo-module.config.json

{
  "platforms": ["android", "apple"],
  "apple": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["expo.modules.mymodule.MyModule"]
  }
}

Note: iOS uses just the class name; Android uses the fully-qualified class name (package + class). See references/module-config.md for all fields.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-module" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。