React Nativeの空プロジェクトをテスト起動するまでに苦労したので誰かに聞いてほしい

「初めての●●」はバカみたいに手間取る。
とにかく苦労したので、中身は薄いが愚痴らせてほしい。
愚痴なので、情緒も文も不安定なのは仕方がないと思ってほしい。

プロローグ

React Nativeというのを使うとiOSのアプリもAndroidのアプリもWebアプリも作れるんだって！
えー！　楽しそう！　週末にやってみよう！

• MacBook Air (M1, 2020)
• Homebrew 3.4.0
• Node.js v14.15.4
• Ruby(たぶん2.6.0が入っていた)
• Javaの設定なし（入っているようだったがパスが通っていない雰囲気だった）

サイトを訪れる

何かを導入する時は本家サイトを見に行くことにしている。
最近のフレームワークはアップデートが早いうえに破壊的なので、どこかのブログを見て同じようにやってもうまくいかないと思っている。
きっとこの記事もすぐに役に立たなくなるんだろう。

表示されたトップページをしっかり読んではいけない。
これも思い込みだが、最近のフレームワークは何かキラキラした内容を(多分)英語圏の人でも赤面する感じのキラキラした英語で書いてあるだけなので、ちょっと触ってみたいくらいの入門者には毒だ。
こういうのはプロジェクトをいくつも作成して良いところも悪いところもしっかり味わって、「もっとこうだったらいいのに！」とか言いながらコミュニティにどっぷり浸かって「そもそも設計思想がだな……」とか言うようになってから読むのが良い。
嫌いなわけではないが、とにかく初めに読むべきではない。
僕に必要なのは「Get Started」のボタンだけだ。
とにかくこれを押せば何かが始まる。

表示されたページのタイトルは「Introduction」だった。
不穏だ。
その下には「How to use these docs」という見出しも見える。
全然「Get Started」させる気がない。
イメージでは「Get Started」ボタンを押すと何かのインストール手順が表示されるはずだった。
場合によってはいきなりダウンロードが始まるようなアプリケーションもあったと思うのだが、ここに書かれているのは「この文書の読み方」だ。
何かの仕様書がStartedだ。

左のメニューを見ると、どうやらこの後しばらくは例のキラキラした英語を読まされるようなので、ひとまず飛ばすことにする。
が、いまいち「Installation」みたいな分かりやすい項目が見当たらない。
少し考えて、さすがにキラキラを2章も続けることはないだろうと思ってメニューの2番目の大項目「Environment setup」の最初のページを開いてみる。
ようやく下の方に「Quickstart」や「npm install」が現れて、安心した。

インストールを始める

「Node 12 LTSが〜〜」などと書いてあるようだったが、僕に関係があるのは背景の黒いところだけなので、読み飛ばす。
書かれているコマンドをダブルクリックで選択してCmd+C、ターミナルを開いてCmd+Vした。

サイトに書かれていたコマンド

npm install -g expo-cli

さっそくツターンしたいところだったが、-gが気になる。
だいたいアレだ、よく分かっていないがこういう時はsudoってつけたほうが良いのだ。

ターミナル

sudo npm install -g expo-cli

ツターンしたらうまくいった。
ターミナルを使って何かをインストールする時はいつも最初でつまずいていた。
今回は順調に何かがどこかに収まったようなので、だいぶ機嫌が良くなる。

次の手順に進む。

サイトに書かれていたコマンド

expo init AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start

こういう時「サンプルはどうあるべきか」と悩んでしまう。

おそらくここに書かれているAwesomeProjectというのは「あなたが作りたいプロジェクトの名前を書いてね」という意味のプレースホルダーだと思うのだが、あまり知識がないとそのままAwesomeProjectと書いて実行してしまいそうになる。

ここはProjectNameにしておきたいところだが、そうするとこれがコマンドオプションのように見えて「プロジェクト名称はどこで入力するんだ？」と思われてしまうかもしれない。

かといって[ProjectName]とか${ProjectName}とか書かれていると、「このカッコやドルは任意のって意味なのか？　それともそのまま打ち込む必要があるのか？」と無駄に悩ませてしまう可能性がある。

僕には何が正しいのか分からない。
正しさなんて人それぞれだし、Meta社の人にとってはこれが唯一の正しい方法なんだろう。

