試食 — 自分のスマホで動かす

インストールなしでブラウザでアプリを書き、そのままスマホの実機に映します。

第0章 / 全5章目安約20分この章のゴール: 書いたコードが自分のスマホで動くところまでを、15分で体験する

インストールは要りません。8本の試食コーナーの中で、この章だけはあなたのスマホが実際に光ります。

用意するもの

パソコンのブラウザと、スマホ1台(iPhone でも Android でも構いません)。

ブラウザで Snack を開いてください。Expo が公式に出している、ブラウザの中で React Native を書いて動かせる場所です。

開くと、こんな画面になっています。

場所	何があるか
左	ファイルの一覧(`App.js` `package.json` `README.md` など)
まん中	コードを書くところ。最初から見本が入っています
右	プレビュー。上に My Device / Android / iOS / Web のタブ
下の帯	左端に `No errors`、右のほうに `Expo v54.0.0` と `Preview`

右側は最初 Web のタブが選ばれていて、もうアプリが動いています。「Change code in the editor and watch it change on your phone!」と書かれた画面が出ていれば、準備完了です。

下の帯の Expo v54.0.0 はSDKのバージョンです。ここは触らないでください。あとでスマホに入れる Expo Go が、いま対応しているのがこの番号だからです。理由は第1章でくわしく書きます。

ひと口め: 文字を変える

まん中のコードから、この行を探してください。

App.js(この行を探す)

      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>

英語の部分を、好きな日本語に書き換えてください。

App.js(こう書き換える)

      <Text style={styles.paragraph}>
        はるとの、はじめてのアプリ
      </Text>

右のプレビューが、打っているそばから変わります。保存ボタンも再読み込みも要りません。

<Text> という書き方に見覚えがあるかもしれません。コース1で書いた HTML と、形はよく似ています。
ただしこれは HTML ではありません。<Text> は「文字を出す部品」で、iPhone では iPhone の、Android では Android の本物の部品に置き換わります。見た目が似ているのは、書きやすさのためです。

ふた口め: 見た目は JavaScript で書く

コードの下のほうに、StyleSheet.create({ ... }) という部分があります。ここを書き換えます。

App.js(下のほうを書き換える)

  paragraph: {
    margin: 24,
    fontSize: 32,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#8a6a4f',
  },

文字が大きく、茶色になりました。

CSSファイルはありません。見た目も JavaScript のオブジェクトで書きます。font-size: 32px ではなく fontSize: 32。ハイフンがキャメルケースになり、単位が消えます。
ここが第一の分かれ目です。「CSSと違って面倒」と感じるか、「値が変数にできるから楽」と感じるか。

み口め: タップに反応させる

いちばん上から全部消して、これを丸ごと貼ってください。

App.js(全部消して貼る)

import { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{count} 回おした</Text>
      <Button title="おす" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fbf8f4',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 28,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

プレビューのボタンを押すと、数字が増えます。

useState が、この世界の心臓です。「値が変わったら、画面を描き直す」という約束を1行で書けます。
コース1の第7章で、textContent を自分で書き換えて画面を更新しました。React では値を変えるだけで、画面の描き直しは向こうがやります。ここが第二の分かれ目です。

そして、自分のスマホで動かす

ここからがこのコースの本番です。いま書いたものが、あなたのスマホで動きます。

1. スマホに Expo Go を入れる

App Store(iPhone)または Google Play(Android)で Expo Go を検索して入れてください。無料です。

Snack の画面右上、Run on device を押すと出る画面にも、Get iOS App Get Android App のリンクがあります。

2. QRを読む

Run on device を押して、QR Code のタブを選びます。QRが出ます。

iPhone と Android で読み方が違います。ここを間違えるといちばん多く詰まります。
iPhone: 標準の「カメラ」アプリでQRを写します。Expo Go にはQRの読み取り機能がありません(Snack の画面にも「Expo Go for iOS does not include a QR code scanner」と注記が出ています)。カメラが出すバナーを押すと Expo Go が開きます。
Android: Expo Go を開いて、その中の「Scan QR code」から読みます。

読み込むと、少し待ってからさっき書いたアプリがスマホに出ます。ボタンを押してみてください。

パソコンでコードを直すと、スマホの表示もそのまま変わります。ケーブルもビルドも要りません。ここが React Native の(そして Expo の)いちばんの売りです。

スマホに出てこない

(1) Expo Go を入れましたか。(2) パソコンとスマホは同じWi-Fiですか(Snack の場合はインターネット経由なので、違っていても届くはずですが、会社や学校のネットワークだと弾かれることがあります)。(3) iPhone でカメラアプリを使いましたか。

それでもだめなら、この章はWebのプレビューだけで終えて構いません。実機は第2章でもう一度挑戦できます。

この道具の性格

感じたこと	React Native の考え方
HTMLに似ているが違う	書き味はWebのまま、出てくるのは本物のスマホ部品
CSSがない	見た目もJavaScript。値を変数にできるかわりに、CSSの知識は半分しか効かない
値を変えると画面が変わる	画面の描き直しは自分でやらない。`useState` に任せる

ここまでで分かること

「合わないかも」と思ったなら、それも収穫です。15分で分かったなら上出来で、それがこの試食コーナーの目的です。別の言語を試すのも、まったく正しい進み方です。
「もう少し触ってみたい」と思ったなら、次の章で React Native をあなたのパソコンに入れます。ここから先は手元に残る道具を作ります。

持ち帰りに進む前に

次の章で入れるものと、かかる時間の目安です。

	内容
入れるもの	スマホに Expo Go(無料)。パソコンには追加のインストールなし(コース2で入れた Node を使います)
ダウンロード	初回の `npx create-expo-app` で数百MB(プロジェクトのフォルダの中に入ります)
時間の目安	30分
環境構築の重さ	★★☆(Xcode も Android Studio も使いません)

こうなっていればOK

ブラウザのプレビューでアプリが動いた
文字とスタイルを書き換えて、その場で変わるのを見た
スマホの Expo Go で、自分の書いたアプリが動いた

卒業まであと4章です。

この章はまだ完了していません。