Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

React Nativeを初心者向けに徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20220131090004p:plain

おはようございます。Shotaです。

今回の記事では、React Nativeについて詳細に徹底解説します。

React Nativeとは

React Nativeは、Facebookが開発したAndroidiOS両対応のアプリ開発フレームワークです。(クロスプラットフォームとも呼ばれる)

React NativeはJavaScriptで開発されているので、JavaScriptを習得していればAndroidiOS両方に対応しているスマホアプリを開発できます。実績も豊富で、UberEatsなどの日本で有名なアプリはReact Nativeで開発されています。

React Nativeの特徴

React Nativeの特徴を簡単に紹介します。前述の通り、それはJavaScriptとReactでUIを簡単に開発できることです。

JavaScriptとReactによるWebアプリを開発する感覚で、スマホアプリを開発できます。そのため、Web開発者でも比較的簡単に導入しやすいツールになっています。

▼React NativeでHello World

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

// HTMLのようなマークアップでレイアウトの構造を定義する
const App = (props) => (
  <View style={styles.container}>
    <Text>Hello, React Native!</Text>
  </View>
);

export default App;

// CSSライクな指定でスタイルを定義する
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

画面を表示するのに必要なコードが短いもので済む場合、このように簡単にアプリを実装できます。

新しい言語を勉強しなくても、JavaScriptだけでアプリ開発ができるのがReact Nativeの最大の特徴だと言えますね。

React Nativeのメリット・デメリット

メリット

Webプログラマーでもスマホアプリを開発できる

React NativeはJavaScriptで開発されているので、SwiftやKotlinのようなネイティブアプリ(スマホアプリ)での開発経験がなくても簡単に開発できます。

そのため、JavaScriptをメインとするWebプログラマーでもスマホアプリを開発できるようになります。

実際の挙動を見ながら確認できる

React Nativeではアプリの動作をネイティブUIで描画します。

そのため、端末ごとの微妙な挙動の違いなども把握しながら開発を進められます。

デメリット

一部のプログラマーにとっては学習コストが高め

React NativeはJavaScriptで記述されるため、もともとSwiftやJavaなどの言語でネイティブアプリを開発していたプログラマーにとっては、学習コストがむしろ高くなってしまいます。

エラーの特定に時間がかかる

クロスプラットフォームを使ったアプリ開発では、エラーの特定に時間がかかることがあります。例えば、AndroidiOSどちらかにエラーが発生するケースが考えられます。

React Nativeの採用事例3選

Instagram

写真や動画投稿をメインとするSNSInstagram」は2016年からReact Nativeを導入し始めました。Instagramのプッシュ通知に活用されています。

Discord

プログラマーやゲーマー向けのボイスチャットアプリ「Discord」は、React Nativeがオープンソース化されるとともに採用を決めました。Discordの高い生産性の裏には、React Nativeを使ったソースコードの共有にあります。

Pinterest

Web上の画像を集めてブックマークできるWebサービスを提供するPinterestでも活用されています。React Nativeを活用することで、プラットフォーム間の不整合や余計なプロセスの数が減少しました。

まとめ

今回の記事では、React Nativeについて詳細に徹底解説しました。React Nativeを活用すると、JavaScriptスマホアプリを開発できるようになります。

今回の記事を参考に、React Nativeについて理解を深めていただければ幸いです。今回の記事はこれで終了です。

参考サイト

udemy.benesse.co.jp

macro-send.com