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

基本を学ぶ

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

さあ、始めましょう。

Hello World​

我々の民の古くからの伝統に従い、まず「Hello, world!」とだけ言うアプリを作成しなければなりません。それがこちらです。

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

何が起こっているのか？​

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

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

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

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

次のスタイルはjustifyContent: "center"です。これは、コンテナのメイン軸の中心にコンテナの子を配置します。最後に、alignItems: "center"があり、これは、コンテナの交差軸の中心にコンテナの子を配置します。

ここにあるもののいくつかは、JavaScriptのように見えないかもしれません。パニックにならないでください。これが未来です。

まず、ES2015（ES6とも呼ばれる）は、JavaScriptの改善セットであり、現在は公式標準の一部ですが、まだすべてのブラウザでサポートされていないため、ウェブ開発ではまだ使用されていないことがよくあります。React NativeはES2015をサポートしているため、互換性を心配せずにこれを使用できます。上記の例のimport、export、const、fromはすべてES2015の機能です。ES2015に慣れていない場合でも、このチュートリアルにあるようなサンプルコードを読み進めることで習得できるでしょう。もしよろしければ、このページにES2015の機能の優れた概要があります。

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

コンポーネント​

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

Props​

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

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

nameをpropsとして使用することで、Greetingコンポーネントをカスタマイズできるため、各挨拶にそのコンポーネントを再利用できます。この例では、JSXでGreetingコンポーネントも使用しています。これを実現する力が、Reactを非常に素晴らしいものにしています。

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

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

State​

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

Reactのstateとpropsの違いは何ですか？​

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

ReactとReact Nativeでstateの扱いに違いはありますか？​

tsx
// 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;
}

tsx
// 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を使ってコンポーネントのstateを使うことができます！

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