触ってわかったWeb開発のノウハウを活かせるReact Native

私は業務では主にWebフロントエンドの開発をしています。ネイティブアプリ開発はプライベートで作ったことがある程度です。
最近だと個人でReact Nativeの勉強をしているのですが、とても良くできたフレームワークだと感じました。
コードはJavaScriptで書けるので、普段行っているWeb開発とほとんど変わりがありません。

UIコンポーネントの定義

React.js
import React from 'react'

export class App extends React.Component {
  render() {
    <div>App</div>
  }
}
React Native
import React from 'react'
import { View Text, StyleSheet } from 'react-native'

export class App extends React.Component {
  render() {
    <View>
      <Text>App</Text>
    </View>
  }
}

このように、HTMLエレメントがReact Native用のUIコンポーネントになっただけなので、Reactの知識があれば簡単に定義することができます。

コンポーネントのスタイルを定義する

スタイル定義もReact.jsと同じく style に指定します。プロパティはWebのCSSとほぼ同じものが用意されているので、特に難しいことはありません。Keyはキャメルケースで定義します。

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

export class App extends React.Component {
  render() {
    <View style={styles.container}>
      <Text>App</Text>
    </View>
  }
}

// スタイルシートを定義
const styles = StyleSheet.create({
  container: {
    margin: 10,
    backgroundColor: '#5E62A0',
  },
});

Flexboxレイアウト

React NativeにもFlexboxが用意されています。構成はWebと違うため注意が必要ですが、justify contentとalign itemsはWebと同じ動作です。

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

export class App extends React.Component {
  render() {
    <View style={styles.container}>
      <View style={styles.item}>
        <Text>App</Text>
      </View>
    </View>
  }
}

const styles = StyleSheet.create({
  container: { // Flexboxレイアウト
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item: {
    width: 50,
    height: 50,
  },
});

React Nativeには、Yogaというレイアウトエンジンが搭載されており、YogaがUIのレイアウト全般を担ってくれます。

styled-componentsでコンポーネントを定義する

React.jsではメジャーなstyled-componentsですが、実はReact Nativeにも対応しています。使い方はWebと一緒で、スタイルのプロパティ名もWebと同じケバブケースで指定することができます。styled-componentsを使うとよりWeb開発に近い馴染みのある記述になります。

import React from 'react'
import styled from 'styled-components'

// styled-componentsでコンポーネントを定義
const Container = styled.View`
  flex: 1,
  justify-content: center,
  align-items: center,
`
const Item = styled.View`
  width: 50px,
  height: 50px,
`
const Heading = styled.Text`
  color: #F0395E
`

export class App extends React.Component {
  render() {
    <Container>
      <Item>
        <Heading>App</Heading>
      </Item>
    </Container>
  }
}

v0.57から標準で使えるTypeScript

React NativeでTypeScriptを扱う場合、以前までは react-native-typescript-transformer というライブラリを使用して、ひと工夫する必要がありましが、先日リリースされたバージョン0.57からbabel7が搭載され、標準でTypeScriptを扱うことができるようになりました。Web界隈では標準化されつつあるTypeScriptですが、React Nativeでも採用できるのは非常にありがたいです。

今後も進化するReact Native

一時期Airbnb社のブログ記事が話題になり、React Native離れが囁かれていましたが、アップデートし続けるReact Nativeは今後もより良いフレームワークとなることと思います。特に私のようなWeb開発者にとっては非常に恩恵を受けられるものですので、今後も注目していきたいと思います。