React Academy · レッスン

React Native Core ComponentsとWeb DOMの比較

View、Text、Image、ScrollViewを対応するDOM要素と比較し、bridge modelを理解します。

「React Native Core ComponentsとWeb DOMの比較」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

React NativeにHTMLがない理由

React NativeはブラウザーのDOMではなく、iOSとAndroidのネイティブUIコンポーネントに描画します。<div>、<p>、<img>は存在せず、各プラットフォームが独自のネイティブプリミティブを持ちます。

View — div相当

ViewはReact Nativeで最も基本的なレイアウトコンテナです。iOSではUIViewに、Androidではandroid.view.Viewに対応します。直接テキストを格納できない<div>と考えてください。

import { View, StyleSheet } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      {/* children go here */}
    </View>
  );
}

const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 8 } });

Text — p/span相当

Textは、画面に表示するすべてのテキストに必要です。Webとは異なり、文字列をViewの中に直接置くことはできません。<Text>でラップする必要があります。

import { View, Text } from 'react-native';

function Greeting() {
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

Image — img相当

Imageは画像を表示します。ローカルアセットにはrequire()を指定したsource propsを使用し、ネットワーク画像には{ uri: '...' }オブジェクトを使用します。

import { Image } from 'react-native';

// Local asset:
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Network image (must provide dimensions):
<Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 200, height: 150 }} />

ScrollView — overflow:scroll相当

ScrollViewはスクロール可能なコンテナです。Webとは異なり、明示的に使用する必要があります。Viewはスクロールしません。長いリストにはFlatListを優先してください。

import { ScrollView, Text } from 'react-native';

function Article({ paragraphs }) {
  return (
    <ScrollView>
      {paragraphs.map((p, i) => <Text key={i}>{p}</Text>)}
    </ScrollView>
  );
}

FlatList — 仮想化リスト

FlatListは表示されている項目だけを描画し、画面外の項目を再利用します。大量のデータを扱う際のパフォーマンスに不可欠です。

import { FlatList, Text, View } from 'react-native';

function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TouchableOpacity — button相当

TouchableOpacity（新しいRNではPressable）は、任意のビューにタッチフィードバックを追加します。onPress propsでタップを処理します。

import { TouchableOpacity, Text } from 'react-native';

function Button({ onPress, title }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

TextInput — input相当

TextInputは制御された入力フィールドです。value、onChangeText、placeholder、キーボードの種類に対応しています。

import { TextInput, useState } from 'react-native';

function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
      keyboardType="default"
    />
  );
}

ActivityIndicator — ローディングスピナー

ActivityIndicatorはネイティブのローディングスピナーです。iOSでは円形のスピナー、Androidではマテリアルデザインの円形プログレスインジケーターとして表示されます。

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <ActivityIndicator size="large" color="#4f46e5" />
</View>

SafeAreaView

SafeAreaViewは、iOSとAndroidでノッチ、ステータスバー、ホームインジケーターのための余白を自動的に追加します。

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MyScreen />
    </SafeAreaView>
  );
}

Modal

Modalはアプリの上にオーバーレイを表示します。visible propsで表示するかどうかを制御します。

import { Modal, View, Text } from 'react-native';

<Modal visible={showModal} animationType="slide" transparent={true}>
  <View style={styles.overlay}>
    <View style={styles.dialog}>
      <Text>Are you sure?</Text>
    </View>
  </View>
</Modal>

クイックチェック

画面にテキストを表示するには、どのReact Nativeコンポーネントを使用する必要がありますか？

まとめ

React Nativeでは、Webの概念をネイティブコンポーネントに対応付けます。View（div）、Text（p）、Image（img）、ScrollView、FlatList（仮想化リスト）、TextInput（input）、TouchableOpacity（button）があります。ルートレイアウトには必ずSafeAreaViewを使用してください。

よくある質問

「React Native Core ComponentsとWeb DOMの比較」レッスンは無料ですか？

はい。「React Native Core ComponentsとWeb DOMの比較」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「React Native Core ComponentsとWeb DOMの比較」で何を学びますか？

View、Text、Image、ScrollViewを対応するDOM要素と比較し、bridge modelを理解します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「React Native Core ComponentsとWeb DOMの比較」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

React Native Core ComponentsとWeb DOMの比較
StyleSheet APIとFlexboxによるスタイリング
Expo Routerによるナビゲーション
Device APIへのアクセス：Camera、Location、Push Notifications

← React Academyに戻る