LogBoxを搭載したReact Native 0.63の発表
本日、LogBoxをデフォルトで有効にしたReact Native 0.63をリリースします。
LogBox
React Nativeでのエラーと警告のデバッグが難しいというコミュニティからのフィードバックを頻繁に受けてきました。これらの問題に対処するために、React Nativeのエラー、警告、ログシステム全体を見直し、ゼロから再設計しました。
LogBoxは、React Nativeにおけるredbox、yellowbox、およびロギングエクスペリエンスを完全に再設計したものです。0.62では、LogBoxをオプトインとして導入しました。今回のリリースでは、すべてのReact NativeでLogBoxをデフォルトのエクスペリエンスとして提供します。
LogBoxは、エラーと警告が多すぎる、フォーマットが不適切である、または対処できないという苦情に対処するために、3つの主要な目標に焦点を当てています。
- 簡潔性：ログは、問題のデバッグに必要な最小限の情報を提供する必要があります。
- フォーマット：ログは、必要な情報をすばやく見つけることができるようにフォーマットする必要があります。
- 実行可能性：ログは実行可能である必要があるため、問題を修正して先に進むことができます。
これらの目標を達成するために、LogBoxには以下が含まれています。
- ログ通知：警告通知を再設計し、エラーのサポートを追加しました。これにより、すべてのconsole.warnとconsole.logメッセージが、アプリを覆う代わりに通知として表示されます。
- コードフレーム：すべてのエラーと警告には、アプリ内でログのソースコードを表示するコードフレームが含まれるようになりました。これにより、問題のソースをすばやく特定できます。
- コンポーネントスタック：すべてのコンポーネントスタックは、エラーメッセージから削除され、上位3つのフレームが表示された独自のセクションに配置されるようになりました。これにより、ログメッセージを混乱させることなく、スタックフレーム情報を見つけることができる一貫したスペースが得られます。
- スタックフレームの折りたたみ：デフォルトでは、アプリケーションコードに関連しないコールスタックフレームが折りたたまれるようになりました。そのため、アプリの問題をすばやく確認でき、React Nativeの内部を調べる必要がありません。
- 構文エラーのフォーマット：構文エラーのフォーマットを改善し、構文ハイライト付きのコードフレームを追加しました。これにより、エラーのソースを確認し、修正して、React Nativeの邪魔を受けることなくコーディングを続けることができます。
これらの機能をすべて、エラーと警告間で一貫性があり、1つの使いやすいUIですべてのログをページネーションできる、改善された視覚的なデザインにまとめました。
この変更により、YellowBoxはLogBox APIに置き換えられます。
LogBox.ignoreLogs()：この関数は、指定された文字列または正規表現に一致するログを無効にする方法として、YellowBox.ignoreLogs([])に代わります。LogBox.ignoreAllLogs()：この関数は、エラーまたは警告通知をオフにする方法として、console.disableYellowBoxに代わります。注：これは通知のみを無効にします。キャッチされないエラーは、引き続きフルスクリーンのLogBoxを開きます。
0.63では、これらの非推奨のモジュールまたはメソッドを使用している場合に警告が表示されます。0.64で削除される前に、これらのAPIからの呼び出し箇所を更新してください。
LogBoxとReact Nativeのデバッグの詳細については、ドキュメントはこちらを参照してください。
Pressable
React Nativeは、アプリケーションがユーザーのプラットフォームに対する期待に応えることができるように構築されています。「手がかり」—React Nativeで構築されたエクスペリエンスであることを示す小さなもの—を避けることが含まれます。これらの手がかりの主な原因の1つは、Touchableコンポーネント（Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback、TouchableBounce）でした。これらのコンポーネントは、ユーザーインタラクションへの視覚的なフィードバックを提供することで、アプリケーションをインタラクティブにします。しかし、プラットフォームのインタラクションと一致しない組み込みのスタイルとエフェクトが含まれているため、ユーザーはエクスペリエンスがReact Nativeで記述されていることを知ることができます。
さらに、React Nativeが成長し、高品質なアプリケーションに対する基準が高まるにつれて、これらのコンポーネントは成長していません。React Nativeは現在、Web、デスクトップ、TVなどのプラットフォームをサポートしていますが、追加の入力モダリティのサポートが不足しています。React Nativeは、すべてのプラットフォームで高品質のインタラクションエクスペリエンスをサポートする必要があります。
これらの問題に対処するために、Pressableという新しいコアコンポーネントを提供しています。このコンポーネントは、さまざまな種類のインタラクションを検出するために使用できます。APIは、親コンポーネントで手動で状態を維持する必要なしに、インタラクションの現在の状態に直接アクセスできるように設計されています。また、ホバー、ブラー、フォーカスなどを含む機能を拡張できるように設計されています。ほとんどの人は、TouchableOpacityのようなデフォルトのエクスペリエンスに依存する代わりに、内部でPressableを利用したコンポーネントを構築および共有すると予想されます。
import {Pressable, Text} from 'react-native';
<Pressable
onPress={() => {
console.log('pressed');
}}
style={({pressed}) => ({
backgroundColor: pressed ? 'lightskyblue' : 'white',
})}>
<Text style={styles.text}>Press Me!</Text>
</Pressable>;
動作中のPressableコンポーネントの簡単な例
ドキュメントで詳細を確認できます。
ネイティブカラー（PlatformColor、DynamicColorIOS）
すべてのネイティブプラットフォームには、システム定義の色という概念があります。ライトモードやダークモードなどのシステムテーマ設定、高コントラストモードなどのアクセシビリティ設定、さらにはコンテナビューやウィンドウの特性など、アプリ内のコンテキストにも自動的に対応する色です。
Appearance APIやAccessibilityInfoを使用してこれらの設定を検出し、それに応じてスタイルを設定することは可能ですが、このような抽象化は開発コストがかかるだけでなく、ネイティブカラーの外観を近似しているに過ぎません。これらの不一致は、React Native要素とネイティブ要素が共存するハイブリッドアプリケーションで特に顕著になります。
React Nativeは、これらのシステムカラーを使用するためのすぐに使えるソリューションを提供するようになりました。PlatformColor()は、React Nativeの他のカラーと同じように使用できる新しいAPIです。
たとえば、iOSでは、システムはlabelColorと呼ばれる色を提供しています。これは、React Nativeで次のようにPlatformColorを使用して使用できます。
import {Text, PlatformColor} from 'react-native';
<Text style={{color: PlatformColor('labelColor')}}>
This is a label
</Text>;
iOSで定義されているlabelColorをTextコンポーネントの色に設定します。
一方、AndroidはcolorButtonNormalなどの色を提供しています。これは、React Nativeで次のように使用できます。
import {View, Text, PlatformColor} from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal'),
}}>
<Text>This is colored like a button!</Text>
</View>;
Androidで定義されているcolorButtonNormalをViewコンポーネントの背景色に設定します。
ドキュメントでPlatformColorの詳細を確認できます。また、RNTesterにある実際のコード例も確認できます。
DynamicColorIOSは、ライトモードとダークモードで使用する色を定義できるiOS専用のAPIです。PlatformColorと同様に、色を使用できる場所であればどこでも使用できます。DynamicColorIOSは内部的にiOSのcolorWithDynamicProviderを使用しています。
import {Text, DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});
<Text style={{color: customDynamicTextColor}}>
This color changes automatically based on the system theme!
</Text>;
システムテーマに基づいてテキストの色を変更します。
ドキュメントでDynamicColorIOSの詳細を確認できます。
iOS 9およびNode.js 8のサポート終了
リリースから4年以上経過したため、iOS 9のサポートを終了します。この変更により、特定のiOSバージョンで特定の機能がサポートされているかどうかを検出するためにネイティブコードに配置する必要のある互換性チェックの数を減らすことができるため、開発速度を向上させることができます。市場シェアが1％であるため、お客様への悪影響はほとんどないはずです。
同時に、Node 8のサポートも終了します。LTSメンテナンスサイクルは2019年12月に終了しました。現在のLTSはNode 10であり、これが現在ターゲットとしているバージョンです。React Nativeアプリケーションの開発にNode 8をまだ使用している場合は、最新のセキュリティ修正とアップデートを受け取るためにアップグレードすることをお勧めします。
その他の重要な改善点
<View />を幅と高さを明示的に設定せずに<Text />内でレンダリングするサポート：幅と高さを明示的に設定せずに、任意の<View />を任意の<Text />コンポーネント内でレンダリングできるようになりました。以前のReact Nativeのリリースでは、これによりRedBoxが表示されていました。- iOS LaunchScreenを
xibからstoryboardに変更：2020年4月30日以降、App Storeに提出されるすべてのアプリは、アプリの起動画面にXcode storyboardを使用する必要があり、すべてのiPhoneアプリはすべてのiPhone画面をサポートする必要があります。このコミットにより、デフォルトのReact Nativeテンプレートがこの要件に準拠するように調整されています。
謝辞
0.63のリリースに貢献してくれた何百人ものコントリビューターに感謝します！
LogBoxに関するセクションの作成に貢献してくれたRick Hanlonと、この記事のPressable部分の作成に貢献してくれたEli Whiteに特に感謝します。
すべてのアップデートを確認するには、0.63の変更ログをご覧ください。
