メインコンテンツへスキップ

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

すべてのタグを表示

React Nativeオープンソースアップデート 2019年3月

·6分で読めます
Christoph Nakazawa
クリストフ・ナカザワ
元Facebookエンジニア

2018年第4四半期に、React Nativeオープンソースコミュニティへの投資を増やすことを決定した後、React Nativeオープンソースロードマップを発表しました。

最初のマイルストーンとして、私たちはコミュニティの最も目に見える側面を特定し、改善することに焦点を当てました。目標は、未解決のプルリクエストを減らし、プロジェクトの対象範囲を縮小し、主要なユーザー問題を特定し、コミュニティ管理のガイドラインを確立することでした。

過去2ヶ月間で、私たちは予想以上の進歩を遂げました。詳細については、以下をお読みください。

プルリクエスト

健全なコミュニティを構築するためには、コード貢献に迅速に対応する必要があります。過去数年間、コミュニティ貢献のレビューを後回しにし、280件のプルリクエスト(2018年12月)が蓄積されました。最初のマイルストーンでは、未解決のプルリクエストの数を約65件に減らしました。同時に、1日あたりのプルリクエストのオープン数は3.5件から7件に増加しました。これは、過去3ヶ月間で約600件のプルリクエストを処理したことを意味します。

ほぼ3分の2をマージし、3分の1をクローズしました。これらは、古くなっているか品質が低い、またはプロジェクトの表面積を不必要に増加させる場合に、マージされずにクローズされました。マージされたプルリクエストのほとんどは、バグの修正、クロスプラットフォームの同等性の改善、または新機能の導入でした。特筆すべき貢献には、タイプセーフティの改善と、AndroidXをサポートするための継続的な作業が含まれます。

Facebookでは、React Nativeをmasterから実行しているため、すべての変更はReact Nativeのリリースに組み込まれる前にテストされます。マージされたすべてのプルリクエストのうち、問題を引き起こしたのは6つだけでした。4つは内部開発にのみ影響し、2つはリリース候補の段階で捕捉されました。

最も目に見えるコミュニティ貢献の1つは、更新された「RedBox」画面でした。これは、コミュニティが開発者体験をより親しみやすいものにしている良い例です。

リーンコア

React Nativeは現在、Facebookであまり使用されていない多くの未保守の抽象化を含む非常に広い表面積を持っています。私たちは、React Nativeをより小さくし、Facebookであまり使用されていない抽象化をコミュニティがより適切に管理できるように、表面積を削減する作業を行っています。

最初のマイルストーンでは、リーンコアプロジェクトへのコミュニティの協力を求めました。その反応は圧倒的で、すべての進捗に追いつくのがやっとでした。1ヶ月足らずで完了したすべての作業をチェックしてください

私たちが最も興奮しているのは、メンテナーたちが長年の問題を修正し、テストを追加し、長く要望されていた機能をサポートするために飛び込んできたことです。これらのモジュールは、React Native内でこれまで以上に多くのサポートを受けており、これはコミュニティにとって素晴らしい一歩であることを示しています。そのようなプロジェクトの例としては、抽出以来多くのプルリクエストを受け取ったWebViewや、現在コミュニティのメンバーによって管理されているCLIがあり、必要な改善と修正を多く受けました。

主要なユーザー問題

12月には、コミュニティにReact Nativeについて嫌いな点を尋ねました。私たちは回答を集約し、すべての問題に回答しました。幸いなことに、私たちのコミュニティが直面する多くの問題は、Facebookでも問題となっています。次のマイルストーンでは、主要な問題のいくつかに対処する予定です。

最も多くの投票を集めた問題の1つは、React Nativeの新しいバージョンにアップグレードする際の開発者体験でした。残念ながら、これは私たちがmasterからReact Nativeを実行しているため、私たち自身が経験することではありません。幸いにも、コミュニティのメンバーがすでにこの問題に取り組むために立ち上がってくれました。

0.59 リリース

React Nativeコミュニティ、特にMike GrabowskiLorenzo Sciandraの協力がなければ、リリースを出すことはできなかったでしょう。リリース管理プロセスを改善し、今後さらに積極的に関与していく予定です。

  • 各メジャーリリースごとにブログ記事を作成するためにコミュニティメンバーと協力します。
  • 新しいバージョンにアップグレードする際に、破壊的変更をCLIに直接表示します。
  • リリースにかかる時間を短縮します。自動テストを増やす方法や、改善された手動テスト計画を作成する方法を検討しています。

これらの計画の多くは、近日公開されるReact Native 0.59リリースに組み込まれる予定です。0.59には、React Hooks、Android用の新しい64ビット版JavaScriptCore、および多くのパフォーマンスと機能の改善が搭載されます。現在、リリース候補として公開されており、今後2週間以内に安定版となる予定です。

次のステップ

今後2ヶ月間は、プルリクエストの管理を継続し、遅れを取らないようにするとともに、未解決のGitHubイシューの数を減らし始めます。Lean Coreプロジェクトを通じて、React Nativeの表面積を縮小し続けます。コミュニティの主要な問題の5つに対処する予定です。コミュニティガイドラインを最終決定する際には、ウェブサイトとドキュメントに注意を向けます。

