「announcement」タグの付いた投稿52件

FacebookのReact Nativeチームは、React Nativeにおける作業の優先順位を決定するのに役立つ原則に基づいています。これらの原則は、私たちのチームに特有のものであり、React Nativeコミュニティのすべての利害関係者を代表するものではありません。私たちは、私たちを動かすもの、意思決定の方法、努力の集中方法について、より透明性を高めるために、これらの原則を共有します。

ネイティブ体験​

React Nativeの最優先事項は、各プラットフォームに対して人々が抱く期待に応えることです。これが、React Nativeがプラットフォームのプリミティブにレンダリングする理由です。私たちは、クロスプラットフォームの一貫性よりも、ネイティブのルック＆フィールを重視します。

たとえば、React NativeのTextInputは、iOSではUITextFieldにレンダリングされます。これにより、パスワードマネージャーやキーボードコントロールとの統合がすぐに機能することが保証されます。プラットフォームプリミティブを使用することで、React Nativeアプリは、AndroidとiOSの新しいリリースによるデザインや動作の変更にも対応できます。

ネイティブアプリのルック＆フィールに合わせるためには、そのパフォーマンスにも合わせる必要があります。ここに、私たちの最も野心的な努力が集中しています。たとえば、Facebookは、Android上のReact Native向けにゼロから構築された新しいJavaScriptエンジンであるHermesを開発しました。Hermesは、React Nativeアプリの起動時間を大幅に改善します。また、スレッドモデルを最適化し、React Nativeとネイティブコードとの相互運用を容易にするための大規模なアーキテクチャ変更にも取り組んでいます。

大規模なスケーラビリティ​

Facebookアプリ内の何百もの画面は、React Nativeで実装されています。Facebookアプリは、非常に広範なデバイスで数十億の人々に使用されています。これが、私たちが大規模な最も困難な問題に投資する理由です。

アプリにReact Nativeをデプロイすることで、小規模では見られない問題を特定できます。たとえば、Facebookは、最新のiPhoneから多くの古い世代のAndroidデバイスまで、幅広いデバイス全体でのパフォーマンス向上に注力しています。この焦点は、Hermes、Fabric、TurboModulesなどのアーキテクチャプロジェクトに情報を提供します。

React Nativeが大規模な組織にもスケールできることを証明しました。何百もの開発者が同じアプリに取り組む場合、段階的な導入は必須です。これが、React Nativeを一度に1つの画面で導入できるようにした理由です。まもなく、これをさらに一歩進め、既存のネイティブ画面の個々のネイティブビューをReact Nativeに移行できるようになります。

大規模なスケーラビリティに焦点を当てるということは、私たちのチームが現在取り組んでいない多くのことがあることを意味します。たとえば、私たちのチームは、業界におけるReact Nativeの採用を推進しません。また、大規模では見られない問題に対するソリューションを積極的に構築することもありません。コミュニティにとってそれらの重要な分野に焦点を当てることができる多くのパートナーと主要な貢献者がいることを誇りに思っています。

開発者速度​

素晴らしいユーザーエクスペリエンスは反復的に作成されます。実行中のアプリでコード変更の結果を確認するのに数秒しかかからないはずです。React Nativeのアーキテクチャにより、開発中にほぼ瞬時にフィードバックを提供できます。

React Nativeを導入することで、開発速度が大幅に向上したというチームからの声をよく耳にします。これらのチームは、開発中の瞬時のフィードバックにより、さまざまなアイデアを試したり、小さな変更ごとにコーディングセッションを中断する必要がないため、追加の磨きをかけたりするのがはるかに容易になると考えています。React Nativeに変更を加える際には、開発者エクスペリエンスのこの品質を維持するようにしています。

瞬時のフィードバックだけがReact Nativeが開発者速度を向上させる方法ではありません。チームは、高品質なオープンソースパッケージの急速に成長するエコシステムを活用できます。チームは、Android、iOS、およびWeb間でビジネスロジックを共有することもできます。これにより、更新をより迅速に出荷し、プラットフォームチーム間の組織的なサイロを減らすことができます。

あらゆるプラットフォーム​

2014年にReact Nativeを導入した際、私たちは「一度学べば、どこでも書ける（Learn once, write anywhere）」というモットーを掲げました。この「どこでも（anywhere）」には文字通り「どこでも」という意味が込められています。開発者は、デバイスのモデルやオペレーティングシステムに制限されることなく、できるだけ多くの人々にリーチできるべきです。

React Nativeは、モバイル、デスクトップ、ウェブ、TV、VR、ゲーム機など、非常に多様なプラットフォームをターゲットにしています。開発者が最小公倍数のために構築することを要求するのではなく、各プラットフォームで豊富なエクスペリエンスを可能にしたいと考えています。これを実現するために、各プラットフォームの独自の機能のサポートに注力しています。これは、さまざまな入力メカニズム（例：タッチ、ペン、マウス）から、VRの3D環境のような根本的に異なる利用体験にまで及びます。

この原則が、プラットフォーム間のパリティを促進するために、React Nativeの新しいコアアーキテクチャをクロスプラットフォームのC++で実装するという決定に影響を与えました。また、WindowsとmacOSのMicrosoftのような他のプラットフォームメンテナーを対象とした公開インターフェースも改良しています。あらゆるプラットフォームがReact Nativeをサポートできるように努めています。

