2024年12月時点でのReact Native開発環境の構築手順

毎回React Nativeの環境構築に苦労するので、2024年現時点でしっくりした環境構築の方法を残しておく。 立ち上げるアプリの環境 Expoでアプリを立ち上げる でプロジェクトを作成すると、 のようにデフォルトで作成される。 しばらくすると インストールが完了し、buildコマンドが表示される。 npm run startを実行して、ExpoアプリでQRコードを読み込めば、アプリが表示される。 !lサンプルアプリ Tailwind React Native Classnamesを導入する react nativeのスタイリングに勉強コストをかけたくないので、Tailwindのように直感的に書けるクラスを採用する。 以前は、NativeWindを使っていたのだけれど、環境構築に手間がかかるので、今回はtwrnc(Tailwind React Native Classnames)を使うことにした。 まず、npm install twrncでインストールし、 これだけでスタイリングをすることができた。 !Tailwind React Native Classnames あとはTailwind CSS IntelliSenseでうまく補完できれば最高なので調べてみる。 - No VS Code intellisense #321 - Tailwind intellisense/auto-complete support #124 issueとdiscussionが上がっていた。 これの通り、まずはsetting.jsonのtailwindCSS.experimentalに を追加し、tailwind.config.jsを作成する。中身は下記のように空で問題ない。 で、再起動で予測変換が効くようになった。 コードフォーマットを導入する Eslint、Prettierを導入したい。 前回はnpmでインストールしたが、いろいろ調べてみるとコードの貢献方法にあるようにPrettierが標準っぽく書かれている。 > 私たちは、JavaScript コードのフォーマットに Prettier を使用しています。これにより、Prettier のエディター統合を通じて、または手動で を実行して、フォーマットの問題を自動的に修正できるため、時間と労力を節約できますyarn > run > prettier。また、コード内に存在する可能性のあるスタイルの問題を検出するために、リンターも使用します。 を実行して、コード スタイルのステータスを確認できますyarn > run lint。 実際package.jsonを見るとscriptにlintとあるので、まずは実行してみた。 そうするとESLintをプロジェクトに追加されるかを聞かれ、続行すると がインストールされた。 ただこれだとPrettierがインストールされてない。つまりPrettierは標準じゃない？ よくわからないけど、Prettierもインストールする。 ~~手順は公式のUse ESLint and Prettierを参考にした。~~ 公式を参考にした方法（できなかった） 次に、eslintrc.js を修正する。 でnpm run lintを実行すると、 のように大量のerror がでてきた。 で潰せると思ったけど、潰れない。試しにnpx prettier --write .でやるとうまく整形できた。
結局下記の方法にした。 "lint": "expo lint && npx prettier --write ."という風にScriptを編集した。 無事にESLintとprettierが動いているのを確認した。