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

プルリクエストを開く方法

この手順では、コアとなるReact Nativeリポジトリに貢献し、最初のプルリクエストを作成するために、マシンをセットアップする手順をステップバイステップで説明します。

プロローグ：準備​

React Nativeのビルドと開発には、いくつかのツールと依存関係が必要です。これらは、「ネイティブコードを使用したプロジェクトのビルド」セクションの環境設定ガイドの一部として説明されています。

プルリクエストを受け入れるには、貢献者ライセンス契約（CLA）を提出する必要があります。Metaのオープンソースプロジェクトで作業するには、一度だけこれを行う必要があります。所要時間はわずか1分なので、依存関係のインストールを待つ間に実行できます。

第1章：オープンソースへようこそ​

1. gitをインストールする​

React NativeのソースコードはGitHubでホストされています。 gitコマンドラインプログラムを使用して、gitバージョン管理と対話できます。マシンにgitをセットアップするには、GitHubの指示に従うことをお勧めします。

2. ソースコードを取得する​

GitHubでReact Nativeのソースコードを参照できますが、ローカルマシンにフォークを設定することをお勧めします。

  1. https://github.com/facebook/react-nativeにアクセスします。
  2. 右上の「Fork」ボタンをクリックします。
  3. 尋ねられたら、このフォークのホストとしてユーザー名を選択します。

これで、GitHubのhttps://github.com/your_username/react-nativeにReact Nativeのフォークが作成されます。次に、ローカルマシンのソースコードのコピーを取得します。シェルを開き、次のコマンドを入力します

git clone https://github.com/facebook/react-native.git
cd react-native
git remote add fork https://github.com/your_username/react-native.git
注記

上記が初めての場合は、恐れることはありません。macOSとLinuxではターミナルアプリケーション、WindowsではPowerShellを介してシェルにアクセスできます。

コアReact Nativeリポジトリの内容を含む新しいreact-nativeディレクトリが作成されます。このディレクトリは、実際にはReact Native gitリポジトリのクローンです。2つのリモートで設定されています

3. ブランチを作成する​

変更を追跡するために、フォークに新しいブランチを作成することをお勧めします

git checkout --branch my_feature_branch --track origin/main

第2章：変更の実装​

1. 依存関係をインストールする​

React Nativeは、Yarn Workspaces（Yarn Classic）によって管理されるJavaScriptモノレポです。

プロジェクトレベルのインストールを実行します

yarn

また、react-native-codegenパッケージを一度ビルドする必要があります

yarn --cwd packages/react-native-codegen build

2. コードを変更する​

これで、選択したコードエディターを使用してプロジェクトを開くことができます。 Visual Studio CodeはJavaScript開発者に人気があり、React Nativeに一般的な変更を加える場合にお勧めします。

IDEプロジェクトの設定

  • **VS Code**：react-native.code-workspaceファイルを開きます。これにより、拡張機能の推奨事項が表示され、Flow Language Serviceと他のエディター設定が正しく構成されます。
  • **Android Studio**：リポジトリのルートフォルダー（.idea設定ディレクトリを含む）を開きます。
  • **Xcode**：packages/rn-tester/RNTesterPods.xcworkspaceを開きます。

3. 変更をテストする​

変更が正しく、テストの失敗を引き起こさないことを確認してください。テストの実行と記述で詳細を学ぶことができます。

4. コードをリントする​

コアReact Nativeリポジトリで使用されている各言語のスタイルを理解するには、時間がかかる場合があることを理解しています。開発者は軽微な問題について心配する必要がないため、可能な限り、コードを規約に従って書き直すプロセスを自動化するツールを使用します。

たとえば、JavaScriptコードのフォーマットにはPrettierを使用しています。これにより、Prettierのエディター統合を介して、または手動でyarn run prettierを実行することで、フォーマットの問題を自動的に修正できるため、時間と労力を節約できます。

また、コードに存在する可能性のあるスタイルの問題をキャッチするために、リンターも使用します。 yarn run lintを実行することで、コードスタイルの状態を確認できます。

コーディング規則の詳細については、コーディングスタイルガイドを参照してください。

5. 変更を確認する​

多くの人気エディターは、何らかの方法でソース管理と統合されています。コマンドラインでgit statusとgit diffを使用して、変更内容を追跡することもできます。

第3章：変更の提案​

1. 変更をコミットする​

gitを使用して、変更をバージョン管理に追加してください

git add <filename>
git commit -m <message>

コミットメッセージには、短い説明的な文を使用できます。

注記

優れたgitコミットメッセージの書き方が心配ですか？心配しないでください。後でプルリクエストがマージされると、すべてのコミットが1つのコミットにまとめられます。このスカッシュコミットのメッセージを入力するために使用されるのは、プルリクエストの説明です。

このガイドでは、最初の貢献に役立つ十分な情報を網羅しています。GitHubには、gitを使い始めるのに役立つリソースがいくつかあります

2. 変更をGitHubにプッシュする​

変更がバージョン管理にコミットされたら、GitHubにプッシュできます。

git push fork <my_feature_branch>

すべてがうまくいけば、プルリクエストを開くように促すメッセージが表示されます

remote:
remote: Create a pull request for 'your_feature_branch' on GitHub by visiting:
remote:      https://github.com/your_username/react-native/pull/new/your_feature_branch
remote:

表示されたURLにアクセスして、次の手順に進みます。

3. プルリクエストを作成する​

もうすぐです！次の手順は、プルリクエストに入力することです。長すぎないわかりやすいタイトルを使用してください。次に、デフォルトのプルリクエストテンプレートによって提供されるすべてのフィールドに入力してください

  • **概要：**このフィールドを使用して、このプルリクエストを送信する動機を説明します。何を修正していますか？
  • **変更履歴：**プルリクエストがマージされた場合に変更される内容の簡単な説明を提供することにより、リリースメンテナーがリリースノートを作成するのを支援します。
  • **テスト計画：**変更をどのようにテストしたかをレビュアーに知らせてください。エッジケースを考慮しましたか？変更が目的の効果をもたらすことを確認するために、どのような手順に従いましたか？詳細については、テスト計画とは？を参照してください。

4. フィードバックを確認して対処する​

GitHubのプルリクエストに残されたコメントやレビューのフィードバックに注意してください。メンテナーは、変更をコアReact Nativeリポジトリにマージする準備を整えるために、建設的で実行可能なフィードバックを提供するために最善を尽くします。