---
title: "攻略:React NativeのJSSの使い始め"
slug: "walkthrough--getting-started-with-jss-for-react-native"
abstract: "JSS React Nativeでアプリケーションを作成・実行する方法。"
---
# 攻略:React NativeのJSSの使い始め

このウォークスルーでは、React Nativeアプリケーションで初めてのJSSを作成・実行する方法を説明します。

React Native用のJSSアプリケーションを作成する前に、[React Nativeガイド](https://reactnative.dev/docs/environment-setup)に従って開発環境をセットアップする必要があります。

-   React NativeのJSSアプリケーションサンプルは、React Native CLIで作成されたプロジェクトに基づいており、 react-native init コマンドを使用しています。React Nativeを設定する際は、 **React Native CLIクイックスタート** タブを選択してください。
    -   新しいページビューでは、利用可能なオプションから開発用および対象用OSを選択します。
    -   React Nativeガイドの指示に従って依存関係をインストールしてください。
    -   このセットアッププロセスで作成したアプリケーションを実行できるか確認してください。
-   JSSで構築されたReact Nativeアプリの利用可能な [アプリケーションモード](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/application-modes-in-jss-react-native.html "Application modes in JSS React Native") に慣れておく。
-   [JSS CLI](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/install-the-jss-cli-globally.html "Install the JSS CLI globally")をインストールしてください。

> !注JSSで作成されたReact Native用の基本アプリは、以下の構成とツールでテストされています。
> 
> -   Windows/Androidで、USB接続された物理デバイスで開発マシンに接続しています。
>     
> -   macOS / iOS、Xcodeシミュレーターを使用しています。
>     

このウォークスルーでは、以下の方法を説明します:

-   アプリケーションを作成します。
-   アプリケーションを実行してください。

## アプリケーションを作成する

React Native用のJSSアプリケーションを作成するには:

-   次のコマンドを実行します:
    
    npx create-sitecore-jss@ver<version-number> react-native --appName <your-app-name> --fetchWith REST | GraphQL
    
    <version-number>を使いたいバージョンに置き換えてください。例えば、21.
    
    > !注GraphQLを選択する場合、アプリケーションは[Sitecoreに接続](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html "Walkthrough: Connecting a JSS application to Sitecore")されている必要があります。 [切断モードで](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/start-a-jss-app-in-disconnected-mode.html "Start a JSS app in disconnected mode")はGraphQLリクエストはサポートされません。
    

## アプリケーションを実行してください

JSS React Nativeアプリケーションを開始するには、使用するアプリケーションモードに応じて、ターミナルで以下のいずれかのスクリプトを実行してください。

-   Sitecoreインスタンスがない場合は、アプリケーションを [切断モードで](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/run-a-jss-for-react-native-app-in-disconnected-mode.html "Run a JSS for React Native app in disconnected mode")起動してください:
    
    > !注スクリプトの定義は、新しいJSS React Nativeアプリケーションのpackage.jsonファイルで見つけることができます。
    
    -   Androidアプリの場合:
        
        jss start-android
        
    -   iOSアプリの場合:
        
        jss start-ios
        
-   Sitecoreインスタンスを持っていて、それに対して開発したい場合は、[JSSアプリケーションをSitecoreに接続してデプロイ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html "Walkthrough: Connecting a JSS application to Sitecore")し、[接続モードで](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/run-a-jss-for-react-native-app-in-connected-mode.html "Run a JSS for React Native app in connected mode")アプリケーションを起動してください:
    
    -   Androidアプリの場合:
        
        jss start-android:connected
        
    -   iOSアプリの場合:
        
        jss start-ios:connected
        

React Nativeビルドプロセスでは、React Native Metro Bundlerの出力と、XcodeやAndroid SDKなどのReact Nativeプラットフォーム固有のコンパイラからの出力を含む1つまたは2つの別々のターミナルウィンドウやタブが開きます。

ビルドプロセスが完了すると、シミュレーターや物理デバイスの画面上でJSS React Nativeサンプルアプリを見ることができます。

> !注最初のビルドは数分かかることがあります。その後のビルドは通常、はるかに速くなります。これはReact Nativeの通常の動作です。