React Native およびモバイルアプリで ONNX モデルを活用する方法

ONNX（Open Neural Network Exchange）は、機械学習モデルを 一度学習し、複数の環境で再利用 できるフォーマットです。PyTorch や TensorFlow で学習したモデルを、Android / iOS / React Native / Flutter などのモバイル環境へ効率的に展開できます。

本記事では、React Native での ONNX 利用 を中心に、オンデバイス AI や Local LLM をモバイルアプリに組み込むための考え方と実践ポイントを解説します。

なぜ ONNX はモバイルアプリに適しているのか

ONNX がモバイル分野で選ばれる理由は以下の通りです。

特定の ML フレームワークに依存しない
CPU およびモバイル向けアクセラレータ（NNAPI / CoreML）をサポート
Python ランタイム不要
オフライン動作・低レイテンシに強い

特に 信頼性・セキュリティ・安定した UX が求められる日本市場では、ONNX は非常に相性の良い技術です。

モバイル向け ONNX Runtime の選択肢

プラットフォーム	推奨 Runtime
React Native	onnxruntime-react-native
Android（ネイティブ）	ONNX Runtime Android
iOS（ネイティブ）	ONNX Runtime iOS
Flutter	Platform Channel 経由で ONNX Runtime
Ionic / Capacitor	ネイティブ Plugin + ONNX Runtime

※ JavaScript のみで ONNX を実行する方法は、実運用では推奨されません。

React Native で ONNX を利用する（推奨構成）

1. ONNX Runtime のインストール

安定性を重視する場合、React Native CLI の利用を推奨します。

yarn add onnxruntime-react-native
cd ios && pod install && cd ..

Expo を使用する場合は、prebuild と custom dev client が必要です。

2. ONNX モデルをアプリに組み込む

一般的な方法：

アプリにモデルを同梱（assets/models/model.onnx）
初回起動時にダウンロードし、端末にキャッシュ

初期段階では 同梱方式 がシンプルです。

3. Inference Session の作成

import * as ort from "onnxruntime-react-native";

export async function loadModel(modelPath: string) {
  return await ort.InferenceSession.create(modelPath, {
    executionProviders: ["cpu"],
  });
}

4. 推論の実行

export async function runInference(session, inputName, data, dims) {
  const tensor = new ort.Tensor("float32", data, dims);
  const feeds = { [inputName]: tensor };
  return await session.run(feeds);
}

モデルの input 名称・shape が正確であることを必ず確認してください。