JavaScript: 言語の基礎、React Nativeとモバイル開発

JavaScriptとは？

JavaScript（JS）は、動的型付け、プロトタイプベースの継承、関数を第一級オブジェクトとして持つ高水準プログラミング言語です。1995年にBrendan Eichによって10日間で作成されました。Web技術（HTML、CSS、JS）の3つの主要言語の1つであり、JSをブラウザの外に出すことを可能にしたNode.jsサーバープラットフォーム（2009年）の基盤です。

モバイル開発では、JavaScriptは3つのパラダイムで使用されます：ネイティブコンパイル（Hermes/JSCを使用したReact Native）、WebViewコンテナ（Ionic、Cordova）、サーバーサイドJS（モバイルアプリバックエンドのためのNode.js + Express）。React Nativeが支配的な技術です：Statista（2025年）によると、クロスプラットフォームプロジェクトの38%がReact Nativeを使用しており、Flutter（46%）に次いで2位です。

JavaScriptの主要な特徴は、ノンブロッキングI/Oを備えたシングルスレッド実行モデルです。イベントループは、OSスレッドを作成せずに1つのスレッドで数千の非同期操作を処理できます。これにより、JSはI/O集約型アプリケーション（ネットワークリクエスト、データベース操作）に効率的ですが、CPU集中型の計算には注意が必要です。

JavaScript標準: ES5、ES6、ES2025

ECMAScript（ES）標準はJavaScriptの仕様を定義します。ES6（2015年）はlet/const、アロー関数、クラス、モジュール、Promiseを導入しました。ES2020 — Optional Chaining（?.）、Nullish Coalescing（??）。ES2023 — Array findLast、Hashbang Grammar。最新のエンジンHermes（React Native）とV8（Node.js）はES2022+をサポートしています。React Native HermesはProxyとSymbolに一部制限がありますが、ES2020+をサポートしています。

JavaScript構文: 型、関数、プロトタイプ

JavaScriptの構文はC言語に似ており、動的型付けです。変数の型は値によって決定され、実行時に変更できます。letとconst（ES6）はブロックスコープのためにvarを置き換えました。プリミティブ型：string、number、boolean、null、undefined、symbol、bigint。それ以外はすべてオブジェクトです（object、array、function、date、regexp）。

第一級オブジェクトとしての関数

JavaScriptは高階関数を持つ言語です。関数は変数に代入したり、引数として渡したり、他の関数から返したりできます。アロー関数（=>）は独自のthisを持たず — 外部コンテキストからthisを継承します。クロージャは、作成されたスコープの変数を記憶する関数です。

// JavaScriptのデータ型と関数
// プリミティブ型
const name = 'React Native';
let version = 0.71;
var isActive = true; // 非推奨のvar

// オブジェクトと配列
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// 高階関数
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// クロージャ
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// オブジェクトコピーのためのスプレッド演算子
const newApp = { ...app, version: 16 };

スプレッド演算子...はオブジェクトの表面コピーを作成します。分割代入（const { platform, version } = app）はフィールドを変数に抽出します。filterByVersionのアロー関数はfunction式より短く、独自のthisを作成しません — これはthisがコンポーネントクラスを参照するReact Nativeコンポーネントで重要です。

プロトタイプベースの継承

JavaScriptは、JavaやC#のようなクラスベースではなく、プロトタイプベースの継承を使用します。クラス（ES6）はプロトタイプ上のシンタックスシュガーです。すべてのオブジェクトは別のオブジェクトへの内部[[Prototype]]参照を持っています。オブジェクトに存在しないプロパティにアクセスすると、JSはプロトタイプチェーンでそれを探します。クラス構文（extends、super）はコードを読みやすくしますが、内部ではプロトタイプのままです。

// JavaScriptのクラス — シンタックスシュガー
class PlatformService {
  // プライベートフィールド（ES2022）
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // 静的メソッド
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // ゲッター
  get info() {
    return `${this.name} SDK`;
  }

