React Nativeで始めるモバイルアプリ開発【初心者向け】

React Nativeとは

ReactはJavaScriptのフレームワークであり、Webのフロントエンド開発に使われていますが、React NativeはReactでモバイルアプリ開発をすることができるフレームワークです。

いわゆるクロスプラットフォームと言うもので、SwiftやJava,Kotlinを使わなくてもネイティブアプリに近いものを作ることができます。

iOSとAndroidで細かいところは書き分ける必要があるのですが、コア機能などの1部分は共通のコードで記述することが可能なので開発にコストをかけられない時はとても助かります。

コアなネイティブの機能を利用することは難しいですが、シンプルなモバイルアプリ開発の場合はとても開発しやすいです。

 

React NativeでHello World

実際にReact Nativeで実機に表示をするところまでやってみます。

今回利用するのはcreate-react-native-appで、create-react-appを利用したことがある人は多いと思いますが、それのReact Native版です。

このコマンドラインツールを利用することで、React Native開発環境を簡単に用意することができます。

ここで大事なのがExpoです。

ExpoはiOS, Android開発環境をReact Native上で簡単に実現できるサービスで、これを利用することでアプリケーションを簡単に試したり共有することができます。

ただ、ネイティブのプラグインが利用できないと言うデメリットがあります。

しかし、Expo公式だけでも十分なプラグインが用意されているので、簡単なアプリケーションであればExpoで十分だと思われます。

 

プロジェクトを作成する

早速、create-react-native-appでプロジェクトを作成しましょう。

$ npx create-react-native-app my-app

Happy hacking!の文字がが出たら成功です!

ディレクトリの構成は以下のようになります。

react native1

Reactのようにsrcなどはなく、App.jsがエントリーポイントとなります。

 

Expoのアプリをインストールする

実機でのデバッグにはExpoのアプリが必要です、以下のアイコンのExpo Client(AndroidはExpo)をインストールしておきましょう。

expo

 

実機に表示する

いよいよ実機での表示を行なっていきます。

以下のコマンドでDev Serverを起動します。

$ npm start

サーバーが起動すると、以下のようなQRコードが現れます。

react native qr

先ほどインストールしたExpoアプリでこのQRコードを読み取ることで、ビルドが始まり実機でアプリを起動させることができます、めっちゃ楽ですね!!

ちなみに端末を振るとメニューも出てきます。

react native firstreact native menu

 

変更はリアルタイムで反映されるので、App.jsを以下のように書き換えると、実機での表示も変化します。

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

export default class App extends React.Component {
  render() {
    return (
      <Text>Hello, React Native!</Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

react native hello

今回は以上となります、React Nativeの記述はReactと近いのでぜひReactを書いている方は試していただきたいと思います!

初めての人にオススメしたいReactの勉強法【初心者向け】