claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

🔧expo-module

プラグイン
expo
ライセンス
MIT

説明

Expo Modules API(Swift、Kotlin、TypeScript)を使用した、Expoネイティブモジュールおよびビューの作成・実装に関するガイド。 モジュール定義DSL、ネイティブビュー、共有オブジェクト、configプラグイン、ライフサイクルフック、オートリンキング、型システムについて解説します。 次のような場合に使用: Expo向けのネイティブモジュールを新規構築または修正する場合。

原文を表示

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.

ユースケース

  • Expo向けのネイティブモジュールを構築する
  • ネイティブビューを実装する
  • configプラグインを設定する
  • モジュール間で共有オブジェクトを使用する

本文(日本語訳)

Expo Module の作成

Expo Modules API を使用してネイティブ module およびネイティブ view を構築するための完全なリファレンスです。 Swift(iOS)、Kotlin(Android)、TypeScript を対象としています。

次のような場合に使用

  • 新しい Expo ネイティブ module またはネイティブ view を作成する
  • カメラ・センサー・システム API などのネイティブ機能を Expo アプリに追加する
  • プラットフォーム SDK を React Native から利用できるようラップする
  • ネイティブプロジェクトのファイルを変更する config plugin を作成する
  • 既存の Expo module に Android・Apple・Web サポートを追加する
  • expo-module.config.json、config plugin、またはライフサイクルフックを編集する

リファレンス一覧

必要に応じて以下のリソースを参照してください:

references/
  create-expo-module.md      スキャフォールドと add-platform-support のワークフロー、デフォルト設定、および注意点
  native-module.md           Module 定義 DSL: Name、Function、AsyncFunction、Property、Constant、Events、型システム、shared object
  native-view.md             ネイティブ view コンポーネント: View、Prop、EventDispatcher、view のライフサイクル、ref ベースの関数
  lifecycle.md               ライフサイクルフック: module、iOS app/AppDelegate、Android activity/application リスナー
  config-plugin.md           Config plugin: Info.plist・AndroidManifest.xml の変更、ネイティブコードでの値の読み取り
  module-config.md           expo-module.config.json のフィールド、ファイルの配置、およびオートリンクの動作

クイックスタート

ネイティブ module のファイルやディレクトリを手動で作成するよりも、create-expo-module を使用してください。 実際には、まずスキャフォールドを生成してからその上に実装を積み上げていくのが最善の方法です。 スキャフォールドは、期待されるディレクトリ構成・expo-module.config.json・podspec または Gradle ファイル・TypeScript バインディング・スタンドアロンのサンプルアプリフローをすべてセットアップしてくれます。

既存の Expo module に別のプラットフォームを追加するだけであれば、ネイティブディレクトリを手動でコピーする代わりに create-expo-module add-platform-support を使用してください。

スキャフォールドの生成や module の拡張を行う前に、references/create-expo-module.md を参照してください。以下の内容が記載されています:

  • ローカル module とスタンドアロン module の違い
  • --platform--features--barrel--package-manager、および非インタラクティブモード
  • expo.autolinking.nativeModulesDir
  • add-platform-support の動作と注意点

推奨ワークフロー

  1. まずスキャフォールドの種類を選択する:
    • ローカル module: 単一アプリ向け
    • スタンドアロン module: 再利用・モノレポ・公開向け
  2. 必要なネイティブ expo-module の機能を決定する:
    • ユーザーの指示に基づいて、有用なフィーチャースキャフォールドを判断する
    • 利用可能な機能: ConstantFunctionAsyncFunctionEventViewViewEventSharedObject
  3. 意図を持ってスキャフォールドを生成する:
    • スラッグまたはパスを明示的に指定する
    • デフォルトに頼らず --platform を意図的に選択する
    • --features を使用してコードサンプルを選び、次のステップで実際の実装に合わせて修正する
  4. 生成されたサンプルコードを実際の実装に置き換える
  5. 後から新しいプラットフォームを追加する場合は、手動でのファイルコピーよりも add-platform-support を優先する

スキャフォールドに関する実践的なルール

  • フィーチャーのサンプルコードはオプトイン形式です。フィーチャーを選択しなかった場合、生成される module は最小限の構成になることがあります。
  • ViewEvent を指定すると View も含まれます。
  • ローカル module はデフォルトでは index.ts バレルファイルを生成しません。必要な場合にのみ --barrel を使用してください。
  • 非インタラクティブのローカルスキャフォールドでは、位置引数としてスラッグまたはパスを明示的に渡してください。--name はフォルダ名ではなくネイティブクラス名を変更します。
  • ローカル module は、expo.autolinking.nativeModulesDir が設定されている場合はそのディレクトリに、未設定の場合は modules/ に配置されます。
  • スタンドアロン module は独自のパッケージメタデータ・スクリプト、および通常はサンプルアプリを持ちます。ローカル module はホストアプリのツールチェーンを使用します。

コアファイルの構造

Swift と Kotlin の DSL は同じ構造を共有しています。 Swift が最も明確な主要例となることが多いため、機能ごとの詳細はリファレンスを参照してください。

Module 構造リファレンス

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 を参照してください。

原文(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

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.

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