僕にとってReact Nativeは“つらい” DMMが負債脱却のために取り組んだSwift化
DMM meetupは、多種多様な生命が彩るジャングルのように毎回個性豊かなさまざまなテーマを題材に、共に学び、遊び、楽しめるイベントです。今回はオンラインサロン事業に焦点をあて、事業部メンバーが課題と取り組みについて話しました。大門弘明氏からは、React NativeからSwiftへの移行について発表がありました。 React Nativeの負債化でアプリのSwift化が決定 大門弘明氏：それでは「React Nativeで書かれたアプリをSwiftで書き直しています」の発表を始めます。 まずは自己紹介をします。名前は大門と申します。2014年に新卒で合同会社DMM.comに入社して、iOSエンジニアとしてオンラインサロン事業部でお仕事をしています。 本日お話しすることですが、つらい気持ちの話と、アプリ設計の紹介を少ししようと思っています。僕にとってReact Nativeはつらい。
『サンプルコードで作りながら学ぶReactNative実践入門』が発行
同書では、スマートフォンアプリをSwiftで開発する際に、エンジニアの大半がWebを主戦場にしている場合、Swift製スマートフォンアプリをメンテナンスできるエンジニアが限られ、継続的かつ迅速な開発やビジネス要求への対応が困難になる、という著者の経験や、技術選定、開発時の詳細（ReactNativeによる実装）を紹介する。 同書の内容は以下の通り。 第1章 スマホアプリ開発の全体像 第2章 Webエンジニアのための技術選定 第3章 環境構築 第4章 Reactのおさらい 第5章 React NativeによるUI構築 第6章 ルーティングとナビゲーション 第7章 State管理 第8章 API通信 第9章 Push通知 第10章 ディープリンキング 第11章 アプリのリリース 第12章 ユーザー分析 同書は、次世代出版メソッド「NextPublishing」を使用して出版されており、電子書
React NativeでiOSアプリをAndroidアプリに移植するときに気をつけること - tomoima525's blog
この記事は英語で書いたこちらの記事 をDeepLで日本語訳し、加筆修正したものです。 数ヶ月前、自社サービス*1のAndroid版アプリを開発/リリースしました。iOS版は2年ほど前にリリースされており、React Nativeで実装されているため、多くのコードがそのままで動きます。しかし、ビルド設定やデバイス固有のNativeコードについては、気をつけなければならない部分がいくつもあります。 この記事では、既存のReact Native iOSアプリからAndroidアプリを移植するために自分が取り組んだことを紹介します。 依存ライブラリを更新し、Gradleの設定を整える カスタムネイティブモジュールを実装する Android向けアセット管理 UI コンポーネント プッシュ通知の設定 アプリを公開する アプリのビルド アプリの配布 まとめ 依存ライブラリを更新し、Gradleの設定を整
React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用
対象読者 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：メモアプリのラフスケッチ 今回は、その続きとしてメモデータを作成できる画面を作り、アプリとして完成させるところまでを解説します。作業工程の全体像を、改めて確認しておき
フロントエンド開発者、スマホアプリのニーズの不確実性に挑む――価値提供のリードタイムを最短化する工夫
こんにちは、リクルートで『Airシフト』のフロントエンドの開発を担当している髙橋です。今回は、『Airシフト メッセージ用アプリ』（以下、スマホアプリ版）を開発するに当たっての開発計画や、ユーザーの要望を引き出すための工夫を紹介します。 連載第1回でお話しした通り、スマホアプリ版の開発プロジェクトは、『Airシフト』Web版への課題を起点としてスタートしました。しかしそもそも『Airシフト』は、PC／タブレットでの使用を前提として、設計と開発が行われていました。 というのもシフト表作成という作業は、「前期のシフトと見比べる」といった工程が必要となるため、「大きな画面で行わないと難しい」と考えられていたからです。よって、スマホの小さな画面で操作されるときにどのような価値をユーザーに提供すればよいのか、われわれは答えを持っていませんでした。 そのためまずは、ユーザーの要望を基にして、スマホアプ
React Nativeでメモアプリを作ろう～セットアップと表示
対象読者 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コンポーネントの使い方や状態管理の方法、データの保存の方法について解説します。 今回作成するメモアプリをイメージしてもらいやすくするために、簡単な画面デザイン
React Nativeアプリのサイズを35%減らした話 Android編 - KitchHike Tech Blog
CTOの Shoken です。キッチハイクアプリはReact Nativeで開発を始めて3年目に入りました。アプリのサイズは開発を続けるうちに大きくなっていってしまいます。この記事では React Native アプリが、どのファイルでサイズが大きくなっているかの分析と、Androidでアプリのダウンロードサイズを減らした方法を紹介します。 サマリ キッチハイクアプリでは JS Bundle は 3.4 MB 、フォントは 48 MB だった。 Androidはビルド時の最適化オプションとApp Bundleにすることでサイズが 35% 減った。80.6 MB -> 66.8 MB サマリ JS Bundle のサイズを調べる react-native-bundle-visualizer を使った JS Bundle の構成を確認する Android Studio APK Analyzer
きれいな動きしてるだろ。ウソみたいだろ。ReactNativeExpoで動いているんだぜ。それで。 - Qiita
ネイティブと同じくらいヌルヌル動く 動画サンプル pic.twitter.com/PZBXGGvIuo — HorieH@ゆうしゃとさんすうリリース (@h0rieh) October 10, 2019 実物のアプリ ※興味があったらインストールして動きを体感してみてください iOS Android Expoとは？ React Native開発で「開発環境、デバッグ環境、ビルド、証明書の作成/管理、スマホアプリに必用な機能」などを簡単にしてくれるやつ。 1ソースでiOSとAndroidとWebの開発が可能。 ReactNative+Expoでスマホゲーム １年間で６本リリースして、合計１万インストール/10万円達成しました。 以下、ReactNative+Expoの知見ではなく、スマホアプリを開発してみて知っておきたかった知見になります。 Webではなくアプリにしてよかった点 Admobが
React Native製、予定作成アプリ「ペペロミア」を公開しました - Qiita
個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、 公開までの話を紹介していきます。 ソースコードをGitHubで公開しているので、興味のある人は手元で動かして頂ければと思います。 手もとで実行する手順は、こちら 主に使用している技術 Frontend Expo(React Native) TypeScript Database Cloud Firestore GitHub Peperomia(アプリ) https://github.com/wheatandcat/Peperomia PeperomiaWebSite(公式Webサイト) https://github.com/wheatandcat/PeperomiaWebSite 諸々のリンク ペペロミア公式Webサイト 制作ブログ(4日に1回くらい更新するブログ) ペペロミア
React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新) - Qiita
ダメなライブラリ。 redux reduxはstate管理の素晴らしいライブラリだ。 世界で一番愛用され、情報量も多く、大規模システムに向いている。 しかし、react nativeを採用するのはほとんどがスタートアップだ。 学習コストが高い＋プロトタイプ制作が苦手なreduxはスタートアップにははっきり適さない。 reduxの代わりにcontext Api/MobXを使おう。Expo＋contextApi or MobX+web版のfirebaseがスタートアップでの最適解だと思う。 react-native-cli cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが２倍
React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どういった分野に向いているのかを解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 Androidアプリ開発の経験者 iOSアプリ開発の経験者 前提環境 本記事の内容は、React Native v0.57.4の実
React Native でアプリ開発をして良かったところ・ツラかったところ - BizReach Tech Blog
こんにちは。ビズリーチの新卒事業部でフロントエンドエンジニアをやっている円谷(@___35d)です。以前ビズリーチのデザイナーブログにも登場して、通勤風景の写真でチーム内で相当いじられました。興味ある方はぜひそちらも読んでみてください。今日はエンジニアブログの方を書いていきたいと思います。 さっそく本題ですが、2018 年 11 月に ビズリーチ・キャンパス for OB/OG がフルリニューアルされました。いままで WebView ベースで構築されていたアプリをリデザインし、React Native でフルネイティブ化しました。この記事では React Native を採用するまでに至った背景と、導入してどうだったのかについてお話できればと思います。この記事が、これから React Native を使ったアプリ開発を検討している方の参考になれば幸いです。 目次 はじめに 社内事情と技術選
React Nativeアプリのメモリリークを追いかける - Quipper Product Team Blog
モバイルエンジニアの@hotchemiです。 今回は少し前にReact Nativeアプリの開発中にメモリリークを調査、解決した体験が学びが多かったので調査の顛末を共有できればと思います。 概要 今回問題となったのは、上記の課題・宿題を管理する画面の開発でした。 QA中に発覚した問題としては、「アプリを操作していると特定の端末(主にiPhone5)でアプリが落ちたり、その他の端末でも次第に筐体が熱くなる事がある」というもので、表示するデータはそれなりにあるものの画像や動画を表示する画面ではないのでさすがにおかしいだろうという事と、プロセス起動から時間が経つに従い事象が発生・深刻化していくという特性を考慮しメモリのリークが発生しているという仮説を元に調査を開始しました。 モニタリング 「推測するな、計測せよ」の格言通り、まずはメモリの使用量を計測する所から始めてみます。 Native Rea
React NativeでiOS/Androidアプリを丸っと開発！ Nature Remo開発で分かった長所と短所 - エンジニアHub｜Webエンジニアのキャリアを考える！
React NativeでiOS/Androidアプリを丸っと開発！ Nature Remo開発で分かった長所と短所 React Nativeを使って「Nature Remo」iOS/Androidアプリの開発を進める村瀨大輔（typester）さんと、北原壮さんに、導入して分かったメリットとデメリットを伺いました。 モバイルアプリ開発の現場において、現在注目されているのがFacebookやInstagramといったサービスも採用している「React Native」です。 Facebookが開発したJavaScriptのフレームワーク「React」をモバイルアプリ開発向けにしたもので、iOS/Androidアプリの開発ができます。JavaScriptがネイティブのUIを描画でき、iOS/Androidでコードを共通利用できる開発効率の高さから、多くの開発者が興味を寄せています。 開発のスピ
React Nativeハイブリッドアプリへの挑戦 ~ Part2: 導入/Bridge ~ - スタディサプリ Product Team Blog
本エントリは3部作のPart2となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1からすっかり時間が空いてしまい恐縮ですが引き続き弊社のReact Nativeハイブリッドアプリの取り組みについて語っていければと思います。 段階的なインテグレーション 前回のエントリでmonorepoへの移行とCIの整備について語りましたが、今回は実際にどの様にインテグレーションを進めていったかについて説明していきます。 新しい技術を採用するに辺り、ビッグバンリリースを避け段階的に導入を試みていくアプローチの方がリスクを避け柔軟に対応できると考えています。ですので一気に再構築プロジェクトを発令するのではなく、ある機能をリニューアルする際にその画面のみReact Nativeで書いてみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントを装飾する
ReactNativeのようなクロスプラットフォームで開発するよりネイティブでの開発手法を選択するのはなぜでしょうか？ - Quora
Redirecting to: https://naokiotsu.com/blog/2019-05-19-react-native-firebase-touchlife
React製WebサービスをReactNativeでアプリ化した話
クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL
