はじめに
はじめまして、もしくはお久しぶりです。
リンクラフト株式会社で開発業務をしたり、他にもなんだか色々とやっております akaishi といいます。
この記事は LINCRAFT Advent Calendar 2024 の20日目の記事となります。
去年に引き続きどうでもいい情報ですが、自分はリンクラフトのバイオハザード部の部長も務めております。
相も変わらず部員は自分1人だけの状態なのはどういうことなのでしょうか！？
アドベントカレンダーを書くよりも部員勧誘した方が良いのではと思ったり。
そんなワケで皆さんもぜひぜひバイオやりましょう！！
React Native に触れるきっかけ
私の場合、アプリ開発となると Flutter にて開発を行うケースが多いのですが、今回初めて React Native で開発を経験しました。
Flutter との違いを感じつつ勉強になった部分が色々とあったのでこうして記事にまとめようと思い立った感じです。
React Native？
まずは React Native がどういったものなのか Wikipedia で確認してみましょう。
React Native（リアクト・ネイティヴ）は、Meta（旧Facebook）が作成したオープンソースのモバイルアプリケーションフレームワークである。開発者がネイティブプラットフォーム機能とともにReactを使用できるようにすることで、Android、iOS、Web、MacOS、およびUWPアプリケーションを開発するために使用される。
なるほど、React ベースで開発が可能なマルチプラットフォーム環境ということが分かりますね。
次は React Native 公式ページを見てみましょう。
React Native brings the best parts of developing with React to native development. It's a best-in-class JavaScript library for building user interfaces.
おぉ、最高の JS ライブラリらしいです。
公式が言っているのでこれはもう最高のライブラリですね！
メリット
- クロスプラットフォーム開発
- JavaScript/TypeScript での開発
- アプリ開発経験のないエンジニアでも JS/TS 経験があればアプリ開発が可能
- ホットリロード・ファストリフレッシュなどの開発体験
- Facebook/Meta が開発元で色々なアプリでの開発・採用実績あり
デメリット
- バージョンアップやメンテナンスが少し複雑
- ネイティブ知識が必要なケースもあったり
- ネイティブの最新機能が React Native で利用出来るまで時間がかかる可能性がある
実際のコードサンプル
実際にどんな感じなのかサンプルコードを見てみましょう。
こんな感じで React を実装するような感覚でアプリ開発が可能です。
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>React Native 開発だよ</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
これだけで画面に文字が表示出来ちゃいます、便利ですね！
以下のサイトでブラウザからコード実行・確認も出来ます。
React Native で web フロントエンド…？
では本題です！
React Native で web フロントエンドの開発も出来るとはどういうことでしょうか？
React Native は主に iOS/Android のスマホ開発がメインではないのでしょうか！？
そもそも web 開発なら React があるのでは！？！？
それ、 React で良いのでは？
そうなんです。
web フロントエンド"だけ"開発するのであれば React で問題ありません。
ただ、スマホアプリも開発しつつ web フロントエンドも開発したい~という貪欲な要望に応えるにはどうしたら良いでしょうか？
そう、その答えの一つが React Native で Web "も"開発しちゃう、ということです！
React Native for Web
React Native だけでは web フロントエンドの開発を行うことは出来ません。
React Native for Web というライブラリを導入することによって、React Native で web 開発も可能になります。
Meta 社のエンジニアである Nicolas Gallagher さんが個人プロジェクトとして公開しているライブラリになります。
（Meta 社公式ライブラリではないようです）
React Native で web フロントエンド開発を行う際の注意点
プラグイン使えない"かもしれない"問題
iOS/Android では使えるけど web は対応していない~といったケースがあります。
そういった場合は web も使えるものを採用するか、web だけ別のプラグインにするか、自作するか、などなど。
何かしらの対応を考える必要があります。
Firebase 系は React Native のプラグインでは web 環境が動かないため、web では通常の Firebase をインストールする必要があったり。
コード動かない"かもしれない"問題
ビルドは問題なく出来たけど、実際に実行すると上手く動かないケースもあったりします。
以下のコードはiOS/Androidで動かない可能性があります。
（timeZone 指定が iOS/Android では動かない？）
return new Date(date.toLocaleString('ja-JP', {
timeZone: 'Asia/Tokyo',
}))
そのため（当然ではありますが）iOS/Android/web の3環境でのチェックが必要になります。
Android で動いたから他の環境の動作確認は要らないかな~なんて考えはダメです！
必ず実機で全環境の確認をしましょう！！
結論
アプリ開発もしつつ web 開発も行える React Native、便利ですね！
ただし React Native で web 開発を行う際は以下の点に注意しましょう！！
- iOS/Android/web 開発をワンソースで管理できるので便利
- ただしワンソースで管理出来ないケースもある
- 環境毎にファイルを分けたりするなど色々対応は出来る
- ネイティブコード(Java・Kotlin、Objective-C・Swift)対応が必要なケースもある
- 環境毎に想定外の挙動になるかもしれないのでテストを細かく行う
手軽に iOS/Android/web 開発が行える React Native 開発です。
ですが銀の弾丸と言えるほどの環境ではないかなというのが使ってみた感想です。
でも実際便利であることは間違いありません！！
Expo
現状でも便利な React Native ですが、さらに効率的！？に開発を行う方法があります。
それが Expo です！
Expo は React Native を利用してモバイルアプリケーションを開発するためのプラットフォームです。
メリット
- ネイティブコードに触らなくていい、本当に触る必要無し
- 逆に Expo 環境だとネイティブコードに触れません
- Expo 側がハンドリングしてくれます
- クラウドビルドやデプロイ、配信等の環境が用意されていて便利
- EAS(Expo Application Services) が高機能で便利
- でも EAS 使用にはお金かかります
- OTA(Over The Air update)機能
- アプリ更新無しでコンテンツの更新なんかが出来ちゃいます
- iOS/Android アプリとしては非常に便利
- ただし大規模な改修等の場合は素直にアプリ更新する方が良かったり
- アプリ更新無しでコンテンツの更新なんかが出来ちゃいます
デメリット
- ネイティブコードに触れない
- どうしても触らなければならない場合は eject 機能を使う
- eject したら Expo 開発には戻れません
- 自前でネイティブ部分を管理する必要があります
- 最新の React Native 環境が使えない
- React Native も最新のネイティブ環境から遅れている
- Expo 環境はさらに古い環境の場合がありえる
Expo 採用基準！
今から React Native で開発を開始する場合、Expo 環境も視野に入れても良いと思います。
特にネイティブコードに触らなくて良い、というのは非常に魅力的なケースとなり得る可能性があるでしょう。
逆に必要に応じてネイティブ部分もカスタマイズしたい~といった場合は素の React Native を採用するのが良いのかなと思います。
ただ、Expo はいざとなったら eject して通常の React Native 開発にすることも可能なので、とりあえず Expo で開発を開始しつつ、必要に応じて eject する（かも）、といった開発体制でも良さそうですね！
最後に：Flutter との比較
- iOS/Android に加えて web も開発するとなると React Native の方が良い
- やはり Flutter の web はまだまだ微妙
- UI 実装に関しては Flutter の方が良いと感じる
- 自分が C 言語から開発スタートしてるマンなので JS/TS よりも dart の方が好み
- あと単純に JS/TS での UI 実装に馴染みがないといった背景もあります
- Flutter、React Native どちらを採用するかは開発メンバーのスキルや開発要件に合っている方を採用する
- 開発メンバーが慣れている、開発要件も満たせるので Flutter を採用
- iOS/Android/web 開発が必須な場合は React Native を採用
- 条件によっては Flutter、React Native 以外の選択肢も考慮する
Flutter、React Native どちらもメリット・デメリットがあるので要件に応じて採用するのが良いと思います！
ただ現在の IT 市場では React Native 出来るエンジニアよりも Flutter が出来るエンジニアの方が増えているとかなんとかって話を聞きました…
人材採用という面では Flutter の方が良かったりするのかも知れませんね！！
（2024/12月現在では）
一緒に働く仲間を募集中です！
リンクラフト株式会社では、組織拡大に伴い積極的な採用活動を行っています。
少しでも興味がある方はぜひご連絡ください。
▽会社ホームページ
https://lincraft.co.jp/
▽Instagram
https://www.instagram.com/lincraft.inc/
▽ご応募はこちらより
https://lincraft.co.jp/recruit
※カジュアル面談も受付中です。ご希望の方はHPのお問い合わせフォームよりご連絡ください。