宣言的UI​

私たちは、すべてのプラットフォームでまったく同じユーザーインターフェースをデプロイすることに同意しません。私たちは、同じ宣言型プログラミングモデルで各プラットフォームの独自の機能を公開することを信じています。私たちの宣言型プログラミングモデルはReactです。

私たちの経験では、Reactによって普及した単方向データフローにより、アプリケーションが理解しやすくなります。私たちは、画面を命令的に管理されたビューではなく、宣言型コンポーネントの構成として表現することを好みます。WebにおけるReactの成功と、新しいネイティブAndroidおよびiOSフレームワークの方向性は、業界も宣言型UIを採用していることを示しています。

Reactは宣言型ユーザーインターフェースを普及させました。しかし、Reactが独自に解決できる未解決の問題はまだたくさんあります。React Nativeは、Reactの革新の上に構築し続け、宣言型ユーザーインターフェース運動の最前線に立ち続けます。

本日、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つのフレームが表示される独自のセクションに配置されるようになりました。これにより、スタックフレーム情報がログメッセージを cluttered することなく、一貫した単一のスペースに表示されるようになります。
• スタックフレームの折りたたみ: デフォルトで、アプリケーションのコードに関係のないコールスタックフレームを折りたたむようになりました。これにより、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で構築されたことを示す「tell」（小さな手がかり）を避けることが含まれます。これらのtellの主な原因の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>;

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 />内にレンダリングするのをサポート: これまで常に可能だったわけではありませんが、幅と高さを明示的に設定することなく、あらゆる<Text />コンポーネント内に任意の<View />をレンダリングできるようになりました。以前のReact Nativeのリリースでは、これはRedBoxを引き起こしていました。
• iOS起動画面がxibからstoryboardに変更されました: 2020年4月30日以降、App Storeに提出されるすべてのアプリは、アプリの起動画面を提供するためにXcodeのストーリーボードを使用する必要があり、すべてのiPhoneアプリはすべてのiPhone画面をサポートする必要があります。このコミットは、この要件に準拠するようにデフォルトのReact Nativeテンプレートを調整します。

謝辞​

0.63を可能にしてくれた何百人ものコントリビューターに感謝します！

LogBoxセクションの執筆にご協力いただいたRick Hanlon氏と、この記事のPressable部分の執筆にご協力いただいたEli White氏に特別な感謝を申し上げます。

すべてのアップデートを確認するには、0.63の変更履歴をご覧ください。

本日、React Nativeバージョン0.62をリリースします。このバージョンには、デフォルトでFlipperのサポートが含まれています。

今回のリリースは、世界的なパンデミックの最中に行われます。私たちは、このリリースを可能にした何百もの貢献者の努力を尊重し、リリースがマスターから大きく遅れるのを防ぐために、本日このバージョンをリリースします。貢献者が問題解決に協力する能力が低下していることに留意し、必要であればアップグレードを遅らせる準備をしてください。

デフォルトでFlipperを搭載​

Flipperは、モバイルアプリをデバッグするための開発者ツールです。AndroidおよびiOSコミュニティで人気があり、このリリースでは、新規および既存のReact Nativeアプリでデフォルトでサポートされるようになりました。

Flipperは、標準で以下の機能を提供します。

• Metro Actions: ツールバーから直接アプリをリロードし、開発メニューをトリガーします。
• Crash Reporter: AndroidおよびiOSデバイスからのクラッシュレポートを表示します。
• React DevTools: 最新バージョンのReact DevToolsを他のすべてのツールと並行して使用できます。
• Network Inspector: デバイスアプリケーションによって行われたすべてのネットワークリクエストを表示します。
• Metro and Device Logs: Metroとデバイスの両方からのすべてのログを表示、検索、フィルタリングします。
• Native Layout Inspector: React Nativeレンダラーによって出力されたネイティブレイアウトを表示および編集します。
• Database and Preference Inspectors: デバイスのデータベースと設定を表示および編集します。

さらに、Flipperは拡張可能なプラットフォームであるため、NPMからプラグインを取得するマーケットプレイスを提供しており、ワークフローに特化したカスタムプラグインを公開およびインストールできます。利用可能なプラグインはこちらをご覧ください。

詳細については、Flipperのドキュメントをご確認ください。

新しいダークモード機能​

ユーザーの外観設定（例えば、好みのカラースキーム（ライトまたはダーク））にアクセスするための新しい`Appearance`モジュールを追加しました。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

また、ユーザー設定の状態更新を購読するためのフックも追加しました。

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

詳細については、AppearanceとuseColorSchemeのドキュメントを参照してください。

Apple TVをreact-native-tvosに移行​

Lean Coreの取り組みの一環として、またApple TVをReact Native WindowsやReact Native macOSのような他のプラットフォームと整合させるため、Apple TV固有のコードをコアから削除し始めました。

今後、React NativeのApple TVサポートは、対応するreact-native-tvos NPMパッケージとともにreact-native-community/react-native-tvosで維持されます。これは、メインリポジトリの完全なフォークであり、Apple TVをサポートするために必要な変更のみが含まれています。

`react-native-tvos`のリリースは、React Nativeのパブリックリリースに基づきます。今回の`react-native` 0.62リリースでは、Apple TVプロジェクトを`react-native-tvos` 0.62を使用するようにアップグレードしてください。

