こんにちは、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はつらい。
React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを？」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で
Core 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. Static A smart optimizer that makes your app fast with partial analysis, extracts CSS, flattens your tree, and removes code. Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other.
Tamagui comes in three parts: Tamagui Core (@tamagui/core) is a style library for React Native and web that supports 100% of the React Native API surface in a library that only depends on React. It adds all the goodies of modern style libraries into a cohesive package. Tamagui Static (@tamagui/static) is an optimizing compiler on top of Core, turning even inline styles sprinkled with logic into at
Wantedlyのモバイルエンジニアの久保出です。今回は、Wantedly VisitアプリにおいてReact Nativeをやめる決断をしたこと、関連してKotlin Multiplatformを導入しようとしていることについて書かせていただきます。 なぜReact Nativeが導入されていたかVisitのiOSアプリは2018年にフルリニューアルしました。リニューアルプロジェクトはモバイルエンジニアを総動員して半年近くかけてリリースしました。 リニューアルでは、色々なコンテンツを見つけられるDiscoverという新機能追加も予定しており、Discoverの実験もリニューアルと並列して行うことになりました。モバイルエンジニアはリニューアルに集中していたため、Webエンジニアのリソースが使えるReact NativeがDiscoverの実装手段に選ばれました。Discoverは、リニュー
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
この記事は React Native Advent Calendar 2020 の 13 番目の記事です。私の視点や感覚をもとに、 React Native を採用する際の現状を記述したものです。 次の方を対象としています。 技術をビジネスの競争力へ転換する責任を負う方 採用の責任を負う方 技術的な詳細については拙著を参照してください。 書いているひと エンジニアリングマネージャーの januswel です。現在は育成をメインに、採用を少し手伝ったり、メンバーのキャリアと組織の方向性をすり合わせるなど、主にピープルマネジメントを担当しています。また、チームでの採用技術の軸足を揃えたり、実案件も少し関わらせていただいてます。 React Native とはなにか React を用いて様々なプラットフォーム上でアプリケーションを構築可能なオープンソースソフトウェアです。開発は Facebook
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
React Native Matsuri 2021 で登壇した資料です https://reactnative-matsuri.com/ja
はじめに こんにちは！プロダクト開発部 ユーザープラットフォームグループの川根です。現在、React Native + React Native for Webで新規プロダクトを開発しています。 当グループでは、新規プロダクトの他にも React Native 製の Pep Up というアプリを開発・運用しており、React Native エンジニアはモバイルアプリチームとしてプロダクト間を横断して知見を共有し合っています。私はチームに 2022 年の 4 月から参加しまだ 1 年弱ですが、短い中で感じたチームの強みの1つが、タスクの粒度を適切なサイズまで分解できていることでした。 本記事では、モバイルアプリチームが開発のバッチサイズを小さくするために行っているタスク分解の方法について、紹介したいと思います。 そもそもなぜタスクが大きいといけないのか タスクが大きい弊害は色々ありますが、代
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
カミナシ・エンジニアリングマネージャーの @dmi8a と、 エンジニアの @imu です。 現場DXプラットフォーム「カミナシ」は、WebのアプリケーションとMobileのアプリケーションを1セットで提供する形を採用しているサービスです。 今日はExpoのOTAアップデートを介した、カミナシMobileアプリのリリースでぶつかった壁とそれを突破した方法について共有させてください。 本記事における前提 「カミナシ」は、Mobileのアプリケーション開発に、React Nativeを採用しております。 ※ご周知の通り、React Nativeは、iOS/iPadOS系アプリとAndroid系アプリの双方を開発できるクロスプラットフォームのアプリ開発用フレームワークです。 本記事では、iOS/iPadOS系アプリに絞った話となっております旨ご了承ください。 React Native + Exp
React Native Matsuri 2021 日本初のReact Nativeの技術カンファレンス React Native Matsuri 2021 にて弊社から2名登壇しました。 発表内容 4年運用した秘伝のReact Nativeアプリをチーム開発できるようにするまでにしたこと Pep Upアプリの開発を担当している山本が発表しました。動画はこちら 戦略的手抜きをするためのデザインシステム運用 Pep UpアプリのPdMをしている原が発表しました。動画はこちら 発表準備 ペルソナ 発表のターゲットを明確にするために今回の発表では以下のようなペルソナを設定していました。 スライドを作る上で「川本さんこの話興味あるかな？」という指標で評価できるようになったので便利でした。 川本さん 都内在住 28歳 男性 メガネ エンジニア ヘルスケア系のアプリをつくっている 仕事でRNを使ってい
先日、VioletというTumblrクライアントアプリをReact Native + Expoで作りました。iOSとAndroidに対応していて、先日無事に審査が通り、現在App StoreとGoogle Playで公開しています。 ※有料アプリですが、もし良かったら買って使ってみてください！ 2021年にまさかTumblrアプリ！というのはさておき、開発の上でのもろもろを書いておきます。 経緯 もともとTumblrが好きで、スマホでよくTumblrを見ています。しかし、特にAndroidには純正アプリを含めて、「ここがもう少しこうだったらいいのにな」というアプリが多く、ならば自分が一番使いやすいTumblrクライアントアプリを作ろう、と思ったのがきっかけです。 開発当初はAndroidをメインで使っていましたが、iPhoneもよく使っていました。そこで、どうせならiOS/Androidの
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
こんにちは。株式会社カミナシの keinuma です。 今回はReact NativeとFlutterの比較についてまとめてみました。 弊社ではモバイルアプリ開発にReact Native + Expoを利用しています。ExpoはCLIを筆頭に便利な機能が多く、開発フローの基盤になっています。 そんな中、クロスプラットフォームのライブラリとして人気を博しているFlutterと比較すると何が違うのか知りたくてまとめてみました。 比較する上で以下の観点に絞ってみていきます。 基本情報 開発環境 UI 状態管理 テスト 基本情報 FlutterとReact Nativeの言語、提供元でまとめてみました。 ここ1ヶ月ほどFlutterを調べてみた中でDart言語はJavaやJS, Pythonなどのいいところをあわせもっていて書きやすい言語だなと感じました。 これまで静的型付け言語をやっていれば学
モバイルアプリエンジニアをやっている@mrtryです！ React NativeでInstagramのようなGrid表示をつくりたくなったんですが、微妙にわからないことが多かったので防備録として記事を書きました🥳 サンプル この記事は、以下のようなGrid表示を実装したときの紹介になります みんな大好きなExpoでサンプルも作りました🫶 このコードを書いた際の学びをアレコレ紹介します🥳 FlatListのnumColumnsを指定する numColumnsを指定すると、1行あたりのitem数を指定できます。 サンプルコードでは 3 を指定しているので、1行あたり3 item表示されています。 reactnative.dev ListItemを正方形にする InstagramみたいなUIだと、写真のListItemが正方形になっています。 aspectRatio でアスペクト比を指定で
Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps. AboutThis library is two things: A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms.A set of patterns and examples for building cross-platform apps with React Native + Next.js.MotivationIn 2021, I spoke at Next.js Conf about how I built beatg
はじめに この記事はGo 4 Advent Calendar 2020 17日目の記事です。 こんにちは、株式会社カミナシのエンジニア @imuです。 早速ですが、S3にあるファイルをバイナリデータで取得してレスポンスに含めたいと思ったことはありませんか？ 『カミナシ』ではバッチ処理でファイルを作成してS3にファイルをアップロードした後、Client側でファイルをダウンロードする機能があります。 よくある処理はClient側からAWSにアクセスをしてファイルをダウンロードする方法ですが、今回はAPI側を経由してファイルをダウンロードする方法について書きたいと思います！ ファイルをバイナリデータとしてレスポンスに含めたいがうまくいかず、困っている方の参考になれば幸いです！ この記事で分かること API側でS3ファイルをダウンロードせずに取得する方法 取得したファイルをレスポンスに含める方法（
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
アプリをストアに公開後、半年に1回のペースでアップグレードを行ってきました。短いものだと1週間、長くて約2ヶ月かかってます。 0.46.2 -> 0.50.4 の思い出 初めてのアップグレードだったのでとにかく大変だった印象です。11月から着手して、クリスマスがすぎ、大晦日がすぎ、正月がすぎてもなかなかエラーが解消せず、先が見えない不安がありました。今でも覚えているのが、AIRMap(いまはreact-native-maps)とfbsdkです。AIRMapはAirbnbが開発していたライブラリでその名の通り地図表示なのですが、ネイティブ層のビルドエラーで苦しんだ記憶があります。かなりObjective-Cのソースコードを読みました。のちのAirbnbのReact Nativeやめる宣言により、ライブラリ開発がどうなるか心配だったのですが無事にReact Native Communityに移
@tamagui/core - Universal style library for React. @tamagui/static - Optimizing compiler that works with core and tamagui. tamagui - UI kit that adapts to every platform. See tamagui.dev for documentation. Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality. It does this with an optimizing c
Editor’s note: This post was updated on 21 July 2023 to include information about customizing your React Native app’s authentication UI, as well as best practices for securing authentication in your app. Authentication helps control user access to critical parts of an application. As such, it is a critical part of virtually all types of software. In this tutorial, we’ll explore how to set up authe
2025React Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template2024New Architecture is hereReact Native 0.76 - New Architecture by default, React Native DevTools, and moreReact Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, a
TECH STAND #8 React Native & Reactにて登壇した際の資料です。
(本記事はReact Native Advent Calendar 2020の7日目の記事です) 国内のReact Nativeで作られてるアプリをピックアップしました。 個人的に見聞きした+会社ウェブサイトなどで調査したもので、網羅されている訳ではないのでご了承下さい。 随時更新していきたいので、「これもReact Native製だよ！」とか、情報の誤りがあればコメントいただけると嬉しいです！ ※ 以下50音順 アングラーズ 釣果の記録アプリ。 ホーム画面はタイムライン形式になっており、好きな釣りスポットや釣り人(ユーザー)をフォローしておくと釣果情報が随時流れてきます。 アプリ版とWeb版がありますが、釣果の投稿はアプリから行います。 釣果投稿時は魚の写真だけでなく、サイズ、ルアー、タックルなど釣り人が気になりそうな情報を付加できます。 タイムライン、画像投稿などSNSの基本的な機能が
2025React Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template2024New Architecture is hereReact Native 0.76 - New Architecture by default, React Native DevTools, and moreReact Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, a
こんにちは。次世代システム研究室のT.M です。 はじめに React Native やFlutter はクロスプラットフォームのアプリケーションフレームワークとして有名です。クロスプラットフォームのフレームワークとしてどちらが良いかを判断するために、前回の記事では、React Native とFlutter のandroid アプリにおけるパフォーマンス比較を行いました。そもそも、クロスプラットフォームは、android とiOS だけでなく、Web やWindows / MacOS を指す言葉です。そこで、本稿ではWeb アプリケーションの開発について比較を行います。 React Native では、標準ではandroid / iOS アプリの開発しか行うことができません。同一ソースコードでのWeb アプリを開発するためには、React Native for Web を利用する必要があ
We are excited to release a new version of React Native, 0.69.0. This version comes with several improvements for the New Architecture of React Native and new features: React 18 support & bundled Hermes. Read on to learn more! Sections React 18 Bundled Hermes Highlights of 0.69 React 18 We are delighted to share with you that React Native 0.69 is the first release to support React 18. React 18 h
モバイルアプリエンジニアをやっている@mrtryです。 弊社で提供しているヘルスケアプラットフォームPep Upのモバイルアプリは、React Nativeをベースに開発しています。 元々は、素のReact Native(Vanilla React Native)で実装されていましたが、直近ではExpoに移行作業を進めています。 Expoでは、Cloud Build Serviceが提供されているのですが、Build結果をSlackに流せるように色々やったのでシェアします💃🏼 つくったもの Expo Cloud Build (EAS Build)でBuildが完了したタイミングで、以下のような通知を流すことができます🥳 Success Failed Cancel スクショは載せていませんが、EAS Submitにも対応しています💃🏼 やったこと EAS Buildには、Build
https://reactnative-matsuri.com/ja
Migrating our Largest Mobile App to React NativeIn 2020, we announced that React Native is the future of mobile at Shopify. As part of that journey, we’ve been migrating Shopify Mobile (our largest app at 300 screens per platform) from native to React Native. Here’s how it’s going. In 2020, we announced that React Native is the future of mobile at Shopify and since then we’ve been migrating all ou
Android users, rejoice! Today, anyone who uses Discord on an Android device to talk with their friends and communities will have plenty of reason to celebrate. That’s because Discord for Android is getting a major overhaul that brings significant improvements to the quality of the mobile experience. Today, we’re excited to share some of the improvements Android users can expect to see on the Andro
Artwork by Jenna FucciFlutter and React Native are natural competitors as two of the most used multi-platform mobile app frameworks. Debates swirl…developers argue…and, in the end, apps are shipped, using one or the other. So which is better? The smart answer, the one that senior engineers will say with a cheeky grin, is: “It depends. Both have pros and cons, and in the end it’s a decision about t
Hi everyone, As previously announced: 2022 is going to be the year of the New Architecture in open source If you still haven’t had the time to look into the New React Native Architecture (the Fabric Renderer and the TurboModule system), there is no better time to do it than now! We would like to share with the community some initiatives and material we prepared to make sure everyone is onboard on
2024React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and moreUse a framework to build React Native appsReact Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Suppo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く