3月にFacebookロンドンでコミュニティから10人以上の貢献者を迎え、これらの取り組みのいくつかを進めることを非常に楽しみにしています。React Nativeをご利用いただきありがとうございます。2019年に私たちが取り組んでいる改善点を皆様に見て、感じていただけると幸いです。数ヶ月後には別のアップデートをお届けし、その間もプルリクエストをマージし続けます! ⚛️✌️

2018年のReact Nativeコミュニティの現状

·4分で読めます
Lorenzo Sciandra
コアメンテナー & React Native開発者

2018年、React NativeコミュニティはReact Nativeの開発とコミュニケーションの方法について多くの変更を行いました。数年後に振り返ったとき、この変化がReact Nativeにとっての転換点だったとわかるだろうと信じています。

React Nativeのアーキテクチャの書き換え、広くFabricとして知られているものに多くの人々が興奮しています。これは、とりわけReact Nativeのアーキテクチャの根本的な限界を修正し、JSIとTurboModulesとともにReact Nativeの将来の成功を設定するでしょう。

2018年の最大の変化は、React Nativeコミュニティに力を与えることでした。当初から、Facebookは世界中の開発者がReact Nativeのオープンソースプロジェクトに参加することを奨励してきました。それ以来、リリースプロセスなどを担当する多くのコアコントリビューターが生まれました。

これらのメンバーは、コミュニティ全体がこのプロジェクトの未来を形作る力をより持てるようにするため、以下のリソースを用いていくつかの重要なステップを踏み出しました。

react-native-releases 📬

このリポジトリは1月に作成され、新しいリリースをより協力的に追跡し、特定のリリースの一部となるものについての議論を、チェリーピックを提案したい人なら誰にでも開くという二重の目的を果たしています(0.57.8とそのすべての以前のバージョンと同様に)。

これは、月ごとのリリースサイクルから脱却し、現在バージョン0.57.xで採用されている「長期サポート」アプローチへと移行する原動力となりました。

これらの決定に至った功績の半分は、今年作られたもう一つのリポジトリによるものです。

discussions-and-proposals 🗣

7月に作成されたこのリポジトリは、React Nativeに関する議論のためのよりオープンな環境という考えを拡張したものです。以前は、この必要性はメインリポジトリのFor Discussionというラベルが付けられたissueで処理されていましたが、他のライブラリ(例:React)が持つRFCアプローチにこの戦略を拡張したいと考えました。

この実験は、すぐにReact Nativeのライフサイクルにおける役割を見つけました。Facebookチームは現在、コミュニティRFCプロセスを使用して、React Nativeで改善できる点を議論し、Lean Coreプロジェクトに関する取り組みを調整しています(その他、興味深い議論も行われています)。

@ReactNativeComm 🐣

これらの取り組みを伝える私たちのアプローチが、私たちが望んだほど効果的ではなかったことを認識しており、React Nativeコミュニティで起こっているすべてのこと(リリースから活発な議論まで)に誰もがより簡単に追いつけるように、新しいTwitterアカウント@ReactNativeCommを作成しました。

もしあなたがそのSNSを利用していない場合でも、GitHub経由でリポジトリをWatchできることを覚えておいてください。この機能はここ数ヶ月で改善され、リリースのみの通知を受け取ることが可能になったので、いずれにせよ利用を検討する価値があります。

今後の展望 🎓

過去7〜8ヶ月間、コアコントリビューターはReact Native Community GitHub組織を強化し、React Nativeの開発に対する所有権を拡大し、Facebookとのコラボレーションを強化しました。しかし、これには常に、同様のプロジェクトが持つかもしれない正式な構造が欠けていました。

この組織は、ホストされているすべてのパッケージ/リポジトリに一連の標準を適用し、メンテナーがお互いを助け、コミュニティが合意した標準に準拠する質の高いコードを貢献するための単一の場所を提供することで、より大きな開発者コミュニティの模範となることができます。

2019年初頭には、この新しいガイドライン一式が整備される予定です。専用のディスカッションでご意見をお聞かせください。

これらの変更により、コミュニティはより協力的になり、バージョン1.0に到達したときには、この共同の取り組みを活用して、私たち全員が(さらに)素晴らしいアプリを書き続けることができると確信しています 🤗


皆さんが私たちと同じように、このコミュニティの未来にワクワクしていることを願っています。上記のリポジトリで行われている議論や、皆さんが生み出す素晴らしいコードを通じて、皆さんの参加を楽しみにしています。

ハッピーコーディング!

オープンソースのロードマップ

·5分で読めます
Héctor Ramos
Facebook エンジニア

今年、React Nativeチームは、React Nativeの大規模な再設計に焦点を当てました。Sophieが彼女のState of React Nativeの投稿で述べたように、私たちはFacebook以外のReact Nativeユーザーと協力者の繁栄する人口をよりよくサポートするための計画を練ってきました。今こそ、私たちが取り組んできたことの詳細を共有する時です。そうする前に、オープンソースにおけるReact Nativeの長期的なビジョンを説明したいと思います。