アップグレードサポートの強化​

0.61がリリースされたとき、コミュニティはReact Nativeの新しいバージョンにアップグレードする開発者をサポートするための新しいアップグレードヘルパーツールを導入しました。アップグレードヘルパーは、現在のバージョンからターゲットバージョンまでの変更点の差分を提供し、特定のアップグレードに必要な変更を確認できます。

このツールがあっても、アップグレードの際に問題が発生します。本日、Upgrade-Supportを発表することで、より専門的なアップグレードサポートを導入します。Upgrade SupportはGitHubの課題トラッカーであり、ユーザーはプロジェクトのアップグレードに特化した問題を提出し、コミュニティからの支援を受けることができます。

私たちは常にアップグレード体験の改善に取り組んでおり、これらのツールがまだカバーできていないエッジケースでユーザーが必要とするサポートを提供できることを願っています。

その他の改善点​

• LogBox: 新しいLogBoxのエラーおよび警告表示機能をオプトインとして追加します。有効にするには、`index.js`ファイルに`require('react-native').unstable_enableLogBox()`を追加してください。
• React DevTools v4: この変更には、最新のReact DevToolsへのアップグレードが含まれており、大幅なパフォーマンス向上、改善されたナビゲーション体験、React Hooksの完全なサポートを提供します。
• アクセシビリティの改善: accessibilityValueの追加、Touchableでのプロパティの不足、onSlidingComplete アクセシビリティイベントの追加、Switchコンポーネントのデフォルトロールを"button"から"switch"への変更など、アクセシビリティが改善されました。

破壊的変更​

• PropTypesの削除: React Nativeコアのアプリサイズへの影響を減らし、実行時ではなくコンパイル時にチェックする静的型システムを優先するため、コアコンポーネントから`propTypes`を削除しています。
• accessibilityStatesの削除: 非推奨となったaccessibilityStatesプロパティを削除し、コンポーネントがアクセシビリティサービスにその状態に関する情報を記述するための、より意味的に豊かな方法である新しいaccessibilityStateプロップに置き換えました。
• TextInputの変更: onTextInputは一般的でなく、W3C準拠ではなく、Fabricでの実装が困難なため、TextInputから削除しました。また、文書化されていないinputViewプロパティとselectionStateも削除しました。

非推奨​

• `AccessibilityInfo.fetch`はすでに非推奨でしたが、このリリースで警告を追加しました。
• 将来的にデフォルトを切り替えるサポートのため、`useNativeDriver`の設定が必須になりました。
• Animatedコンポーネントのrefは、内部コンポーネントとなり、getNodeは非推奨になりました。

謝辞​

0.62を可能にしてくれた何百人もの貢献者に感謝します！

すべての更新内容を確認するには、0.62の変更履歴をご覧ください。

React Nativeコミュニティの6人の貢献者による20以上のプルリクエストを経て、開発環境のセットアップ、トラブルシューティング、エラーの自動修正を支援する新しいコマンド「react-native doctor」をリリースできることを嬉しく思います。doctorコマンドは、ExpoとHomebrewのdoctorコマンドから強くインスパイアされており、JestからUIのインスピレーションを受けています。

この度、React Native 0.61 のリリースを発表できることを嬉しく思います。このバージョンには、私たちが「Fast Refresh」と呼ぶ新しいリロード体験が含まれています。

高速リフレッシュ​

React Nativeコミュニティに一般的な問題点について尋ねたところ、最も多かった回答の1つは、「ホットリロード」機能が壊れていることでした。関数コンポーネントでは確実に動作せず、画面の更新に失敗することが多く、スペルミスや間違いに耐性がありませんでした。ほとんどの人が信頼できないためオフにしていると聞きました。

React Native 0.61 では、既存の「ライブリロード」（保存時にリロード）と「ホットリロード」機能を、「Fast Refresh」という単一の新機能に統合します。Fast Refresh は、以下の原則に基づいてゼロから実装されました。

• Fast Refresh は、関数コンポーネントやフックを含む、モダンな React を完全にサポートします。
• Fast Refresh は、タイポやその他のミスから適切に回復し、必要なときにはフルリロードにフォールバックします。
• Fast Refresh は、侵襲的なコード変換を行わないため、デフォルトで有効にできるほど信頼性があります。

Fast Refresh の動作については、こちらのビデオをご覧ください。

ぜひお試しいただき、ご意見をお聞かせください！もしお好みでなければ、開発メニュー（iOS では Cmd+D、Android では Cmd+M または Ctrl+M）でオフにできます。オンとオフの切り替えは瞬時に行えるので、いつでも変更できます。

Fast Refresh を使う上でのヒントをいくつか紹介します。

• Fast Refresh は、デフォルトで関数コンポーネント（およびフック！）の React ローカルステートを保持します。
• 編集のたびに React のステートをリセットする必要がある場合は、そのコンポーネントを含むファイルに特別なコメント // @refresh reset を追加できます。
• Fast Refresh は、クラスコンポーネントを常にステートを保持せずに再マウントします。これにより、信頼性の高い動作が保証されます。
• 私たちは誰でもコードで間違いを犯します！Fast Refresh は、ファイルを保存した後に自動的にレンダリングを再試行します。構文エラーやランタイムエラーを修正した後に、手動でアプリをリロードする必要はありません。
• 編集中に console.log や debugger 文を追加するのは、便利なデバッグテクニックです。

