スナップマート株式会社の取締役CTO星直史です。
今年、2020年にReact Nativeの著書、『サンプルコードで作りながら学ぶReact Native実践入門』を出版しました。

本記事では、React Nativeを触ってみたいというWebエンジニアの方向けに、React Nativeの概要や知っておきたいポイントを説明します。ぜひ参考にしてみてください。

1. React Nativeとは

React NativeはFacebookが開発したJavaScriptのフレームワークです。名前の通り、Reactを利用して開発を行います。
React Nativeの最大の特徴はクロスプラットフォーム開発ができるということです。一つのソースコードから複数のアプリケーションを生成できます。iOSとAndroidが提供するネイティブコードをReactが内部的に操作をすることで、UI構築ができるのです。

また、Reactは基本的にJavaScriptのnpmパッケージの恩恵を受けられます。なのでこれまでWeb開発で用いていたReduxというステート管理のパッケージであったり、API通信をする際のredux-saga、ほかにもaxiosなど、一般的なOSSもそのまま流用することができるのがメリットです。

2. React Nativeとの出会い

私自身がReact Nativeと出会ったのは、2018年末頃でした。PIXTAの子会社であるスナップマートにリソースを割いてほしいということで、具体的にはiOS版しかなかったアプリのAndroidを開発することになりました。
当時、私にはWeb開発の知識しか無くスマホアプリ開発は全くの未経験でした。どうすればいいのかさっぱりわからない状態だったのですが、「星くんならできるよね」と言われてそのまま進めることになってしまったんです（笑）。しかも自分で「3ヶ月くらいあればできそうだ」と言ってしまっていました。

ところがスナップマート内には私以外のエンジニアが存在せず、アプリの仕様を知る人もいませんでした。なのでSwiftのコードを読めないなりに読み、一生懸命React Nativeにリプレースするという地獄のような日々を送っていましたね。（笑）。
実際、初めてReact Nativeに触れたときは「どうしたらいいのかわからない」という恐怖を強く感じていたのですが、ここで大きな助けになったのが開発支援ツールのExpoです。

Expoを使えばReact Nativeの開発は楽勝だ！というくらいに考えが180度変わりました。Expoについては後の項目で詳しくご説明します。こういった経緯もあり、大変ではありましたが無事3ヶ月でリプレースすることができました。

3. React Nativeの魅力

React Nativeの魅力について、初学者の方向けにご説明しますと、以下の3点が挙げられます。

(1)アプリ開発を高速化できる

一つのコードからiOS、Androidそれぞれのアプリをビルドできるということは、開発効率が非常に良いということです。開発スピードが速まるのはもちろん、省力化も可能です。

(2)Webの知識をそのまま流用できる

Reactを使うために必要なのは基本的にWebフロントエンドの知識なのですが、React Nativeにおいてもそれは同様です。Web知識があればスマホアプリ開発をスタートできるので敷居が低いですし、移行もスムーズに行えるでしょう。

(3)採用候補者の母集団が多い

これはPIXTAで採用活動をしていたときの実感ですが、Webエンジニアに比べるとiOSとAndroidアプリのエンジニアは転職市場において比較的母数が少ない傾向にあります。
ですが、React Nativeは前述のようにWebの技術をそのまま利用できますから、スマホアプリを開発したいと思ったときに採用で「Webエンジニアでも作れますよ」とお伝えすることができます。採用を見据える上でも、React Nativeという技術選定にはメリットがあると言えるでしょう。

4. React Nativeについてこれだけは知っておきたいポイント

(1)開発支援ツールExpoの有能さ

Expoは非常に優秀なReact Nativeの開発支援ツールで、React Nativeを語るなら外せない存在です。
画面引用：https://expo.io/learn

というのも、React Native単体でもアプリ開発はできますが、その場合非常に手間がかかる部分があるのです。例えば以下のようなものです。

1. 実機での動作確認
2. Push通知の実装
3. ビルド
4. OTAリリース

こういった内容がエンジニアの負担になってしまうのがReact Nativeの弱点なのですが、Expoはこれらを自動化あるいは簡易化してくれます。開発の痛みを全て吸収してくれるような存在ですね。

例えばビルドはコマンド一つで自動的に実行してくれますし、OTAリリースにしてもアプリがコードが更新されたかを自動的に識別し、変更があれば自動的に適用してくれるので、通常は1～2日ほどかかるストアの審査をスキップできます。iPhoneが自動的にソフトウェアをアップデートしてくれるのと同じようなイメージです。時間にすると30秒～1分程度でリリースが完了するので、不具合が起きた場合などもWebのリリースと同じ感覚で対応することができます。これはExpoを使う最大のメリットですね。

このように最初の環境構築の部分をExpoが担ってくれるので、開発者はコーディングだけに集中できます。また、アプリの知識が無くても難しい部分はほとんどExpoが実行してくれるということなので、初心者でも簡単にアプリを実装できるのです。

(2)React NativeのコーディングはほぼReact

Web開発に慣れ親しんでいるエンジニアからすると、スマホアプリが実際にどう開発されるのかがわからなくて不安だと思います。ですが、実際にReact Nativeに触ってみると90％はReactそのままです。JavaScriptまたはReactに精通している人であれば、最初はスマホアプリ特有の知識はほとんど必要無いでしょう。「読めないコードは出てこない」と言っても良いくらいわかりやすいものになっています。実際、Expoを用いて導入をしてみると、React Nativeだからといって取り立てて意識をせずとも、Hello,world!の画面が本当に一瞬でできます。