僕はAwesomeProjectプロジェクトを始めることにした。

最初のエラー

AwesomeProjectが始まる

expo init AwesomeProject

エラーが出た。
メモを取り忘れたが、CocoaPods CLIがインストールできなかったとか、そんな内容だった。
/Library/Ruby/Gems/2.6.0以下のいろんなものにアクセスできないのが理由らしい。
エラーは出たけどCocoaPods以外はうまくいってるような、そんなよく分からない感じの結果だった。

こういう時、MacもRubyもめんどくさいなと思う。
例のsudoも試してみたがダメらしい。

これに関してはなぜそうなるのか調べても分からないということを過去に経験済みなので、今回は調べなかった。
代わりに、だいぶバカっぽいコマンドを打ち込む。

僕が知っている一番強力で一番頭の悪そうなコマンド

sudo chmod -R 777 /Library/Ruby/Gems/

そしてもう一度。

AwesomeProjectが始まる

expo init AwesomeProject

今度は/System/Library/Frameworks/Ruby.framework/の中がそうらしい。
よく分からないが、Rubyはとにかく大事に扱われている。
僕も子供の頃はそうやって大事に扱われていたのかもしれないが、自覚もなく育ってしまった。
たぶん、Rubyもダメな大人になる。

僕が知っている一番強力で一番頭の悪そうなコマンドが再び放たれた

sudo chmod -R 777 /System/Library/Frameworks/Ruby.framework/

バカみたいに大量のエラーが吐き出された。
エディタに貼り付けてみたら19,328行あった。
カンマが必要な桁だ。

全部こんな感じ

chmod: Unable to change file mode on /System/Library/Frameworks/Ruby.framework/: Operation not permitted

たぶん、このコンピュータで最上位の使用者たる僕よりも偉い存在でないとここに変更を加えることはできない。
そんな偉い人が、例えば焼肉を奢ったところで僕なんかにチカラを貸してくれると思えない。
そもそも焼肉を奢る余裕もない。

しかし久しぶりにやる気が出始めたことだったので、僕はすぐに諦める気になれなかった。
だってググったら出てくるかもしれないし。

rbenv

ググってみたら、rbenvというのを使うと良いらしい。
Rubyのバージョンを切り替え管理できるものらしく、そちら経由だとエラーが起きないとか。
試しにインストールしてみる。

rbenvをインストール

brew install rbenv

なんかうまくいったみたい。
続いて、rbenvから扱えるRubyのバージョンリストを表示する。

Rubyのバージョンリストを表示する

rbenv install -l

数字だけのいくつかと、jrubyとかmrubyとか、10個くらい表示された。
よく分からないけど変な名前のは避けたいし、新しいのが良い。

数字だけのやつの中で一番新しそうなのにした

rbenv install 3.1.1

xcrun: error: invalid active developer pathとか言われた。
親だってそんなヒドいこと言わない。

これは何度か遭遇したことがある。
macOSをアップデートした時とかに出てくるあれだった気がする。

そんな時はこうする

xcode-select --install

Xcodeの何かをターミナルから何かするアレだと聞いている。

ターミナルでツターンすると、何かのインストールダイアログが表示された。
ターミナルからMacのアプリケーションっぽいものが開くのは初心者的にはすごくびっくりするので良くないと思う。

適当にOKして進めるとインストールが始まる。
これには10〜15分くらいかかったと思う。
ずっと目を離さずに見ていたから時間がかかったのは間違いないが、時計を見忘れたので所要時間は分からない。

リトライ

rbenv install 3.1.1

今度はうまくいった。
「人生はあなたが思うほど悪くない」っていう歌がCMで流れていたのを思い出した。
初めて同意できた。

続けて

rbenv init
vi ~/.zshrc

~/.zshrc

eval "$(rbenv init - zsh)"

.zshrcの実行

source ~/.zshrc

いろいろ設定があるらしいのでコマンドを打って設定した。
途中、嫌な噂に出会う。
ここには.zshrcと書いたが、.bash_profileの人もいるらしい。
本当にApple製品はめんどくさい。

ruby --versionしたら一応、ruby 3.1.1p18と答えてくれた。
良かった。
機嫌が良くなる。

再開、そしてXcode