React Nativeに対する私たちのビジョンは…

  • 健全なGitHubリポジトリ。 IssueとPull Requestが妥当な期間内に処理されること。
    • テストカバレッジの向上。
    • Facebookのコードリポジトリから同期されるコミットが、オープンソースのテストを破壊しないこと。
    • より大規模で意味のあるコミュニティからのコントリビューション。
  • 安定したAPI群。 オープンソースの依存関係との連携が容易になること。
    • Facebookがオープンソースと同じ公開APIを使用すること。
    • React Nativeのリリースがセマンティックバージョニングに従うこと。
  • 活気のあるエコシステム。 コミュニティによって維持される、高品質なViewManager、ネイティブモジュール、および複数のプラットフォームのサポート。
  • 優れたドキュメント。 ユーザーが高品質な体験を創造する手助けに焦点を当て、APIリファレンスドキュメントを最新の状態に保つこと。

このビジョンを達成するために、以下の重点分野を特定しました。

✂️ Lean Core(コアのスリム化)

私たちの目標は、非コアで未使用のコンポーネントを削除することで、React Nativeの表面積を削減することです。非コアコンポーネントはコミュニティに移管し、コミュニティがより速く動けるようにします。表面積が削減されることで、React Nativeへの貢献の管理が容易になります。

WebViewは、コミュニティに移管したコンポーネントの例です。これらのコンポーネントをリポジトリから削除した後も、内部チームが引き続き使用できるワークフローに取り組んでいます。私たちは、コミュニティに所有権を譲渡するさらに数十のコンポーネントを特定しました。

🎁 内部のオープンソース化と🛠ツールの更新

Facebookの製品チームにとってのReact Nativeの開発体験は、オープンソースとはかなり異なる場合があります。オープンソースコミュニティで人気のあるツールは、Facebookでは使用されていません。同じ目的を達成する内部ツールがあるかもしれません。場合によっては、Facebookのチームは、Facebook以外には存在しないツールに慣れてしまっていることもあります。これらの不一致は、今後のアーキテクチャ作業をオープンソース化する際に課題となる可能性があります。

私たちはこれらの社内ツールの一部を公開する作業を進めます。また、オープンソースコミュニティで人気のツールのサポートも改善します。以下は、私たちが取り組むプロジェクトの(すべてではない)リストです。

  • JSIをオープンソース化し、コミュニティが独自のJavaScript VMを導入できるようにして、RNの最初のリリースから存在するJavaScriptCoreを置き換えます。JSIについては今後の投稿で取り上げますが、その間、React ConfでのParashuramの講演からJSIについて詳しく学ぶことができます。
  • Androidでの64ビットライブラリのサポート。
  • 新しいアーキテクチャ下でのデバッグを可能にする。
  • CocoaPods、Gradle、Maven、および新しいXcodeビルドシステムのサポートを改善する。

✅ テストインフラ

Facebookのエンジニアがコードを公開する場合、すべてのテストに合格すれば安全に着地したと見なされます。これらのテストは、変更がReact Nativeの表面の1つを破壊する可能性があるかどうかを特定します。しかし、FacebookがReact Nativeを使用する方法には違いがあります。これにより、私たちは知らず知らずのうちにオープンソースでReact Nativeを破壊してしまうことがありました。

私たちの内部テストを強化し、オープンソース環境に可能な限り近い環境で実行されるようにします。これにより、これらのテストを破壊するコードがオープンソースに入り込むのを防ぐことができます。また、GitHubのコアリポジトリのテストを改善するためのインフラストラクチャにも取り組み、将来のプルリクエストが簡単にテストを含めることができるようにします。

対象領域の縮小と組み合わせることで、コントリビューターは自信を持ってより迅速にPull Requestをマージできるようになります。

📜 公開API

Facebookは、意図しない破壊的変更を減らすために、オープンソースと同じように、公開APIを介してReact Nativeを使用します。これに対処するために、内部の呼び出しサイトの変換を開始しました。私たちの目標は、安定した公開APIに収束し、バージョン1.0でのセマンティックバージョニングの採用につなげることです。

📣 コミュニケーション

React Nativeは、貢献者数でGitHubでトップのオープンソースプロジェクトの1つです。これは私たちにとって非常に喜ばしいことであり、この状態を維持していきたいと考えています。透明性の向上やオープンな議論など、貢献者の参加を促すイニシアチブに引き続き取り組んでいきます。ドキュメントは、React Nativeを初めて使う人が最初に目にするものですが、これまでは優先事項ではありませんでした。私たちはこれを修正したいと考えており、自動生成されたAPIリファレンスドキュメントの復活、質の高いユーザーエクスペリエンスの作成に焦点を当てた追加コンテンツの作成、リリースノートの改善から始めます。

タイムライン

これらのプロジェクトは来年中に着地させる予定です。これらの取り組みのいくつかはすでに進行中であり、例えばJSIはすでにオープンソースに組み込まれています。表面積の削減など、完了にはもう少し時間がかかるものもあります。私たちはコミュニティに常に進捗状況を知らせるために最善を尽くします。React Nativeコミュニティのイニシアチブであり、このロードマップで議論されているいくつかのイニシアチブの作成につながったDiscussions and Proposalsリポジトリにご参加ください。