ちなみに、React Nativeはコンポーネントを部品のように組み合わせるだけでの開発を行うことができます。Webで使うReactの場合はHTMLのマークアップを自分でゴリゴリ書いていかなければいけないのですが、React Nativeの場合は例えばテキストボックスを表示するための部品、ボタンを表示するための部品、スクロールのリストを表示するための部品などを配置して、あとは状態が変更されたときや、ボタンを押したときのイベントを実装するだけで済みます。自分で一生懸命レイアウトを作り込む必要はありません。

(3)アプリならではの動きは多少学習する必要がある

React Nativeの90％はReactだと言いましたが、残りの10％はアプリならではの動きの部分です。Webと比較した場合の差分に当たりますね。ここは多少学習する必要があるでしょう。大きな要素はDeep LinkとPush通知です。

Deep Link

Webの場合、リンクは単純にボタンを押すと次のページに遷移する仕組みですが、アプリの場合はほかのアプリから自分のアプリに遷移する、あるいはその逆を行いたい場合のリンクの飛ばし方に特徴があります。具体的には、URIと画面を紐付けるためのルーティング設定や、自分のアプリにLinkingされた場合のイベントを検知する必要があります。

Push通知

Push通知はスマホならではの通知方法です。React Nativeの場合はデバイス固有のIDをExpoがスマホから取得し、サーバーで管理します。そのIDを元にサーバーからExpoを経由してPush通知を送ることになります。

(4)細かな動きは再現できないこともある

React Nativeにはできないことが多少あります。というのも、ネイティブの場合はSwiftからiOSを直接操作しますが、React Nativeの場合はiOSとReact Nativeの間にネイティブコードが中間層として存在するからです。

1. ネイティブの場合
   iOS ⇔ Swift
2. React Nativeの場合
   iOS ⇔ ネイティブコード⇔ React Native

このようにReact Nativeがネイティブコードを介してiOSを操作するということですね。なので例えばiOSから新しい機能が出た際、Swiftはサポートされ次第すぐに実装することができますが、React NativeはそこからさらにSwiftを操作できるようにしなければなりません。新機能発表から反映までに多少のタイムラグがあるのです。

また、ネイティブコードを完全に操作できるというわけでもありません。「②React NativeのコーディングはほぼReact」でも軽く触れたように、React Nativeはコンポーネントを組み合わせて簡単に開発ができる反面、隅々にまでこだわってUIを作り込むことができません。例えばSwiperやPickerなどですね。
Pickerというのは、例えばカレンダーなら日にちを、時計なら時刻を選択するようなUIコンポーネントです。これらを細かな部分までコントロールすることはできないのです。ほかにもInstagramにシェアをしたいという要件があった場合、普通ならボタンを押してそのままシェアできるようにしたいところですが、React Nativeはボタンを押すと直接Instagramには行かず、「どのSNSにシェアしますか」という画面が表示されます。ここも指定はできません。細かな要件がある場合に、React Nativeでは応じられないケースがあるということです。

思った動きを再現できない場合の手段はいくつかあります。

(1)OSSを使う
(2)自作する
(3)Swift/Kotlinで作る

(1)、(2)を試してどうしても再現できなければ、最終手段としてSwiftまたはKotlinで作ることもできます。

5. 書籍紹介

私の著書である『サンプルコードで作りながら学ぶReact Native実践入門』では、習うより慣れろの精神でReact Nativeがどういうものなのかを実際にコードに触れながら解説しています。対象読者はJavaScriptとReactでの開発経験があるが、スマホネイティブアプリ開発はしたことがないWebエンジニアの方です。GitHubでサンプルコードを全て公開しているので、途中でわからなくなり挫折する、ということはほぼ無いと思います。冒頭で今回ご紹介したExpoについても解説していますし、ほかにもReactを取り巻くミドルウェアのおさらいからストアへのリリース方法まで網羅していますから、初心者の方はぜひ参考にしてみてください。

6. 最後に

React Nativeと出会った背景でもお話しした通り、私自身はReactを少し触ったことがある程度というレベルでしたが、本番で運用できるレベルのスマホアプリを作り上げることができました。これは私の技術力が優れていたわけではなく、React NativeとExpoが非常に扱いやすく、コーディングに集中できる環境を作り上げてくれたからでした。

このように、Webエンジニアでもスマホアプリ開発ができる土壌はReact Nativeによってすでに整えられていると感じます。ですから潤沢に開発チームのメンバーを揃えられないマネージャーの方々にとっても、React Nativeは選択肢の一つに挙がるはずです。
また、Reactの知識を使ってスマホアプリ開発ができるという点を踏まえると、若手のエンジニアなど今後自分の技術領域を広げていきたい方にもReact Nativeはぜひオススメです。

＜プロフィール＞
スナップマート株式会社の取締役CTO星直史さん

1989年5月生まれ。新卒入社したSIerでC#, Javaを学んだ後にピクスタ株式会社に2012年に入社。写真素材・ストックフォト「PIXTA」の改善改修に従事。その後、開発リーダー、マネージャーを経て、2018年1月より開発部長に就任。2020年1月スナップマート株式会社 取締役CTO就任。
個人ブログはこちら、著書一覧はこちら

LINEでフリーランスの案件情報や最新Tipsを受け取る