ReactNativeの開発環境の構築でどん詰まりした件について。【Expo編】

りあクト！ TypeScriptで始めるつらくないReact開発第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH

💡 3.1版から 4版への変更点については以下の記事をご参照ください ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテゴリで上位独占中の『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。今...

スマホアプリを開発したくて、まずReactを学ぼうと「りあクト！」という書籍を購入しました！評価がめちゃくちゃ良くて、プログラミングの先生からもオススメされたものだったのですが、説明が詳しすぎて逆に難しく、、、

いったん手を動かして簡単なアプリを作りたいと思い、いっそのことReactNativeを触ろうと、記事が少し古いとは思ったのですが、まとまった読み物だったのでCodeZineさんの「基礎からはじめるReact Native入門」を読むことにしました。

基礎からはじめるReact Native入門一覧

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

しかしながら、やはり情報が古いせいもあり、環境設定でどん詰まりしてしまったので、この一連の記事は知識として参考に読むだけにしておいた方がいいですよ、という話です。。

Expoの導入でつまずく
initできない問題
Reactを実行してみる
npxコマンドを実行してみる
Expoにログインしてみる
断念しました。。
追記：やり直したら何故かできた。。

Expoの導入でつまずく

npm install -g expo-cli

まずそもそもExpoのインストールでNodeのバージョンが新しすぎると怒られました。。。（この時点でどうやねんと思ったが、簡単なアプリを作るだけだし一旦記事通り進めても大丈夫だろうと判断した。のが間違いでした。。。）

ExpoではじめるReact Native開発環境の構築

今回はReact Nativeを使ったアプリの作成と実行までの流れを解説します。React Nativeの仕組みはよくできたものですが、そのまま扱おうとすると必要な知識が多岐にわたってしまい大変です。本記事では、React Nativeを簡...

私のM1 Macbookにはnodebrewをインストールしてあったので、nodeのバージョンを16.0.0に下げました。

下げたらExpoはインストールできました。

initできない問題

で、次のステップで下記のコードを実行してどん詰まりしました。

expo init my-first-react-native-app

下記のエラーが出るのですが、検索しても全然ヒットしません。

Migrate to using:
› npx create-expo-app --template

✔ Choose a template: › blank               a minimal app as clean as an empty canvas
Error downloading and extracting template package: Error: Could not parse JSON returned from "npm pack expo-template-blank --dry-run".

expo-template-blank-48.0.13.tgz

Error: Unexpected token e in JSON at position 0
✖ Something went wrong while downloading and extracting the template.

Can't read JSON file: /Users/***/my-first-react-native-app/app.json
└─ Cause: Error: ENOENT: no such file or directory, open '/Users/***/my-first-react-native-app/app.json'
    ├─ readAsync /Users/***/.nodebrew/node/v16.0.0/lib/node_modules/expo-cli/node_modules/@expo/json-file/src/JsonFile.ts:158:13
    ├─ extractAndPrepareTemplateAppAsync /Users/***/.nodebrew/node/v16.0.0/lib/node_modules/expo-cli/src/commands/utils/extractTemplateAppAsync.ts:25:25
    └─ actionAsync /Users/***/.nodebrew/node/v16.0.0/lib/node_modules/expo-cli/src/commands/initAsync.ts:290:19

JSONが展開できない？

nodebrewが問題がある？？

Reactをインストールしてないせい？そもそもReactってインストールするの？

という次元で分かっていないので色々検索してみましたが、全然思っている記事がヒットせず路頭に迷い。。。

Reactを実行してみる

とりあえず、Reactはnode.jsが入っていれば実行できそうな感じだったので、

npx create-react-app react-sample_app

からの

npm run build

npm start

だけでReactの画面は表示されたので、特に何か必要なわけではなさそう。

npxコマンドを実行してみる

ならばnpxコマンドなら通るのかなと思い、別の記事に書いてあった下記のコード

npx create-expo-app --template

を実行するも、またも同じようなエラーが発生。

やはりJSONがparseできないと、、、

✔ Choose a template: › Blank
✔ What is your app named? … my-app
✖ Something went wrong in downloading and extracting the project files: Could not parse JSON returned from "npm pack expo-template-blank@latest --dry-run".

expo-template-blank-48.0.13.tgz

Error: Unexpected token e in JSON at position 0
Error: Could not parse JSON returned from "npm pack expo-template-blank@latest --dry-run".

expo-template-blank-48.0.13.tgz

Error: Unexpected token e in JSON at position 0

Expoにログインしてみる

他の新しそうな記事を検索していると、そもそもExpoにログインする必要がある？！っぽいことが判明！！サインインしてログインしてみると、

これは！書いてある通りにやればできそうな気がする！！と思い、（&&って何なん…と思いながら無視）

npm install --global eas-cli

npx create-expo-app test

を実行してみるも、結局同じエラーとなりました。辛い。。。。

✖ Something went wrong in downloading and extracting the project files: Could not parse JSON returned from "npm pack expo-template-blank@latest --dry-run".

expo-template-blank-48.0.13.tgz

Error: Unexpected token e in JSON at position 0
Error: Could not parse JSON returned from "npm pack expo-template-blank@latest --dry-run".

expo-template-blank-48.0.13.tgz

Error: Unexpected token e in JSON at position 0