React Native入門|環境構築からHello, World!まで【初心者向け①】

この記事は「スマホアプリを作ってみたいけど、何から始めればいいかわからない」人向けです

これから全6回で、「React Native(リアクト ネイティブ)」を使って、スマホアプリの作り方をゼロから一緒に勉強していくシリーズを始めます。

このシリーズは、パソコンの操作はできるけど、アプリ開発はやったことがない、という人でも読めるように書いています。プログラミングの経験が少しあると読みやすいですが、なくても大丈夫です。難しい言葉が出てきたら、できるだけ身近なものに例えながら説明していきます。

第1回の今回は、

• React Nativeってそもそもどんなもの?
• 自分のパソコンでアプリを作れるようにする(環境構築)
• 自分のスマホに「Hello, World!」と表示させてみる

という3つをやっていきます。

そもそも「スマホアプリ」はどうやって作られている?

普段使っているLINEやYouTubeのようなアプリは、スマホに直接インストールして使いますよね。こうしたアプリのことを ネイティブアプリ と呼びます。

スマホには大きく分けて、iPhone(iOS)とAndroidの2種類があります。そして本来、この2つはアプリを作るための言葉(プログラミング言語)が違います。

つまり、iPhoneとAndroidの両方でアプリを出したいときは、同じアプリを2回、別々の言語で作る 必要がありました。日本語の本と英語の本を、それぞれ一から書くようなイメージです。これはかなり大変です。

React Nativeってどんなもの?

そこで登場するのが React Native です。React Nativeは、Meta社(Facebookの会社)が作った、スマホアプリを作るための仕組みです。

React Nativeの一番の特徴は、1つのコードで、iPhoneとAndroidの両方のアプリを作れる ことです。

1. JavaScript(TypeScript)で書ける

React Nativeでは、Webサイトでよく使われる JavaScript という言語でアプリを作ります。このシリーズでは、JavaScriptに「型」というルールを足した TypeScript を使います(型については、出てきたときに少しずつ説明します)。

2. 見た目は「本物のスマホの部品」になる

React Nativeで「ボタンを置いて」と書くと、iPhoneではiPhoneの、AndroidではAndroidの本物の部品として表示されます。Webページをアプリの中に表示しているわけではないので、動きがなめらかです。

3. Reactの知識がそのまま使える

React Nativeは、Webサイトを作るための「React」という仕組みと、考え方がほぼ同じです。React Nativeを覚えると、Webサイトづくりにも応用できます。逆に、Reactを知っている人はすぐにReact Nativeを使い始められます。

Reactを知っている人へ

考え方(コンポーネント、props、state、フック)は同じですが、次のところが違います。

	React(Web)	React Native
部品	div、p、button	View、Text、Pressable
文字	どこにでも書ける	Text の中だけ
スタイル	CSS、className	StyleSheet。単位なし、親から子に引き継がれない
並べ方	display: flex で横並び	最初からFlexboxで縦並び
押したとき	onClick	onPress
保存	localStorage	AsyncStorage

くわしくは「ReactとReact Nativeの違いは?Webの知識で戸惑うポイントをやさしく解説」にまとめています。Reactを知らない人は、読み飛ばして大丈夫です。

Expo(エキスポ)ってなに?

React Nativeを使うときに、ほぼセットで使われるのが Expo です。

Expoは、React Nativeでのアプリづくりを簡単にしてくれる「便利な道具箱」です。料理にたとえると、React Nativeが「食材と調理法」だとしたら、Expoは「下ごしらえが済んだ材料と、使いやすい調理器具のセット」のようなものです。

Expoを使うと、

• 面倒な初期設定をコマンド1つで済ませられる
• Expo Go というアプリを使って、作っているアプリをすぐに自分のスマホで確認できる
• カメラや位置情報など、スマホの機能を使うための部品が最初から揃っている

といったメリットがあります。React Nativeの公式サイトでも、これから始める人にはExpoを使う方法がすすめられています。

アプリを作る準備をしよう(環境構築)

それでは、実際にアプリを作れるようにしていきましょう。必要なものは次の4つです。

• パソコン(Mac / Windows どちらでもOK)
• スマホ(iPhone / Android どちらでもOK)
• Node.js(パソコンでJavaScriptを動かすためのソフト)
• VS Code(プログラムを書くためのソフト。無料)

ステップ1: Node.jsをインストールする

以下の公式サイトにアクセスします。

https://nodejs.org/

「LTS」と書かれている版(長くサポートされる、安定した版)をダウンロードして、指示に従ってインストールしてください。

ステップ2: ターミナルを開く

ターミナルは、キーボードで文字を打ち込んでパソコンに命令を出すための画面です。

• Mac: 「Launchpad」→「その他」→「ターミナル」で開けます
• Windows: スタートメニューで「PowerShell」と検索して開けます

