【初心者向け】スマホアプリ開発にReact Nativeをおすすめできる5つの理由

こんにちは。バスコダガマです。

スマホアプリ開発って全体のボリュームが大きくて、始める前に挫折することが結構あるんですよね。 面倒くさがりの私は数多くの課題にぶち当たりました。

  • AndroidとiOSで使用できるプログラミング言語が違う
  • 環境構築手順が多すぎる
  • コンパイルする時間がながい
  • 統合開発環境インストールするのに多くのストレージとメモリが必要(
    3~4GB)

と、まぁたくさん問題がありまして。。。この中の1番の課題はAndroidとiOSでプログラミング言語が異なるという点。これは学習コストに多くの時間かかります。そして時間を費やした結果、自作アプリを公開する頃にはモチベーションがダダ下がりってケースがあります。

これらの課題を解決してくれたのがReact Nativeという比較的新しいフレームワークです。本記事ではReact Nativeがどのようなメリットをもたらしてくれるのかを紹介します。


React Nativeについて


React Nativeとは?

Facebookがスマホアプリ(以下、モバイルアプリ)用に作った新しいフレームワークです。公式サイトで記載されるReact Nativeの5つのアピールポイントにはこう書かれています。

  • “Java Script”のみでモバイルアプリを作成できる
  • Reactと同じ設計方法で使用することができる
  • (Webアプリではなく)本当のモバイルアプリである
  • 再コンパイルによる時間の浪費はしない
  • ちゃんとネイティブのコードも使える

何を言っているんだ!!!って感じですよね。簡単に解説していきます。

“Java Script”のみでモバイルアプリを作成できる

JavaScriptとは、ウェブサービスのやりとりを円滑にするために使用されるプログラミング言語です。世界で人気がある言語の1つです。そのJavaScirptだけ覚えればAndroidもiOS アプリもだいたいつくれちゃうよってことです。

つまり、Java(Android)もSwift(iOS)も覚えなくてもアプリが作れちゃうんです!!

まぁでもJavaもSwiftも覚えたほうが絶対良いです。

なぜかは「ちゃんとネイティブのコードも使える」で説明します

Reactと同じ設計方法で使用することができる

そもそもReactって何?って感じですね。
ReactはJavaScriptのライブラリです。言い換えると「JavaScirpt上で使える便利な部品」といったところでしょうか。
目的はJavaScriptを用いた開発をより簡潔に、そして運用しやすくするために作成されました。Reactの実績としてはJavaScriptライブラリの中でも1位を獲得した程人気のライブラリです。

そのReactというライブラリや設計方針を使用してモバイルアプリを作成することができます。

(Webアプリではなく)本当のモバイルアプリである

アプリにはおおまかに分類すると2種類あります。それは「Webアプリ」と「ネイティブアプリ」です。PlaystoreやiTunesからダウンロードするアプリは後者のネイティブアプリとなります。
また、近年では「Webアプリ」と「ネイティブアプリ」を組み合わせて作ったハイブリットアプリというのもあります。

Webアプリ

Webアプリはブラウザ(SafariやChrome等)からインストーるせずに利用できるアプリです。
例えば、Googleマップが該当します。Googleマップはパソコンやスマホ上のブラウザから利用できます。 (スマホにインストールして使用するのはモバイル版でネイティブアプリになります。)

ネイティブアプリ

アプリ自体をスマホにインストールし、端末上のみで作動するアプリのことです。
例えば、パズドラやSnowが該当します。

インストールし、端末上のみで作動するアプリのことです。
例えば、パズドラやSnowが該当します。

ハイブリットアプリ


Webアプリの技術(HTML、CSS、JavaScript)で開発したネイティブアプリに限りなく近いアプリです。モバイルにインストールするWebアプリといったところでしょうか。ネイティブアプリ内にブラウザの機能を取り込んでいます。Webアプリでは実現不能な、OSに近い細かい操作ができます。
ネイティブアプリなら使える機能でも、ハイブリッドアプリでは使えないものがあります。これはハイブリットアプリがその機能に対応していないことが原因です

よってWebアプリやハイブリットアプリでは細かいスマホの操作ができません。カメラのシャッターを切ったり、電話帳の情報を取得したりなどです。カメラの撮影で出来なくはありませんがネイティブアプリのほうが優れたパフォーマンスを発揮します。(リアルタイム性など)

再コンパイルによる時間の浪費はしない

解説の前に専門用語を説明します。

プログラミング言語は全てにおいてソースコードを機械が読めるように翻訳する作業が必要となってきます。