0.56のリリース

·6分で読めます
Lorenzo Sciandra
Drivetribeのコアメンテナー兼React Native開発者

待望のReact Native 0.56バージョンが公開されました🎉。このブログ記事では、この新しいリリースで導入された変更点のいくつかを紹介します。また、3月以来、私たちが何に忙しくしていたかを説明する機会でもあります。

破壊的変更のジレンマ、または「いつリリースするか?」

コントリビューターズガイドでは、React Nativeへのすべての変更が経る統合プロセスについて説明しています。このプロジェクトは多くの異なるツールで構成されており、すべてが適切に機能し続けるためには調整と継続的なサポートが必要です。これに、プロジェクトに貢献する活気あるオープンソースコミュニティが加わると、その途方もない規模を感じるでしょう。

React Nativeの驚異的な採用に伴い、破壊的変更は細心の注意を払って行う必要があり、そのプロセスは私たちが望むほどスムーズではありません。コアチームが新しい一連の破壊的変更を統合してテストできるように、4月と5月のリリースをスキップするという決定が下されました。専用のコミュニティコミュニケーションチャネルが使用され、2018年6月(0.56.0)のリリースが、安定版リリースを辛抱強く待っていた人々にとって可能な限り手間のかからないものとなるようにしました。

0.56.0 は完璧ですか?いいえ、世の中のすべてのソフトウェアがそうであるように、しかし、私たちは「さらなる安定性を待つ」と「テストが成功したため前進できる」というトレードオフの点で、リリースする準備ができたと感じています。さらに、最終的な0.56.0リリースで解決されていないいくつかの問題認識しています。ほとんどの開発者は0.56.0へのアップグレードで問題はないはずです。上記の理由でアップグレードできない方は、私たちの議論に参加していただければ幸いです。これらの問題の解決策について、皆様と協力できることを楽しみにしています。

0.56.0は、より安定したフレームワークへの基本的な構成要素と見なせるかもしれません。すべてのエッジケースが修正されるまでには、おそらく1〜2週間の普及が必要ですが、これにより2018年7月(0.57.0)のリリースはさらに良くなるでしょう。

このセクションを締めくくるにあたり、皆様のアプリをさらに改善するのに貢献してくれた総計818件のコミットに携わった67名の貢献者全員に感謝申し上げます👏。

それでは、早速ですが...

大きな変更点

Babel 7

ご存知の通り、JavaScriptの最新かつ最高の機能を使用できるようにするトランスパイラーツールであるBabelは、まもなくv7に移行します。この新しいバージョンにはいくつかの重要な変更が含まれているため、今がアップグレードの良い時期だと感じ、Metroその改善点を活用できるようにすることにしました。

アップグレードで問題が発生した場合は、関連するドキュメントセクションを参照してください。

Androidサポートの近代化

Androidでは、周囲のツールの多くが変更されました。私たちはGradle 3.5Android SDK 26Fresco 1.9.0、OkHttp 3.10.0、さらにはNDK APIターゲットをAPI 16に更新しました。これらの変更は問題なく適用され、ビルドの高速化につながるはずです。さらに重要なのは、来月施行される新しいPlayストアの要件に開発者が準拠できるようになることです。

これに関連して、特にDulmandakh氏が、これを可能にするために提出された多くのPRに感謝したいと思います👏。

この方向にはまだいくつかのステップを踏む必要があり、Androidサポートの更新に関する将来の計画と議論は、専用のissue(およびJSCのサイドissue)で追うことができます。

新しいNode、Xcode、React、そしてFlow – なんてことだ!

Node 8がReact Nativeの標準になりました。実はすでにテストが行われていましたが、Node 6がメンテナンスモードに入ったため、私たちは両足を前に踏み出しました。Reactも16.4にアップデートされ、多くの修正がもたらされました。

iOS 8のサポートを終了し、iOS 9がターゲットにできる最も古いiOSバージョンとなりました。iOS 8を実行できるどのデバイスもiOS 9にアップグレードできるため、これは問題にはならないと予測しています。この変更により、iOS 8を実行する古いデバイスの回避策を実装していた、めったに使用されないコードを削除できました。

継続的インテグレーションのツールチェーンはXcode 9.4を使用するように更新され、すべてのiOSテストがAppleが提供する最新の開発者ツールで実行されることを保証します。

新しいエラー形式を使用するためにFlow 0.75にアップグレードしました。これは多くの開発者が評価しているものです。また、さらに多くのコンポーネントの型を作成しました。プロジェクトでまだ静的型付けを強制していない場合は、実行時ではなくコード作成時に問題を特定するためにFlowの使用を検討してください。

その他多くのこと...

たとえば、YellowBoxは新しい実装に置き換えられ、デバッグが大幅に改善されました。

完全なリリースノートについては、こちらの完全なチェンジログを参照してください。この新しいバージョンへの移行で問題が発生しないように、アップグレードガイドに注意してください。


