[React Native] アプリ開発を始めるための基礎知識 – JavaScript, ES6, JSX

React Nativeでアプリ開発をするにはどのような知識が必要？

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

React Nativeは、プログラミング言語に主にJavaScriptでコーディングをしていきます。そのため、JavaScript（およびECMAScript）の知識が必要です。このブログではこちらのドキュメントに倣いつつ アプリ開発を始めるための基礎知識 について学習します。

Hello World

JavaScriptと言っても、ECMAScript 2015(ES2015, ES6などとも呼ぶ)で記述することが基本になります。例えばシンプルな例として、下記のコードを見てください。

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

コードとしてはシンプルですが、JavaScriptのコーディングに久しい方は、見たことが無いような記述が多いと感じるかと思います。

ECMAScriptとは

ECMAScriptはJavaScriptの仕様です。Ecma Internationalという団体で標準化が行われており、ブラウザなどのJavaScriptを動作させるツールやソフトウェアはこのECMAScriptの仕様に従って動作させるようになっています。

ECMAScriptにはバージョンがあり、React Nativeでは ECMAScript 2015(ES2015, ES6などとも呼ぶ) の記述がサポートされています。

React Nativeで頻出するコードを速習する

上記のサンプルコードのうち、ES6ならではの記法をチャチャっと学びます。

class と　 extends

ES6ではクラスの定義とクラスの継承を実装できます。独自に新しいクラスを定義したり、React Native標準で用意されているクラスを継承したりできます。

class Parent {
  hello() {
    console.log('Hello!')
  }
}

class Child extends Parent {
  hello() {
    super.hello()
    console.log('Hi!')
  }
}

import と from

他のモジュールを利用する場合に使用します。従来の require の高機能版と思ってもらえると分かりやすいと思います。ファイル内に複数のクラスや関数が定義されている場合、一部だけ使いたい場合に簡単に記述できます。

export { Parent, Child }

import { Child } from './sample'

JSX

JSXはECMAScriptにXMLライクのシンタックスを追加する言語拡張です。JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。

ReactおよびReact Nativeでは機能をコンポーネント単位で管理しますが、コンポーネントを使う場合はJSXを使って書きます。

下記コードでは View というコンポーネントの中に Text というコンポーネントを置いています。View は要素を描画するためのコンポーネントで、HTMLで言うと div や span にあたります。

<View>
  <Text>Hello world!</Text>
</View>

おさらい

と言うことで、冒頭に記載したコードをおさらいしてみましょう。

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

まずはじめに React と Component を react モジュールからインポートしています。この Component はReactで扱うコンポーネントのクラスです。2行目では React Native ならではの Text や View クラスをインポートしています。

クラス定義では Component を継承した HelloWorldApp を定義しています。Component には render メソッドが用意されており、この戻り値に描画用のコンポーネントを指定します。ここでは View と Text を使った描画用のコンポーネントを返しています。

ECMAScriptをより詳しく知りたい場合は

以下のドキュメントにES2015の機能についてざっくりとまとめられています。ロジックを組む上でスマートに記述できる方法が多く載っていますので、開発時の参考にすると良いと思います。

• Learn ES2015 · Babel

iOS/Androidアプリを開発するための知識も、いずれ必要

React Nativeでクロスプラットフォームアプリを開発できると言っても、やはり純粋なiOS/Androidアプリの開発のための知識はいずれ必要になってきます。具体的には下記のような知識です。

• SwiftまたはObjective-C
• KotlinまたはJava
• アプリプロジェクトの基本構成など
• アプリリリースのための知識

はじめのうちは不要なので、上記がいずれ必要になるんだなぁ…と思いつつ学んでいきましょう。