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

触ってわかった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 開発者にとっては非常に恩恵を受けられるものですので、今後も注目していきたいと思います。

Related Articles