---
modificationDate: June 13, 2026
title: 最初のアプリを作成する
description: この章では、新しい Expo プロジェクトを作成する方法を学びます。
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/ja/tutorial/create-your-first-app/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

</AgentInstructions>

# 最初のアプリを作成する

この章では、新しい Expo プロジェクトを作成する方法を学びます。

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

この章では、新しい Expo プロジェクトを作成し、実行する方法を学びましょう。

[視聴：はじめてのユニバーサル Expo アプリを作成する](https://www.youtube.com/watch?v=m1-bc53EGh8) — 新しい Expo プロジェクトをゼロから作成し、Android、iOS、web で動作させます。

前提条件

4 件

1.

実機での Expo Go

Android または iOS の実機に [Expo Go](https://expo.dev/go) をインストールします。

2.

Node.js (LTS)

お使いのマシンに [Node.js (LTS バージョン)](https://nodejs.org/en) をインストールします。

3.

コードエディタ

[VS Code](https://code.visualstudio.com/) または好みのコードエディタや IDE をインストールします。

4.

ターミナルが使える開発マシン

macOS、Linux、または Windows (PowerShell および WSL2) でターミナルウィンドウを開けるマシン。

このチュートリアルは、TypeScript と React に慣れていることを前提としています。慣れていない場合は、[TypeScript ハンドブック](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) と [React 公式チュートリアル](https://react.dev/learn) を確認してみてください。

## 新しい Expo アプリを初期化する

新しい Expo アプリを初期化するために [`create-expo-app`](/more/create-expo) を使います。これは新しい React Native プロジェクトを作成するためのコマンドラインツールです。それでは、ターミナルで次のコマンドを実行してみましょう。

```sh
npx create-expo-app@latest StickerSmash
cd StickerSmash
```

このコマンドは [デフォルト](/more/create-expo#--template) テンプレートを使用して、StickerSmash という名前の新しいプロジェクトディレクトリを作成します。このテンプレートには、Expo Router を含む、アプリ構築に必要な基本的なボイラープレートコードとライブラリが含まれています。チュートリアルの中で必要に応じてライブラリを追加していきます。

> 現在、`create-expo-app@latest` は SDK 54 のプロジェクトを作成します。このチュートリアルは SDK 54 向けに設計されているため、`--template` フラグは不要です。

デフォルトテンプレートを使用するメリット

-   `expo` パッケージがインストールされた新しい React Native プロジェクトを作成します
-   Expo CLI などの推奨ツールが含まれます
-   基本的なナビゲーションシステムを提供するために Expo Router のタブナビゲーターが含まれます
-   Android、iOS、web の複数のプラットフォームでプロジェクトを実行できるよう自動的に設定されます
-   TypeScript がデフォルトで設定されます

## アセットをダウンロードする

[アセットアーカイブをダウンロード](/static/images/tutorial/sticker-smash-assets.zip) — これらのアセットはチュートリアル全体を通して使用します。

アーカイブをダウンロードしたら:

1.  アーカイブを展開し、**your-project-name/assets/images** ディレクトリ内のデフォルトアセットを置き換えます。
2.  コードエディタまたは IDE でプロジェクトディレクトリを開きます。

## reset-project スクリプトを実行する

このチュートリアルでは、アプリをゼロから構築し、ファイルベースのナビゲーションを追加する基本を理解します。ボイラープレートコードを取り除くために、`reset-project` スクリプトを実行しましょう。

```sh
npm run reset-project
```

上記のコマンドを実行すると、**app** ディレクトリには 2 つのファイル (**index.tsx** と **_layout.tsx**) が残ります。**app** ディレクトリと他のディレクトリ (**components**、**constants**、**hooks** — ボイラープレートコードを含む) からの以前のファイルは、スクリプトによって **app-example** ディレクトリに移動されます。進めながら独自のディレクトリやコンポーネントファイルを作成していきます。

`reset-project` スクリプトは何をしますか？

`reset-project` スクリプトは、プロジェクト内の **app** ディレクトリ構造をリセットし、プロジェクトのルートディレクトリにあった以前のボイラープレートファイルを、**app-example** という別のサブディレクトリにコピーします。これはメインアプリの構造の一部ではないため、削除して構いません。

## モバイルと web でアプリを実行する

プロジェクトディレクトリで、ターミナルから [開発サーバー](/more/glossary-of-terms#development-server) を起動するために次のコマンドを実行します。

```sh
npx expo start
```

上記のコマンドを実行すると:

1.  開発サーバーが起動し、ターミナルウィンドウ内に QR コードが表示されます。
2.  その QR コードをスキャンしてデバイスでアプリを開きます。Android では Expo Go > **Scan QR code** オプションを使い、iOS ではデフォルトのカメラアプリを使います。
3.  web アプリを実行するには、ターミナルで W を押します。デフォルトの web ブラウザで web アプリが開きます。

すべてのプラットフォームで動作すると、アプリは次のようになります。

## index 画面を編集する

**app/index.tsx** ファイルは、アプリの画面に表示されるテキストを定義します。これはアプリのエントリーポイントであり、開発サーバーが起動したときに実行されます。背景とテキストを表示するために、React Native の `<View>` や `<Text>` などのコアコンポーネントを使用します。

これらのコンポーネントに適用されるスタイルは、web で使われる CSS ではなく JavaScript オブジェクトを使います。ただし、これまでに web で CSS を使ったことがあれば、見覚えのあるプロパティが多いはずです。ほとんどの React Native コンポーネントは、JavaScript オブジェクトを値として受け取る `style` プロパティを受け付けます。詳細については [Styling in React Native](https://reactnative.dev/docs/style) を参照してください。

**app/index.tsx** 画面を変更しましょう。

1.  `react-native` から `StyleSheet` をインポートし、カスタムスタイルを定義する `styles` オブジェクトを作成します。
2.  `<View>` に `styles.container.backgroundColor` プロパティを追加し、値を `#25292e` にします。これにより背景色が変わります。
3.  `<Text>` のデフォルト値を「Home screen」に置き換えます。
4.  `<Text>` に `styles.text.color` プロパティを追加し、テキストの色を変えるために値を `#fff` (白) にします。

```tsx
import { Text, View, StyleSheet } from 'react-native';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});
```

> React Native は web と同じ色フォーマットを使用します。16 進数トリプレット (これが `#fff` の形式)、`rgba`、`hsl`、および `red`、`green`、`blue`、`peru`、`papayawhip` などの名前付きカラーをサポートします。詳細については [Colors in React Native](https://reactnative.dev/docs/colors) を参照してください。

変更を保存すると、開発サーバーに接続している実行中のアプリに変更が送信され、適用されます。

## まとめ

第 1 章：最初のアプリを作成する

新しい Expo プロジェクトを作成し、React Native のコアコンポーネントを使用しました。これで StickerSmash アプリの開発を始める準備が整いました。

次の章では、アプリにスタックとタブナビゲーターを追加する方法を学びます。

[次へ：ナビゲーションを追加する](/ja/tutorial/add-navigation)