メインコンテンツにスキップ

基本を学ぶ

React Native は React に似ていますが、ビルディングブロックとして Web コンポーネントの代わりにネイティブコンポーネントを使用します。そのため、React Native アプリの基本的な構造を理解するには、JSX、コンポーネント、state、propsなどの基本的な React の概念を理解する必要があります。すでに React を知っている場合でも、ネイティブコンポーネントなど、React Native 固有のことを学ぶ必要があります。このチュートリアルは、React の経験の有無にかかわらず、すべての読者を対象としています。

始めましょう。

Hello World​

私たちの民族の古代からの伝統に従い、「Hello, world!」とだけ表示するアプリを最初に構築する必要があります。それがこちらです。

興味があれば、Web シミュレーターでサンプルコードを直接試すことができます。また、App.jsファイルに貼り付けて、ローカルマシンで実際のアプリを作成することもできます。

ここで何が起こっているのでしょうか？​

  1. まず、JSXを使用できるようにReactをインポートする必要があります。これは、各プラットフォームのネイティブコンポーネントに変換されます。
  2. 2行目で、react-nativeからTextおよびViewコンポーネントをインポートします。

次に、HelloWorldApp関数を定義します。これは関数型コンポーネントであり、Web の React と同じように動作します。この関数は、いくつかのスタイルと子としてTextを持つViewコンポーネントを返します。

Textコンポーネントを使用するとテキストをレンダリングできます。一方、Viewコンポーネントはコンテナをレンダリングします。このコンテナにはいくつかのスタイルが適用されているので、それぞれが何をしているかを分析しましょう。

最初に見つかるスタイルはflex: 1です。flexプロパティは、メイン軸に沿ってアイテムが利用可能なスペースをどのように「埋めるか」を定義します。コンテナが1つしかないため、親コンポーネントの利用可能なスペースをすべて使用します。この場合、唯一のコンポーネントであるため、利用可能な画面スペースをすべて使用します。

次のスタイルはjustifyContent: "center" です。これにより、コンテナの子がコンテナのメイン軸の中央に揃えられます。最後に、alignItems: "center" があり、これにより、コンテナの子がコンテナの交差軸の中央に揃えられます。

ここにあるもののいくつかは JavaScript のように見えないかもしれません。慌てないでください。これが未来です。

まず、ES2015（ES6としても知られています）は JavaScript の一連の改善であり、現在では公式標準の一部ですが、すべてのブラウザではまだサポートされていないため、Web 開発ではまだ使用されていないことがよくあります。React Native は ES2015 をサポートしているため、互換性を気にすることなく、この内容を使用できます。上記の例の import、export、const、from はすべて ES2015 の機能です。ES2015 に詳しくない場合は、このチュートリアルのようなサンプルコードを読むことで理解できる可能性があります。必要に応じて、このページには、ES2015 の機能の概要が記載されています。

このコード例のもう1つの珍しい点は、<View><Text>Hello world!</Text></View>です。これは JSX です。JavaScript 内に XML を埋め込むための構文です。多くのフレームワークでは、マークアップ言語内にコードを埋め込むことができる特別なテンプレート言語を使用します。React では、これが逆になっています。JSX では、マークアップ言語をコード内に記述できます。Web 上の HTML のように見えますが、<div>や<span>のような Web のものではなく、React コンポーネントを使用します。この場合、<Text>はテキストを表示するコアコンポーネントであり、Viewは<div>または<span>のようなものです。

コンポーネント​

したがって、このコードは新しいコンポーネントであるHelloWorldAppを定義しています。React Native アプリを構築する場合、新しいコンポーネントをたくさん作成することになります。画面に表示されるものはすべて、何らかのコンポーネントです。

プロパティ​

ほとんどのコンポーネントは、作成時に異なるパラメーターでカスタマイズできます。これらの作成パラメーターはプロパティと呼ばれます。

独自のコンポーネントでもpropsを使用できます。これにより、アプリのさまざまな場所でわずかに異なるプロパティを使用して使用できる単一のコンポーネントを作成できます。関数型コンポーネントではprops.YOUR_PROP_NAMEを、クラスコンポーネントではthis.props.YOUR_PROP_NAMEを参照してください。以下に例を示します。

nameをプロパティとして使用すると、Greetingコンポーネントをカスタマイズできるため、各あいさつに対してそのコンポーネントを再利用できます。この例では、JSX でGreetingコンポーネントも使用しています。これを行う能力こそが、React が非常にクールな理由です。

ここで起こっているもう1つの新しいことは、Viewコンポーネントです。Viewは、スタイルとレイアウトを制御するのに役立つ、他のコンポーネントのコンテナとして役立ちます。

propsと基本的なText、Image、およびViewコンポーネントを使用すると、さまざまな静的画面を作成できます。アプリを時間の経過とともに変化させる方法を学ぶには、Stateについて学ぶ必要があります。

State​

読み取り専用であり、変更すべきではない props とは異なり、stateを使用すると、React コンポーネントはユーザーの操作、ネットワーク応答、その他に応じて、時間の経過とともにその出力を変更できます。

React における state と props の違いは何ですか？​

React コンポーネントでは、props は親コンポーネントから子コンポーネントに渡す変数です。同様に、state も変数ですが、パラメーターとして渡されるのではなく、コンポーネントが内部的に初期化および管理するという違いがあります。

state を処理するために React と React Native に違いはありますか？​

// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

// React Native Counter Example using Hooks!

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

上記のように、ReactとReact Nativeの間でstateの処理に違いはありません。hooksを使用して、クラスと関数型コンポーネントの両方でコンポーネントの状態を使用できます！

次の例では、クラスを使用した上記のカウンターの例を示します。