React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを？」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で
今、React Nativeがアツいらしい
なんだか最近React Nativeに関する投稿が増えている気がしますね。 筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。 React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半： React Nativeがいかに盛り上がってい
再訪 React Native
最近React Nativeを使ってアプリを作る機会があり、React Nativeの進化に驚いたのでシェアします。 筆者のReact Native歴 元々はAndroidとiOSでそれぞれネイティブアプリを作っていました。 2017~2019年くらいに仕事と趣味の両方でReact Nativeを使っていました。 2019年くらいからFlutterを使ってアプリ開発をするようになり、それ以降はFlutter or ネイティブ開発のみで、React Nativeは使わなくなりました。 当時(~2019)のReact Nativeの印象 5年以上前なので朧げな部分もあります。 一つのソースコードでAndroidとiOSのアプリがどちらも作れて便利 パフォーマンスはネイティブほどではないが、ほとんどの画面で別に気にならない。アニメーションを大量に入れようとすると明らかにカクツク。 当時はパフォー
React NativeとExpo RouterのRSC導入に向けたアップデートが来そう - laiso
Expo Routerとは Expo Routerは、React NativeおよびWebアプリケーション用に設計されたファイルベースのルーティングライブラリ。 docs.expo.dev RSCを活用してサーバー側でコンポーネントレンダリングとストリーミングを行う新しいSDUIの構想 "Fetch Once, Render Everywhere: React Server Components in Expo Router"はReact Summit 2024におけるExpo作者のひとりEvan Baconによる講演。 gitnation.com ここでExpoを使った新しいSDUIの構想が発表され、Reactネイティブアプリにおけるサーバー側のコンポーネントレンダリングとストリーミングが提案されてXのタイムラインが盛り上がっていた。 今クライアントがWeb APIで取得して画面に適用し
はじめに State of React Native 2024 が公開されました🎉 2024年12月9日〜2025年1月8日の約1か月間にわたり、3,501人の開発者の声が集まりました。このレポートを読み最新のトレンド、技術的な進化、そして今後の展望を独断と偏見も含めてまとめてみました。 アプリ開発の選択肢として 「React Native、アリかも？」 と思ってもらえたら嬉しいです🙇♂️ 個人的熱々ポイント🔥 Expoの世界観 最も大きな変化の一つが Expo の台頭です。Expoは、React Native開発を簡単にするためのツールセットで、現在では約8割の開発者がExpo CLIを利用しています。 さらに、React Native公式も 「Expoなどのフレームワーク利用が新規プロジェクトの推奨手法」 と明言するまでになりました。 Expoが提供する EAS（Expo Ap
React Nativeはどう進化しているのか
React Native Advent Calendar 2024 の 11日目の記事です。 はじめに 本記事では、React Nativeのバージョンアップの流れについて、2022年6月にアナウンスされた v0.69（React 18サポートとHermesのバンドルが導入されたバージョン）から、現行（2024年12月現在）の最新バージョン v0.76 までの主な変更点をまとめています。 特に、React Nativeの進化の中心となっている 「New Architecture」 や 「Hermes」 に焦点を当てて解説しています。 これらの技術に興味がある方や、React Nativeの最新情報を知りたい方にとって参考になる内容を目指しました。少しでも参考になればと思います 🙏 前提 バージョンアップの軌跡を辿る前に、アップデートの軸となる要素を簡単に解説します。 React と Re
Five years of React Native at Shopify (2025) - Shopify
Five years ago, we announced that React Native (RN) is the future of mobile at Shopify. Today, we are excited to share the progress we've made, lessons learned, and what the future holds. To recap, we decided to switch to RN for 3 main reasons: Write it once - Stop building the same features twice, once on iOS and once on Android Talent portability - Enable devs to work fluently across iOS, Androi
React Native 0.76 with the New Architecture by default is now available on npm! In the 0.76 release blog post, we shared a list of significant changes included in this version. In this post, we provide an overview of the New Architecture and how it shapes the future of React Native. The New Architecture adds full support for modern React features, including Suspense, Transitions, automatic batchin
この記事はReact Native 全部俺 Advent Calendar 14日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。 10分で読めるReact Nativeの全公式コンポーネントまとめ React Nativeには意外と少ない数の公式コンポーネントしかありません。その分1つ1つのコンポーネントがよく考えられていて、必要十分な機能を持っています。今回は各コンポーネントの機能と使い方について詳しく解説していきます。 Core Components View 最も基本的なUIコンポーネントで、iOSのUIView、Androidのandroid.view.View、そしてWeb
Expoに関する詳しい内容は2日目の記事で紹介します。 仕組み React NativeはReactのコンポーネントをネイティブのプラットフォームコンポーネントにブリッジします。例えば以下のようなReactコードは import { View, Text } from 'react-native'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { f
10月24日、React Nativeチームは、バージョン0.76をリリースした。 本バージョンではアーキテクチャが刷新されており、React Nativeの今後にとって重要なアップデートとなっている。 新しいアーキテクチャの主な改善点 今回のアップデートでは、以下の4つの重要な要素が導入されている。 新しいネイティブモジュールシステム JavaScriptとネイティブ層が直接通信できる「JSI（JavaScript Interface）」を利用することで、ブリッジを介さずに同期的な関数呼び出しが可能となった。この変更により、ネイティブモジュールとのやり取りがより効率的かつ高速になった。 const value = nativeModule.getValue(); nativeModule.doSomething(value); 旧アーキテクチャでは、ネイティブ関数の呼び出しに非同期のコー
【2025年最新比較】Flutter vs React Native どっちを選ぶ？クロスプラットフォーム開発フレームワーク完全解説 - コハム
Comparing Cross-Platform Frameworks: Flutter vs. React Native in 2025 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 1. はじめに 2025年のモバイルアプリ開発において、クロスプラットフォームフレームワークは、スタートアップから大企業まで、技術スタックの中で確固たる地位を確立しています。最大手のFlutterとReact Nativeは、マルチプラットフォーム開発戦略に関する議論を引き続きリードしています。 このブログでは、パフォーマンス、UI/UX機能、コミュニティサポート、企業での採用状況など、モバイルおよびWebアプリプロジェクト向けのクロスプラットフォームフレームワークを選択する際に重要な要素を検討し、FlutterとReact Nativeを比較します。
CocoaPodsのアナウンスを受けて、React Nativeが今後どうなるのか不安な方がいそうだなーと思ったので、僕が調べた範囲でこんな状況かなと思っていることを書いてみます。原典は貼っておくので、基本的には僕のことは信じずに元記事を読んでください。 CocoaPodsのメンテナンスモード 古くからのiOS/macOS開発者にとっては馴染み深いパッケージマネージャーであるCocoaPodsですが、この度、開発体制がメンテナンスモードに入ることが発表されました。 これは急な話ではなく、2017年に公式のパッケージマネージャーツールであるSwift Package Managerが登場してから、いつか来る未来として予想されていたことです。ここ数年、Swiftで新規のiOS/macOSアプリケーションを開発する際には、Swift Package Managerを初めから採用していた現場も多く
こんにちは！モニクルのエンジニアの久慈です。 先日、モニクルの開発合宿にてReact Nativeを用いてアプリ開発する機会に恵まれたので、振り返りも兼ねてブログを書いています。 きっかけは？ モニクルでは2023年度から開発合宿を行なっています。(2023年度の開発合宿の詳細はこちら) 合宿で何をするかを計画する段階では、今年度の開発合宿では昨年同様、まずは開発部のメンバーが開発合宿で取り組みたいアイデアをブレストする形で始まりました。ちなみにブレストはfigjamで行いました。 そのブレストの最中に一つ「これをやってみたい！」と私に刺さるアイデアがありました。 それは同僚のなかざんさんの「React Nativeを使ってアプリ開発をしてみよう！」というものでした。私は早速このアイデアに賛同して、チームメンバーになる流れになりました。 実際のfigjam上でのブレストの様子 React
Introducing EAS Hosting: the first ever end-to-end deployment solution for universal app development.
モバイルアプリを React Native から Compose Multiplatform へ移行するよ
こんにちは！アルダグラムでエンジニアをしている渡邊です。 弊社では KANNA というサービスを提供しており、モバイルアプリは React Native で作られています。 そのモバイルアプリにおいて、現在 Kotlin Multiplatform と Compose Multiplatform を使って React Native をやめるように移行対応を進めています。 この記事では移行に至った経緯と、現在の状況について紹介します。 KANNA のモバイルアプリの歴史 弊社の KANNA のモバイルアプリは2019年頃に開発がスタートしました。私は当初はまだ参画していなかったのですが、当時の開発メンバーは WEB 開発を得意とするメンバーが多かったようです。また開発者4名で Web、iOS、Android 版を4ヶ月で0から開発する必要があり、開発スピードも重要でしたので、1つのコードで
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に - イノベトピア
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に Last Updated on 2025-06-09 07:57 by admin 2025年6月6日午後9時33分（GMT）、サイバーセキュリティ企業Aikido Securityが、npmとPyPIエコシステムを標的とした大規模なサプライチェーン攻撃を発見した。 攻撃者はGlueStackに関連する17個のReact Nativeパッケージを侵害し、合計で週間約100万回のダウンロード数を記録するこれらのパッケージにマルウェアを注入した。 影響を受けたパッケージには@gluestack-ui/utilsや@react-native-aria/focusなど17個が含まれ、lib/commonjs/index.jsファイルの変更を通じてリモートアクセストロイの木
この記事はReact Native 全部俺 Advent Calendar 6日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。 今日からReact Nativeを始めたい人のための速習React (後編) 前編では、Reactの基本的な概念とコンポーネントの書き方について解説しました。この後編では、React Hooksについて詳しく説明します。 React Hooksとは？ React Hooksは、関数コンポーネントで状態管理や副作用を扱うための機能です。全てのHooksは use から始まる命名規則を持っています。 なぜHooksが必要か？ 関数コンポーネントには以下のような特
ここで気になったのは追加ツールの選択欄！ ESLintとPrettier以外にBiomeがありました、新しい感じする🆕 2. Lynx Explorerの準備 お使いのデバイスに合わせてアプリをダウンロード&解凍！ LynxExplorer-arm64.app XCodeのインストールを行う！ その中にあるSimulatorを使用するため 画面等は後述します！ 3. Lynxプロジェクトの起動 すると、こんな感じでターミナルに出力されます！ 4. iOSシミュレーター(XCode)で確認 Spotlightで「Simulator」を検索し起動 XCode起動 > メニューバーの「Xcode」 > 「Open Developer Tool」からも起動可能 2でダウンロード・解凍した「LynxExplorer-arm64.app」をドラッグ&ドロップ これでインストールできるんだ💡 Lyn
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ubieが2024年にReact Nativeを選ぶ理由
わかりみが深い！State of React Native 2024 から読み解くアプリ開発
New Architecture is here · React Native
10分で読めるReact Nativeの全公式コンポーネントまとめ
React Nativeとはなにか。採用のメリットとデメリット
React Nativeがアーキテクチャを刷新 — React 18の機能を全て備え、大幅なパフォーマンスアップを実現
React NativeのSwift Package Manager対応の展望
【Reactエンジニアの挑戦】React Nativeでアプリ作ってみた！
React Native Hosting with EAS: Deploy your server-driven Expo apps to the cloud
今日からReact Nativeを始めたい人のための速習React(後編)
React Nativeに変わる新勢力？噂の「Lynx」を試してみた - Qiita