「サンプルコードで作りながら学ぶReact Native実践入門」の著者が語る!React Nativeの魅力とこれだけは知っておきたいポイント!

スナップマート株式会社の取締役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点が挙げられます。

①アプリ開発を高速化できる

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

②Webの知識をそのまま流用できる

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

③採用候補者の母集団が多い

これはPIXTAで採用活動をしていたときの実感ですが、Webエンジニアに比べるとiOSとAndroidアプリのエンジニアは転職市場において比較的母数が少ない傾向にあります。

ですが、React Nativeは前述のようにWebの技術をそのまま利用できますから、スマホアプリを開発したいと思ったときに採用で「Webエンジニアでも作れますよ」とお伝えすることができます。採用を見据える上でも、React Nativeという技術選定にはメリットがあると言えるでしょう。

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

①開発支援ツールExpoの有能さ

Expoは非常に優秀なReact Nativeの開発支援ツールで、React Nativeを語るなら外せない存在です。

React Native
画面引用:https://expo.io/learn

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

・実機での動作確認
・Push通知の実装
・ビルド
・OTAリリース

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

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

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

②React NativeのコーディングはほぼReact

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

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

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

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

Deep Link

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

Push通知

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

④細かな動きは再現できないこともある

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

●ネイティブの場合
iOS ⇔ Swift

●React Nativeの場合
iOS ⇔ ネイティブコード⇔ React Native

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

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

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

①OSSを使う
②自作する
③Swift/Kotlinで作る

①、②を試してどうしても再現できなければ、最終手段として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就任。 個人ブログはこちら、著書一覧はこちら

この記事を書いた人
FLEXY編集部
FLEXY編集部
ハイスキルIT人材への案件紹介サービス
FLEXYメディアは、テックメディアとしてテクノロジーの推進に役立つコンテンツを提供しています。FLEXYメディアを運営するのは、ITに関連するプロシェアリングサービスを提供するFLEXY。経営課題をITで解決するためのCTOや技術顧問のご紹介、ハイスペックエンジニアやクリエイターと企業をマッチングしています。【FLEXYのサービス詳細】求人を募集している法人様向け/お仕事をしたいご登録希望の個人様向け

週1日~/リモートの案件に興味はありませんか?

週1日~/リモートの関わり方で、「開発案件」や「企業のIT化や設計のアドバザリーなどの技術顧問案件」を受けてみませんか?副業をしたい、独立して個人で仕事を受けたエンジニア・デザイナー・PM・技術顧問の皆様のお仕事探し支援サービスがあります。

FLEXYでご案内できる業務委託案件

業務委託契約・開発案件(JavaScriptメイン)

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 2-3日/週
報酬 4万円/日
必要スキル JavaScript・React
勤務地 東京都内/リモート含む
リモート

外部CTO、技術顧問

テーマ 技術アドバイザリーとして知見と経験を生かす
勤務日数 1日/週
報酬 10万円/日
必要スキル エンジニア組織立ち上げや統括のご経験、コードレビュー経験、技術的なアドバイスが出来る方
勤務地 東京
リモート 相談可

業務委託契約・インフラエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 2-3日/週
報酬 5万円/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート 相談可

業務委託・フロントエンドエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 週1日〜
報酬 5万/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート リモートと常駐のMIXなど

人材紹介のCTO案件(非公開求人)

テーマ CTO、技術顧問案件はFLEXYに登録後、案件をコンサルタントからご紹介します
勤務日数 業務委託から人材紹介への移行
報酬 年収800万以上
必要スキル CTOとして活躍可能な方、エンジニア組織のマネージメント経験
勤務地 東京
リモート 最初は業務委託契約で週3日などご要望に合わせます

業務委託契約・サーバサイドエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 週2-3日
報酬 案件により異なります
必要スキル 案件により異なります
勤務地 東京都内
リモート 相談可能
個人登録

お仕事をお探しの方(無料登録)
法人の方(IT課題の相談)