【2026年最新】Expo Goで始める！超初心者のためのAndroidアプリ開発入門

typescript-expogo プログラミング

「スマホアプリを作ってみたいけど、環境構築が難しそう…」

そんな初心者の方に朗報です！ Expo Goを使えば、重たい環境構築をすることなく、普段使っているJavaScript/TypeScriptの知識で、今すぐ自分のスマホで動くAndroidアプリが作れます。

この記事では、Expo Goの基本からプロジェクトの作成、スマホでの動作確認までを分かりやすく解説します！

1. Expo Goとは？（概要説明）

Expo Goとは、React Nativeで開発中のアプリを、実機のスマホで即座にテスト・動作確認できる公式の検証用アプリです。

通常、Androidアプリを開発するには「Android Studio」という巨大なソフトをダウンロードし、仮想のスマホ（エミュレータ）を立ち上げるなどの面倒な設定が必要です。

しかしExpo Goを使えば、PCでコマンドを実行し、スマホのカメラでQRコードを読み取るだけで、作ったアプリが手元のスマホで一瞬で動き出します！

2. 他のAndroidアプリ開発手法との比較

Androidアプリを作る方法はいくつかあります。初心者視点でそれぞれの違いを比較してみましょう。

開発手法使用言語メリットデメリット / 初心者の壁
Native（Kotlin）KotlinAndroidの最新機能や高負荷な処理に強いAndroid専用。環境構築が重く、学習コスト高め
FlutterDart動作が高速でデザインの自由度が高い独自言語「Dart」を新しく学ぶ必要がある
React Native (Bare)JS / TSWeb技術が使え、iOS/Android両対応ネイティブコードの知識が一部求められる
Expo Go (★おすすめ)JS / TS環境構築がほぼ不要。スマホですぐ動く高度な独自ネイティブモジュール追加に制限あり

💡 結論： Web開発の知識（React）を活かしたい人や、とにかく最短でスマホアプリを動かす体験をしてみたい初心者は、Expo Go一択です！

3. プロジェクト作成コマンド

それでは、実際にアプリの土台を作っていきましょう。

PCのターミナル（WindowsはPowerShellやGit Bash、MacはTerminal）を開き、以下のコマンドを実行します。

npx create-expo-app@latest my-first-app
  • my-first-app の部分は好きなアプリ名に変更してOKです。
  • コマンドを実行すると、対話形式でいくつか質問されます。
Select an Expo SDK version: » - Use arrow-keys. Return to submit.
    Latest (SDK 57) - Recommended for most projects
    For learning with Expo Go (SDK 54)
    Other SDK version…

For learning with Expo Go (SDK 54)（または記載されているExpo Go用SDK）を選んで進めます。

現在、Google Playストアで配信されている「Expo Go」アプリは、最新のSDK（SDK 57など）にすぐには対応していない（少し遅れて追従する）という仕様があります。

  • Latest (SDK 57) を選ぶと… 開発手法が「Development Builds（自分専用のビルド）」前提になるため、ストアの Expo GoアプリでQRコードを読み込んだ時に「SDKバージョンが対応していません」というエラー になってしまいます。
  • For learning with Expo Go (SDK 54) を選ぶと… ストアで配信中のExpo Goアプリと互換性があるバージョンのSDKでプロジェクトを作ってくれるため、問題なくQRコードで実機起動できます。
  • その後プロジェクトに必要なファイルが自動的にダウンロードされます。

コマンド実行後に npm warn deprecated… や 14 vulnerabilities といった警告が表示されることがありますが、最後に ✅ Your project is ready! と表示されていれば作成成功です！

これらは依存しているライブラリの通知であり、アプリの動かしかたや学習には影響しないので、そのまま次のステップに進んでOKです。

  • 作成が終わったら、以下のコマンドで作成したフォルダに移動します。
cd my-first-app

4. 生成されたファイルとフォルダの解説

プロジェクトが開けたら、コードエディタ（VS Codeなど）で中身を見てみましょう。

my-first-app/
├── .claude/                # AIツール・エディタ用の隠し設定
├── .vscode/                # VS Codeの設定ファイル
├── app/                    # ★メイン画面・ルーティング（最重要！）
│   ├── (tabs)/             # タブナビゲーション用のグループフォルダ
│   │   ├── _layout.tsx     # タブバー（画面下のメニュー）の設定
│   │   ├── explore.tsx     # 2つ目のタブ画面（探索・詳細など）
│   │   └── index.tsx       # ★アプリのトップ画面（ここを編集！）
│   ├── _layout.tsx         # 全体共通のレイアウト設定
│   └── modal.tsx           # モーダル（ポップアップ画面）
├── assets/                 # 画像やフォントなどの素材置き場
├── components/             # 自作の共通パーツ（ボタンやカードなど）
├── constants/              # テーマカラーや共通定数データ
├── hooks/                  # カスタムフック（ロジック処理）
├── node_modules/           # ライブラリ本体（触らなくてOK）
├── scripts/                # プロジェクト用のサポートスクリプト
├── .gitignore              # Gitの除外設定
├── AGENTS.md               # エージェント用ドキュメント
├── app.json                # ★アプリ名やアイコンなど全体の設定
├── CLAUDE.md               # 設定ファイル
├── eslint.config.js        # コードの自動チェック設定
├── package-lock.json       # ライブラリのバージョン固定ファイル
├── package.json            # パッケージ管理＆実行コマンド設定
├── README.md               # プロジェクトの説明文書
└── tsconfig.json           # TypeScriptの設定ファイル

