弊社のReact Nativeベースのアプリ開発に利用していた「Native Base」が開発を終了しました。同じチームが後継として「glustack-ui」をリリースしたのですが、せっかくなので今あるUIライブラリを整理して次のプランを検討してみました。 現在アクティブに開発されているUI実装用パッケージの調査ExpoがUIライブラリのリストをメンテしていて参考になります。https://docs.expo.dev/ui-programming/user-interface-libraries/以下の観点を中心に調べています:スタイリングAPIヘッドレス構成: UIの状...

はじめにアプリの快適さは、より良いプロダクトを目指していく中で軽視することはできません。最初は軽快な動作をするアプリを作っていたつもりでも、開発が進んでくると当初より動作が遅くなってしまうことがあり、定期的な操作感の見直しが必要になるケースがあります。今回は、React Native製フロントエンドの操作性の向上に着目し、プロファイリングを通してレンダリングの様子を確認し、改善に役立てる方法をご紹介したいと思います。 動作確認環境本記事で紹介する方法は、以下の環境で確認しています。 開発機OS: Windows 10 HomeRAM: 32GBCPU: i5-1...

畜産関係者向けチャット・アプリケーション『Chumly(チャムリー)』の技術スタックをご紹介します。今回はフロントエンド編です。 ハイライトReact Native + Expoを使ってウェブを含むマルチ・プラットフォーム展開Expo GoをメインにすることでXcode/Android Studioを(ほぼ)使わずにネイティブ開発Stream Chatは楽しい Chumlyとは？Chumlyは畜産業に関わる皆さんのための、お仕事チャットです。https://chumly.meチャットIoT x AIで牛を見守る『U-motion』と連携した、データ分析...

React Hook FormとYupを使ったフォームのテストをJestで書いてみました。Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る今回は Testing Libraryを使って...

iOS/iPadOS端末がマナーモード中でも例外的に通知音を再生できる、Critical Alert(重大なお知らせ)。謎の多いこの機能を実装する機会がありましたので、手順をご紹介します。 Critical Alertとはなにか？Critical Alert(重大なお知らせ)はマナーモードにしたiPhone/iPadで、特定のアプリの通知だけ通知音を再生できるiOS/iPadOSの機能です。https://developer.apple.com/documentation/usernotifications/unauthorizationoptions/unauthorizati...

React Navigation でこんな感じのネストしたルートがあります。ホームメニュー設定詳細設定 1詳細設定 1.1詳細設定 2ヘルプホーム から同じ階層の メニュー に遷移したいときは navigator オブジェクトの navigate メソッドを呼び出します。(分かりやすくするために日本語で書いていますが、スクリーンのIDは通常英数字です)<Button onPress={() => navigation.navigate('メニュー')}/>ホーム からネストしたルートである 設定 に遷移したいときは、2段...

useEffect(() => ..., [])って書いてあっても、ぱっと見どんな役割なのか分かりづらいですよね。コードの可読性が上がるようにちょっとした工夫を考えてみました。(2021.11.27) react-useを追記しました。 useEffectが分からないU-motion開発部ではフロントエンド開発に使用するライブラリをAngularJS → Reactに移行しました。大きな規模のコードを複数人で開発することになるため、勉強会を開いて書き方のキャッチアップやよりよい手法の共有を行っています。そのなかで説明に結構困るのがReact.useEffectです。htt...

SwiftUIのHStack/VStackは画面全体のレイアウトをわかりやすくしてくれて便利ですね。React Nativeでも同じようなレイアウト・システムを使えないか、探してみました。export const HomeScreen = () => ( <VStack space={4} > <HStack space={8}> <Cell /> <Cell /> <Cell /> </HStack> <HStack> ...

iOSのウィジェット・エクステンションからアプリケーション本体でKeychainに保存したAPIトークンを読み出し、認証ありのAPIリクエストを送信する方法についてまとめてみました。 異なるアプリケーションの間でKeychainを共有するKeychain SharingiOSウィジェットで認証ありのAPIリクエストをしたいのですが、ウィジェットではログイン処理などのUIを実装できません。ログイン処理はアプリケーション本体で行い、何らかの方法でセッション・トークンなどの認証情報をウィジェットにシェアすることになります。今回はKeychainを使ってみました。iOSではアプリケーシ...

React Native PaperにStyled Systemを導入してStyle Propsが使えるようにしてみました。 React Native Paperとは？React Native PaperはReact Native / Web用に開発されたUIライブラリーです。デザインはMaterial Designに準拠しています。https://callstack.github.io/react-native-paper/ Style Propsが使いたいReact Native Paperは使い勝手の良いUIライブラリーなのですが「このボタンのレイアウトを少しカスタ...