本日、LogBoxをデフォルトで有効にしたReact Native 0.63をリリースします。
LogBox
React Nativeではエラーや警告のデバッグが難しいというコミュニティからのフィードバックが頻繁に寄せられています。これらの問題に対処するため、React Nativeのエラー、警告、ログシステム全体を見直し、ゼロから再設計しました。
LogBoxは、React Nativeにおけるredbox、yellowbox、そしてロギング体験を完全に再設計したものです。0.62ではLogBoxをオプトインとして導入しました。このリリースでは、LogBoxをReact Native全体のデフォルト体験としてローンチします。
LogBoxは、エラーや警告が冗長すぎる、フォーマットが悪い、またはアクションにつながりにくいという不満に対処するため、主に3つの目標に焦点を当てています。
- 簡潔であること（Concise）: ログは問題をデバッグするために必要な最小限の情報を提供するべきです。
- 整形されていること（Formatted）: ログは必要な情報をすぐに見つけられるように整形されるべきです。
- 実行可能であること（Actionable）: ログはアクション可能であるべきで、それによって問題を修正して先に進むことができます。
これらの目標を達成するために、LogBoxには以下の機能が含まれています。
- ログ通知: 警告通知を再設計し、エラーのサポートも追加しました。これにより、すべてのconsole.warnとconsole.logメッセージがアプリを覆い隠すのではなく、通知として表示されるようになります。
- コードフレーム: すべてのエラーと警告に、アプリ内で直接ログのソースコードを表示するコードフレームが含まれるようになりました。これにより、問題の原因を迅速に特定できます。
- コンポーネントスタック: すべてのコンポーネントスタックはエラーメッセージから削除され、上位3つのフレームが表示される独自のセクションに配置されます。これにより、ログメッセージを乱雑にすることなく、スタックフレーム情報を期待する単一の一貫したスペースが提供されます。
- スタックフレームの折りたたみ: デフォルトで、アプリケーションのコードに関係のないコールスタックフレームを折りたたむようになりました。これにより、React Nativeの内部を छानったりせず、アプリ内の問題を迅速に確認できます。
- 構文エラーのフォーマット: 構文エラーのフォーマットを改善し、シンタックスハイライト付きのコードフレームを追加しました。これにより、エラーの原因を確認し、修正して、React Nativeに邪魔されることなくコーディングを続けることができます。
これらのすべての機能を、エラーと警告で一貫性があり、すべてのログを快適な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で構築されたことを示す小さな兆候を避けることも含まれます。これらのテイルズの主な原因は、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コンポーネントの簡単な使用例：
詳細についてはドキュメントから学ぶことができます。
すべてのネイティブプラットフォームには、システム定義の色の概念があります。ライトモードやダークモードなどのシステムテーマ設定、ハイコントラストモードなどのアクセシビリティ設定、さらには包含ビューやウィンドウの特性など、アプリ内のコンテキストにも自動的に応答する色です。
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>;
Textコンポーネントの色をiOSで定義されたlabelColorに設定します。
一方、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>;
Viewコンポーネントの背景色をAndroidで定義されたcolorButtonNormalに設定します。
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ストーリーボードを使用する必要があり、すべてのiPhoneアプリはすべてのiPhone画面をサポートする必要があります。このコミットは、デフォルトのReact Nativeテンプレートをこの要件と互換性があるように調整します。
0.63を可能にしてくれた何百人ものコントリビューターに感謝します！
LogBoxセクションの執筆を担当したRick Hanlon、およびこの記事のPressable部分の執筆を担当したEli Whiteに特に感謝します。
すべてのアップデートを確認するには、0.63の変更履歴をご覧ください。
