ダウンロード サンプルファイル (188.3 KB)
ExpoのベースエンジンであるReact Nativeは、モバイルアプリ上でJavaScriptランタイムを動かすミドルウェアとしての側面とは別に、GUIアプリケーションを開発する上で基盤となる、プリミティブなUIライブラリとしての側面も持っています。本記事では、React Nativeの基本的なモジュールをおさらいしながら、Expoのライブラリを使ってモバイルアプリを開発するための基礎を学びます。
対象読者
- モバイルアプリを作ってみたいReactエンジニア
- モバイルアプリのリリース作業を手軽に行いたい方
前提環境
筆者の検証環境は以下の通りです。
- macOS Sequoia 15.0.1
- Node.js 22.10.0
- npm 10.9.0
- Expo 51.0.38
- React Native 0.74.5
React Nativeに直接含まれるモジュールは少ない
本連載ではExpoというフレームワークを中心に解説していきますが、Expoを利用してモバイルアプリ開発を行う場合でも、そのベースとなるReact Native固有のモジュールが隠ぺいされるわけではありません。そのため、今回は基礎編として、React Nativeの基本的なモジュールをおさらいしていきます。
基礎という意味ではReactの各種APIの知識も必要ではありますが、JSXの扱いやフック等はブラウザ向けのReactと同じように扱えるため、本連載では割愛します。Reactの基礎から学びたい場合は、React公式サイトなどを参照してください。
まずは、React Nativeのモジュールについての考え方を整理しておきましょう。筆者が認知している範囲では、「React Native」と呼ばれるものには次の3つの側面があります。
- モバイルアプリ上でJavaScriptランタイムとReactアプリケーションを動作させ、JavaScriptコードとネイティブコードの橋渡しを行うミドルウェア
- モバイルアプリのGUIを構築するベースとなる、Reactコンポーネントを提供するモジュール
- UI表示以外の機能を提供するモジュール（例：クリップボード、GPS、音声再生など）
これらのうち、（1）はAndroidやiOSのライブラリとして提供されるものであり、React Nativeの最もコアな部分です。その上で、（2）と（3）がReact Nativeの標準ライブラリとして提供されている形になります。
（2）と（3）の種類のモジュールは、私たち一般の開発者でも所定のAPIに沿って開発することで、サードパーティモジュールとして作成し、各自のアプリに組み込むことができます。そう考えると、React Nativeというフレームワークの本質的な部分は、（1）のミドルウェア部分だけなのかもしれません。
実際に、React Nativeの現行のアーキテクチャは、「Lean Core（最小限のコア）」の方針で設計されています。Meta社のReact Native開発チームは、React Native本体に含めるモジュールを最小限にしています。また、豊富な機能を持った便利なモジュールは、Expoなどのサードパーティ（多数の企業を含む）によって開発されています。
本連載でも、次回以降、主にExpoが提供する各種モジュールを解説していきます。これらを組み合わせることで、実用的なモバイルアプリを開発していくことができることでしょう。
Lean Coreの方針が決まって以降、かつてReact Nativeの本体に含まれていたモジュールは、次々とサードパーティでの開発に移行していきました。しかしながら、前述の（2）や（3）の種類のモジュールの中にも「最小限」のくくりに収まって、React Native本体に残ったものがあります。これらのモジュールは、Expoを前提とした開発環境でも、React Nativeのモジュールとして直接インポートして使用する機会が多いです。今回は、そういったモジュールのうち、特に基本のコンポーネントを解説しましょう。
実験用のプロジェクトを作成する
今回の実験用のプロジェクトを作成しましょう。リスト1のコマンドを実行して、Expoプロジェクトを作成します。
$ npx create-expo-app@latest rn-basic-modules --template blank
--template blankを指定することで、最も小さい形でプロジェクトを作成しました（図1）。
ReactコンポーネントはエントリーポイントでもあるApp.jsだけなので、今回はこのファイルを編集していきましょう。
この記事は参考になりましたか？
- この記事の著者
-
WINGSプロジェクト 中川 幸哉（ナカガワ ユキヤ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
