【React Native + Expo】オフライン対応について振り返ってみた - カミナシ エンジニアブログ
はじめに はじめまして、株式会社カミナシのエンジニア @imuです。 カミナシは3年目で最近はソフトウェアテスト、ソフトウェア品質に興味を持っています。 何故かと言うとバグはゼロに出来ないと思っていて、如何に減らしてサービスの品質を担保していくかに興味を持つようになりました。 この辺り知見を持ったエンジニアを個人的にジョインして欲しいな…なんて思ってます。 今回は『カミナシ』の課題「オフライン」について、何故オフラインで動作する必要があるのかと、これを解決するために選択した技術を振り返りながら書きたいと思います。 『カミナシ』はオフラインでどうやって動作を担保しているのか、悩んでいる方がいたら参考になれば嬉しいです。 開発環境 React Native (0.60.22) + Redux Expo SDK 37 TypeScript (3.7.2) 課題 Wi-Fi環境がないお客様にサービ
クロスプラットフォームフレームワーク比較（Flutter, React Native, Xamarin, Unity） - Qiita
クロスプラットフォームフレームワーク比較（Flutter, React Native, Xamarin, Unity）UnityXamarinreactnativeFlutter 近年、Flutter や React Native といった新しいクロスプラットフォームフレームワークが登場してきました。 今、クロスプラットフォーム開発をするときに、どのフレームワークを選定すれば良いのか迷っている人のために、各フレームワークを比較して解説します。 フレームワーク比較表 Flutter React Native Xamarin Unity
RN Features 2020年3月号 - React Native v0.62 注目機能Flipper, Re-architecture, Discord のパフォーマンス改善 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Native の気になるニュースを持ち寄ってみました！ はじめに ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASE開発チームブログ Flutter vs Native vs React-Native: Examining performance Discord のパフォーマンス改善 Flipper で React Native アプリの DX を改善しよう Flipper の主な機能の紹介 React Nativeの Re-architectureについて ロードマップ さいごに We're Hiring ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASE開発チームブログ https://devblog.t
Next.js の v12.2.0 では、SWC plugin がサポートがされました 🎉 元々 Babel plugin や ESLint plugin などを作るのが好きで、これを機に SWC plugin を作成して Next.js に適用してみたので、それについて記事を残そうと思います。 作成する SWC plugin 今回は、babel-plugin-react-native-web を SWC plugin に置き換えて、Next.js の React Native for Web 用の公式サンプルを動かせるようにすることを目標にしました。babel-plugin-react-native-web は、次のような import/export 文の変換を行うプラグインです。 + import ReactNative from "react-native"; // 変換前 - i
Why we decided to rewrite our iOS & Android apps from scratch — in React Native
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
Hermes | Hermes
Faster App LaunchHermes-powered apps launch faster, thanks to build-time precompilation of JavaScript into efficient bytecode. Optimized for MobileHermes is small in APK size, lean on memory, and starts instantly. It won't weigh your app down. Easy IntegrationIt's simple to get started with Hermes in React Native apps. Hermes is open source and implements JavaScript standards.
先日、VioletというTumblrクライアントアプリをReact Native + Expoで作りました。iOSとAndroidに対応していて、先日無事に審査が通り、現在App StoreとGoogle Playで公開しています。 ※有料アプリですが、もし良かったら買って使ってみてください！ 2021年にまさかTumblrアプリ！というのはさておき、開発の上でのもろもろを書いておきます。 経緯 もともとTumblrが好きで、スマホでよくTumblrを見ています。しかし、特にAndroidには純正アプリを含めて、「ここがもう少しこうだったらいいのにな」というアプリが多く、ならば自分が一番使いやすいTumblrクライアントアプリを作ろう、と思ったのがきっかけです。 開発当初はAndroidをメインで使っていましたが、iPhoneもよく使っていました。そこで、どうせならiOS/Androidの
From Spring Boot 2 to Spring Boot 3 with Help of Apache Tomcat and More
English version is here. どうもTAKUYAです。InkdropというMarkdownノートアプリを1人で作っています。そのモバイル版はReact Nativeで組まれています。最近コードベースをリファクタリングして、RecomposeからReact Hooksに乗り換えました。本稿ではその作業の際に発見したコツなどをシェアしたいと思います。 HOC多用はメンテナンス性が低くなるRecomposeとはHOC(Higher-order components)で効率よくStateless functional componentsベースのReactアプリを組むための便利関数ライブラリです。作者はAndrew Clarkです。例えるなら、React版Lodashみたいな感じです。このライブラリの開発は2018年12月4日を最後に止まっています。なぜなら彼がReactのチー
Microsoft looks to React Native as a way to tackle the cross-platform development puzzle
Ignite Microsoft has hinted that cross-platform development framework React Native is a key solution to the problem of writing applications that span both Windows and mobile. Cross-platform development is critical for Microsoft since both first-party and third-party apps accessing Office 365 or Azure services need to run on iOS and Android as well as on Windows. Underlining the point, the company
React Native と Flutterを比較してみた - カミナシ エンジニアブログ
こんにちは。株式会社カミナシの keinuma です。 今回はReact NativeとFlutterの比較についてまとめてみました。 弊社ではモバイルアプリ開発にReact Native + Expoを利用しています。ExpoはCLIを筆頭に便利な機能が多く、開発フローの基盤になっています。 そんな中、クロスプラットフォームのライブラリとして人気を博しているFlutterと比較すると何が違うのか知りたくてまとめてみました。 比較する上で以下の観点に絞ってみていきます。 基本情報 開発環境 UI 状態管理 テスト 基本情報 FlutterとReact Nativeの言語、提供元でまとめてみました。 ここ1ヶ月ほどFlutterを調べてみた中でDart言語はJavaやJS, Pythonなどのいいところをあわせもっていて書きやすい言語だなと感じました。 これまで静的型付け言語をやっていれば学
Posted by Yannick Assogba, Software Engineer, Google Research, Brain team We are pleased to announce that TensorFlow.js for React Native is now available for general use. We would like to thank everyone who gave us feedback, bug reports, and contributions during the alpha release and invite the broader community of React Native developers to try it out! What is React Native?JavaScript runs on a wi
フロントエンド開発者、スマホアプリのニーズの不確実性に挑む――価値提供のリードタイムを最短化する工夫
こんにちは、リクルートで『Airシフト』のフロントエンドの開発を担当している髙橋です。今回は、『Airシフト メッセージ用アプリ』（以下、スマホアプリ版）を開発するに当たっての開発計画や、ユーザーの要望を引き出すための工夫を紹介します。 連載第1回でお話しした通り、スマホアプリ版の開発プロジェクトは、『Airシフト』Web版への課題を起点としてスタートしました。しかしそもそも『Airシフト』は、PC／タブレットでの使用を前提として、設計と開発が行われていました。 というのもシフト表作成という作業は、「前期のシフトと見比べる」といった工程が必要となるため、「大きな画面で行わないと難しい」と考えられていたからです。よって、スマホの小さな画面で操作されるときにどのような価値をユーザーに提供すればよいのか、われわれは答えを持っていませんでした。 そのためまずは、ユーザーの要望を基にして、スマホアプ
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.3 Node.js 12.16.1／npm 6.13.4 expo-cli 3.13.8 expo 36.0.2（React Native 0.61） React 16.9.0 メモアプリを作る これまでの連載では、React Nativeでできることや、その周辺ツールについて広く学んできました。そろそろ、読者の皆さんも実用的なアプリを作ってみたくなってきた頃ですよね。今回と次回は、実践的なメモアプリを作りながら、UIコンポーネントの使い方や状態管理の方法、データの保存の方法について解説します。 今回作成するメモアプリをイメージしてもらいやすくするために、簡単な画面デザイン
=== 2020/12/01 追記 === 続きを 実践 React Native 運用チェックシート に書きました。 === 追記終わり === この記事はReact Native Advent Calendar 2019の1日目の記事です。 キッチハイクのアプリはReact Nativeで開発を始め、3年ほど経ちました。初期リリース時には自動テストもなく、Firebaseライブラリも限定的に使うだけでした。プロダクションにリリースし、ノウハウが溜まってきて、いまReact Nativeで開発するならここを抑えておくぞ、というポイントをまとめたいと思います。 この記事では、これからReact Native でアプリ開発を始める方をメインの対象としていますが、すでに開発中の方にもメリットがあればと思います。キッチハイクアプリも最初から全てを入れていた訳ではなく、まだまだ導入したいライブラリ
Web技術が発展したことで、デスクトップにおいてもモバイルにおいても、ネイティブアプリをWeb技術を使って開発するという流れが生まれている。こうした技術を使って開発されたアプリケーションはクロスプラットフォームといった特徴を持つことが多く、労力をかけずに多くのプラットフォームに対応させる方法としても注目されている。 State of JavaScriptがこのほど、2019年におけるJavaScript関連の調査結果「The State of JavaScript 2019」を公開した。このデータから、デスクトップ向けではElectron、モバイル向けではReact Nativeが支持を得ていることが示された。緩やかにではあるが、こうしたフレームワークが浸透しつつある様子がわかる。 デスクトップ/モバイル向けアプリ開発フレームワークの満足度推 - 資料: The State of Java
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.3 Node.js 12.16.1／npm 6.13.4 expo-cli 3.18.4 expo 36.0.2（React Native 0.61） React 16.9.0 メモアプリを完成させる 前回から2回に分けて、実践的なアプリ開発のサンプルとして、メモアプリを開発しています。前回は、データ構造を決めてサンプルデータを作成し、それを元にメモの一覧を表示するところまで解説しました（図1の左側）。 図1：メモアプリのラフスケッチ 今回は、その続きとしてメモデータを作成できる画面を作り、アプリとして完成させるところまでを解説します。作業工程の全体像を、改めて確認しておき
React Native ❤️ Web
2019.6.29の #bigLT2019_aizu で話しました
ReactNativeにゆかりのあるスタートアップが集う会に弊社CTOが登壇しました - KitchHike Tech Blog
こんにちは！エンジニアの Miho です。 2019/06/18 に開催された ReactNativeにゆかりのあるスタートアップが集う会に、弊社CTOである @shoken0x が登壇いたしました。記念すべき第5回は、普段よりも4倍近くの参加者が集う「半年に一度の大規模会」となりました！ 今回はCTOの登壇内容を中心に、当日の盛り上がりをお伝えしたいと思います。 はじめに ReactNativeにゆかりのあるスタートアップが集う会、とは？ その名の通り、React Native に関わっているスタートアップのエンジニアから、これから始めようかな...と思っている個人開発者も大歓迎！なイベントです。React Native でのアプリ開発が3年目を迎えたキッチハイクですが、我々開発メンバーも複数回に渡り参加させてもらっています。 【LT】Detoxの紹介 キッチハイクはモバイルアプリのテス
Use Next.js with Expo for Web
Using Next.js is not an official part of Expo's universal app development workflow. Next.js is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with the Expo SDK, we recommend using @expo/next-adapter library to handle the configuration. Using Expo with Next.js means you can share some of your existing components and APIs across your mobile
Announcing React Native for macOS and more · React Native for Windows + macOS
We're excited to announce our first preview release aligning with React Native 0.62! As a preview release, we will try our best not to make breaking changes, but still have a few bumps to sort out before we're ready for release. You can now start trying out the 0.62-preview of React Native for Windows! A similar upgrade for React Native for macOS is in progress. Stay tuned for the next update! Wha
React Nativeへ地図を表示する方法
概要React Nativeで地図を表示して、現在の位置情報を表示する方法について調べてみようかと思っています。React Nativeで地図をコントロールするためにはReact Nativeコミュニティーのreact-native-mapsライブラリを良く使っています。 今回のブログではreact-native-mapsを使ってReact Nativeで地図を表示して、現在の位置情報を地図の上に表示する方法について調べてみます。 このブログで紹介するソースコードはgithubで確認することができます。。 github: react-native-map-example例題ソースコードは下記の内容が適用されています。もっと詳しく知りたい方は下記のリンクを参考してください。 typescriptstyled-componentsroot-importReact Nativeで現在位置情報を取
React Native: How To Publish An Expo App To TestFlight + Debug Common Errors
React Native: How To Publish An Expo App To TestFlight + Debug Common Errors Do you have a React Native Expo App? Do you want to publish it to TestFlight for testing? Then this guide is for you. Note: This guide assumes you have an Apple Developer Account as well as installed the Expo CLI through NPM. You will need both for this to work. 1. Preparing Your Project For BuildA. App.jsonIn the root of
React Native(Expo)でiOSアプリ「寝過ごし・乗り過ごし防止」をApp Storeに公開した件 - Qiita
はじめに どんなアプリを作ったの？ 「寝過ごし・乗り過ごし防止」アプリ 降車する駅を登録しておくと、 電車などの乗物で近づいたタイミングで教えてくれるアプリ サラリーマンや電車通勤の学生向け つまり？⇒ * 降りる駅を気にしなくて済む！ * 寝ててもOK！漫画やスマホに熱中しててもOK！ * 音楽でアナウンスが聞こえなくてもOK！ 無料版：https://apps.apple.com/jp/app/id1471345749 有料版：https://apps.apple.com/jp/app/id1471348212 アプリの使い方 自宅や会社・学校の最寄り駅を検索して駅を登録 登録した駅に一定距離に近づくと通知してくれる 必要に応じて通知時間を設定 本記事の目的 宣伝目的だよ。 備忘録やExpoを使用してみた感想など。 これから使ってみたいって人に興味を持っていただけたら嬉しい。 ある程度
In today’s ever-evolving digital world, having a functional and powerful mobile app has become mandatory for businesses of all shapes and sizes. Choosing the right technology framework is vital for building a successful mobile application, be it iOS or Android. The purpose of this post is to help you identify the right cross-platform app development framework by comparing important factors like pe
So, put it in simple terms, the application built with React Native works on multiple platforms using native elements. Furthermore, it’s not difficult to get started with React Native. If you look at the recent StackOverflow Survey of 2019 , we see that the React Native is in the top three Libraries, Frameworks, and Tools that wanted by the developers. This tells us that developers have a great de
はじめに はじめまして、アプリチームの伊藤です。 オクトでは複数のアプリをリリースしていますが、その中でもReact Nativeを使っていたりFlutterを使っていたりと、同じクロスプラットフォーム開発ツールでも複数の技術が使われています。アプリチーム内でもよくこの話題があがっていたりして、もりあがっているテーマです。 そんな中、個人的にはReact Nativeか、Flutterかどちらかに注力して、ナレッジを蓄積したり、開発できるエンジニアを増やしたりすることも必要なのではないかと感じることがあります。そこで自分は前職でReact Nativeを使った開発をしていたこともあり、今回はFlutterをさわりながらその違いを学びつつ、今後の開発方針の検討材料にしていこうと思いました。 2つのツールを比較する まず、よくある2つのクロスプラットフォーム開発ツールのざっくりとした比較をまと
React Native Final Steps
I turned to Twitter to see what I should write about next, and after over a hundred votes, the winner was to finish this blog post! Twitter Driven Blogging — Let’s GO!So you’ve finished your React Native app, and you’re ready to ship it out the door. What’re your final steps? No, we’re not going to cover silly answers like “make sure your tests pass”, or “time to add smoke tests” (what does that e
Why Flutter Has Become the Best Choice To Develop a Startup Mobile App in 2020?
Why Flutter Has Become the Best Choice To Develop a Startup Mobile App in 2021? -(Latest Updated) Are you a bootstrapper and planning to launch a mobile app but still in a dilemma which cross-platform framework you should choose in 2021? Flutter can make it more comfortable for startups to roll out with the feature-rich mobile application without putting a burning hole in the pocket. How? Let’s go
React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。 作業開始時点の私の環境は以下のようになります。 Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください） Visual Studio 2019 16.4.2 ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)、MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 2 つを入れる Node.js v12.9.1 (注意：現時点で最
「FinOps、アプリケーション単位の経済性、クラウドコストの最適化について、ロワ・ラヴホン氏語る」 このエピソードでは、Finoutの共同設立者兼CEOであるRoi Ravhon氏が、InfoQポッドキャストの共同ホストであるDaniel Bryant氏と対談し、FinOpsの出現と業界の採用について議論した。この対談では、FinOpsを採用するメリット、クラウド・コストについてもっと知りたいと考えている組織の典型的な道のり、実装を成功させるために必要な様々な文化やツールといったトピックが取り上...
Cross Platform React Native UI toolkitA React Native framework for making cross platform applications
React Native e2e tests and Automatic Deploys (Detox + Fastlane + CircleCI)
React Native e2e tests and Automatic Deploys (Detox + Fastlane + CircleCI) A little bit of context (skippable) These past weeks I've been struggling trying to set up a pipeline where for every PR pointing to our staging branch, e2e tests run automatically, and for every PR that gets merged, test flight builds, and google internal beta builds are created. My experience has been... difficult, but it
React Nativeで、AndroidのBackボタンで前画面に戻るのを止めたり、確認画面を表示したりする場合にどうすれば最も美しいのかが、人によって言ってることがばらばらだったのでメモ。 環境はReact Native 0.60＋Expo＋React Navigationでテストしていますが、React Native自体の機能なのでほかの環境でも動作するはず。 BackHandlerを使うべし BackHandlerは、React Native本体の機能で、AndroidやtvOSのバックボタン＝戻るボタンのイベントを処理できるようにするイベントハンドラー。 取り扱いが簡単で、React Navigationなどもこのハンドラーの動作に準拠して動作してくれるので、安心して使えます。 使い方 Backボタンを制御したいコンポーネントコード（関数ではなくクラス化しておくこと）に、以下の順
React Native push notifications guide for rookies and techies
React Native push notifications guide for rookies and techies A small guide about the first assumptions and the reality of mobile notifications behaviors on React Native projects.
UIライブラリで美しいデザインを手軽に利用する
前回はスタイルでコンポーネントを装飾する方法を学びましたが、見栄えするデザインのコンポーネントを自分で作るのは大変です。今回は、サードパーティ製のコンポーネントセットとして、React Native Paperというライブラリを紹介します。React Native Paperはモバイルアプリ開発に役立つ、ヘッダーやフッター、フォームといったUIを提供しています。また、AndroidとiOSによって自動で見た目が変わる機能もあり、各プラットフォームらしい見た目を作ることもできます。品質の高いアプリを作るために欠かせない、素敵なコンポーネントの使い方を学んでいきましょう。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15 No
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SWC plugin を作成して Next.js に導入してみた
React Native + Expoでアプリを作ってApp StoreとGoogle Playで公開した
KotlinでReact Native(expo) を使いたい
よいDXに向けてRecomposeのHOCをReact Hooksに置き換える
TensorFlow.js for React Native is here!
React Nativeでメモアプリを作ろう～セットアップと表示
実践 React Native 設計チェックシート - Qiita
ElectronとReact Nativeによるネイティブアプリ開発、じわじわ浸透中
React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用
React Native vs. Flutter: Which Is the Best Cross-Platform App Development Framework? - DZone Web Dev
React Native Starter Kits Review for 2020
React Native経験者がFlutterをさわってみた - ANDPAD Tech Blog
React Native for Windows を試してみよう。そして型も手に入れよう。
マイクロソフト、パフォーマンス重視のWindows用React Nativeを発表
React Native Elements
React Native で、AndroidのBackボタンの動作を制御する - Qiita