おにちゃん塾の商品一覧

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

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説
URLをコピーする
URLをコピーしました!

本記事は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について学んでみてください。


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を活用していきます。

  • ReactNative CLI
  • ReactNative Expo
おにちゃん

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


ReactNativeをExpoで導入する場合

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

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

おにちゃん

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


まとめ:ReactNativeの基礎入門

まとめ:ReactNativeの基礎入門
まとめ:ReactNativeの基礎入門

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

本記事のまとめ
  • まとめ:ReactNativeの基礎入門
  • ReactNativeを活用するのであれば、Expoをおすすめします。
おにちゃん

本記事は以上です。

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる