大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

ReactNative

プログラミング プログラミング-React

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

PoCでReactNativeを扱うことになりました。

初めて扱うので、色々と調べてブログにすることにします。

レベルは高くありませんが、興味がある方はぜひ読んでいただければなと思います。

ReactNative

一言で言うと？

Facebookが中心になって開発しているモバイルアプリケーションフレームワークです。つまりモバイルアプリを開発できるフレームワークですね(←そのまま)

クロスプラットフォームアプリ開発フレームワーク

具体的に書いていきます。

ReactNativeは名前の通りReactライクにネイティブアプリをクロスプラットフォームで開発することができます。

クロスプラットフォームはiOSとAndroidどちらでも動くことを意味し、ほぼ同じコードでiOSとAndroidどちらでも動くネイティブアプリを開発することができます。

余談ですが、自分はIonicで個人アプリ開発をしています。IonicはAngularライクでWebアプリの開発ができ、さらにそのコードはそのままネイティブアプリやPWAにも対応させることができます。

一方で、ReactNativeはネイティブアプリのみを開発します(ReactNative for Webを使えばWebアプリの開発も可能です)。最初ReactNativeの話を聞いた時に、私はIonicと同じだと勘違いしてしまいましたので要注意です(自分だけか←)

WebViewを使用せずに、各OSのネイティブをラップしたComponent・APIを使ってコードを書いているので、Webアプリを開発しているような感覚で、よりネイティブ感のあるアプリを作成することができます。

プログラミング言語・CLI

【プログラミング言語】

ReactNativeは、Reactの思想「Learn once, Write anywhere(一度学んだら、どこでも書ける)」を少なからず受け継いでいるようです。Reactでネイティブアプリを書けるようにしているので、JavaScriptやTypeScriptでも書くことができます。

【CLI】

  • Expo
  • React-Native
  • React-Native-CLI(非推奨)

Expoは開発環境を容易にし、開発の支援をしてくれるサービスです。初心者向けのCLIのようです。

React-Native-CLIは最近非推奨になり、組み込みのReact-Nativeを使用することが推奨されています。こちらは本格版のCLIのようで、玄人向けもしくはよりネイティブ寄りにアプリを開発したい場合などで使用するのが良いかと思います。
Setting up the development environment · React Native

採用実績

メリット

  • Webエンジニアには学習コストが低い
  • ライブロードやホットローディングがある
  • コードシェアリングでネイティブアプリ開発ができる
  • アプリアップデートが審査なしでできる

本格的なネイティブアプリを求められない場合において、開発スピードがとても速くなるのが特徴かなと思います。

また、ReactやWebの思想でWeb開発をしているエンジニアは、ReactNativeへの参入障壁は低いです。

デメリット

  • ネイティブエンジニアには学習コストが高い
  • エラー箇所が分かりにくい
  • ReactNativeのアップデート対応が大変

やはりネイティブ感はJaveやSwiftには劣るのかなと思います。

また、これはIonicでアプリ開発をしていた時に感じたことですが、Webとネイティブでは思想が違うので、その考え方の切り替えや、Webと共通のコードでネイティブを開発するとエラーやデザインの崩れが出て大変でした。ReactNativeも同じようなことが起きると思います。

UIコンポーネント

NativeBase | Essential cross-platform UI components for React Native
React Navigation | React Navigation
React Native Paper
React Native Elements | React Native Elements


今後に向けて

あくまでも個人的な考えですが、フレームワークやプログラミング言語などを選ぶ際の基準の一つにその技術を開発・サポートしている会社があります。ネイティブアプリだとGoogleとAppleが開発に関わっている技術を選択するようにしています。

今回はその基準から外れたフレームワークに触れる機会に恵まれましたので、存分に活かして知見を広げていきたいと思っています。

...Pythonも調べないとなぁ

参考

素晴らしい記事に感謝致します。
「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査 - ログミーTech
【入門編】React Nativeとは？メリット・デメリット…｜Udemy メディア
React Native - Wikipedia
Expo
react-native-cliパッケージが非推奨になっていました
Setting up the development environment · React Native