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

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

すべてのタグを表示

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

·6分で読めます
Christoph Nakazawa
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であまり使用されていない抽象化をコミュニティがより適切に管理できるようにするために、表面積を削減することに取り組んでいます。

最初のマイルストーンでは、Lean Coreプロジェクトでコミュニティに協力を求めました。その反応は圧倒的で、すべての進捗状況にほとんど追いつけないほどでした。1か月未満で完了したすべての作業をチェックしてください

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

主要なユーザー問題

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

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

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とラベル付けされた問題によって処理されていましたが、この戦略を他のライブラリ(例: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の表面を破壊するかどうかを特定します。しかし、FacebookがReact Nativeを使用する方法には違いがあります。これにより、意図せずにオープンソースでReact Nativeを破壊してしまうことがありました。

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

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

📜 パブリックAPI

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

📣 コミュニケーション

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

タイムライン

これらのプロジェクトは、今後1年程度の間に実施する予定です。これらの取り組みの一部はすでに進行中であり、例えば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サポートの更新に関する今後の計画と議論は、専用のイシュー(およびJSCに関する追加のイシュー)で追跡できます。

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

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

LorenzoRyan、そしてReact Nativeコアチーム一同

追伸:いつものように、React Nativeはまだ多くの変更が進行中であるため0.xバージョンであることを皆さんに思い出させたいと思います。したがって、アップグレードの際には、おそらく何らかの問題が発生したり、壊れたりする可能性があることを忘れないでください。問題提起やプルリクエストの提出の際にはお互いに協力し、施行されているCoCに従うことを忘れないでください。画面の向こうには常に人間がいます。

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

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

React Nativeが導入されて間もなく、私たちはコミュニティが新機能を導入するのを助け、同時にプロダクション用途でバージョンを安定させるために、2週間ごとにリリースを開始しました。Facebookでは、プロダクション用iOSアプリのリリースに向けて2週間ごとにコードベースを安定させる必要があったため、オープンソース版も同じペースでリリースすることにしました。現在、Facebookのアプリの多くは、特にAndroidで週に1回出荷されています。私たちはマスターから毎週出荷するため、かなり安定した状態を保つ必要があります。そのため、2週間ごとのリリースサイクルは、もはや社内貢献者にとっても利益になりません。

リリース速度が速すぎて追いつくのが難しいというフィードバックをコミュニティから頻繁に耳にします。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リポジトリに完全に依存しています。プロジェクトのリポジトリ(使用しているVCSがGit、SVN、Mercurial、...または何も使用していないかにかかわらず)とは干渉しません。予期せぬエラーが発生した場合は、ソースが復元されます。

仕組み

重要なステップは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-wayマージアルゴリズムを使用して変更のほとんどを自動的にマージし、最終的に使い慣れた競合区切り文字を残します。

    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バージョンから開始する必要があります。もし実装をlocal-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(アーカイブ)のおかげです!心から感謝申し上げます!

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

·3分で読めます
Héctor Ramos
Héctor Ramos
元Facebook デベロッパーアドボケイト

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

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

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

React Nativeの新機能

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

Buttonの導入

本日、すべてのプラットフォームで見栄えの良い基本的な<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のニュアンスを学ぶのに時間を費やす代わりに、初日で素晴らしいものを開発できるようになります。

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

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で公開されています。2ダース以上のバグ修正と新機能のおかげで、React Nativeは皆様のおかげで常に改善され続けています。

0.36: Headless JS、Keyboard API、その他

·3分で読めます
Héctor Ramos
Héctor Ramos
元Facebook デベロッパーアドボケイト

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

Headless 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>

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

ダークステータスバー

新しいbarStyle値がStatusBarに追加されました: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 Gallagherreact-native-webプロジェクトによって提供されています。これは、TextViewのようなReact Nativeコンポーネントをウェブ上で表示する方法を提供します。コードベースの大部分を共有するモバイルおよびウェブ体験の構築に興味がある場合は、react-native-webをチェックしてみてください。

より良いガイド

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

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

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

もう一つ取り組んだ分野はFlexboxです。これには、Flexboxでレイアウトを処理する方法と、コンポーネントのサイズを制御する方法に関するチュートリアルが含まれています。また、地味ですが、うまくいけば役立つ、React Nativeでレイアウトを制御するすべてのプロパティのリストも含まれています。

はじめに

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

新しいGetting Startedワークフローを構築しました。これにより、開発用OSとモバイルOSを事前に選択でき、すべてのセットアップ手順を1つの簡潔な場所にまとめることができます。また、インストールプロセス全体を確認し、すべてが機能することを確認し、すべての決定ポイントに明確な推奨事項があることを確認しました。無邪気な同僚でテストした結果、これは改善であると確信しています。

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

皆様の協力が必要です

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

説明が不正確だったり、実際に動作しないコードなど、ドキュメントに間違いを見つけた場合は、イシューを提出してください。「Documentation」というタグを付けて、適切な担当者に届けやすくしてください。

具体的な間違いではないが、ドキュメントの何かが根本的に分かりにくい場合は、GitHubのイシューにはあまり適していません。代わりに、助けが必要なドキュメントの分野について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を構築しており、開発者が数百万台のスマートTV、モバイル、ウェアラブルデバイス向けのアプリを構築できるようになります。また、React Native用Facebook SDKもリリースしました。これにより、開発者はログイン、共有、アプリ分析、Graph APIなどのFacebookのソーシャル機能をアプリに簡単に組み込むことができます。この1年で、React Nativeは開発者が主要なすべてのプラットフォームで構築する方法を変えました。

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

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