とりあえずやり直す。
どこからだっけ、と思ってターミナルを遡る。
2万行くらい前のメッセージで「CocoaPods CLIをインストールできなかったから自分でなんとかしろ」みたいな状況だったのを思い出す。
そうか、僕はそれでRubyをインストールしてたのか。

出てたメッセージのやつをそのまま実行する

npx pod-install

またエラーが出た。
tool 'xcodebuild' requires Xcodeとか言ってて、Appleは開発者を困らせるつもりでXcodeを作ったのではないかと疑う。

ググる。

Xcodeを開いてPreferenceを開く。
途中、additionalな何かのインストールを聞かれるのでOKした。
僕に拒否権はない。

タブ（と言っていいのか分からないが、それを押すと下の表示内容が変わるアレ）の中からLocationsを見つけて押す。
切り替わった中の一番下にCommand Line Toolsという項目があって、そこのセレクトボックスが空白になっていた。
これを選択してあげないといけないらしい。
クリックしたら、リストには「Xcode 13.2.1 (13C100)」しかなかった。

また実行する

npx pod-install

xcodebuildのエラーは消えた。
が、internal:~~~/ffi_c.bundle (LoadError)みたいなのが出ていて失敗している。

またググった。
もしも世界にGoogleが無くてノウハウを記してくれた親切な人たちもいなかったら、僕にはこの作業は無理だ。
或いは、このフレームワーク自体がもっと親切設計になっていたかもしれないけど。
（他に可能性があるとしたら、フレームワークなんてものはとっくに滅んでいるか、最初から存在しなかったと思う）

ググった結果がこちら

arch -x86_64 sudo gem install ffi

何かがどこかに入って、しかし、状況は変わらないようだった。

よく分からないがarchの後にはarm64eもあるらしいのでそれもやっておく。

こういう余計なことを素人が勝手にやるべきではないのだが、素人は「これこそが人事を尽くすということなのだ」と思って打ち込んでしまう

arch -arm64e sudo gem install ffi

pod-installの結果に変化があった。
Cause: Oh no, an error occurred.と言ってくるようになった。
ターミナルの白いウィンドウが真っ赤になるまでビンタしてやりたいと思った。

その後、AwesomeProjectをフォルダごと削除してexpo init AwesomeProjectしたら、何事もなくプロジェクトが作成された。
CocoaPodsがどうたらのエラーも出てこなくなった。
たぶん、ここまでの作業のどれかが根本の問題を解決していたのだけど、ここまでにやった作業のどれかがプロジェクト内の何かをぐちゃぐちゃにしてしまっていて、それを削除してやり直したらちゃんと動いた、ということだと思う。

お片付けをしましょう。
保育園で教わった気がする。

yarn

「やーん」と読めばいいのだろうか。
いつも「こいつ間抜けな名前してるな」と思っている。

起動

yarn web

少しの間を置いてターミナルにQRコードのASCIIアートが表示され、Chromeの新規タブにOpen up App.js to start working on your app!と書かれたページが表示された。
やっと動いた。
嬉しい。

起動

yarn ios

こちらは5分くらいかかったと思う。
どうやら最初はビルドのためにどうしても時間がかかるみたいだった。
ともあれ、iOSのシミュレータが起動して、webの時と同じページが表示された。

ちなみに、閉じてからもう一度やってみたら今度はすぐに表示された。
ビルドが済んでいたからだと思う。

ただ、なぜか「iPhone 8」が選択されていたのが気になる。
MacBook Airの画面に収まるように気を遣ってくれたのか？

とにかく動いてくれた。
嬉しい。

起動

yarn android

Androidとの戦い

No Android connected device found, and no emulators could be started automatically.

そうですね、と思った。

Androidのテスト機をつなげてるわけでもないし、そう言えばこのPCにはエミュレータも入れてなかった。
ここを見ろ的なURLがメッセージにあったので、見に行く。

Android Studioのセットアップについて書かれたページだったので、素直に従う。
もっと素直にしていたら、もうちょっとマシな人生を歩めたかもしれない。

Android Studioのインストール後に一行ずつ打ち込んで実行した

[ -d "$HOME/Library/Android/sdk" ] && ANDROID_SDK=$HOME/Library/Android/sdk || ANDROID_SDK=$HOME/Android/Sdk

