プルリクエストの作成方法
これらの手順は、React Native のコアリポジトリに貢献するためにマシンをセットアップし、最初のプルリクエストを作成するためのステップバイステップのプロセスを提供します。
序章：準備
React Native のビルドと開発には、いくつかのツールと依存関係が必要です。これらは、「ネイティブコードでのプロジェクトの構築」セクションの環境設定ガイドで説明されています。
プルリクエストを受け入れるためには、コントリビューターライセンス契約 (CLA) を提出していただく必要があります。Meta のオープンソースプロジェクトに貢献するためには、一度だけこれを提出すれば十分です。わずか1分で完了しますので、依存関係がインストールされるのを待つ間に実行できます。
第1章：オープンソースへようこそ
1. git のインストール
React Native のソースコードは GitHub でホストされています。git コマンドラインプログラムを通じて git バージョン管理と対話できます。GitHub の指示に従って、お使いのマシンに git をセットアップすることをお勧めします。
2. ソースコードの取得
GitHubで React Native のソースコードを閲覧できますが、ローカルマシンにフォークを設定することをお勧めします。
- https://github.com/facebook/react-native にアクセスします。
- 右上の「Fork」ボタンをクリックします。
- 尋ねられたら、このフォークのホストとしてあなたのユーザー名を選択します。
これで、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つのリモートが設定されています。
- アップストリームのhttps://github.com/facebook/react-native リポジトリの
origin - あなたの GitHub アカウント上の React Native のフォークの
fork。
3. ブランチの作成
変更履歴を追跡するために、フォークに新しいブランチを作成することをお勧めします。
git checkout -b 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 言語サービスやその他のエディター設定が正しく構成されるはずです。 - Android Studio: リポジトリのルートフォルダー (
.idea設定ディレクトリを含む) を開きます。 - Xcode:
packages/rn-tester/RNTesterPods.xcworkspaceを開きます。
3. 変更点の実行
rn-tester パッケージは、変更を実行し検証するために使用できます。RNTester readme で詳細を確認できます。
4. 変更点のテスト
変更が正しく、テストの失敗を引き起こさないことを確認してください。テストの実行と記述で詳細を確認できます。
5. コードのリンティング
React Native のコアリポジトリで使用されている各言語のスタイルを把握し、慣れるまでには時間がかかることを理解しています。開発者が細かいミスを心配する必要がないように、可能な限り、規約に従ってコードを書き換えるプロセスを自動化するツールを使用しています。
例えば、JavaScript コードのフォーマットには Prettier を使用しています。これにより、エディタとの統合を通じて、または手動で yarn run prettier を実行することで、Prettier が自動的にフォーマットの問題を修正できるため、時間と労力を節約できます。
また、コードに存在する可能性のあるスタイル上の問題を検出するためにリンターを使用しています。yarn run lint を実行することで、コードスタイルの状態を確認できます。
コーディング規約の詳細については、コーディングスタイルガイドを参照してください。
6. 変更点の表示
多くの人気エディタは、何らかの形でソース管理と統合されています。また、コマンドラインで git status と git diff を使用して、変更された内容を追跡することもできます。
第3章：変更の提案
1. 変更のコミット
git を使用して、変更をバージョン管理に追加することを忘れないでください。
git add <filename>
git commit -m <message>
コミットメッセージには、短く説明的な文を使用できます。
良い Git コミットメッセージを書くことに不安を感じていますか？心配いりません。後で、あなたのプルリクエストがマージされるとき、すべてのコミットは単一のコミットに squash されます。この squash されたコミットのメッセージを生成するために使用されるのは、あなたのプルリクエストの説明です。
このガイドは、あなたの最初の貢献を支援するのに十分な情報を提供しています。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 のコアリポジトリにマージされる準備ができるように、建設的で実行可能なフィードバックを提供するために最善を尽くします。