最後に:今週から、React Nativeコアチームは毎月の会議を再開します。会議で何が議論されたかについて全員が最新の情報を把握できるようにし、今後の会議のために皆様からのフィードバックを手元に置いておくようにします。

皆さん、楽しいコーディングを!

ロレンツォライアン、そしてReact Nativeコアチーム一同

追伸:いつものことながら、React Nativeはまだ多くの変更が行われているため、0.xバージョンであることを再度お知らせします。そのため、アップグレードする際には、はい、おそらく何かがクラッシュしたり破損したりする可能性があることを忘れないでください。問題の報告やプルリクエストの送信時にはお互いに協力し合い、強制されている行動規範に従うことを忘れないでください。画面の向こうには常に人間がいます。

月次リリースサイクル: 12月と1月のRCをリリース

·3分で読めます
Eric Vicenti
Facebook エンジニア

React Nativeが導入されて間もなく、コミュニティが新機能を導入できるように、また本番環境でのバージョンを安定させるために、2週間ごとにリリースを開始しました。Facebookでは、本番環境のiOSアプリのリリースに向けて2週間ごとにコードベースを安定させる必要があったため、オープンソースバージョンも同じペースでリリースすることにしました。現在、多くのFacebookアプリは週に一度、特にAndroidで出荷されています。週に一度masterから出荷するため、かなり安定した状態を保つ必要があります。そのため、隔週のリリースサイクルは、もはや内部の貢献者にとってもメリットがありません。

コミュニティからは、リリースのペースについていくのが難しいというフィードバックをよく耳にします。Expoのようなツールは、バージョンが急速に変化するのを管理するために、隔週のリリースをスキップする必要がありました。したがって、隔週のリリースがコミュニティにうまく機能していなかったことは明らかです。

これからは月次リリースへ

新しい月次リリースサイクルと、先月ずっと安定化され、採用準備が整った2016年12月リリース、v0.40を発表できることを嬉しく思います。(ただし、iOSのネイティブモジュールのヘッダーを更新することを確認してください)。

週末を避けたり、予期せぬ問題に対応するために数日ずれることはあるかもしれませんが、これからは各リリースが月の初めに利用可能になり、月末に正式リリースされると期待していただいて構いません。

最善のサポートを得るために当月版を使用する

1月のリリース候補版(RC)が試せるようになっています。新機能はこちらで確認できます。

どのような変更が導入されるかを確認し、React Nativeの貢献者に良いフィードバックを提供するために、可能な限り毎月のリリース候補を使用してください。各バージョンが月末にリリースされるまでには、その変更は2週間以上本番環境のFacebookアプリで出荷されています。

新しいreact-native-git-upgradeコマンドを使えば、アプリを簡単にアップグレードできます。

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

このよりシンプルなアプローチによって、コミュニティがReact Nativeの変更を追いやすくなり、新しいバージョンをできるだけ早く導入しやすくなることを願っています!

(この計画を考案してくれたMartin Konicekと、それを実現してくれたMike Grabowskiに感謝します)

Gitによるアップグレードの簡素化

·5分で読めます
Nicolas Cuillery
ZenikaのJavaScriptコンサルタント兼トレーナー

React Nativeの新しいバージョンへのアップグレードは困難でした。以前、このような画面を見たことがあるかもしれません。

これらの選択肢はどれも理想的ではありません。ファイルを上書きするとローカルの変更が失われます。上書きしないと最新のアップデートが適用されません。

本日、この問題を解決する新しいツールを紹介できることを誇りに思います。このツールは react-native-git-upgrade と呼ばれ、裏側でGitを使用して、可能な限り自動的にコンフリクトを解決します。

使用方法

要件:Gitが PATH で利用可能である必要があります。プロジェクトがGitで管理されている必要はありません。

react-native-git-upgrade をグローバルにインストールします。

$ npm install -g react-native-git-upgrade

または、Yarn を使用する場合

$ yarn global add react-native-git-upgrade

その後、プロジェクトディレクトリ内で実行します。

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注: react-native の新しいバージョンをインストールするために 'npm install' を実行してはなりません。このツールは、古いプロジェクトテンプレートと新しいプロジェクトテンプレートを比較して正しく動作する必要があります。古いバージョンのまま、上記のようにアプリフォルダ内で実行するだけです。

出力例

引数なしで react-native-git-upgrade を実行して、React Nativeの最新バージョンにアップグレードすることもできます。

AndroidとiOSのビルドファイルにおける変更を保持しようと試みるため、アップグレード後に react-native link を実行する必要はありません。

実装は可能な限り侵襲的でないように設計しました。これは、一時ディレクトリにその場で作成されたローカルGitリポジトリに完全に依存しています。プロジェクトリポジトリ(Git、SVN、Mercurialなど、どのVCSを使用しているか、あるいは何も使用していないかに関わらず)を妨害することはありません。予期せぬエラーが発生した場合、ソースは復元されます。

仕組み

重要なステップはGitパッチの生成です。このパッチには、アプリが使用しているバージョンと新しいバージョンの間でReact Nativeテンプレートに加えられたすべての変更が含まれています。