echo "export ANDROID_SDK=$ANDROID_SDK" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

echo "export PATH=$HOME/Library/Android/sdk/platform-tools:\$PATH" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

その後、Virtual Deviceを作った。
先の説明ページでは「AVD Manager」を開けと書かれていたので探してみるが、そもそも説明の画像と実際のUIがだいぶ違うので探しようがない。
結局、起動時に出てきた画面の「More Actions」の中に「Virtual Device Manager」があって、これがそれらしい。
「AVD」は「Android Virtual Device」だったのかもしれない。

これで必要な物は揃ったはずだ。
だってAndroidのSDKとエミュレータが入ったんですものね。

起動

yarn android

「やめてくれ。そんな言葉、お前の口から聞きたくなかった！」

The operation couldn’t be completed. Unable to locate a Java Runtime.

すでに飽きていた。

brew install openjdk

起動

yarn android

Unrecognized VM option 'MaxPermSize=256m'

recognizeという単語は最近覚えた。
確か理解するとか覚えるとかって意味だ。
僕より詳しそうなヤツが僕に分からない言い回しで僕に助けを求めてきた。
シュールだ。

ググった。

プロジェクトのandroidフォルダを見ると、gradle.propertiesというファイルがある。
それを開いて該当部分を書き換える。
org.gradle.jvmargsの行をコピーした後にコメントアウトして、 -XX:MaxPermSize=256mを削除した。

AwesomeProject/android/gradle.properties

# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=256m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
org.gradle.jvmargs=-Xmx2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

お前を不安にさせる何物も、ここにはないはずだ。

起動

yarn android

Java

General error during semantic analysis: Unsupported class file major version 61

意味がわからない。
案内されたものを案内された通りにインストールして、出てきた問題を解消したのにまだ問題が残っている。
しかも、なんかバージョンに対応してないとか言っている。
ナンのナニの話だよ。

調べた結果、GradleとかいうビルドツールがJava SDKのバージョン17以上に対応していないらしい。
そう言えばJavaってそういう感じだった。

「バージョンアップは破壊的でなければならない！」

たぶん、誰もそんなこと言ってないと思ったが、そういうことを考えないとやっていられない気分だった。

Javaのバージョンを下げるという不毛な作業

brew install openjdk@11

sudo ln -sfn /opt/homebrew/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-11.jdk

echo 'export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc

export CPPFLAGS="-I/opt/homebrew/opt/openjdk@11/include"

export JAVA_HOME=`/usr/libexec/java_home -v 11`

Javaをインストールする方法はいくつかあるようなのだけど、結局上記のやり方にした。
最新バージョンのインストーラーをダウンロードしてくるのは簡単だったけど、過去のバージョンになるとどれをどうしたものか自信がなくなる。
特に今のMacはM1チップになっていて、以前のソフトが動くか分からないし、そのことはWebサイトでうまく検知できず自動選択されない節がある。
@11になっているのは、単純にHomebrewのリストに@16みたいなものが見つからなかったからだ。
この辺はJavaの歴史みたいなものらしくて、他人が無遠慮に立ち入ってはいけない空気を感じた。

起動

yarn android

とうとうAndroidエミュレータが起動した。

Open up App.js to start working on your app!

Google翻訳では「App.jsを開いて、アプリの作業を開始してください。」と訳された。
僕にその余力はない。
もう満足した。
この先は次の週末にしよう。
そう思って、僕はターミナルを閉じた。

本当にそれで良かったのでしょうか？

とりあえず環境設定は終わったようなのだが、ここまでにやったことのメモは公開した方が良いかもしれないと思った。
もしかしたら他の人のナレッジになるかもしれないし、誰かに聞いてもらいたい気分だった。

途中でとっていたメモを振り返りながら書くことにして、React Nativeの本家サイトをもう一度、見に行く。

サイトに書かれていたコマンド、そして僕が最初に打ったコマンド

npm install -g expo-cli

そう、こんな感じだった。

ふと、「Expo CLI Quickstart」「React Native CLI Quickstart」と書かれていることに気がつく。

え？　タブ表示だったの？
ずっと「Expo」は「React Native」の別名とか管理モジュールみたいなものだと思ってたよ……

（おわり）