Fast Refresh に関する問題は GitHub に報告してください。調査いたします。

その他の改善点​

• use_frameworks! CocoaPodsのサポートが修正されました。 0.60では、CocoaPodsをデフォルトで統合するためにいくつかの更新を行いました。残念ながら、これによりuse_frameworks!を使用するビルドが壊れてしまいました。これは0.61で修正され、動的フレームワークでのビルドを必要とするiOSプロジェクトにReact Nativeを統合しやすくなりました。
• useWindowDimensions フックの追加。 この新しいフックは、画面サイズの更新を自動的に提供し、購読します。ほとんどの場合、Dimensions API の代わりに使用できます。
• Reactが16.9にアップグレードされました。このバージョンでは、UNSAFE_ライフサイクルメソッドの古い名前が非推奨になり、actの改善などが含まれています。React 16.9ブログ投稿で、自動移行スクリプトと詳細情報をご覧ください。

破壊的変更​

• React .xcodeproj を削除します。 0.60 では、CocoaPods を介した自動リンクのサポートが導入されました。また、CocoaPods を e2e テスト実行に統合したため、今後は RN を iOS アプリに統合するための統一された標準的な方法が提供されます。これにより、React .xcodeproj のサポートは実質的に非推奨となり、このファイルは 0.61 から削除されました。注: 0.60 の自動リンクを既に利用している場合は、影響を受けません。

謝辞​

0.61 のリリースに貢献してくださったすべてのコントリビューターに感謝します！

すべての更新内容については、0.61 の変更履歴をご覧ください。

先週、Chain Reactで、Facebookで開発を進めていたオープンソースのJavaScriptエンジンであるHermesを発表しました。これは、AndroidでReact Nativeを実行するために最適化された、小型で軽量なJavaScriptエンジンです。ぜひチェックしてください！

Hermesは、メモリ使用量を減らし、ダウンロードサイズを削減し、アプリが使用可能になるまでの時間、つまり「Time to Interactive (TTI)」を短縮することで、React Nativeのパフォーマンスを向上させます。

「パフォーマンスデータを分析した結果、JavaScriptエンジン自体が起動パフォーマンスとダウンロードサイズに大きな影響を与えていることに気づきました。このデータに基づいて、デスクトップやラップトップに比べて制約の多いモバイルフォンの環境でJavaScriptのパフォーマンスを最適化する必要があると考えました。他の選択肢を検討した後、Hermesと呼ぶ新しいJavaScriptエンジンを構築しました。これは、限られたメモリ、低速なストレージ、削減されたコンピューティング能力を持つ大衆市場向けデバイスでも、React Nativeアプリに焦点を当ててアプリのパフォーマンスを向上させるように設計されています。」 —Hermes：React Nativeから始まるモバイルアプリ向けに最適化されたオープンソースJavaScriptエンジン

すぐに始めたいですか？ドキュメントで、既存のReact NativeアプリでHermesを有効にするための新しいガイドを必ずチェックしてください！

イラスト：Rachel Nabors

何百人もの貢献者の数ヶ月にわたる努力を経て、React Nativeコアチームはバージョン0.60のリリースを発表できることを誇りに思います。このリリースでは、AndroidとiOSの両プラットフォームで重要な移行が行われ、多くの問題も解決されました。このブログ投稿では、リリースの主要な点を取り上げます。ただし、常に詳細については変更履歴を参照してください。最後に、このマイルストーンを達成するためにご協力いただいた貢献者の皆様に感謝いたします！

アクセシビリティへの焦点​

アクセシビリティAPIには、announceForAccessibilityのような多くの改善が加えられ、ロール、アクションサポート、フラグなどにも改善が加えられました。アクセシビリティは複雑な科学ですが、これらの改善によってA11Yが少し簡単になることを願っています。これらの変更の詳細については、React Nativeオープンソースアップデート2019年6月を必ず確認してください。

新たな始まり​

React Nativeのスタート画面が更新されました！新しいUIの作成に協力してくれた多くの貢献者に感謝します。この新しい「Hello World」は、より親しみやすく、魅力的な方法でユーザーをエコシステムに歓迎します。

AndroidXのサポート​

AndroidXはAndroidエコシステムにおける大きな一歩であり、古いサポートライブラリのアーティファクトは非推奨になっています。0.60では、React NativeはAndroidXに移行されました。これは破壊的変更であり、ネイティブコードと依存関係も移行する必要があります。

この変更に伴い、React NativeアプリはAndroidXを自身で使用し始める必要があります。1つのアプリで両方を並行して使用することはできないため、すべてのアプリコードと依存関係のコードはどちらか一方を使用する必要があります。

matt-oakes（ディスカッションと提案より）

独自のネイティブコードは自分で移行する必要がありますが、@mikehardy、@cawfree、@m4tt72が「jetifier」という巧妙なツールを構築し、node_modulesをパッチしました。ライブラリのメンテナーはアップグレードする必要がありますが、このツールは、彼らがAndroidXバージョンをリリースするまでの間、一時的な解決策を提供します。したがって、AndroidX移行に関連するエラーが見つかった場合は、これを試してみてください。