このパッチを取得するには、node_modules ディレクトリ内の react-native パッケージに埋め込まれているテンプレート(これらは react-native init コマンドが使用するのと同じテンプレートです)からアプリを生成する必要があります。そして、現在のバージョンと新しいバージョンの両方でテンプレートからネイティブアプリが生成された後、Gitはプロジェクトに適応したパッチ(つまり、アプリ名を含むパッチ)を生成できます。

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]

必要なのは、このパッチをソースファイルに適用することだけです。古いreact-native upgradeプロセスでは、小さな違いでもプロンプトが表示されていましたが、Gitは3者マージアルゴリズムを使用して変更のほとんどを自動的にマージし、最終的には見慣れた競合区切り記号を残してくれます。

    13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);

これらのコンフリクトは通常、理解しやすいものです。区切り文字 ours は「あなたのチーム」を表し、theirs は「React Nativeチーム」と見なすことができます。

なぜ新しいグローバルパッケージを導入するのか?

React Nativeには、グローバルCLI(react-native-cliパッケージ)が付属しており、node_modules/react-native/local-cliディレクトリに組み込まれたローカルCLIにコマンドを委譲します。

上記で述べたように、プロセスは現在のReact Nativeバージョンから開始する必要があります。もし実装をローカルCLIに組み込んでいたとしたら、古いバージョンのReact Nativeを使用している場合、この機能を利用することはできません。例えば、この新しいアップグレードコードが0.38.0でリリースされたばかりだった場合、0.29.2から0.38.0にアップグレードすることはできなかったでしょう。

Gitベースのアップグレードは開発者体験の大きな改善であり、誰もが利用できるようにすることが重要です。グローバルにインストールされた別のパッケージreact-native-git-upgradeを使用することで、プロジェクトが使用しているReact Nativeのバージョンに関係なく、この新しいコードを今日から使用できます。

もう一つの理由は、Martin Konicekによる最近のYeomanの廃止です。パッチを作成するために古いテンプレートを評価できるよう、これらのYeomanの依存関係をreact-nativeパッケージに戻したくありませんでした。

試してみてフィードバックをお願いします

結論として、この機能を楽しんで、改善を提案したり、問題を報告したり、特にプルリクエストを送信したりすることをためらわないでください。環境はそれぞれ少し異なり、React Nativeプロジェクトもそれぞれ異なります。すべての人にとってうまく機能させるために、皆様のフィードバックが必要です。

謝辞

ZenikaM6 Web (archived)という素晴らしい企業がなければ、これらは何も不可能でした!

Buttonの導入、Yarnによる高速インストール、そして公開ロードマップ

·3分で読めます
Héctor Ramos
エクトル・ラモス
元Facebook デベロッパーアドボケイト

React Nativeでは非常に多くの作業が行われているため、何が起こっているのか追跡するのが難しいという声を多くの人から聞いています。現在進行中の作業を伝えるために、React Nativeのロードマップを公開しました。大まかに言うと、この作業は3つの優先事項に分けられます。

  • コアライブラリ。最も有用なコンポーネントとAPIに機能を追加します。
  • 安定性。基盤となるインフラストラクチャを改善し、バグを減らし、コード品質を向上させます。
  • 開発者エクスペリエンス。React Native開発者がより速く作業できるようにします。

ロードマップに価値があると思われる機能の提案がある場合は、Cannyをチェックしてください。そこで新機能を提案したり、既存の提案について議論したりできます。

React Nativeの最新情報

本日リリースされたReact Nativeのバージョン0.37では、どのアプリにもタッチ可能なボタンを簡単に追加できる新しいコアコンポーネントが導入されました。また、新しいパッケージマネージャーであるYarnのサポートも導入され、アプリの依存関係を更新するプロセス全体が高速化されるはずです。

ボタンの導入

本日、すべてのプラットフォームで見栄えの良い基本的な<Button />コンポーネントを導入します。これは、私たちが最もよく受けるフィードバックの1つに対処するものです。React Nativeは、箱から出してすぐに使えるボタンがない唯一のモバイル開発ツールキットの1つです。

Simple Button on Android, iOS

<Button
onPress={onPressMe}
title="Press Me"
accessibilityLabel="Learn more about this Simple Button"
/>

経験豊富なReact Native開発者は、ボタンの作り方を知っています。iOSのデフォルトの外観にはTouchableOpacityを、Androidの波紋効果にはTouchableNativeFeedbackを使用し、その後いくつかのスタイルを適用します。カスタムボタンの構築やインストールは特に難しくありませんが、私たちはReact Nativeを根本的に簡単に学べるようにすることを目指しています。コアに基本的なボタンを追加することで、初心者はボタンの書式設定やTouchableのニュアンスを学ぶのに時間を費やす代わりに、初日で素晴らしいものを作成できるようになります。

ボタンはすべてのプラットフォームでうまく機能し、ネイティブに見えることを意図しているため、カスタムボタンのようなすべての機能はサポートしません。それは素晴らしい出発点ですが、既存のすべてのボタンを置き換えることを意図したものではありません。詳細については、実行可能な例を含む新しいボタンのドキュメントをチェックしてください!

