1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店向け予約グルメアプリで、現在はiOS / Android / ウェブにサービスを展開しています。 元々はReact Native製のネイティブアプリのみ展開していましたが、ユーザ獲得の面でウェブ版が必要となったため、 追加でウェブ版を実装し、現在の3プラットフォームでの展開に至ります。 最初の技術選定 ウェブ版の最初のバージョンでは、フレームワークとしてNext.jsを採用しました。Reactで書け、SEOのた
React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
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がいかに盛り上がってい
Tamagui
A style library for React and React Native with a large typed superset of the React Native style API, with no outside dependencies in ~24KB. An optimizer that makes Core faster via partial analysis, CSS extraction, tree flattening, and dead code elimination. Next, Webpack, Vite, Babel, Metro.
Claude Code時代のアプリ開発手法
Claude Codeによる開発体験の変化 みなさんClaude Code使っていますか？ Clineやそのフォーク、Cursorなどが群雄割拠していたところからここ1ヶ月くらいで急激に話題の中心に躍り出たClaude Codeですが、便利なツールという評価を超えて、これまでの開発フローを一新しうる可能性を持ったツールだと思います。 特に、与えられたタスクを分解して様々なツールを使いながら順に機能を実装していく様子は経験を積んだエンジニアのやり方そのものです。 CLIベースのツールであることの利点として動かすコンピューターを選ばないので、公式のGitHub Actions連携をすれば手元に開発環境がなくてもIssueやPull Requestのチャットで会話をしながら開発を進めることまでできてしまいます。 Claude Codeとアプリ開発の相性 そうはいっても、Claude Codeをう
React Nativeでアプリを作るときは、bluesky-social/social-appを参考にしよう！
こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！ なぜbluesky-social/social-appを参考にするのか 多くのユーザーがいるサービスで、継続的に開発されている 実際に多くのユーザーがWebやアプリで利用しているサービスであり、それがOSSで公開されているのは凄いですよね。 ストアやWebで公開されているアプリケーションなので、実際にアプリをインストールして触りながら、この部分のコードはどうなっているんだろう？と確認することもできるのもキャッチアップしやすい点かと思います。 技術スタックがモダンな作りになっている Expoを利用しており、Webに関し
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
React Nativeで作ったスマホアプリにAdmob（広告）とRevenue Cat（課金）を使ってマネタイズする
【2025年7月31日改訂】React Nativeを使ってアプリを作った際、マネタイズの方法としてよく検討される「広告収益」と「課金」について、AdmobとRevenueCatを使った実装や設定方法を解説します。※ExpoのManaged Workflowでも課金処理が実装できるようになりました。expo dev clientの設定などが必要ですが、この本では解説しませんのでご注意ください。なお、サンプルアプリはManaged Workflowで実装しております。
Amazon Kindle UI is switching from Java to React Native - Good e-Reader
Amazon has been employing Java for their entire UI for the Kindle since they started making them in 2007. In the past year, the company has been dramatically changing the home screen and user interface. Many people are upset about the changes, since it effects their reading flow. Do you know the real reason why they have constantly been changing all aspects of the Kindle? This is because they are
With the release of 0.71, React Native is investing in the TypeScript experience with the following changes: New app template is TypeScript by default TypeScript declarations shipped with React Native React Native documentation is TypeScript First In this post we’ll cover what these changes mean for you as a TypeScript or Flow user. New App Template is TypeScript By Default Starting with 0.71, wh
Hyperledger Fabricの成長、成熟を振り返る / Looking back history of Hyperledger Fabric
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
React Native Matsuri 2021 で登壇した資料です https://reactnative-matsuri.com/ja
はじめに はじめまして、株式会社ハローで業務委託として開発をしている@0906kokiです。 今回の記事では、React Nativeで開発されているRespo by AutoReserveで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するRespo by AutoReserveは、React Nativeで開発されております。 今回、RespoにE2Eを導入した目的に関しては、以下のような点が挙げられます。 手動テストの場合、テストをスキップ or 見逃していたケースがあったので、毎回網羅的にテストできるようにし、QAの質を上げたい 頻繁に本番デプロイできるようにする コミットごとにテストできるようにすることで、QAを待たず事前にデグレを検知できる (今後) ライブラリのアップデートなど、全てのテス
はじめに さて、今年も夏がやってきましたね。みなさん、夏休みの過ごし方はもう決まりましたか？ 私は「今年こそ積んでた技術書を消化するぞ」とひそかに誓っているのですが、どうせ気づいたらYouTubeで虎とライオンが喧嘩する動画を3時間見ている——そんな未来がうっすら見えています。 そんなどうでもいい余談は置いといて、普段ReactでWebフロントを書いているみなさん、App StoreやGoogle Playからアプリをダウンロードするたびに「これ、もしかしてReact Native（以降、RN）でサクッと作れるのでは？」と思ったことはありませんか？そう、Reactを書ける人は全員、心のどこかでモバイルアプリを書きたくてしょうがないはずです（暴論）。 でも同時に、RN界隈で聞くこんな評判に、足を止めてきた人もいるはずです。 RN自体が遅い。作ったアプリが使い物にならない。 RN本体のバージョ
GitHub - Shopify/react-native-skia: High-performance React Native Graphics using Skia
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Expo の仕組みと使い方をメモしていく記事
これは iOS アプリを開発しながら Expo について調べたことを自分用にまとめておく記事です。 Expo とは Expo はクロスプラットフォーム（iOS/Android/Web）で React Native アプリを開発するための便利機能を集めたプラットフォーム。 素の React Native プロジェクトと比較して若干の制約があるが、 Expo SDK が提供する様々な機能を使えたり開発環境の整備が簡単というメリットがある。Expo は Expo SDK, Expo CLI, Expo Go, EAS と呼ばれる4種類のツールで構成されている。 Expo SDK Expo でアプリを作るために必要なあれこれを集めたパッケージ。 開発に使われているリポジトリは主に以下のディレクトリで構成されている。 packages: Expo の API を提供するためのソースコード（ネイティブ
はじめに 今回の記事では、モバイルアプリ開発として有名なフレームワークである「Flutter」と「React Native」両方の特徴、決定的な違いを徹底解説する。 2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。 両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。 本記事の対象読者 モバイルアプリ開発で生計を立てているプログラマー Flutter、React Native両者の特徴を知りたい人 モバイルアプリ開発案件を検討中で技術選定をされている人 本記事のタイトルが気
Today we’re releasing React Native v0.66 for Android 12 and iOS 15 support alongside fixes and general updates. Highlights Handle taps on views outside parent bounds on Android New Bluetooth Permissions on Android Better Support for Apple Silicon, Xcode 13, and iOS 15 Hermes 0.9.0 Nightly and “Commitly” Releases Handle taps on child views outside parent boundaries on Android Thanks to @hsource f
Enter description here
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
Fast & Performant React Native List No more blank cells Swap from FlatList in seconds. Get instant performance. Similar props. Instant performance. Even with the similar props as the React Native FlatList, FlashList recycles components under the hood to maximize performance. <FlashList renderItem={({ item }) => { return <TweetCell item={item} />; }} data={tweets} />;
Nativewind
The utility-first workflow you love from Tailwind CSS in your React Native applications. Enjoy consistent styling across platforms with the same intuitive classes.
gluestack: React & React Native UI components library for Web & Mobile App
React & React Native UI Components & PatternsComprehensive React and React Native component library for building modern, high-performance web and mobile apps. Copy-paste UI components library & patterns crafted with Tailwind CSS (NativeWind)
Flutter and React Native are two leading tools for cross platform app development that cut development time for iOS and Android devices. Learn about their differences and the best use cases for each. What Is Flutter?Flutter is an open-source user interface (UI) software development kit released by Google in 2018. Flutter lets you build cross-platform applications for a number of platforms and oper
Bug report I added 2 images (1920px width each) to a note. On desktop everything is fine but it does not load on… このアプリが画像を読み込めないのは、クライアントでのデータの暗号化/復号化が遅すぎるからで、つまりバイナリデータを扱うのにJSベースのライブラリに頼るのは良くないということです。そこで、それらの作業をネイティブ言語で実装することになりました。 NULL 文字問題React Nativeでは、プラットフォーム固有のAPIを使用したり、Objective-C、Swift、Java、Kotlin、C++の既存のライブラリを再利用したりできるように、ネイティブモジュールを作ることができます。ネイティブコードであっても、この厄介な問題のために、バイナリデータを扱うのはそれほど
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
概要 react-native-firebaseを組み込んだアプリでプッシュ通知を行う際の作業メモ。 具体的なソース実装よりは、権限設定などの事務的な内容多め。 前提として、react-native-firebaseと関連モジュール(/coreとか/messagingとか)はインストール済み(+pod installやAppDelegate.mの追記)で、GoogleService-Info.plistやgoogle-service.jsonはネイティブディレクトリに組み込み済みとする。 ※要するにreact-native-firebaseのイントロダクションは終わっている前提 【iOS】Apple Developersでやること 【Certificates, Identifiers & Profiles】から【Identifiers】のメニューを選択し、対象のアプリのIdentifier
2025React Native 0.81 - Android 16 support, faster iOS builds, and moreReact Native 0.80 - React 19.1, JS API Changes, Freezing Legacy Arch and much moreMoving Towards a Stable JavaScript API (New Changes in 0.80)React Native 0.79 - Faster tooling and much moreReact Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16K
React Native has been very successful at raising the bar for mobile development, both at Facebook and elsewhere in the industry. As we interact with computers in new ways and as new devices are invented, we want React Native to be there for everyone. Although React Native was originally created to build mobile apps, we believe that focusing on many platforms and building to each platform’s strengt
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
Appium初心者が、ReactNativeアプリを自動テストする試みの一部始終(随時更新) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事の目的 弊社 (リプレックス株式会社) の関わっているプロダクトで、ReactNativeを使って作ったアプリがあるのですが、保守工数の削減のためにE2Eテストの自動化にチャレンジしてみることにしました。その際の技術選定の経緯なども含め、メモとして残すために書いています。 単なる殴り書きではなく、これからスマホアプリのE2Eテストの自動化を始めたい方が読む時に参考になる資料としても使えるように心がけて書いていこうとおもいます。 E2Eテストとは E2Eテストとは、 end to end test (エンドツーエンドテスト) の略で
RN Features 2021年9月号 - iOS 15, Android 12 に向けた準備, React Native バージョン 0.65.1 リリース, React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの1ヶ月 iOS 15, Android 12 に向けた準備 iOS 15 QuickType Bar Transparent Navigation Bar シミュレーター Android 12 Overscroll Effect Permission Updates React Nativeがマネージャー採用 React Nativeバージョンアップ情報 react-native 0.65.1 リリース react-native 0.66.0 の予習 React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック 定額制プログラミング教室テックジム「スマホアプリコース」を新設 React N
We are excited to release a new version of React Native, 0.70.0. This version comes with several improvements like a new unified configuration for Codegen, Hermes as default engine, and full CMake support for Android builds along with a refresh of the documentation for the New Architecture. Read on to learn more! Sections New Architecture’s New Documentation Hermes as default engine A new unified
Expoでの開発からejectした場合にNotificationsを使用できないことを考慮し、素のReactNativeプロジェクト（といっても、Expo Bare Workflow）で、FCM（Firebase Cloud Messaging）を使ってPush通知を送る手順を確認しました。 事前準備および前提条件 ReactNativeプロジェクト この記事ではExpoプロジェクトを作成後、app.jsonのexpo.ios.bundleIdentifierおよびexpo.android.packageを最低限入力した後にexpo ejectしBare Workflowを選択した状態のプロジェクトを前提としています。 もちろんExpoを通さず作成したReactNativeプロジェクトでも問題はないと思いますが確認していません。 また、FCMの導入に関連しないビルドエラーの解決方法等は記載
React Native と事業速度について React Native Matsuri で喋りました | DevelopersIO
10/02 に開催された React Native Matsuri で登壇してきました。当日のセッションは動画で公開されています。私は 1:49:41 から喋っています。 喋ったときの資料を主張をまとめるために調査した内容とともに公開しています。 当日は 30 分だったので、主張のみを伝えるので精一杯でした。この記事では削ぎ落とした内容も含めて、資料を振り返ってみます。 なぜ英語の資料にしたのか React Native Matsuri は React Native をテーマとした、はじめての日本初の大規模カンファレンスです。日本で開催されているカンファレンスならば資料も日本語で書くべきだと思ったのですが、日本の React Native コミュニティがどういったことを考えているのか発信するセッションがひとつくらいあってもいいだろう、ということで英語で書きました。 メタ分析の対象企業 メタ
Preparing Your App for iOS 15 and Android 12 · React Native
Hello everyone! With new mobile OS versions releasing late this year, we recommend preparing your React Native apps beforehand to avoid regressions when the releases become generally available. iOS 15 The release date of iOS 15 hasn’t been announced yet, but based on previous iOS releases, it will likely be around September 16th. Please also account for App Store review time if any changes are re
The React Native team has announced that the new architecture will be rolled out in 2022. Checkout their full blog here. “2022 is going to be the year of the New Architecture in open source” Since the release is just around the corner, this is a good time to understand what changes are taking place under the hood and how they might affect your React Native App. This article aims to cover the most
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
なぜNext.jsをやめたのか？ - Hello Tech
React Native for Webのこれまでから読み解くReact GUIのこれから
Ubieが2024年にReact Nativeを選ぶ理由
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
First-class Support for TypeScript · React Native
React Native Matsuri 2021
React NativeとExpoを活用したネイティブビルド不要のE2Eテストの導入 - Hello Tech
夏休みが始まる前に知っておきたい、Reactエンジニアに優しくなったモバイルアプリ開発の世界
【徹底比較】Flutter VS React Native
Announcing React Native 0.66 · React Native
react-native-rearchitecture-2021
FlashList - super fast list for react native
Flutter vs. React Native in 2025
React Native製アプリをJSIモジュールを使って50倍高速化した話
React Nativeとはなにか。採用のメリットとデメリット
react-native-firebaseでmessagingを使う時にやる作業メモ
Toward Hermes being the Default · React Native
React Native's Many Platform Vision · React Native
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
Announcing React Native 0.70 · React Native
ReactNativeアプリでFCM通知メッセージを使う - Qiita
Deep dive into React Native’s New Architecture
www.nikkansports.com
mona-news.com
note.com/usksuzuki
qiita.com/ennagara128
auto-moto-picks.hatenablog.com
kakuyomu.jp