標準テンプレート（Expo Router構成）で生成される主要なファイルとフォルダの役割一覧です。

📁 フォルダの解説

フォルダ名役割と解説
app/【最重要】アプリの画面（ページ）を作る場所
Web開発（Next.jsなど）でいうルーティングと同じ仕組みです。この中のファイル（index.tsx や (tabs) など）を編集してアプリの画面を作っていきます。
assets/画像やフォントなどの素材置き場
アプリ内で使うアイコン画像、ロゴ、背景画像、カスタムフォントなどを保存しておくフォルダです。
components/使い回すパーツ（UI部品）を入れる場所
例えば「カスタムボタン」「ヘッダー」など、複数の画面で使い回したいReactコンポーネントをここにまとめておきます。
constants/共通の定数をまとめておく場所
アプリ全体で使う「テーマカラー（メイン色・サブ色）」や「APIのURL」など、変更しない値を定義しておくフォルダです。
hooks/共通処理（カスタムHook）を入れる場所
「ダークモードの切り替え」や「端末の動きの検知」など、ロジック部分を分離して再利用するための関数を格納します。
scripts/開発サポート用のスクリプト
リセット処理（reset-project.ts など）が入っており、プロジェクトを初期状態に戻したい時などに使います。通常はいじる必要はありません。
node_modules/外部ライブラリが入っている巨大フォルダ
npm install でインストールされたコードがすべて入っています。自動管理される場所なので、手動で変更したり削除したりはしません。

📄 ファイルの解説

ファイル名役割と解説
app.json【超重要】アプリ全体の設定ファイル
アプリの名前（name）、表示名（displayName）、アイコン画像（icon）、スプラッシュ画面（起動画面）、バージョン表記などを管理します。設定を変えたい時に編集します。
package.json【超重要】プロジェクトの設計図
使われているライブラリの一覧や、起動コマンド（npm run android など）が書かれています。新しいライブラリを追加すると自動で更新されます。
tsconfig.jsonTypeScriptの設定ファイル
TypeScriptの型チェックやコンパイルのルールが書かれています。基本的にデフォルトのままでOKです。
eslint.config.jsコードの品質チェック（構文チェック）の設定
「コードに書き間違いがないか」「統一された書き方になっているか」をチェックするツール（ESLint）の設定ファイルです。
package-lock.jsonライブラリの厳密なバージョン記録ファイル
どのライブラリのどのバージョンが入っているかを正確に記録しています。手動で編集はしません。
.gitignoreGitで管理しないものを指定するファイル
容量の大きい node_modules などをGitHubにアップロードしないように除外設定が書いてあります。
README.mdプロジェクトの説明書
起動方法などの基本的なメモが書かれているテキストファイルです。

初心者がまず覚えるべき重要ファイル

  • app/(tabs)/index.tsx: ここが一番重要です！ アプリを開いたときに最初に表示される画面です。このファイルの中のテキストやデザインを変更していくのが開発の第一歩になります。
  • app.json: アプリのアイコン画像、アプリの表示名、バージョン情報などを変更したい時に編集します。

5. 開発サーバー立ち上げ＆実機での確認方法

いよいよ、アプリをスマホで動かしてみましょう！

STEP 1：スマホに「Expo Go」をインストール

事前に、お手持ちのAndroidスマホでGoogle Playストアを開き、「Expo Go」 アプリをダウンロードしておきます。

⚠️ 注意： PCとスマホは**同じWi-Fi（Wi-Fiネットワーク）**に接続しておいてください。

STEP 2：開発サーバーの起動

PCのターミナルで以下のコマンドを実行します。

npx expo start

コマンドを実行すると、ターミナル上に以下のような大きなQRコードが表示されます。

STEP 3：スマホでスキャンして起動！

  1. Androidスマホで「Expo Go」アプリを開きます。
  2. アプリ内の 「Scan QR code」 をタップし、PC画面のQRコードを読み取ります。

画面に「Building…」と表示され、数秒待つとあなたの作成したアプリがスマホ上で起動します！

💡 リアルタイム更新（Hot Reload）を体感しよう

app/index.tsx のテキストをエディタで少し書き換えて保存（Ctrl + S / Cmd + S）してみてください。

スマホの画面がリアルタイムで瞬時に書き換わるはずです！ これがExpo開発の快適さの秘密です。

まとめ

今回はExpo Goを使ってAndroidアプリ開発を始める手順を解説しました！

  1. Expo Goを使えば環境構築ゼロで開発を始められる
  2. コマンド一発（npx create-expo-app）でプロジェクト作成完了
  3. 編集するのは主に app/ フォルダの中身
  4. npx expo start でQRコードを出してスマホで読み取るだけ！

次回以降の記事でサンプルアプリを作成してみて、実際のandroidスマホで起動したいと思います。

コメント

タイトルとURLをコピーしました