2025.01.10 2025.01.13

React Native(Expo)の新規プロジェクトで不要なサンプルコードを削除する方法

Katz

Contents

はじめに
新規プロジェクトを作成するには？
新規プロジェクトの不要なコードを削除する？
まとめ
参考文献

はじめに

React Native(Expo)で新規プロジェクトを作成するとサンプルコードが含まれた形で作成される。
これらのサンプルコードは新しいアプリを作成する際には不要なものとして扱われることが多い。
今回はこれらの不要なサンプルコードを削除する方法を調べたのでまとめます。

新規プロジェクトを作成するには？

Expoで新規プロジェクトを作成する際は、以下のコマンドで新規プロジェクトを作成する。

katz@macbookpro SoundBox % npx create-expo-app@latest
✔ What is your app named? … SampleProject

コマンドを実行すると以下のようなファイルが自動生成される。この自動生成されたファイルにはサンプルコードが含まれているので削除したい。

.
├── README.md
├── app
│   ├── (tabs)
│   │   ├── _layout.tsx
│   │   ├── explore.tsx
│   │   └── index.tsx
│   ├── +not-found.tsx
│   └── _layout.tsx
├── app.json
├── assets
│   ├── fonts
│   │   └── SpaceMono-Regular.ttf
│   └── images
│       ├── adaptive-icon.png
│       ├── favicon.png
│       ├── icon.png
│       ├── partial-react-logo.png
│       ├── react-logo.png
│       ├── react-logo@2x.png
│       ├── react-logo@3x.png
│       └── splash-icon.png
├── components
├── constants
├── hooks
├── node_modules
├── package-lock.json
├── package.json
├── scripts
│   └── reset-project.js
├── tree.txt
└── tsconfig.json

新規プロジェクトの不要なコードを削除する？

Expoではnpmを利用しているので、npm runでpackage.jsonに登録した、スクリプトをコマンドから実行できる。

katz@macbookpro SoundBox % npm run <スクリプト名称>

Expoで新規作成したプロジェクトのpackage.jsonには以下のスクリプトが定義されている。

  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },

この中のreset-projectというスクリプトが新規プロジェクトのサンプルコードをリセットするコマンドらしい。reset-projectをコマンドを実行することで、不要なサンプルコードを別ディレクトリに移動させてくれる。

katz@macbookpro SoundBox % npm run reset-project
> apppp@1.0.0 reset-project
> node ./scripts/reset-project.js
📁 /app-example directory created.
➡️ /app moved to /app-example/app.
➡️ /components moved to /app-example/components.
➡️ /hooks moved to /app-example/hooks.
➡️ /constants moved to /app-example/constants.
➡️ /scripts moved to /app-example/scripts.
📁 New /app directory created.
📄 app/index.tsx created.
📄 app/_layout.tsx created.
✅ Project reset complete. Next steps:
1. Run `npx expo start` to start a development server.
2. Edit app/index.tsx to edit the main screen.
3. Delete the /app-example directory when you're done referencing it.

reset-projectを実行するとappには_layout.tsxとindex.tsxのみが配置されて、その他のサンプルコードはapp-exampleに移動されている。もしapp-exampleに移動されたサンプルコードが必要ないのであれば削除すると良い。

.
├── README.md
├── app
│   ├── _layout.tsx
│   └── index.tsx
├── app-example
│   ├── app
│   │   ├── (tabs)
│   │   │   ├── _layout.tsx
│   │   │   ├── explore.tsx
│   │   │   └── index.tsx
│   │   ├── +not-found.tsx
│   │   └── _layout.tsx
│   ├── components
│   │   ├── Collapsible.tsx
│   │   ├── ExternalLink.tsx
│   │   ├── HapticTab.tsx
│   │   ├── HelloWave.tsx
│   │   ├── ParallaxScrollView.tsx
│   │   ├── ThemedText.tsx
│   │   ├── ThemedView.tsx
│   │   ├── __tests__
│   │   │   ├── ThemedText-test.tsx
│   │   │   └── __snapshots__
│   │   │       └── ThemedText-test.tsx.snap
│   │   └── ui
│   │       ├── IconSymbol.ios.tsx
│   │       ├── IconSymbol.tsx
│   │       ├── TabBarBackground.ios.tsx
│   │       └── TabBarBackground.tsx
│   ├── constants
│   │   └── Colors.ts
│   ├── hooks
│   │   ├── useColorScheme.ts
│   │   ├── useColorScheme.web.ts
│   │   └── useThemeColor.ts
│   └── scripts
│       └── reset-project.js
├── app.json
├── assets
├── node_modules
├── output.txt
├── package-lock.json
├── package.json
└── tsconfig.json

まとめ

React Native(Expo)のプロジェクトではnpmを利用しており、開発に利用するスクリプトはpackage.jsonに定義されておりnpm run <スクリプト名>で実行することができる。
React Native(Expo)のプロジェクトではnpm run reset-projectを実行することで別ディレクトリに移動させることができる。そして別ディレクトリに移動されたコードを削除すれば、新規作成した際のサンプルコードを全て削除できる。

参考文献

#Expo #React Native

ABOUT ME