---
modificationDate: June 13, 2026
title: 画像ピッカーを使用する
description: このチュートリアルでは、Expo Image Picker の使い方を学びます。
---

<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/image-picker/","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 Image Picker の使い方を学びます。

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

React Native は、`<View>`、`<Text>`、`<Pressable>` などの組み込みコンポーネントを標準的な構成要素として提供しています。ここで作成するのは、デバイスのメディアギャラリーから画像を選択する機能です。これはコアコンポーネントだけでは実現できないため、この機能をアプリに追加するためにライブラリが必要になります。

Expo SDK のライブラリである [`expo-image-picker`](/versions/latest/sdk/imagepicker) を使用します。

> `expo-image-picker` は、端末のライブラリから画像や動画を選択するためのシステム UI へのアクセスを提供します。

[視聴：ユニバーサル Expo アプリで画像ピッカーを使用する](https://www.youtube.com/watch?v=iEQZU58naS8) — expo-image-picker を使ってデバイスのメディアライブラリから画像を選択する方法を学びます。

## expo-image-picker をインストールする

`expo-image-picker` ライブラリをインストールするには、ターミナルで Ctrl + C を押して開発サーバーを停止してから、次のコマンドを実行します。

```sh
npx expo install expo-image-picker
```

[`npx expo install`](/more/expo-cli#installation) コマンドは、ライブラリをインストールし、**package.json** のプロジェクトの依存関係に追加します。

> **ヒント：** プロジェクトに新しいライブラリをインストールするときは、ターミナルで Ctrl + C を押して開発サーバーを停止してから、インストールコマンドを実行します。インストールが完了したら、`npx expo start` を実行して開発サーバーを再起動します。

## デバイスのメディアライブラリから画像を選択する

`expo-image-picker` は、デバイスのメディアライブラリから画像や動画を選択するためのシステム UI を表示する `launchImageLibraryAsync()` メソッドを提供します。前の章で作成した primary テーマのボタンを使ってデバイスのメディアライブラリから画像を選択し、この機能を実装するためにデバイスの画像ライブラリを起動する関数を作成します。

**app/(tabs)/index.tsx** で `expo-image-picker` ライブラリをインポートし、`Index` コンポーネント内に `pickImageAsync()` 関数を作成します。

```tsx
// ...rest of the import statements remain unchanged
import * as ImagePicker from 'expo-image-picker';

export default function Index() {
  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      console.log(result);
    } else {
      alert('You did not select any image.');
    }
  };

  // ...rest of the code remains same
}
```

上記のコードが何をしているのか確認しましょう。

-   `launchImageLibraryAsync()` は、さまざまなオプションを指定するためのオブジェクトを受け取ります。このオブジェクトは [`ImagePickerOptions`](/versions/latest/sdk/imagepicker#imagepickeroptions) オブジェクトで、メソッドを呼び出すときに渡します。
-   `allowsEditing` を `true` に設定すると、Android と iOS では選択時に画像をトリミングできます。

## ボタンコンポーネントを更新する

primary ボタンを押したときに、`Button` コンポーネントから `pickImageAsync()` 関数を呼び出します。**components/Button.tsx** で `Button` コンポーネントの `onPress` プロパティを更新します。

```tsx
import { StyleSheet, View, Pressable, Text } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

type Props = {
  label: string;
  theme?: 'primary';
  onPress?: () => void;
};

export default function Button({ label, theme, onPress }: Props) {
  if (theme === 'primary') {
    return (
      <View
        style={[
          styles.buttonContainer,
          { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
        ]}>
        <Pressable style={[styles.button, { backgroundColor: '#fff' }]} onPress={onPress}>
          <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
          <Text style={[styles.buttonLabel, { color: '#25292e' }]}>{label}</Text>
        </Pressable>
      </View>
    );
  }

  return (
    <View style={styles.buttonContainer}>
      <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
        <Text style={styles.buttonLabel}>{label}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    width: 320,
    height: 68,
    marginHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 3,
  },
  button: {
    borderRadius: 10,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  buttonIcon: {
    paddingRight: 8,
  },
  buttonLabel: {
    color: '#fff',
    fontSize: 16,
  },
});
```

**app/(tabs)/index.tsx** で、1 つ目の `<Button>` の `onPress` プロパティに `pickImageAsync()` 関数を追加します。

```tsx
import { View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

import Button from '@/components/Button';
import ImageViewer from '@/components/ImageViewer';

const PlaceholderImage = require('@/assets/images/background-image.png');

export default function Index() {
  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      console.log(result);
    } else {
      alert('You did not select any image.');
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <ImageViewer imgSource={PlaceholderImage} />
      </View>
      <View style={styles.footerContainer}>
        <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
        <Button label="Use this photo" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
  },
  footerContainer: {
    flex: 1 / 3,
    alignItems: 'center',
  },
});
```

`pickImageAsync()` 関数は `ImagePicker.launchImageLibraryAsync()` を呼び出し、その結果を処理します。`launchImageLibraryAsync()` メソッドは、選択された画像に関する情報を含むオブジェクトを返します。

`result` オブジェクトとそのプロパティの例を次に示します。

```json
{
  "assets": [
    {
      "assetId": null,
      "base64": null,
      "duration": null,
      "exif": null,
      "fileName": "ea574eaa-f332-44a7-85b7-99704c22b402.jpeg",
      "fileSize": 4513577,
      "height": 4570,
      "mimeType": "image/jpeg",
      "rotation": null,
      "type": "image",
      "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FStickerSmash-13f21121-fc9d-4ec6-bf89-bf7d6165eb69/ImagePicker/ea574eaa-f332-44a7-85b7-99704c22b402.jpeg",
      "width": 2854
    }
  ],
  "canceled": false
}
```

## 選択した画像を使用する

`result` オブジェクトには `assets` 配列があり、その中に選択された画像の `uri` が含まれています。この値を画像ピッカーから取得して、選択された画像をアプリに表示します。

**app/(tabs)/index.tsx** ファイルを変更します。

1.  React の [`useState`](https://react.dev/learn/state-a-components-memory#adding-a-state-variable) フックを使って、`selectedImage` という状態変数を宣言します。この状態変数は選択された画像の URI を保持するために使います。
2.  `pickImageAsync()` 関数を更新して、画像の URI を `selectedImage` 状態変数に保存します。
3.  `selectedImage` をプロパティとして `ImageViewer` コンポーネントに渡します。

```tsx
import { View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';

import Button from '@/components/Button';
import ImageViewer from '@/components/ImageViewer';

const PlaceholderImage = require('@/assets/images/background-image.png');

export default function Index() {
  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);

  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
    } else {
      alert('You did not select any image.');
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
      </View>
      <View style={styles.footerContainer}>
        <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
        <Button label="Use this photo" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
  },
  footerContainer: {
    flex: 1 / 3,
    alignItems: 'center',
  },
});
```

プレースホルダー画像の代わりに選択された画像を表示するために、`selectedImage` プロパティを `ImageViewer` コンポーネントに渡します。

1.  **components/ImageViewer.tsx** ファイルを変更して、`selectedImage` プロパティを受け取れるようにします。
2.  画像のソースが長くなっているので、`imageSource` という別の変数に切り出します。
3.  `Image` コンポーネントの `source` プロパティの値として `imageSource` を渡します。

```tsx
import { ImageSourcePropType, StyleSheet } from 'react-native';
import { Image } from 'expo-image';

type Props = {
  imgSource: ImageSourcePropType;
  selectedImage?: string;
};

export default function ImageViewer({ imgSource, selectedImage }: Props) {
  const imageSource = selectedImage ? { uri: selectedImage } : imgSource;

  return <Image source={imageSource} style={styles.image} />;
}

const styles = StyleSheet.create({
  image: {
    width: 320,
    height: 440,
    borderRadius: 18,
  },
});
```

上記のスニペットでは、Image コンポーネントは条件演算子を使って画像のソースを読み込みます。選択された画像は、プレースホルダー画像のようなローカルアセットではなく、[`uri` 文字列](https://reactnative.dev/docs/images#network-images) です。

アプリの状態を確認してみましょう。

> このチュートリアルのサンプルアプリで使用されている画像は [Unsplash](https://unsplash.com) から取得しました。

## まとめ

第 4 章：画像ピッカーを使用する

デバイスのメディアライブラリから画像を選択する機能の追加が完了しました。

次の章では、絵文字ピッカーのモーダルコンポーネントを作成する方法を学びます。

[次へ：絵文字ピッカーのモーダルを作成する](/ja/tutorial/create-a-modal)