Yarnを使用してreact-native initを高速化する

JavaScriptの新しいパッケージマネージャーであるYarnを使用して、react-native initを大幅に高速化できるようになりました。速度向上を確認するには、Yarnをインストールしreact-native-cliを1.2.0にアップグレードしてください。

$ npm install -g react-native-cli

新しいアプリを設定する際に「Using yarn」と表示されるはずです。

Using yarn

簡単なローカルテストでは、react-native init良好なネットワーク環境で約1分で完了しました(npm 3.10.8を使用した場合の約3分と比較して)。Yarnのインストールは任意ですが、強く推奨されます。

謝辞

今回のリリースに貢献してくださった皆様に感謝いたします。完全なリリースノートは現在GitHubで公開されています。20以上のバグ修正と新機能により、React Nativeは皆様のおかげで常に進化し続けています。

0.36: Headless JS、Keyboard API、その他

·3分で読めます
Héctor Ramos
エクトル・ラモス
元Facebook デベロッパーアドボケイト

本日、React Native 0.36 をリリースします。新機能の詳細については、こちらをお読みください。

ヘッドレスJS

Headless JSは、アプリがバックグラウンドにある間にJavaScriptでタスクを実行する方法です。たとえば、最新データの同期、プッシュ通知の処理、音楽の再生などに使用できます。現在のところ、Androidでのみ利用可能です。

まず、非同期タスクを専用のファイル(例: SomeTaskName.js)で定義します。

module.exports = async taskData => {
// Perform your task here.
};

次に、AppRegistry にタスクを登録します。

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
require('SomeTaskName'),
);

Headless JSを使用するには、必要な時にサービスを開始できるように、いくつかのネイティブJavaコードを記述する必要があります。詳細については、新しいHeadless JSのドキュメントをご覧ください!

Keyboard API

画面上のキーボードの操作がKeyboardでより簡単になりました。ネイティブキーボードイベントをリッスンし、それらに反応できるようになりました。たとえば、アクティブなキーボードを非表示にするには、Keyboard.dismiss()を呼び出すだけです。

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

アニメーション除算

2つのアニメーション値を加算、乗算、モジュロで組み合わせることは、React Nativeですでにサポートされています。バージョン0.36では、除算によって2つのアニメーション値を組み合わせることが可能になりました。計算のためにあるアニメーション値を他のアニメーション値を反転させる必要があるケースがあります。例としては、スケールを反転させる場合(2倍 --> 0.5倍)です。

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
toValue: 2,
}).start();

baのスプリングアニメーションに従い、1 / aの値を生成します。

基本的な使用法は次のようになります。

<Animated.View style={{transform: [{scale: a}]}}>
<Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

この例では、親の拡大・縮小が相殺されるため、内側の画像はまったく引き伸ばされません。さらに詳しく知りたい場合は、アニメーションガイドをご覧ください。

ダークステータスバー

StatusBarに新しいbarStyleの値dark-contentが追加されました。これにより、AndroidとiOSの両方でbarStyleを使用できるようになりました。動作は次のようになります。

  • default: プラットフォームのデフォルトを使用します(iOSではライト、Androidではダーク)。
  • light-content: 黒いテキストとアイコンを持つライトステータスバーを使用します。
  • dark-content: 白いテキストとアイコンを持つダークステータスバーを使用します。

その他

上記は0.36で変更された内容の一部にすぎません。新機能、バグ修正、および破壊的変更の完全なリストについては、GitHubのリリースノートをチェックしてください。

ターミナルで次のコマンドを実行することで、0.36にアップグレードできます。

$ npm install --save react-native@0.36
$ react-native upgrade

より良いドキュメンテーションに向けて

·5分で読めます
Kevin Lacker
Facebook エンジニアリングマネージャー

優れた開発者体験の一部は、優れたドキュメントを持つことです。良いドキュメントを作成するには多くの労力がかかります。理想的なドキュメントは、簡潔で、役に立ち、正確で、完全で、楽しいものです。最近、私たちは皆様からのフィードバックに基づいてドキュメントを改善するために懸命に取り組んでおり、これまでに導入した改善点の一部を共有したいと考えています。

インラインの例

新しいライブラリ、新しいプログラミング言語、または新しいフレームワークを学ぶとき、コードを少し書いて、試してみて、機能するかどうかを確認し、それが機能する...という美しい瞬間があります。あなたは何か現実的なものを作成しました。私たちはその直感的な体験をドキュメントに直接組み込みたいと考えました。こんな感じです。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
render() {
return (
<View style={{flex: 1}}>
<Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
Isn't this cool?
</Text>
<Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
👍
</Text>
</View>
);
}
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

Devin Abbott氏の協力を得てreact-native-web-playerモジュールを使用したこれらのインラインの例は、React Nativeの基本を学ぶのに最適な方法だと考えており、新しいReact Native開発者向けのチュートリアルでは可能な限りこれらを使用するように更新しました。ぜひ試してみてください。サンプルコードを少しだけ変更したらどうなるか疑問に思ったことがあるなら、これは調べるのに本当に良い方法です。また、開発ツールを構築していて、自分のサイトにライブのReact Nativeサンプルを表示したい場合、react-native-web-playerを使用するとそれが簡単になります。

