プロジェクト構成の理解
Expoプロジェクトのフォルダー構成を確認し、app.json、package.json、Appコンポーネントの役割を学んで、初めてのコード変更を行います
「プロジェクト構成の理解」はCoddyKit上の無料React Native Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
The Root of Every Expo Project
Every Expo project has a tidy layout that splits config, code, assets, and dependencies. Config files sit at the root, your code in App.js or src/, and packages in node_modules/.
MyFirstApp/
├── App.js # Entry component
├── app.json # Expo configuration
├── package.json # Dependencies + scripts
├── package-lock.json # Locked dependency tree
├── babel.config.js # Transpiler config
├── .gitignore # Files to exclude from git
├── assets/ # Static files
│ ├── icon.png
│ ├── splash.png
│ └── adaptive-icon.png
└── node_modules/ # Installed packages (auto-managed)The assets/ Folder
The assets/ folder holds static files bundled with your app — images, fonts, audio. Reference a local image with require(), and Expo optimizes it during the build. See the code.
import { Image } from 'react-native';
// Referencing a local asset
<Image source={require('./assets/icon.png')} />
// Referencing a remote image
<Image source={{ uri: 'https://example.com/photo.jpg' }} />
// Loading a font from assets/
import * as Font from 'expo-font';
await Font.loadAsync({
'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
});App.js as the Entry Point
React Native needs one entry point: App.js, which must export a default component. As your app grows, App.js becomes a thin shell wiring up navigation, state, and themes.
// A typical App.js as the project grows
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux';
import { ThemeProvider } from './context/ThemeContext';
import RootNavigator from './navigation/RootNavigator';
import store from './store';
export default function App() {
return (
<Provider store={store}>
<ThemeProvider>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</ThemeProvider>
</Provider>
);
}Organizing Source Files in src/
Small apps live at the root, but as yours grows, add a src/ folder. Common subfolders: screens/, components/, navigation/, hooks/, and services/. It keeps things easy to find.
src/
├── screens/
│ ├── HomeScreen.tsx
│ ├── ProfileScreen.tsx
│ └── SettingsScreen.tsx
├── components/
│ ├── Button.tsx
│ ├── Card.tsx
│ └── Avatar.tsx
├── navigation/
│ └── RootNavigator.tsx
├── hooks/
│ └── useFetchUser.ts
├── services/
│ └── api.ts
└── utils/
└── formatDate.tspackage.json Deep Dive
package.json is your project manifest: dependencies for runtime, devDependencies for tooling, and scripts for shortcuts. Never edit node_modules — npm install rebuilds it.
// package.json structure
{
'name': 'my-first-app',
'version': '1.0.0',
'main': 'node_modules/expo/AppEntry.js',
'scripts': {
'start': 'expo start',
'test': 'jest',
'lint': 'eslint .'
},
'dependencies': {
'expo': '~50.0.0',
'react': '18.2.0',
'react-native': '0.73.6'
},
'devDependencies': {
'@types/react': '~18.2.0',
'typescript': '^5.1.3',
'jest': '^29.0.0'
}
}app.json vs app.config.js
Need dynamic config — like reading env variables at build time? Swap app.json for app.config.js, a JS file that exports your config using process.env.
// app.config.js (dynamic configuration)
export default {
name: 'My App',
slug: 'my-app',
version: '1.0.0',
extra: {
apiUrl: process.env.API_URL || 'https://api.myapp.com',
environment: process.env.APP_ENV || 'production',
},
ios: {
bundleIdentifier: 'com.mycompany.myapp',
},
android: {
package: 'com.mycompany.myapp',
},
};.gitignore and What to Exclude
The .gitignore file tells Git what to skip. Always exclude node_modules/ (npm rebuilds it), .expo/, and any secret files like .env. Committing node_modules bloats your repo.
# Default .gitignore for Expo
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# Environment files with secrets
.env
.env.local
.env.production
# macOS
.DS_Storebabel.config.js and Transpilation
The babel.config.js file controls how Babel transpiles your code. The babel-preset-expo preset covers the basics; you extend it with plugins like path aliases.
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// Path aliases: @/components → src/components
['module-resolver', {
root: ['./src'],
alias: { '@': './src' },
}],
// Reanimated plugin MUST be last
'react-native-reanimated/plugin',
],
};
};The node_modules Directory
node_modules/ holds every package you depend on — often hundreds of megabytes. Never edit it directly. If things break, the classic fix is delete it and run npm install.
# If things break, a clean install often fixes it:
rm -rf node_modules
npm install
# Also clear the Metro cache
npx expo start --clear
# Check how many packages are installed
ls node_modules | wc -l
# See the dependency tree
npm list --depth=1ios/ and android/ Folders in Bare Workflow
The managed workflow hides the ios/ and android/ folders — Expo handles native code. Run expo prebuild to generate them: the Xcode project and the Gradle build files.
# Generate native folders (bare workflow)
npx expo prebuild
# This creates:
ios/
├── MyApp/
│ ├── AppDelegate.swift
│ ├── Info.plist
│ └── Images.xcassets/
└── MyApp.xcodeproj/
android/
├── app/
│ ├── src/main/
│ │ ├── AndroidManifest.xml
│ │ └── java/.../MainApplication.kt
│ └── build.gradle
└── build.gradleExpo Router and the app/ Directory
Newer projects use Expo Router, file-based routing like Next.js. Each file in app/ becomes a route — index.tsx is /, profile.tsx is /profile. No manual navigator needed.
// With Expo Router, file structure = routes:
app/
├── _layout.tsx // Root layout (NavigationContainer)
├── index.tsx // Screen at route '/'
├── profile.tsx // Screen at route '/profile'
└── settings/
├── _layout.tsx // Settings-section layout
└── index.tsx // Screen at '/settings'
// app/index.tsx
import { Text, View } from 'react-native';
export default function HomeScreen() {
return <View><Text>Home</Text></View>;
}Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
You mapped the project: assets/ holds media, app.json controls config, and src/screens and src/components organize your growing code. Next: the View component! 📦
よくある質問
「プロジェクト構成の理解」レッスンは無料ですか？
はい。「プロジェクト構成の理解」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。
「プロジェクト構成の理解」で何を学びますか？
Expoプロジェクトのフォルダー構成を確認し、app.json、package.json、Appコンポーネントの役割を学んで、初めてのコード変更を行います ブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Native Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「プロジェクト構成の理解」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Native Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。