コース目次 / 第2章
最初の実行 — スマホに映す
開発サーバを立てて、QRから実機に映し、書き換えが即反映されることを確かめます。
この章で、パソコンとスマホがつながります。ここを越えると、あとは書くだけです。
1. 開発サーバを立てる
tabi-roulette フォルダを VS Code で開いた状態で、ターミナルに打ちます。
tabi-roulette フォルダの中(cd ~/Desktop/tabi-roulette)で打ちます。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
しばらくすると、ターミナルに大きな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 でサーバを止めて、こう打ち直します。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
インターネット経由で回り道してつなぐやり方です。同じWi-Fiでなくても届きます。会社や学校のネットワーク、ゲストWi-Fi、スマホが携帯回線のときは、こちらを使ってください。
ただし遅いです。反映までのもたつきが増えます。ふだんは npx expo start、だめなときだけ --tunnel、という使い分けにしてください。
初回は「トンネルの道具を入れますか?」と聞かれることがあります。y で進めて構いません。
4. ミニ解説: いま何がどこにあるか
[ パソコン ] [ スマホ ]
App.tsx を書く Expo Go
│ ▲
▼ │
開発サーバ(Metro) ── 同じWi-Fi ────────┘
保存を見張っていて、 受け取って表示する
変わったら送り直すコードはパソコンにあります。スマホにあるのは「受け取って表示する係」だけです。だから Ctrl + C でサーバを止めると、スマホ側も止まります。
この章から先、ターミナルは動かしっぱなしにしておいてください。
5. 書き換えて、すぐ確かめる
エディタで App.tsx を開きます。第1章で作った雛形は、こう変えます。
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章です。
この章はまだ完了していません。
保存できませんでした(プライベートブラウズ中かもしれません)。この端末に進捗は残りませんが、先へは進めます。