コース目次 / 第2章

最初の実行 — スマホに映す

開発サーバを立てて、QRから実機に映し、書き換えが即反映されることを確かめます。

第2章 / 全5章目安 約30分この章のゴール: 自分のパソコンのコードが、自分のスマホで動いて、書き換えると即座に変わる
お使いのエディタ
ファイル操作が切り替わります

この章で、パソコンとスマホがつながります。ここを越えると、あとは書くだけです。

1. 開発サーバを立てる

tabi-roulette フォルダを VS Code で開いた状態で、ターミナルに打ちます。 tabi-roulette フォルダの中(cd ~/Desktop/tabi-roulette)で打ちます。
VS Codeのターミナルターミナル
npx expo start

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

しばらくすると、ターミナルに大きなQRコードと、この案内が出ます。

ターミナルに出るもの(抜粋)
› Metro waiting on exp://192.168.11.17:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

数字(192.168.11.17)はあなたの家のネットワークのものになります。違って正解です。

Using Expo Go と出ていることを確かめてください。ここが development build になっていると、スマホの Expo Go では開けません。もしそうなっていたら s キーを1回押すと切り替わります。

2. スマホで開く

Expoの案内文が、そのまま答えを書いてくれています。

スマホ 読み方
iPhone 標準の「カメラ」アプリでQRを写す。出てきたバナーを押すと Expo Go が開く
Android Expo Go を開いて、その中の「Scan QR code」で読む

iPhone の Expo Go には、QRの読み取り機能がありません。だからカメラアプリを使います。ここが最頻のつまずきどころで、Expo 自身も上の案内文でわざわざ (Android) と (iOS) を書き分けています。

初回は「Bundling…」のような表示でしばらく待たされます。そのあと、白い画面に旅先ルーレットの文字が出れば成功です。

3. つながらないとき — 2つの経路

いちばん多い原因は、パソコンとスマホが別のネットワークにいることです。この方式は「同じWi-Fiの中で直接つなぐ」ので、片方が携帯回線だったり、Wi-Fiが2つ(2.4GHz用と5GHz用で別名)に分かれていたりすると届きません。
まず両方が同じWi-Fiにつながっているかを確かめてください。

それでもだめなら、第2の経路があります。いったん Ctrl + C でサーバを止めて、こう打ち直します。

VS Codeのターミナルターミナル
npx expo start --tunnel

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

インターネット経由で回り道してつなぐやり方です。同じWi-Fiでなくても届きます。会社や学校のネットワーク、ゲストWi-Fi、スマホが携帯回線のときは、こちらを使ってください。

ただし遅いです。反映までのもたつきが増えます。ふだんは npx expo start、だめなときだけ --tunnel、という使い分けにしてください。
初回は「トンネルの道具を入れますか?」と聞かれることがあります。y で進めて構いません。

4. ミニ解説: いま何がどこにあるか

2つの画面の役割
[ パソコン ]                          [ スマホ ]

  App.tsx を書く                        Expo Go
      │                                    ▲
      ▼                                    │
  開発サーバ(Metro) ── 同じWi-Fi ────────┘
  保存を見張っていて、                   受け取って表示する
  変わったら送り直す

コードはパソコンにあります。スマホにあるのは「受け取って表示する係」だけです。だから Ctrl + C でサーバを止めると、スマホ側も止まります。

この章から先、ターミナルは動かしっぱなしにしておいてください。

5. 書き換えて、すぐ確かめる

エディタで App.tsx を開きます。第1章で作った雛形は、こう変えます。

App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>旅先ルーレット</Text>
      <Text style={styles.lead}>はるとの、次の行き先を決める道具</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fbf8f4',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2f2a26',
  },
  lead: {
    marginTop: 8,
    fontSize: 15,
    color: '#6b6058',
  },
});

保存してください。1〜2秒でスマホの表示が変わります。

これが Fast Refresh です。コース1の「保存 → リロード」、コース2の「保存 → 勝手に反映」に続く3つめのループで、今度は手に持ったスマホが変わります。
変わらないときは、スマホを上から下に引っぱって更新するか、スマホを振って出てくるメニューから Reload を押してください。

はると のところを自分の名前に変えて、もう一度保存してみてください。ループが回っていることを、自分の目で確かめておくのが大事です。

ハマったら

「Something went wrong」「There was a problem loading the project」と出る

いちばん多いのはSDKの食い違いです。エラー画面に SDK 55 のような数字が出ていたら、プロジェクトが新しすぎます。第1章の @sdk-54 を付け忘れていないか、package.json の "expo" の行を確かめてください。

次に多いのがネットワークです。上の「3. つながらないとき」の --tunnel を試してください。

赤い画面にエラーが出た

壊れていません。書いたコードのどこかに間違いがあるという知らせです。赤い画面のいちばん上に、ファイル名と行番号が出ています。そこを直して保存すれば、赤い画面は勝手に消えます。

タイプミスで括弧が閉じていない、ということがほとんどです。

ターミナルを閉じてしまった

VS Code で tabi-roulette フォルダを開き、ターミナルを開き直してcd ~/Desktop/tabi-roulette で戻って、もう一度 npx expo start を打つだけです。何も壊れていません。

ZIPで戻したい

このページの下のZIPは、この章を終えた状態のフォルダです。解凍して、その中で作業を続けられます。自分で書き換えた部分は消えてしまうので、先に自分のファイルを別の場所へ待避してから使ってください。

こうなっていればOK

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

卒業まであと2章です。

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