React Nativeとは?初心者向けに解説!

近年は、さまざまな会社から、多種多様な開発ツールがリリースされています。そのため、急にモバイルアプリが開発したくなったものの、目移りしてしまう方も少なくありません。

今回は、開発ツールのなかから、React Nativeについて紹介します。基本的な知識をはじめ、開発環境や使用感について解説するため、ぜひ参考にしてください。

React Nativeとは

PCの画像

React Nativeとは、モバイルアプリケーション開発のフレームワークです。同じコードベースからWebやAndroid、 iOSで動作するアプリケーションの生成ができます。Reactを書けるだけで、モバイルアプリの領域にも手が届く点が優秀とされています。

クロスプラットフォームのフレームワークとしては、よくFlutterと比較されていることが多いです。

React Nativeで作られたアプリ

React Nativeで作られたアプリとして、以下のものが挙げられます。

  • Facebook
  • Instagram
  • Skype
  • Discord
  • UberEATS

SNSから通話アプリまで、多種多様なアプリが開発できることがわかります。このなかに、みなさんが普段使用しているアプリもあったのではないでしょうか。

ただし、ゲーム系のアプリ開発には向いていないようです。

React Nativeの開発環境とツール

アプリの開発を進めるにあたって、開発環境とツールは重要です。以下では、React Nativeの開発環境、そしてツールについて解説します。

 Expo

React Nativeアプリを開発する際に使用する機能を集めたプラットフォームです。以下3つのコマンドを実行するだけで、アプリの雛形の作成、および実機での動作確認が可能になります。

  • Expoインストール:npm install -g expo-cli
  • プロジェクト作成:expo init expo-sample
  • 動作確認:expo start

整備のシンプルさが魅力で、ディレクトリ構造やルーティングも設定してあります。

Expo CLI

開発サーバーを立ち上げたり、ビルドしたりといった機能を提供するCLIツールです。

Expo CLIでは、以下のような機能が利用できます。

  • init: アプリの雛型を生成する
  • start: 開発サーバーを起動する
  • build: iOS/Android/Web 向けにアプリをビルドする

Expo go

自身の携帯にインストールし、デバッグするためのアプリです。シミュレーターと異なり、開発したアプリを実際に手元のデバイスで動かせます。

Expo goは、iOSのApp StoreやAndroidのPay Storeからインストール可能です。

Expo Application Service(EAS)

開発したアプリのビルドやデプロイを、クラウドで行ってくれるプラットフォームです。基本利用料は無料のため、とくに課金する必要はありません。

通常、iOSアプリの開発をする際は、XCodeが必須です。しかし、EASでビルドとデプロイをすることで、WindowsでもiOSアプリの開発ができます。

実は、筆者も2年ぶりにEASを触ってみました。現在では、create-expo-appのディレクトリ構造などがかなりNext.js寄りになっています。

React NativeのUIライブラリ

React Nativeにはアプリ全体のテーマを設定する機能は存在しません。そのため、アプリのUIを構築する際は、多くの部品を自力で作成する必要があります。

以下では、React Nativeでアプリを開発する際に実際に触れたUI、そしてそれぞれの使用感について紹介します。

NativeBase (Star20k)

筆者が初めてReact Native触ったときに、一番勢いがあったUIライブラリです。ただし、最終更新は1年前と、現在では開発があまり盛んではない様子。

基本的なUIパーツは網羅されています。また、Chakra UIのようなスタイリング方法を提供していて、使用感は良好でした。

HPを見たところ、新規プロジェクトでは後述するGlueStackUIの使用を推奨していました。

Tamagui (Star10.6k)

現在勢いのありそうなライブラリが、こちらのTamaguiです。UIの数が豊富なのも、魅力的なポイントです。

ただし、実際に使ってみると原因不明のエラーが出るなど、安定感に欠ける印象。また、情報が少ないため、初心者向きとはあまりいえません。

GlueStackUI (Star1.8k)

NativeBaseの後継として開発されたライブラリです。UIも十分に提供されており、NativeBaseと同様にスタイリングもしやすいです。

総合的な使用感は、かなり良好という印象を持ちました。

なお、現在はgluestack ui v2がベータ版でリリースされています。

React Nativeの将来性

開発ツールの流行り廃りは、想像しているよりもずっと早いです。しかし、React Nativeは継続的な改善とアップデートが実施されているほか、モバイル開発のトレンドに対応できています。

そのため、開発ツールとしての将来性は高いといえます。

実際に、知名度の高い企業もアプリの開発に利用しています。今後もモバイル開発の主流なツールとしての地位は、大きく変化することはないでしょう。

まとめ

React Nativeは、ひとつのコードベースからWebやAndroid、 iOSで動作するアプリケーションが作成できる開発ツールです。大手でもアプリの開発をする際に利用されており、将来性も高いといえます。

既存のReactやJavaScriptの知識があれば習得も難しくないため、趣味としてはもちろん、キャリアアップのために勉強するのもおすすめです。興味を持った方は、ぜひ触ってみてください。

デジタル領域でのお困り事やプロダクト開発について、まずはお気軽にご相談ください。

お問い合わせはこちら

あわせて読みたい記事