  // 非同期メソッド
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// 継承
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

プライベートフィールド#apiKey（ES2022）は、_アンダースコア規則では利用できなかった真のカプセル化を提供します。静的メソッドgetPlatformsはインスタンスではなくクラスに属します。ゲッターinfoはアクセス時に計算されます。async/awaitは非同期コードを線形にします。React Native Hermesはバージョン0.71からプライベートフィールドをサポートしています。

JavaScriptの非同期処理: Event LoopとPromise

JavaScriptの非同期処理はイベントループに基づいています — コールスタックとタスクキューをチェックする無限ループです。コールスタックは同期コードを処理し、マイクロタスクキューはPromise.then/catch/finallyを処理し、マクロタスクキューはsetTimeout、setInterval、I/Oを処理します。イベントループは最初にマイクロタスクから、次にマクロタスクからタスクを取得します。コールスタックのブロッキング（無限ループ）はUI全体を停止させます。

Promiseは将来の値を表すオブジェクトです。プロミスはpending（保留中）、fulfilled（完了）、rejected（拒否）の状態になります。.then().catch().finally()チェーンは非同期結果を処理します。async/await（ES8）はシンタックスシュガーです：async関数はPromiseを返し、awaitはスレッドをブロックせずにプロミスが解決されるまで実行を一時停止します。

// React Nativeでの非同期データ読み込み
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('フェッチ失敗：', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

useEffectフックとasync fetchUser関数は、コンポーネントのマウント時にHTTPリクエストを実行します。cancelledフラグはアンマウント後のsetStateを防ぎます — React Nativeの一般的な問題です。Optional Chaining user?.nameとNullish Coalescing ??はエラーなしでundefinedを処理します。ActivityIndicatorはロード中に表示されます — すべてのJS開発者になじみのある非同期パターンです。

React Native: モバイルプラットフォーム上のJavaScript

React Nativeは、JavaScriptでネイティブモバイルアプリケーションを作成するためのMeta（Facebook）のフレームワークです。WebViewアプローチとは異なり、React Nativeは実際のネイティブコンポーネント（iOSの場合はUIView、Androidの場合はViewGroup）をレンダリングします。JSコードは別のスレッド（HermesまたはJSC）で実行され、Bridge（古いアーキテクチャ）またはJSI（新しいFabricアーキテクチャ）を介してネイティブUIスレッドと通信します。

React Nativeのアーキテクチャ

React Nativeは、JSスレッド（あなたのコード）、ネイティブスレッド（UI）、およびそれらのやり取りのためのBridge/JSIで構成されています。古いアーキテクチャ（Bridge）では、JSONメッセージがシリアル化されて非同期に送信されます — これにより高速アニメーション中に遅延が発生します。新しいFabricアーキテクチャ（React Native 0.68+）はJSI（JavaScript Interface）を使用します — シリアル化なしでのC++オブジェクトとの直接JS対話。

// ネイティブAPIを使用したReact Nativeコンポーネント
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

LocationTrackerコンポーネントは、ネイティブ位置情報APIでの動作を示しています。Platform.OSはAndroidとiOSを区別します。PermissionsAndroid.requestはネイティブのAndroid権限ダイアログです。Geolocation.getCurrentPosition — @react-native-community/geolocationのモジュールで、npmからインストールします。React Nativeはカメラ、Bluetooth、加速度計、その他のセンサー用のJSインターフェースを提供します。

IonicとCordova: WebViewコンテナ

IonicはHTML/CSS/JSをレンダリングするためにWebViewを使用するハイブリッドモバイルアプリケーション用フレームワークです。React Nativeとは異なり、Ionicはネイティブコンポーネントを作成しません — アプリケーションはiOS（WKWebView）とAndroid（Android WebView）のWebコンテナ（WebView）内で実行されます。これによりWebコードの100%再利用が可能ですが、複雑なアニメーションのパフォーマンスは制限されます。

Apache CordovaはIonicの基盤であり、JavaScriptプラグインを介してネイティブAPIへのアクセスを提供します。カメラ、GPS、連絡先、ファイルシステム — すべてcordova-plugin-*で利用可能です。Ionic 7+はCapacitorを使用します — Cordovaの後継で、パフォーマンスが向上し、ESMをサポートし、SwiftとKotlinを介してiOS/Android SDKに直接アクセスできます。

JavaScript開発者ツール

モバイルアプリケーションのためのJS開発者ツールには、Node.js、npm/yarn、Expo、React Native CLI、Metroバンドラーが含まれます。Node.jsはブラウザ外のJS実行環境であり、エコシステムの基盤です。npm（Node Package Manager）は200万以上のライブラリを持つパッケージマネージャーです。npxはインストールせずにnpmパッケージを実行するユーティリティです。

ツールエコシステム

ExpoはReact Native上のレイヤーで、開発を簡素化します：開始にXcode/Android Studioを必要とせず、プリインストールされたライブラリでManaged Workflowを提供します。Expo Application Services（EAS） — クラウドでのビルドと公開。MetroはReact Nativeのバンドラーで、JSコードと依存関係を1つのファイルにまとめます。HermesはAOTコンパイルを備えたモバイルデバイス向けに最適化されたMetaのJSエンジンです。

// package.json — React Nativeプロジェクト構成
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

package.jsonファイルはあらゆるJSプロジェクトの基盤です。start、android、iosスクリプトはMetroバンドラーとビルドを起動します。依存関係はdependencies（ランタイム）とdevDependencies（テスト、リンター）に分けられます。React Navigationは標準ルーターです。Jestはテストフレームワークです。ESLintはコードスタイルと潜在的なエラーをチェックする静的アナライザーです。