はじめに
普段はReactを書いています。
React Nativeがアツいという情報を最近よく見るので、React Nativeの勉強をはじめてみました。この記事は、React Nativeに興味を持つReactエンジニアへ向けての参考になった記事の紹介になります。
誰かの参考になれば嬉しいです。
記事
From Web to Native with React
ReactエンジニアがReact Nativeで開発をするための情報がまとまった記事です。
- React NativeやExpoを選ぶ理由
- React Nativeの各要素がHTMLのどの要素に近い役割なのか
- 避けるべきよくある間違い
- ネイティブ固有の概念
などが書かれています。最初に一読すると良さそうです。
「array.mapを使わない」「Button要素は使わない」のような、Reactエンジニアなら使ってしまいそうなことが「避けるべきよくある間違い」として紹介されてます。
React Nativeスタイリングの手引き
Webでやってきた人がReact Nativeのスタイリングで躓かないようにするための記事です。「React Nativeでは初期値がdisplay:flexになっている」などcssでのスタイリングとの違いについて解説されています。
Using React DOM in Expo native apps
use dom についてです。use domを利用することでWebとモバイルアプリで同じコンポーネントを使うことができます。(WebViewを簡単に埋め込むことができる)
@Vaconbrixさんのツイート でDOM Components (use dom)のデモがあり、こちらを見ることでイメージできると思います。Dom要素のボタンに対してNativeの処理を当てはめることもできるそうです。
React Native — Hermes & Static Hermes (Bundle release & Hermes Bytecode)
JavaScriptエンジンであるHermesとStatic Hermesについてです。
Hermes は、 React Native 向けに最適化された JavaScript エンジンです。Hermes は、JavaScript を事前にバイトコードにコンパイルすることで、アプリの起動時間を短縮できます。
参考:Expo Docs | Use Hermes Engine
※google翻訳
古いバージョンではJavaScriptCoreなどのエンジンが使われていたそうです。Hermesが採用され、パフォーマンスが大きく向上しました。
Static Hermesは次世代のHermesで、まだ実験段階だそうです。
Static HermesはJavaScriptコードをネイティブコードにコンパイルするそうです。
ネイティブと遜色がないパフォーマンスになる可能性があるということだと思うので期待です。
HermesとStatic Hermesの主な違いは、Hermes は実行時、つまりアプリがデバイス上で実行を開始するときに JavaScript コードをバイトコードにコンパイルするのに対し、Static Hermes はビルド時、つまりコンピューター上でアプリを作成するときに JavaScript コードをネイティブ コードにコンパイルすることです。これにより、実行時に余分な作業を行う必要がないため、Static Hermes は Hermes よりも高速でサイズも小さくなります。
参考: React Native — Hermes & Static Hermes (Bundle release & Hermes Bytecode)
※google翻訳
T4Stack
React Natvie、Next.js、その他おすすめのライブラリがまとまった技術スタックの紹介です。NativeとWebで最高のパフォーマンスを実現するためのライブラリのコレクションみたいです。あまり調べていないのでですが、気になったので載せておきます。
Zenn
検索してすぐ出てくる記事ですが、最近の記事をいくつか載せておきます。
記事を読むことで↓のようなことが分かります。
- React Nativeを選ぶ理由
- 開発体験やパフォーマンスが改善されていること (昔の悪いイメージからの改善)
- React Nativeの妥協点
- OTAアップデートについて (webのような審査なしでのアップデート)
- 採用事例
- 将来的に実装されそうな機能 (React Server ComponentsやDom Componentsなど)
- 昔にReactNativeを使っていた人の昔と今での印象の違い
などなど
React Native事例
- メルカリ (US) (参考)
- Meta Questで動くInstagramやFacebook (参考)
- Amazon (Shopping, Photos, Kindleなど)
- Microsoftのオフィス系アプリ (Office, Outlook, Teamsなど)
参考: https://reactnative.dev/showcase
分かったこととか
- 昔はパフォーマンス懸念があったがだいぶ改善されている
- 今後ネイティブと遜色がないパフォーマンスになる可能性がある
- 海外ではReact Nativeが結構使われている (らしい)
- VRとかでも採用される将来性がある (Meta Questでの採用事例)
- アプリでもReact Server Componentsが使える将来性がある
- 今はExpoが強い (とりあえずExpoって感じ)
- Expo Goで簡単に動作確認することができる
- Expo標準で色々な機能がある (PageSheetのUIとか簡単に作れる)
おわりに
React Nativeの使い方というより、React Nativeを使う理由みたいなところの記事が多くなってしまいました。
Reactエンジニアが増えたことで、今後React Nativeも技術的に採用されやすくなるのかなと思っています。
これから当分はReact Nativeの勉強続けていこうかなと！
React Nativeを勉強しているReactエンジニアの方、一緒に頑張りましょ〜