【iOSアプリ開発】#4 コンポーネントについて知る

前回の記事はこちら

基本はGeminiCLIの力を借りて開発を進めていく予定ですが、何をしているのか全く分からずに進めるのもよくないので、開発を通じて疑問に思った点は少しずつ調べて勉強していこうと思います。React Nativeを使う上では、コンポーネントという概念の理解が重要なようなので、以下に頑張って調べたことをまとめています。ほとんど自分用の備忘録になっています。

🌟「コンポーネント」とは？

辞書的意味： 部品、構成要素、成分
プログラミング的意味： 再利用可能な独立した機能の塊

基本情報の勉強をしているときに、オブジェクト指向プログラミングという概念について勉強したことがある。それとどう違うのかも聞いてみた。

🌟コンポーネント指向 vs オブジェクト指向【詳細比較】

オブジェクト指向の核心思想： 「現実世界のもの」をプログラムで表現する
敵キャラクターという「もの」を作る
↓
その「もの」から色々な敵を量産
↓
ゴブリン、オーク、ドラゴンが生まれる

コンポーネント指向の核心思想： 「機能や部品」を組み合わせてシステムを作る
ボタンという「機能」を作る
↓
その「機能」から色々なボタンを量産
↓
攻撃ボタン、防御ボタン、逃げるボタンが生まれる

似てる！とりあえずどちらも「型」を作って、使いまわすという考え方のことらしい。

🌟React Nativeにおけるコンポーネントの種類

１. 既製品コンポーネント（Core Components）
既製品コンポーネントは、初めにreact-nativeからimportする必要がある。

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

// これらは全部React Nativeが作った既製品
<View>             {/* 箱 */}
<Text>             {/* 文字表示 */}
<TextInput>        {/* 入力欄 */}
<TouchableOpacity> {/* ボタン */}

２. 自作コンポーネント（自分で作る）

//  既製品コンポーネントを組み合わせて、AnimalCardというオリジナルコンポーネントを作っている
function AnimalCard({ name, image, level }) {
  return (
    <View style={styles.card}>
      <Text style={styles.image}>{image}</Text>
      <Text style={styles.name}>{name}</Text>
      <Text>レベル: {level}</Text>
    </View>
  );
}

つまり、以下のコードでは……

①function MyButton() { 
　　②return ( 
　　③<TouchableOpacity> <Text>押してください</Text> </TouchableOpacity> ); }

①functionという命令を出して、MyButtonという関数（コンポーネント）を作っている。｛｝の中身は、その関数の中身。
②return ()は、この関数が実行された時、（）の中身を返しますという意味。
③TouchableOpacityとは、React Nativeが提供する「押せるボタン」のコンポーネント。Textも同じくコンポーネントで、文字を表示するために使う。両方とも、初めにimportで読み込まないと使えない。

🌟コンポーネントの本質

再利用可能な部品 – 一度作れば何度でも使える
独立性 – 他の部品に影響されない
組み合わせ可能 – 小さな部品を組み合わせて大きな機能を作る
データの流れ – Props（下向き）、Event（上向き）

１．再利用可能な部品
一度作った部品を、アプリの色々な場所で何度でも使える。開発効率も上がり、一箇所直せば全部直るので、メンテナンスも楽。

２．独立性
各コンポーネントが他のコンポーネントの影響を受けずに動作する。テストの際や、エラーが起きた時に楽。

３．組み合わせ可能
小さなコンポーネントを組み合わせて、大きく複雑な機能を作れる。小さい部品から順に、段階的な開発が可能。部品ごとに担当者を分けられるので、チームでの開発にも向いている。

４．データの流れ
親は子に命令を渡し（Props）、子は結果を親に報告する（Event）という一方通行のデータフローなので、デバッグがしやすい。

かなり理解できた気がします。この4つの本質を理解すると、React Nativeでの開発が劇的に効率的になるらしいです(^.^)

#5に続く