1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
こんにちは、Quipper iOS エンジニアの @manicmaniac です。 現在スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャをしています。 今回はスタディサプリで長らく使われていた React Native のコードを Swift に書き換えた話をします。 実は React Native から Swift への置き換え自体は半年ほど前に完了していたのですが、ブログに記すのに時間がかかってしまいました。 スタディサプリにおける React Native の利用 Quipper では 2017年ごろから React Native を iOS / Android アプリ開発に利用し始め、スタディサプリでは 2018年3月ごろから徐々に React Native を iOS アプリケーション開発に導入していました。 iOS 版スタディサプリの、git から取り出した
DMM meetupは、多種多様な生命が彩るジャングルのように毎回個性豊かなさまざまなテーマを題材に、共に学び、遊び、楽しめるイベントです。今回はオンラインサロン事業に焦点をあて、事業部メンバーが課題と取り組みについて話しました。大門弘明氏からは、React NativeからSwiftへの移行について発表がありました。 React Nativeの負債化でアプリのSwift化が決定 大門弘明氏：それでは「React Nativeで書かれたアプリをSwiftで書き直しています」の発表を始めます。 まずは自己紹介をします。名前は大門と申します。2014年に新卒で合同会社DMM.comに入社して、iOSエンジニアとしてオンラインサロン事業部でお仕事をしています。 本日お話しすることですが、つらい気持ちの話と、アプリ設計の紹介を少ししようと思っています。僕にとってReact Nativeはつらい。
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
こんにちは！テラーノベルで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界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半： React Nativeがいかに盛り上がってい
A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 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使っていますか？ Clineやそのフォーク、Cursorなどが群雄割拠していたところからここ1ヶ月くらいで急激に話題の中心に躍り出たClaude Codeですが、便利なツールという評価を超えて、これまでの開発フローを一新しうる可能性を持ったツールだと思います。 特に、与えられたタスクを分解して様々なツールを使いながら順に機能を実装していく様子は経験を積んだエンジニアのやり方そのものです。 CLIベースのツールであることの利点として動かすコンピューターを選ばないので、公式のGitHub Actions連携をすれば手元に開発環境がなくてもIssueやPull Requestのチャットで会話をしながら開発を進めることまでできてしまいます。 Claude Codeとアプリ開発の相性 そうはいっても、Claude Codeをう
こんにちは！テラーノベルとテラードラマで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、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
【2025年7月31日改訂】React Nativeを使ってアプリを作った際、マネタイズの方法としてよく検討される「広告収益」と「課金」について、AdmobとRevenueCatを使った実装や設定方法を解説します。※ExpoのManaged Workflowでも課金処理が実装できるようになりました。expo dev clientの設定などが必要ですが、この本では解説しませんのでご注意ください。なお、サンプルアプリはManaged Workflowで実装しております。
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
React Native Matsuri 2021 で登壇した資料です https://reactnative-matsuri.com/ja
As of January 2021, the Coinbase iOS and Android apps have transitioned away from native development to React Native, and all mobile engineers are now collaborating in a single codebase. The transition from native to React Native did not happen overnight, and in the interest of helping those contemplating such a decision, we want to tell the story of how we got here. Specifically, we want to share
はじめに はじめまして、株式会社ハローで業務委託として開発をしている@0906kokiです。 今回の記事では、React Nativeで開発されているRespo by AutoReserveで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するRespo by AutoReserveは、React Nativeで開発されております。 今回、RespoにE2Eを導入した目的に関しては、以下のような点が挙げられます。 手動テストの場合、テストをスキップ or 見逃していたケースがあったので、毎回網羅的にテストできるようにし、QAの質を上げたい 頻繁に本番デプロイできるようにする コミットごとにテストできるようにすることで、QAを待たず事前にデグレを検知できる (今後) ライブラリのアップデートなど、全てのテス
Our project name for the RN app rewrite, DenaliBackgroundHi, I am Naoya, a Senior Engineering Manager at Mercari. Along with my small but mighty team of frontend developers, I am responsible for delivering the Mercari app experience to our customers. Today, I’m here to explain why we’ve made the ambitious decision to completely rewrite our apps using React Native. Growth drives changeCurrently, we
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
はじめに 今回の記事では、モバイルアプリ開発として有名なフレームワークである「Flutter」と「React Native」両方の特徴、決定的な違いを徹底解説する。 2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。 両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。 本記事の対象読者 モバイルアプリ開発で生計を立てているプログラマー Flutter、React Native両者の特徴を知りたい人 モバイルアプリ開発案件を検討中で技術選定をされている人 本記事のタイトルが気
2025React Native 0.83 - React 19.2, New DevTools features, no breaking changesReact Native 0.82 - A New EraReact 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 mor
これは 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 を提供するためのソースコード（ネイティブ
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
Enter description here
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} />; }} estimatedItemSize={50} data={tweets} />;
The utility-first workflow you love from Tailwind CSS in your React Native applications. Enjoy consistent styling across platforms with the same intuitive classes.
こんにちは。次世代システム研究室のT.M です。 はじめに Android / iOS 両スマホアプリを開発するためには、一般的にはそれぞれKotlin （Java）/ Swift（Objective-C）で実装をする必要があります。しかし、クロスプラットフォームのアプリケーションフレームワークが誕生し、一つの実装で、両スマホアプリを開発することができるようになりました。現在、クロスプラットフォームのフレームワークでよく利用されているものとして、React Native とFlutter があります。どちらが良いフレームワークであるか、は分からず、そのため、どちらを利用すべきか迷うかと思います。そこで、本稿では、React Native とFlutter のパフォーマンスについて比較して、どちらが優れているかを検証したいと思います。 React Native React Native は2
React & React Native Components Library & 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) May 15, 2023The Power of Positive ThinkingDiscover how the power of positive thinking can transform your life, boost your confidence, and help you overco
Flutter vs. React Native in 2025 — Detailed Analysis 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-pla
Cross Platform React Native UI toolkitA React Native framework for making cross platform applications
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
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
はじめに 開発が一区切りついてリリースする際に、バージョン番号を上げる操作を「bumpする」って呼んだりしますよね。番号を上げるだけと言えばだけなのですが、この記事では以下の様な観点に着目して、bumpの方法を考えてみます。 monorepoのプロジェクトの場合、各パッケージのバージョンをさっと上げるには React Nativeアプリのパッケージを含んでいる場合、iOS/Android固有のファイルに書かれているバージョン番号を上げるには JavaScriptのエコシステムにある色々なコマンドやライブラリを紹介していくのですが、色々整理した末に、「結局、このRuby gemでよくないですか・・・」というところに行き着く記事です。 npmには、package.jsonのversionフィールドをbumpするコマンドがある npm version というコマンドがあって、単体のpackage
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
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
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++の既存のライブラリを再利用したりできるように、ネイティブモジュールを作ることができます。ネイティブコードであっても、この厄介な問題のために、バイナリデータを扱うのはそれほど
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く