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