コアとなるシミュレーションエンジンは、Nicolas Gallagher氏のreact-native-webプロジェクトによって提供されており、TextViewのようなReact Nativeコンポーネントをウェブ上に表示する方法を提供します。コードベースの大部分を共有するモバイルおよびウェブ体験を構築することに興味がある場合は、react-native-webをチェックしてください。

より良いガイド

React Nativeの一部の機能には複数の実現方法があり、より良いガイダンスを提供すべきだというフィードバックをいただきました。

NavigatorNavigatorIOSNavigationExperimentalといった異なるアプローチを比較し、どれを使用すべきかをアドバイスするナビゲーションの新しいガイドがあります。中期的な目標として、これらのインターフェースの改善と統合に取り組んでいます。短期的な目標としては、より良いガイドが皆様の生活を楽にすることを願っています。

ボタンのようなインターフェースを作成する基本的な方法と、タッチイベントを処理するさまざまな方法を簡潔にまとめた、タッチ処理に関する新しいガイドも作成しました。

私たちが高く評価したもう1つの分野はFlexboxでした。これには、Flexboxでのレイアウトの処理方法や、コンポーネントのサイズの制御方法に関するチュートリアルが含まれます。また、あまり魅力的ではありませんが、おそらく役立つであろう、React Nativeでレイアウトを制御するすべてのプロパティのリストも含まれています。

はじめに

React Nativeの開発環境をマシンにセットアップし始めると、多くのインストールと設定を行う必要があります。インストールを本当に楽しくてエキサイティングな体験にすることは難しいですが、少なくとも可能な限り迅速かつ痛みのないものにすることはできます。

開発OSとモバイルOSを最初に選択し、すべてのセットアップ手順を簡潔にまとめた新しいGetting Startedワークフローを構築しました。また、インストールプロセスを徹底的に検証し、すべてが機能することを確認し、すべての決定ポイントに明確な推奨事項があることを確認しました。無垢な同僚でテストした後、これは改善であると確信しています。

既存のアプリへのReact Nativeの統合に関するガイドにも取り組みました。Facebookアプリ自体のように、React Nativeを使用する最大のアプリの多くは、実際にはアプリの一部をReact Nativeで構築し、残りの部分を通常の開発ツールで構築しています。このガイドが、より多くの人々がこの方法でアプリを構築するのを容易にすることを願っています。

皆様の助けが必要です

皆様からのフィードバックは、私たちが何を優先すべきかを教えてくれます。このブログ記事を読んで、「より良いドキュメント?ふん。Xのドキュメントはまだゴミだ!」と考える人もいるでしょう。それは素晴らしいことです。私たちはそのエネルギーが必要です。フィードバックの種類によって、私たちにフィードバックを与える最善の方法は異なります。

不正確な説明や実際には機能しないコードなど、ドキュメントに誤りを見つけた場合は、イシューを提出してください。「Documentation」というタグを付けて、適切な担当者に回せるようにしてください。

特定の誤りではなく、ドキュメントの何かが根本的に分かりにくい場合、それはGitHubのissueにはあまり適していません。代わりに、Cannyで、改善が必要なドキュメントの分野について投稿してください。これは、ガイド作成のようなより一般的な作業を行う際に、私たちが優先順位を付けるのに役立ちます。

ここまで読んでいただき、React Nativeをご利用いただきありがとうございます!

React Native: 1年のレビュー

·2分で読めます
Martin Konicek
Facebook ソフトウェアエンジニア

React Nativeをオープンソース化してから1年が経ちました。数人のエンジニアによるアイデアから始まったものは、今やFacebook内外の製品チームで使用されるフレームワークとなっています。本日F8で、MicrosoftがReact NativeをWindowsエコシステムにもたらすことを発表しました。これにより、開発者はWindows PC、Phone、XboxでReact Nativeを構築できる可能性を得ます。また、Visual Studio Code用のReact Native拡張機能やCodePushなどのオープンソースツールとサービスを提供し、開発者がWindowsプラットフォームでReact Nativeアプリを作成するのを支援します。さらに、Samsungはハイブリッドプラットフォーム向けにReact Nativeを構築しており、開発者が数百万台のSmartTV、モバイル、ウェアラブルデバイス向けアプリを構築できるようになります。また、React Native用Facebook SDKもリリースしました。これにより、開発者はログイン、共有、アプリ分析、Graph APIなどのFacebookのソーシャル機能をアプリに組み込むのが容易になります。1年で、React Nativeはあらゆる主要プラットフォームで開発者が構築する方法を変えました。

これは壮大な道のりでしたが、まだ始まったばかりです。React Nativeが1年前にオープンソース化されてからどのように成長し、進化してきたか、その過程で直面したいくつかの課題、そして未来に目を向ける中で私たちが期待していることを振り返ります。

これは抜粋です。記事の全文はFacebook Codeでご覧ください。