👻

【Snapchat発】8年間の運用実績。爆速クロスプラットフォーム「Valdi」の全貌

に公開
Flutter
React Native
アプリ開発
クロスプラットフォーム
valdi
idea

React NativeやFlutterに続く、新たなモバイル開発の選択肢が登場しました。
その名は 「Valdi」。

Snapchat (Snap Inc.) が先日OSSとして公開したこのフレームワークは、ただの新しいツールではありません。Snapchatという世界でもトップクラスの巨大アプリで、8年間にわたり実戦投入され、鍛え上げられてきた「秘伝の技術」 なのです。

今回は、なぜValdiが「爆速」なのか、その技術的な裏側と具体的な使い方を、公式ドキュメントの深層部まで掘り下げて解説します。

🚀 なぜ今「Valdi」なのか？

多くのクロスプラットフォームフレームワーク（React Nativeなど）が抱える最大の課題は、「開発効率と実行パフォーマンスのトレードオフ」 です。

  • 開発効率: TypeScriptで書きたい、ホットリロードしたい。
  • パフォーマンス: ネイティブ（Swift/Kotlin）並みのヌルヌル感が欲しい。

Valdiはこの両立を目指し、特に 「View Recycling（ビューの再利用）」 と 「Polyglot（多言語対応）」 という独自のアプローチで限界を突破しようとしています。

⚙️ 技術の深層：パフォーマンスの秘密

1. 徹底された「View Recycling（ビュー・リサイクリング）」

Valdiが他のフレームワークと決定的に違うのは、「すべてのビューをリサイクルする」 という設計思想です。

通常、モバイルアプリでは RecyclerView (Android) や UICollectionView (iOS) のようなリスト表示の中でだけビューの再利用が行われます。しかしValdiは、リストに限らずアプリ全体のビューをグローバルなプールで管理し、再利用します。

  • 仕組み: ビューが不要になると破棄されず、属性がクリアされて「プール」に戻されます。次に同じ種類のビューが必要になった時、プールから即座に取り出されます。
  • メリット: ビューの生成（Inflation）コストが劇的に下がります。
  • 効果: 画面遷移や複雑な画面の描画が一瞬で終わります。if文で表示を切り替えるような単純な処理も、内部では効率的にリサイクルが走るため、パフォーマンス劣化を気にせず直感的にコードが書けます。

2. メインスレッドC++レイアウトエンジン

レイアウト計算にはFacebook発の Yoga エンジン（C++製）を採用していますが、これをメインスレッドで効率的に動作させています。JavaScript（TypeScript）側で宣言されたUIツリーは、効率的にC++層へ渡され、ブリッジのオーバーヘッドを最小限に抑えています。

🌍 「Polyglot Modules」：ネイティブ連携の最適解

クロスプラットフォーム開発で最も苦労するのが、「ネイティブ機能（カメラ、Bluetooth、既存のライブラリなど）をどう呼ぶか」です。Valdiはこの連携機能（Polyglot）が非常に強力です。

Valdiのモジュールは、TypeScriptの型定義 (.d.ts) に対して、好きな言語で実装を書くことができます。

実装の流れ

  1. TypeScriptで定義: インターフェースを決める（@ExportModule アノテーションを使用）。
  2. 各言語で実装:
    • iOS: Objective-C / Swift
    • Android: Kotlin / Java
    • 共通処理: C++

特筆すべきは C++ での実装もサポートしている点 です。画像処理や暗号化などの計算負荷が高いロジックをC++で書き、それをiOS/Android/TypeScriptのすべてから共有・呼び出し可能にすることができます。

// TypeScript定義の例
/* @ExportModule */
export const DEFAULT_DELIMITER: string;
export function join(components: string[], delimiter: string): string;

これを書くだけで、ビルドシステム（Bazel）が自動的にiOS/Android用のバインディングコードを生成してくれます。開発者は中身の実装（KotlinやObjC）を書くだけで済みます。

📝 コードで見るValdi

Flexboxによるレイアウト

Web開発者にはおなじみのFlexboxが標準です。CSSに似たプロパティを直接コンポーネントに指定できます。

export class LayoutExample extends Component {
  onRender() {
    // columnモードで、要素を中央揃えにする
    <view
      flexDirection='column'
      justifyContent='center'  // 縦方向の中央
      alignItems='center'      // 横方向の中央
      backgroundColor='lightblue'
      height={100}
    >
      <label value='Header' />
      <view flexDirection='row'>
        <label value='Item 1' />
        <label value='Item 2' />
      </view>
    </view>;
  }
}

コンポーネント志向

Reactのクラスコンポーネントによく似た Component クラスを継承し、onRender() メソッドでUIを返します。ステート管理やライフサイクルも備えています。

🛠️ 開発の始め方 (Quick Start)

macOS環境であれば、以下の手順ですぐに動かすことができます。

1. インストール & セットアップ

npm install -g @snap/valdi
valdi dev_setup  # 依存関係の自動インストール

2. プロジェクト作成

mkdir my_app && cd my_app
valdi bootstrap

3. 実行 (iOS)

valdi install ios

これでXcodeが立ち上がり、シミュレータでアプリが起動します。コードを保存すれば、即座に画面に反映される「ホットリロード」も標準装備です。

📊 まとめ：Valdiは流行るのか？

特徴 Valdiの強み
パフォーマンス View Recyclingにより、ネイティブ以上の効率が出る場面も。
開発体験 TypeScript + VSCodeデバッガ対応で、Web開発に近い感覚。
ネイティブ連携 Polyglotシステムにより、C++/Kotlin/Swiftを自由に混在可能。
信頼性 Snapchatで8年使われている実績は強大。

現在はBeta版ですが、「既存のネイティブアプリの一部を置き換える」 といった用途や、「パフォーマンス要求が極めて高いアプリ」 において、FlutterやReact Nativeを超える選択肢になる可能性を秘めています。

Snapchatの"本気"が詰まったこのフレームワーク、週末の技術探索にいかがでしょうか？

🔗 関連リンク

※本記事は2025年11月時点の情報を基に作成しています。

Discussion