React入門

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説

本記事はJavascriptのライブラリであるReactのアプリケーションフレームワークであるReactNativeのチュートリアル記事です。

おにちゃん
おにちゃん

ReactNativeの開発環境構築〜todoアプリ開発までをサポートさせていただきます。

現在、todoアプリは作成中です。少々お待ちください。

 

はじめに

ReactNativeでは環境構築の方法が2パターンあります。

  • React Native CLI(通常)
  • Expo CLI(ReactNativeの開発支援ツール)

これから学習を始める方であればExpoをお勧めします。

理由は、Expoを活用することで通常の時に必要なSwiftなどのネイティブコードを触らずに済むからです。また、Expoを活用することでアプリ審査がスムーズに行えるようになったりなど良いことだらけです。

おにちゃん
おにちゃん

ただ、Expoを活用すると、通用のReact Native CLIよりも機能的な制限が生じますが、最初のうちは制限があっても良いと思います。

制限があると言っても、最近はほとんど制限がなくなりつつあります。

ReactNativeとは

ReactNativeとは

ReactNativeとは

ReactNativeとは、iOS・Androidアプリの両方を開発することができるフレームワークです。

クロスプラットフォームとも言われています。

JavaScriptと言うWeb言語でiOS・Androidアプリを開発できる点が人気の理由です。

ReactNativeとは何なのか

  • ReactNativeとはFacebookが開発しているもの
  • ReactNativeとはiOS・Androidの両方が開発できるフレームワーク

 

Reactを知らない方はまずはこちら

Reactとは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。

おにちゃん
おにちゃん

ReactもFacebookが開発をしており、現在はYahooなども開発に協力をしています。

  • ReactとはWebアプリで使用されるライブラリ
  • ReactNativeとはiOS・Androidアプリで使用されるフレームワーク

両者の目的は大きく違いますが、ReactNativeはReactを起点に作られているため、共通点が多いです。

Reactの環境構築やアプリ開発をしたことがない方はまずは下記の記事でReactについて学んでみてください。

【React入門】Reactとは?UI構築のためのJSライブラリ
【React入門】Reactとは?UI構築のためのJSライブラリReact入門|Reactでの開発環境、todoアプリ、chatbotアプリなどを開発できるコンテンツ|日々更新しています。...

 

ReactNativeのメリット・デメリット

ReactNativeのメリットは下記の通りです。

  • Webエンジニアがネイティブアプリを開発できる
  • ホットリロード機能で修正が簡単
  • アプリ開発の人員を削減できる
おにちゃん
おにちゃん

ReactNativeの最大のメリットはWebエンジニアでネイティブアプリが開発できる点です。

また、ReactNativeでは開発中にコンパイルの必要性がないので、スムーズに実行結果を確認することが可能です。

ネイティブアプリ開発には、iOS・Androidの2つにマッチした人材が必要でした。

しかし、ReactNativeを活用することで、1人で両方のアプリを開発ができるようになったのです。

実際には、1人で開発することは稀ですが、それでもReactNativeはそのことを可能にしています。

 

ReactNativeのデメリットは下記の通りです。

  • エラー特定に時間が必要
  • ネイティブエンジニアには学習コストが高い
  • アップデート対応が大変

ReactNativeで開発していると、結構な頻度でエラーが起こります。

iOSでは動いているのに、Androidでは動かないことなんてざらにあります。

ReactNativeは1つの言語で2つ開発できるメリットがある一方で、2つのエラーに対応しなくてはいけないのです。

Swiftを触っていた方がReactNativeを始めるメリットは正直そこまでないかもしれません。

JavaScriptを理解する→ Reactを理解する→ ReactNativeを理解する

上記の流れで学習をするしかないので、学習コストはかなり高くなります。

おにちゃん
おにちゃん

ReactNativeは高い頻度でアップデートを行なっています。ですので、その対応をキャッチするために情報に敏感になっておく必要が出てきます。

 

ReactNativeの導入企業

ReactNativeを導入している企業をご紹介させて頂きます。

  • Facebook ads Manager
  • Instagram
  • Progate
  • Shopify
  • Discord
  • Uber Eats
  • Pintrest

名のあるアプリを公開している会社で使用されています。

また、日本でもベンチャー企業を中心にReactNative or Reactが活用されています。

 

ReactNativeの環境構築方法

ReactNativeの環境構築方法

ReactNativeの環境構築方法

ここからはReactNativeの環境構築について解説していきます。

本記事ではExpoを活用していきます。

  1. ReactNative CLI
  2. ReactNative Expo
おにちゃん
おにちゃん

個人的には後者のExpoをおすすめしています。

 

ReactNativeをExpoで導入する場合

Expoの環境構築は少しだけ難しいので、下記の記事を参考にしてみてください。

【入門】ReactNative+Expo環境構築|firebaseとの連携も解説
【入門】ReactNative+Expo環境構築|firebaseとの連携も解説ReactNativeをExpoを使ってビルドや開発する方法などを掲載しています。firebaseとの連携や実際にビルドする方法なども掲載予定...

分かりやすく、画像を多めにして解説をしています。

おにちゃん
おにちゃん

環境構築自体は30分ほどで終わるはずです。

 

まとめ:ReactNativeの基礎入門

まとめ:ReactNativeの基礎入門

まとめ:ReactNativeの基礎入門

ここまでで【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説について解説してきました。

本記事のまとめ
  • ReactNativeとはアプリケーションを開発するためのフレームワーク
  • ReactNativeを活用するのであれば、Expoをおすすめします。
おにちゃん
おにちゃん

本記事は以上です。

 

読者におすすめの記事

【React入門】Reactとは?UI構築のためのJSライブラリ
【React入門】Reactとは?UI構築のためのJSライブラリReact入門|Reactでの開発環境、todoアプリ、chatbotアプリなどを開発できるコンテンツ|日々更新しています。...

 

 

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事