デフォルトでCocoaPods​

CocoaPodsがReact NativeのiOSプロジェクトの一部になりました。もしそうでなかった場合、今後はxcworkspaceファイルを使ってiOSプラットフォームコードを開くようにしてください（プロのヒント：プロジェクトのルートディレクトリからxed iosを試してみてください）。また、内部パッケージのpodspecはXcodeプロジェクトと互換性があるように変更され、トラブルシューティングとデバッグに役立ちます。このエキサイティングなサポートを取り込むために、0.60へのアップグレードの一部としてPodfileにいくつかの簡単な変更を加えることを期待してください。use_frameworks!との互換性問題については認識しており、回避策と今後のパッチに関する問題を追跡しています。

リーンコアの削除​

WebView と NetInfo は以前は別のリポジトリに抽出されていましたが、0.60 では React Native リポジトリからの移行を完了しました。さらに、新しい App Store ポリシーに関するコミュニティからのフィードバックに応え、Geolocation も抽出されました。まだ行っていない場合は、react-native-webview、@react-native-community/netinfo、および @react-native-community/geolocation への依存関係を追加して移行を完了してください。自動化されたソリューションが必要な場合は、rn-upgrade-deprecated-modules の使用を検討してください。メンテナーは抽出以来これらのリポジトリに100件以上のコミットを行い、コミュニティのサポートに興奮しています！

ネイティブモジュールは自動リンクされるようになりました​

React Native CLIに取り組んでいるチームは、オートリンクと呼ばれるネイティブモジュールリンクの大幅な改善を導入しました！ほとんどのシナリオでは、もはやreact-native linkを使用する必要はありません。同時に、チームはリンクプロセス全体を刷新しました。上記のドキュメントで述べられているように、既存の依存関係はreact-native unlinkするようにしてください。

アップグレードヘルパー​

@lucasbento、@pvinis、@kelset、@watadarkstarが、アップグレードプロセスを簡素化する素晴らしいツール「Upgrade Helper」を構築しました。これにより、ブラウンフィールドアプリや複雑なカスタマイズを行っているReact Nativeユーザーは、バージョン間の変更点を確認できます。更新されたアップグレードドキュメントを見て、今日のアップグレードパスに試してみてください！

ライブラリメンテナーへの注意​

AndroidXの変更は、ほぼ確実にライブラリの更新を必要とするため、すぐにサポートを含めるようにしてください。まだアップグレードできない場合は、jetifierでライブラリを確認し、ユーザーがビルド時にライブラリをパッチできることを確認してください。

オートリンクのドキュメントをレビューして、設定とReadmeを更新してください。ライブラリが以前にどのように統合されていたかによっては、追加の変更が必要になる場合があります。依存関係インターフェースの定義方法については、CLIの依存関係ガイドを確認してください。

謝辞​

これらが私たちが注目したハイライトですが、他にも多くの期待されるものがあります。すべての更新については、変更履歴をご覧ください。いつものように、さらなるニュースにご期待ください。それまでの間、0.60をお楽しみください！

コードとコミュニティの健全性​

過去6か月間で、550人以上の貢献者によってReact Nativeに合計2800件のコミットがなされました。コミュニティからの400人の貢献者が1,150件以上のプルリクエストを作成し、そのうち820件のプルリクエストがマージされました。

過去6ヶ月間の1日あたりの平均プルリクエスト数は、ウェブサイト、CLI、および多くのモジュールをLean Coreの取り組みを通じてReact Nativeから分離したにもかかわらず、3件から約6件に増加しました。オープンなプルリクエストの平均数は現在25件を下回っており、通常、数時間または数日以内に提案やレビューで返信しています。

意義のあるコミュニティからのコントリビューション​

最近のコントリビューションの中から、私たちが素晴らしいと感じたいくつかをご紹介します。

• アクセシビリティ: React Native 0.60には、AndroidとiOSの両方でアクセシビリティAPIに多くの改善が施されます。すべての新機能は、基盤となるプラットフォームによって提供されるAPIを直接使用するため、AndroidとiOSの両方でネイティブの支援技術と統合されます。Marc Mulcahy、Alan Kenyon、Estevão Lucas、Sam Mathias Weggersen、Janic Duplessisの貢献に感謝いたします。
  • 追加のアクセシビリティロールと状態および新しいアクセシビリティ状態API。さまざまなコンポーネントに不足していたアクセシビリティロールの多くが追加され、将来のWebサポートを向上させるための新しいAPIが追加されました。
  • AccessibilityInfo.announceForAccessibility。以前はiOSのみでしたが、Androidのサポートが追加されました。
  • アクセシビリティアクションサポートの拡張。ユーザー定義のアクションに関するアクセシビリティを扱うためのコールバックが追加されました。
  • iOSアクセシビリティフラグのサポートと「モーションを減らす」のサポート。
  • Androidキーボードアクセシビリティの改善。キーボードナビゲーションを介してアクションを呼び出すためのclickableプロパティとonClickコールバックが追加されました（注：これはまもなくfocusableに名前が変更されます）。
  • CALayersを使用してテキストを描画。iOSで拡大されたテキストが消える問題を修正しました。
