Appium初心者が、ReactNativeアプリを自動テストする試みの一部始終(随時更新) - Qiita
本記事の目的 弊社 (リプレックス株式会社) の関わっているプロダクトで、ReactNativeを使って作ったアプリがあるのですが、保守工数の削減のためにE2Eテストの自動化にチャレンジしてみることにしました。その際の技術選定の経緯なども含め、メモとして残すために書いています。 単なる殴り書きではなく、これからスマホアプリのE2Eテストの自動化を始めたい方が読む時に参考になる資料としても使えるように心がけて書いていこうとおもいます。 E2Eテストとは E2Eテストとは、 end to end test (エンドツーエンドテスト) の略です。end to endとは辞書を引くと「端から端まで」という意味です。UIテストはUI部分だけのテストですし、ロジックテストはロジック部分だけのテストですが、 E2Eテストは、システムが完成した状態で、UI,DB,Networkなど、全体がくっついた状態の
実践 React Native 運用チェックシート - Qiita
アプリをストアに公開後、半年に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に移
React Native と事業速度について React Native Matsuri で喋りました | DevelopersIO
10/02 に開催された React Native Matsuri で登壇してきました。当日のセッションは動画で公開されています。私は 1:49:41 から喋っています。 喋ったときの資料を主張をまとめるために調査した内容とともに公開しています。 当日は 30 分だったので、主張のみを伝えるので精一杯でした。この記事では削ぎ落とした内容も含めて、資料を振り返ってみます。 なぜ英語の資料にしたのか React Native Matsuri は React Native をテーマとした、はじめての日本初の大規模カンファレンスです。日本で開催されているカンファレンスならば資料も日本語で書くべきだと思ったのですが、日本の React Native コミュニティがどういったことを考えているのか発信するセッションがひとつくらいあってもいいだろう、ということで英語で書きました。 メタ分析の対象企業 メタ
React NativeでOSSのライセンス表記を楽にやりたい (続編) - Sweet Escape
昨日以下のようなブログを書いた。 www.keisuke69.net この投稿ではlicense-checkerというツールを使って利用しているOSSライブラリの一覧とライセンス情報を出力し、それを読み取って画面に出力するという内容だった。 だがしかし、前回の投稿の最後に書いたようにとても重いのである。 なんかダサいし重いのでもうちょっと考えよう。。。 出力されるファイルが1万行近いものだったため、都度読み込んで表示するにはとても重い状態だったのである。ファイルの中身を見るとbabel関連などが--productionで指定しているにも関わらず出力されていた。また、--directというオプションを指定していたにも関わらずそれがあまり機能していないというIssueもあって未解決のようだった。 github.com というわけで、前回の選定時には落としたnpm-license-crawler
RN Features 2021年4月号 - React Native製のプリンター制御SDK, Recoil 0.2.0 リリース, Sentryでパフォーマンス計測 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの近況 React Nativeアプリ 7つのベストプラクティス Sentryでパフォーマンス計測ができるようになった Recoil 0.2.0 Release Reactのベストプラクティスの提案をまとめた記事、Tao of React スター精密(株)がプリンター制御用SDKをRN向けに提供開始 今月の React Native ライブラリ紹介 React Native Hold Menu react-native-paper React Native Snap Carousel さいごに We're Hiring React Native Japanコミュニティの近況 次回 Meetup #12 は5/21(金)開催
React Native とFlutter におけるWeb アプリ開発 - GMOインターネットグループ グループ研究開発本部
こんにちは。次世代システム研究室のT.M です。 はじめに React Native やFlutter はクロスプラットフォームのアプリケーションフレームワークとして有名です。クロスプラットフォームのフレームワークとしてどちらが良いかを判断するために、前回の記事では、React Native とFlutter のandroid アプリにおけるパフォーマンス比較を行いました。そもそも、クロスプラットフォームは、android とiOS だけでなく、Web やWindows / MacOS を指す言葉です。そこで、本稿ではWeb アプリケーションの開発について比較を行います。 React Native では、標準ではandroid / iOS アプリの開発しか行うことができません。同一ソースコードでのWeb アプリを開発するためには、React Native for Web を利用する必要があ
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で開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.
組織戦略としての React Native | DevelopersIO
この記事は React Native Advent Calendar 2020 の 13 番目の記事です。私の視点や感覚をもとに、 React Native を採用する際の現状を記述したものです。 次の方を対象としています。 技術をビジネスの競争力へ転換する責任を負う方 採用の責任を負う方 技術的な詳細については拙著を参照してください。 書いているひと エンジニアリングマネージャーの januswel です。現在は育成をメインに、採用を少し手伝ったり、メンバーのキャリアと組織の方向性をすり合わせるなど、主にピープルマネジメントを担当しています。また、チームでの採用技術の軸足を揃えたり、実案件も少し関わらせていただいてます。 React Native とはなにか React を用いて様々なプラットフォーム上でアプリケーションを構築可能なオープンソースソフトウェアです。開発は Facebook
リクルートがB2Bのスマホアプリ開発でReact Nativeを採用した理由
リクルートがB2Bのスマホアプリ開発でReact Nativeを採用した理由：Webフロントエンドエンジニアだけでスマホアプリ開発（1） リクルートテクノロジーズが開発している、B2Bのスマホアプリ『Airシフト メッセージ用アプリ』。Webフロントエンドエンジニアだけで行っている開発の裏側を明かす連載。初回は、React Nativeを採用した背景などについて。 こんにちは、リクルートテクノロジーズで『Airシフト』のフロントエンドの開発を担当している辻です。これから、連載で、『Airシフト メッセージ用アプリ』を開発した背景、さまざまな側面で工夫した点などを紹介していく予定です。楽しみにしていただけると幸いです。 『Airシフト』とは 『Airシフト』は、シフト管理サービスです。シフト表の作成はもちろん、スタッフとのやりとりや細かな調整業務をラクにするための機能があります。直感的に操作
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践
2020年5月30日紙版発売 髙木健介，ユタマこたろう，仁田脇理史 著 A5判／688ページ 定価4,378円（本体3,980円＋税10%） ISBN 978-4-297-11391-9 ただいま弊社在庫はございません。 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと，速度やUIがネイティブより劣ってしまいがち」 こんな課題は，React Nativeを使えば解決できます。 React Nativeは，iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は，Re
アプリエンジニア徹底解剖！アプリ開発のエキスパートたちが語る開発現場の実情とは？環境構築と開発の問題点も考察 - FLEXY（フレキシー）
2020年4月22日に行われたFLEXY主催CTOmeetupのテーマはアプリ開発です。今回は初の試みとして、オンラインで開催。リアルタイムで視聴者のコメントも見ながらディスカッションを行いました。 4名のネイティブアプリ開発のエキスパートたちが語る、開発現場の実情とはどのようなものなのでしょうか。アプリの技術選定やマルチプラットフォーム、UI/UXについても熱い議論が交わされました。 また、昨今のテレワーク、リモートワーク化した開発現場から見る業界の働き方のトレンドの変化にも触れています。 ぜひチェックしてみてください。 開発環境の課題と改善について ネイティブアプリ開発者たちの開発の進め方 Virapture株式会社 伊藤 大樹さん（以下、伊藤）：本日はよろしくお願いします。まずはみなさんのアプリ開発環境についてざっくばらんにお話しできればと思います。まず阿部さんは隙間バイトアプリの「
Create React Appで作成したReactアプリにReact Native for Webを導入する | DevelopersIO
Create React Appは、コマンド１つでReactアプリケーションの雛形を作成することができる、Facebook製の環境構築ツールです。新しくアプリを作成する際に使用されている方も多いのではないかと思います。 React Native for Webは、iOS/Androidアプリ作成向けのライブラリであるReact Nativeと同じ名称のコンポーネントを使ってWebアプリケーションの画面を作成することができるライブラリです。使用していてReactに比べてより効率的に画面の作成ができると感じています。 当記事ではCreate React Appを使用して作成したReactアプリにReact Native for Webを導入する方法についてご紹介します。 Create React Appを使ってアプリを作成する 以下のコマンドを実行します。今回はTypeScriptを導入したい
React Native for Web で Flexbox をデフォルトにする | DevelopersIO
React Native に慣れていると React Native for Web のデフォルトが Flexbox でないことに違和感を覚えるでしょう。書き味を同じようにする設定を紹介します。 なお、 React Native for Web の環境を作る際は次の記事を参考にしてください。 https://dev.classmethod.jp/articles/introduce-react-native-for-web/ 追記 公式ドキュメントにやり方が載っていることを教えてもらいました。 HTML ファイルに直でスタイル指定する方法ですね。どの手法ともマッチしそうです。 @janus_wel 公式ドキュメントでわかりづらい場所に書いてあるのが悪いのですが、Guides > Client-sideにも該当の問題についての設定方法が言及されていますhttps://t.co/oNXhGIs7
「サンプルコードで作りながら学ぶReact Native実践入門」の著者が語る！React Nativeの魅力とこれだけは知っておきたいポイント！ - FLEXY（フレキシー）
本記事は2020年4月にインタビューを実施し、公開された内容です。 スナップマート株式会社の取締役CTO星直史です。 今年、2020年にReact Nativeの著書、『サンプルコードで作りながら学ぶReact Native実践入門』を出版しました。 本記事では、React Nativeを触ってみたいというWebエンジニアの方向けに、React Nativeの概要や知っておきたいポイントを説明します。ぜひ参考にしてみてください。 1. React Nativeとは React NativeはFacebookが開発したJavaScriptのフレームワークです。名前の通り、Reactを利用して開発を行います。 React Nativeの最大の特徴はクロスプラットフォーム開発ができるということです。一つのソースコードから複数のアプリケーションを生成できます。iOSとAndroidが提供するネイテ
Amplify を用いてウェブとネイティブのマルチプラットフォーム対応する - サーバーワークスエンジニアブログ
こんにちは、技術1課の加藤です。 最近 Amplify にハマって色々と触ってみているのですが、 Amplify って複数のクライアントプラットフォームに対応しているんですよね。 マルチプラットフォームに対応しているからにはやっぱり複数のプラットフォームでバックエンドを共有したいもの。 というわけで今回は React を使ってウェブアプリとネイティブアプリを作成し、同じ認証情報を使ってログインしてみます。 1. React ウェブアプリ まずはウェブアプリ + 認証機構の実装を行います。 1-1. React アプリの作成 $ npx create-react-app react-amplify $ cd react-amplify 一応、ちゃんと動くか確認します。 $ yarn start or $ npm start 以下の画面が開けばOKです。 確認が終わったら Ctrl + C で
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flutterで始めるモバイルアプリ開発一覧
基礎からはじめるReact Native入門一覧