最初は難しそうに見えますが、「決まった命令(コマンド)を打つだけ」なので、怖がらなくて大丈夫です。

ステップ3: インストールできたか確認する

ターミナルで次のコマンドを入力して、Enterキーを押してください。

node -v

v22.〇〇.〇 のように、v から始まる数字が表示されれば成功です(数字はインストールした時期によって変わります)。

ステップ4: スマホに「Expo Go」を入れる

スマホで App Store(iPhone)または Google Play(Android)を開き、「Expo Go」と検索してインストールしてください。このアプリを使って、パソコンで作っているアプリを自分のスマホで動かします。

ステップ5: VS Codeをインストールする

https://code.visualstudio.com/ からVS Codeをダウンロードして、インストールしてください。

はじめてのアプリを作ろう

準備が整ったら、いよいよアプリを作ります。

ステップ1: アプリのひな形を作る

ターミナルで、次のコマンドを実行します。

npx create-expo-app@latest my-first-app

これは「Expoのアプリのひな形を、my-first-app という名前で作って」という命令です。途中で何か聞かれたら、Enterキーを押して進めてOKです。少し時間がかかるので、待ちましょう。

終わったら、できたフォルダに移動します。

cd my-first-app

cd は「change directory(フォルダを移動する)」の略です。

ステップ2: ひな形をまっさらにする

作ったばかりのひな形には、お手本用のファイルがたくさん入っています。最初は混乱するので、次のコマンドでまっさらな状態にしましょう。

npm run reset-project

「お手本のファイルを example フォルダに移しますか?」のように聞かれるので、Enterキーを押します。これで、src/app フォルダの中に index.tsx と _layout.tsx の2つだけが残ります(Expoのバージョンによっては、src がなく app フォルダになっていることもあります)。

ステップ3: アプリを起動する

次のコマンドを実行します。

npx expo start

すると、ターミナルに大きな QRコード が表示されます。

• iPhone: 標準の「カメラ」アプリでQRコードを読み取り、表示された通知をタップします
• Android: 「Expo Go」アプリを開き、「Scan QR code」からQRコードを読み取ります

少し待つと、スマホに画面が表示されます。これが、あなたが作ったアプリです。

スマホとパソコンは、同じWi-Fi につないでおく必要があります。うまくつながらないときは、npx expo start --tunnel で起動してみてください。

「Hello, World!」と表示させてみよう

VS Codeで my-first-app フォルダを開き、src/app/index.tsx を開いてください。中身を、次のように書きかえます。

src/app/index.tsx

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, World!</Text>
    </View>
  );
}

ファイルを保存すると、スマホの画面が 自動で 「Hello, World!」に変わります。アプリを入れ直す必要はありません。この「保存するとすぐに反映される」仕組みを Fast Refresh(ファスト リフレッシュ) と言います。

それぞれの行の意味を確認しよう

1行ずつ、日本語に置きかえて確認していきましょう。

• import { Text, View } from "react-native"; 「React Nativeの道具箱から、Text と View という部品を取り出して使いますよ」という宣言です。
• export default function Index() { ... } Index という名前の「画面」を作っています。function は「ひとまとまりの処理」を表します。export default は「このファイルのメインはこれですよ」という印です。
• return ( ... ); 「この画面には、かっこの中身を表示してね」という意味です。
• <View ...> ... </View> View は、部品を入れる「箱」です。style={{ ... }} で、箱の見た目を決めています。ここでは「画面いっぱいに広げて(flex: 1)、中身を縦も横も真ん中に置いて」という指定です。スタイルについては第2回で詳しく説明します。
• <Text>Hello, World!</Text> Text は、文字を表示するための部品です。<Text> と </Text> で挟んだ文字が、画面に表示されます。

<View> や <Text> のような、HTMLに似た書き方を JSX(ジェイエスエックス) と言います。「画面にこういう部品を、こういう順番で並べてね」という設計図を、見たままに近い形で書けるのが特徴です。

試しに、Hello, World! の部分を自分の名前に変えて保存してみてください。すぐにスマホの表示が変わるはずです。

うまくいかないときは

赤い画面(エラー画面)は、「ここが間違っているよ」と教えてくれる親切な画面です。慌てずに、表示されたメッセージと行番号を見て、その場所を確認しましょう。

まとめ

今回は、以下のことを学びました。

• React Nativeは、1つのコードでiPhoneとAndroidの両方のアプリを作れる仕組み
• Expoは、React Nativeでのアプリづくりを簡単にする道具箱
• npx create-expo-app@latest でひな形を作り、npx expo start で起動する
• Expo Goを使うと、作っているアプリをすぐに自分のスマホで確認できる
• View は箱、Text は文字を表示する部品

次回は、View や Text のほかにどんな部品があるのか、そして色や大きさ、並べ方を変える「スタイル」について学んでいきます。

次回:「React Native入門②画面の部品とスタイルを覚えよう(見た目編)」お楽しみに。