• 新しいアプリ画面: コミュニティは、0.60で実装される新しいアプリ画面のデザインを考案しました。この画面は、ほとんどの人が初めてReact Nativeを使用するときに目にするものです。初めてのユーザーをドキュメントにリンクさせ、その外観は今後のウェブサイトのデザイン変更に適合しています🌟。Orta、Adam Shurson、Glauber Castro、Karan Singh、Eli Perkins、Lucas Bento、Eric Lewisのすべての作業と協力に感謝します！
  • 「React Native Show」のビデオシリーズで新しいアプリ画面をチェックしてください。
• TurboModule型: 新しいTurboModulesシステムは、ネイティブで型安全な操作を保証するために、すべてのネイティブモジュールの型を必要とします。わずか2週間で、コミュニティはフロー型付けされたネイティブモジュールに対するこの作業を完了するために約40のプルリクエストを送信しました。上記のすでに言及された人々に加えて、Michał Chudziak、Michał Pierzchała、Wojtek Szafraniec、Jean Regisser、および1つ以上のプルリクエストを送信したすべての人々に感謝します。
• Haste: 2015年以来、React Nativeは相対パスではなくグローバルIDだけでモジュールをインポートできる「hasteモジュールシステム」を使用していました。これは便利ですが、多くのツールではあまりサポートされていません。James Ideは、Reactが何年も前にhasteを削除したのと同様に、hasteを削除することを提案しました。彼はアンブレラタスクを通じてすべての作業を計画し、それを実現するために18のプルリクエストを送信しました！詳細については、彼のTwitterスレッドをチェックしてください。
• Android Fragments: John Shelley氏によるAndroid Fragmentsを介してReact Nativeを機能させるという提案がマージされ、0.61で利用可能になります。Android Fragmentsの詳細はこちらで読むことができます。

リーンコア​

リーンコアの主な動機は、モジュールをReact Nativeから別のリポジトリに分割し、より良いメンテナンスを受けられるようにすることでした。わずか6ヶ月で、WebView、NetInfo、AsyncStorage、ウェブサイト、CLIなどのリポジトリが合計800以上のプルリクエストを受け取りました。より良いメンテナンスに加えて、これらのプロジェクトはReact Native自体よりも頻繁に独立してリリースできます。

また、React Native自体から廃止されたポリフィルとレガシーコンポーネントを削除する機会も得ました。過去には、古いバージョンのJavaScriptCore (JSC)でMapやSetなどの言語機能をサポートするためにポリフィルが必要でした。React Nativeが新しいバージョンで出荷されるようになったため、これらのポリフィルは削除されました。

この作業はまだ進行中であり、ネイティブ側とJavaScript側の両方で、さらに多くのものを分割または削除する必要がありますが、表面積とアプリサイズの増加傾向を逆転させることができたという初期の兆候があります。たとえば、JavaScriptバンドルを見ると、約1年前のバージョン0.54ではReact Native JavaScriptバンドルサイズは530kbでしたが、わずか6ヶ月でバージョン0.57までに607kb（+77kb）に増加しました。現在、マスターではバンドルサイズが28kb削減され、579kbになり、100kb以上の差があります！

Lean Coreの最初のイテレーションを終えるにあたり、React Nativeに追加される新しいAPIについてより意図的になり、React Nativeをより小さく、より速くするための方法を継続的に評価し、コミュニティがさまざまなコンポーネントの所有権を取れるようにする方法を見つけていきます。

ユーザーからのフィードバック​

6ヶ月前、コミュニティに「React Nativeのどこが嫌いですか？」と尋ねたところ、人々が直面している問題の概要がよくわかりました。私たちは数ヶ月前にその投稿に返信しました。主要な問題に関して達成された進捗をまとめる時が来ました。

• アップグレード: React Nativeコミュニティは、アップグレードエクスペリエンスの複数の改善に結束しました。自動リンク、rn-diff-purgeを介したより良いアップグレードコマンド、アップグレードヘルパーウェブサイト（近日公開）。また、各メジャーリリースごとにブログ投稿を公開することで、破壊的変更やエキサイティングな新機能を確実に伝達します。これらの改善の多くは、0.60リリース以降の将来のアップグレードを大幅に容易にするでしょう。
• サポート/不確実性: 多くの人がプルリクエストの活動不足や、FacebookのReact Nativeへの投資に関する一般的な不確実性に不満を感じていました。上記で示したように、私たちは自信を持って、さらに多くのプルリクエストを受け入れる準備ができていると言え、皆様からの提案や貢献を心待ちにしています！
• パフォーマンス: React Native 0.59は、はるかに高速な新しいバージョンのJavaScriptCore (JSC)で出荷されました。別に、インラインリクワイヤをデフォルトで有効にするのを容易にする作業を進めており、今後数ヶ月でさらにエキサイティングな更新を予定しています。
• ドキュメント: 最近、React Nativeのドキュメント全体を刷新し、書き直す作業を開始しました。貢献を検討されている方は、ぜひご協力ください！
• Xcodeでの警告: 私たちは既存の警告をすべて取り除き、新しい警告を導入しないよう努力しています。
• ホットリローディング: Reactチームは、まもなくReact Nativeに統合される新しいホットリローディングシステムを構築しています。

残念ながら、まだすべてを改善できたわけではありません。