コンパイルとは、その翻訳を最初に一括変換することです。その変換プログラムはコンパイラと呼ばれます。そしてコンパイラに対して、インタプリタという用語があります。

インタプリタとは、1行ずつプログラムを翻訳していくプログラムのことです。

JavaScriptはインタプリタ方式を採用しています。つまりコンパイルがありません。なのでコンパイルに要する時間はまるっとなくなります。大規模なプログラムだと数分間コンパイルのために待つ、という無駄な時間が発生します。

ちゃんとネイティブのコードも使える

React Nativeは最終的にはJavaScriptからネイティブのコードを呼び出します。つまりReact Nativeに用意されていないライブラリはネイティブのコードを使用して自作ライブラリをつくることができます。

「なんだよ、それなら最初からネイティブつかうよ」と思う方もいらっしゃると思います。それは正しいかもしれません。ただ、React Nativeではある程度の機能のライブラリは存在しています。何が存在しないかというとそれぞれのOSの最新のAPIです。 最近では、FaceIDの仕組み等の提供に時間がかかるということがある、ということです。

React Nativeはネイティブアプリ?ハイブリットアプリ?

どちらとも言い難いです。本家サイトでは「Objective-CやJavaを使って構築されたアプリと区別がつかない本当のモバイルアプリを構築する」とあります。
確かに実装方法は異なるが、パフォーマンス面でネイティブアプリとそん色ありません。

React Nativeを初心者にお勧めする5つの理由

開発環境を整えるのが楽で速い

ExpoとはReact Nativeアプリの開発を支援してくれるツールです。なんとWeb上でデバッグすることができます。しかもコンパイルは不要なのでインタラクティブに修正が反映されます。Web上にあるということでローカルに環境構築する必要はありません。環境構築手順はほぼありません。expoへのアカウント登録くらいでしょうか。Web版でシミュレーションしているため、所持しているパソコンのスペックもそれほど気にする必要もありません。こんな画期的な環境は他に聞いたことがありません。
ただ、Web版ですとどうしても通信するので遅かったり、使用できないライブラリもあったりします。そんな時はローカルにインストールするSDKも提供しているのでそちらを試してみましょう。

デバッグが速い

React Nativeでは変更した瞬間にシミュレーション結果を表示してくれます。これはめちゃくちゃ便利です。通常のネイティブアプリだとちょっとした変更でもコンパイルが必要になってきます。そのため、必ずコンパイルするのですが、一回のコンパイルで数分かかるケースもあります。これがReact Nativeだとありません。コードを適応にするのに数秒時間がかかりますが、無駄な待ち時間はかなり削減されます。

Web技術の知識も身につく

React NativeはもともとReactというJavaScriptのライブラリをもとに設計されています。さらにベースとなるReactはWeb開発用に設計されています。設計方針やプログラミング言語をWeb技術のものを使っているのでWebの知識としても吸収することができます。特にJavaScriptはいまやWeb業界では必須といっても過言ではないプログラミング言語です。やっているうちにHTMLやCSSの知識も身に付きます。どうせ1つのことを覚えるなら他にも生かせることを考えて学習するほうが効果的でしょう。

仮想DOMで速い


Reactの特徴として仮想DOMという技術があります。通常JavaScriptは画面を表示する際に表示内容に変更があったら、そのページごとまるっと読み込みなおします。しかし、仮想DOMの場合は変更した箇所を差分を検知し、そこだけの表示を変更・読み込みするという仕組みです。

プロトタイプとしてさくっとつくれる

開発効率が速いのとデバッグが速いということはつまりアプリ自体の開発スピードが向上します。プロトタイプなどお客さんの要望をいち早く適用して見せたいってなると大きなメリットになってきます。

まとめ

React Nativeのメリットについて紹介しました。初心者の方やWebもモバイルも開発を検討している方に特にお勧めできます。また、シミュレーション結果がネイティブアプリに比較して早く結果が出てくるのでサクサクして楽しいです。
メリットのみを並べてきましたが、実際はデメリットもいくつかあります。

例えば、現状のReact Nativeでは動作が安定していないです。バグの原因をソースコードを見ながら、issue確認しながら、Stack Overflowを確認しながら、と忍耐力と検索力が必要な場合もありますし、ドキュメントも英語が多いので英語力も鍛えられます。

また、細部までしっかりiOSとAndroidの表示や作りを分けて書きたい!って人は向いていません。基本的に共通化部分を楽して作ろうってフレームワークなので。

色々メリットやデメリットがあるので、とりあえず一度やってみて経験してみて頂ければと思います。

最後まで読んでいただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*