• デバッグ: 日々発生していた多くの不便なバグや問題を修正しましたが、残念ながら望むほど進展していません。React Nativeでのデバッグは優れているとは言えず、今後はその改善を優先します。
• Metro symlinks: 残念ながら、これに対するシンプルで分かりやすい解決策はまだ実装できていません。しかし、React Nativeユーザーは、さまざまな回避策を共有しており、それがあなたに役立つかもしれません。

過去6ヶ月間の変更の多さを考慮し、同じ質問をもう一度させてください。最新バージョンのReact Nativeを使用しており、フィードバックしたい点がある場合は、「React Nativeのどこが嫌いですか？」の新しいエディションにコメントしてください。

継続的インテグレーション​

Facebookはすべてのプルリクエストと内部変更をまずFacebookのリポジトリに直接マージし、その後すべてのコミットをGitHubに同期します。Facebookのインフラストラクチャは一般的な継続的インテグレーションサービスとは異なり、すべてのオープンソーステストがFacebook内部で実行されているわけではありません。つまり、GitHubに同期されるコミットはオープンソースのテストを頻繁に壊し、修正に多くの時間がかかります。

React NativeチームのHéctor Ramosは、過去2か月間、FacebookとGitHubの両方でReact Nativeの継続的インテグレーションシステムを改善しました。現在、ほとんどのオープンソーステストは、変更がFacebookのReact Nativeにコミットされる前に実行されるため、コミットが同期されるときにGitHubのCIは安定した状態を維持できます。

今後の予定​

React Nativeの未来に関する私たちの講演をぜひチェックしてください！今後数ヶ月で、FacebookのReact NativeチームのメンバーがChain ReactとReact Native EUで講演します。また、間もなくリリースされる次のバージョン0.60にもご期待ください。きっとエキサイティングになるでしょう✨

今週、Eli WhiteがF8 2019で、FacebookのAndroidおよびiOSアプリケーションにおけるReact Nativeに関する講演を行いました。過去2年間で私たちが行ってきたこと、そして次に何をするかについて共有できることを嬉しく思います。

Facebookの開発者向けウェブサイトでビデオをチェックしてください

講演のハイライト:​

• 2017年と2018年は、React Nativeの最大プロダクトであるFacebookのマーケットプレイスに注力しました。マーケットプレイスチームと協力して、品質を向上させ、プロダクトに楽しさを加えました。現時点で、マーケットプレイスはAndroidとiOSの両方でFacebookアプリ内で最も高品質なプロダクトの1つです。
• 特にミドルエンドのAndroidデバイスでは、Marketplaceのパフォーマンスも大きな課題でした。昨年、起動時間を50%以上短縮し、さらに改善が進んでいます！最大の改善点はReact Nativeに組み込まれており、今年後半にコミュニティに提供される予定です。
• 私たちは、Facebookが必要とする高品質で高性能なアプリをReact Nativeで構築できるという確信を持っています。この確信により、React Nativeのコアを再考するといった、より大きな賭けに投資することができました。
• MicrosoftはWindows版React Nativeをサポートし、使用しています。これにより、ユーザーは自身の専門知識とコードベースを活用して、MicrosoftのユニバーサルWindowsプラットフォームにレンダリングできます。来週のMicrosoft Buildで、彼らの話を聞いて、さらに詳しく学んでください。

オープンソースに関するReact Radioポッドキャスト​

Eliの講演は、私たちの最近のオープンソース活動について語ることで締めくくられました。3月に進捗状況を更新し、最近ではNader DabitとGant LabordeがChristophをポッドキャストReact Native Radioに招待し、オープンソースにおけるReact Nativeについて語り合いました。

ポッドキャストのハイライト:​

• 私たちは、FacebookのReact Nativeチームがオープンソースについてどのように考えているか、そしてReact Nativeの規模のプロジェクトのために持続可能なコミュニティをどのように構築しているかについて話しました。
• リーンコアの取り組みの一環として、複数のモジュールを削除する予定です。WebViewやReact Native CLIのような多くのモジュールは、抽出されてから100以上のプルリクエストを受け取っています。
• 次に、私たちはReact Nativeのウェブサイトとドキュメントの全面的な見直しに注力します。ご期待ください！

このエピソードはまもなくお気に入りのポッドキャストアプリで配信されます。または、こちらですぐに録音を聴くこともできます。

React Native 0.59のリリースへようこそ！これは、88人の貢献者による644のコミットを含む、もう1つの大きなリリースです。貢献は他の形でも行われているため、問題の維持、コミュニティの育成、React Nativeに関する指導に感謝します。今月は待望の変更がいくつかあり、皆様に楽しんでいただけることを願っています。

🎣 Hooksが登場​

React Hooksはこのリリースの一部であり、コンポーネント間でステートフルなロジックを再利用できます。Hooksについては多くの話題がありますが、まだ聞いたことがない場合は、以下の素晴らしいリソースをご覧ください。

• Hooksの紹介では、なぜReactにHooksを追加するのかを説明しています。
• Hooksの概要では、組み込みHooksの概要を素早く説明しています。
• 独自のHooksの構築では、カスタムHooksによるコードの再利用を示しています。
• React Hooksを理解するでは、Hooksによって開かれた新しい可能性を探求しています。
• useHooks.comでは、コミュニティが管理するHooksのレシピとデモを紹介しています。

ぜひご自身のアプリでお試しください。私たちと同じくらい、再利用性にワクワクしていただけることを願っています。

📱 JSCのアップデートによりパフォーマンス向上とAndroidでの64ビットサポートを実現​

React Nativeは、アプリケーションを動かすためにJSC（JavaScriptCore）を使用しています。Android上のJSCは数年前のものであり、多くの最新のJavaScript機能がサポートされていませんでした。さらに悪いことに、iOSの最新JSCと比較してパフォーマンスが劣っていました。今回のリリースで、これらすべてが変わります。

@DanielZlotin、@dulmandakh、@gengjiawen、@kmagiera、@kudoの素晴らしい努力のおかげで、JSCは過去数年間の開発に追いつきました。これにより、64ビットサポート、最新JavaScriptサポート、そして大きなパフォーマンス向上がもたらされました。また、このプロセスを維持可能なものにしてくれたことにも感謝します。これにより、今後、あまり手間をかけずに将来のWebKitの改善を活用できるようになりました。そして、この作業を可能にしてくれたSoftware MansionとExpoに感謝します。

💨 インラインrequireによる高速なアプリ起動​

私たちは、人々がデフォルトで高性能なReact Nativeアプリを使用できるように支援したいと考えており、Facebookの最適化をコミュニティに提供するために取り組んでいます。アプリケーションは、起動を遅らせることなく、必要なときにリソースをロードします。この機能は「インラインリクワイヤ」と呼ばれ、Metroが遅延ロードするコンポーネントを特定できるようにします。深い多様なコンポーネントアーキテクチャを持つアプリは、最大の改善を享受するでしょう。

デフォルトで有効にする前に、コミュニティにその動作を知らせてもらう必要があります。0.59にアップグレードすると、新しいmetro.config.jsファイルが作成されます。オプションをtrueに設定して、フィードバックをお寄せください！アプリのベンチマークについては、パフォーマンスドキュメントのインラインリクワイヤで詳細をご覧ください。

🚅 Lean Coreが進行中​

React Nativeは、複雑なリポジトリを持つ大規模で複雑なプロジェクトです。これにより、コードベースは貢献者にとってアクセスしにくく、テストが困難で、開発依存関係として肥大化しています。リーンコアは、より良い管理のためにコードを個別のライブラリに移行することで、これらの問題に対処するための私たちの取り組みです。過去のリリースでその最初の一歩が踏み出されましたが、真剣に取り組みましょう。

追加のコンポーネントが正式に非推奨になったことに気づくかもしれません。これは素晴らしいニュースです。これらの機能には現在オーナーがおり、積極的にメンテナンスを行っているからです。警告メッセージに注意し、これらの機能のために新しいライブラリに移行してください。これらは将来のリリースで削除されます。以下は、コンポーネント、そのステータス、および移行先を示す表です。

今後数ヶ月で、さらに多くのコンポーネントがこのパスを辿り、よりスリムなコアへと移行していきます。この作業にご協力いただける方を探しています。ぜひリーンコアのアンブレラタスクにご参加ください。

👩🏽‍💻 CLIの改善​

React Nativeのコマンドラインツールは開発者にとってエコシステムへの入り口ですが、長年の問題があり、公式のサポートが不足していました。CLIツールは新しいリポジトリに移動され、専門のメンテナーグループがすでにいくつかのエキサイティングな改善を行っています。

ログのフォーマットが大幅に改善されました。コマンドはほぼ瞬時に実行されるようになりました。すぐに違いに気づくでしょう。

🚀 0.59へのアップグレード​

React Nativeのアップグレードプロセスに関するフィードバックを受け、将来のリリースでエクスペリエンスを向上させるための措置を講じています。0.59にアップグレードするには、rn-diff-purgeを使用して現在のReact Nativeバージョンと0.59の間の変更点を確認し、それらの変更を手動で適用することをお勧めします。プロジェクトを0.59にアップグレードすると、新しく改善されたreact-native upgradeコマンド（rn-diff-purgeに基づく！）を使用して、新しいリリースが利用可能になったときに0.60以降にアップグレードできるようになります。

🔨 破壊的変更​

0.59のAndroidサポートは、Googleの最新の推奨事項に従ってクリーンアップされており、既存のアプリが動作しなくなる可能性があります。この問題は、実行時クラッシュと「このアクティビティではTheme.AppCompatテーマ（または子孫）を使用する必要があります」というメッセージとして現れる可能性があります。プロジェクトのAndroidManifest.xmlファイルを更新し、android:theme値がAppCompatテーマ（例：@style/Theme.AppCompat.Light.NoActionBar）であることを確認することをお勧めします。

react-native-git-upgradeコマンドは0.59で削除され、新しく改良されたreact-native upgradeコマンドが推奨されます。

🤗 感謝​

多くの新しい貢献者が、フロー型からのネイティブコード生成を有効にすることと、Xcodeの警告を解決することについて協力しました。これらは、React Nativeの動作を学び、より大きな利益に貢献する素晴らしい方法です。ありがとうございます！今後も同様の問題に注意してください。

これらが私たちが注目したハイライトですが、他にも多くの期待されるものがあります。すべての更新については、変更履歴をご覧ください。0.59は大きなリリースです。ぜひお試しください。

年末にかけて、さらに多くの改善が予定されています。ご期待ください！

RyanとReact Nativeコアチーム一同