チュートリアル: WebStorm で Git 入門

1. WebStorm を起動し、 ようこそ 画面で 新規 プロジェクト をクリックしてください。

2. 新規プロジェクト ウィザードで、 新規プロジェクト リストから project タイプを選択し（このチュートリアルでは 空の プロジェクト を作成します）、project の名前（例: gitdemo ）を指定し、場所のパスを入力します。

   Git リポジトリの作成 オプションを選択してください。

   

3. 作成 をクリックしてください。 新しい project が WebStorm で開きます。

1. プロジェクト ツールウィンドウ（Alt+1 ）で、project ディレクトリ（gitdemo ）を選択します。

2. ツールウィンドウのツールバーにある 新規ファイルまたはディレクトリ をクリック（または Alt+Insert を押す）し、リストから ファイル を選択します。 ファイル名を README.md にして Enter を押します。

3. 開いたダイアログで、 追加 をクリックして、Git がファイルの追跡を開始できるようにします。

   

   これからは、このファイルを変更すると WebStorm が自動的に変更をインデックス化（つまり Git ステージングエリアに追加）するため、手動で追加する必要はありません。

4. 新しく作成したファイルに次のテキストを追加します。

   # Tutorial This is a tutorial where you will learn how to create Git repositories from your projects and share them on GitHub.

   Enter キーを押して、このテキストの後に新しい行がファイル内に作成されるようにしてください。 これは後ほど、マージの競合を解決する方法を学ぶ際に使用します。

   

1. コミット ツールウィンドウ（Alt+0 ）で、コミットしたいファイルの横にあるチェックボックスをクリックして選択します。

2. 最初のコミット用メッセージを入力してください（例: Add a new project to Git）：

   

3. コミット をクリックしてください。

   お使いのコンピューターで Git を使用したことがない場合は、コミット直前に WebStorm がユーザー名とメールアドレスの入力を求めます。 Git はこれらの情報を .git/config に保存し、コミットの作成者としてあなたを割り当てます。

   コミットが成功した後、WebStorm から通知されます：

   

1. メインメニューで Git | GitHub | GitHub でプロジェクトを共有 へ移動します。

2. 表示されるダイアログでは、リポジトリ名（デフォルトでは project 名と同じ）、リモート名（デフォルトは origin ）、リポジトリの種類（public または private）を選択し、必要に応じて説明を追加できます。

   リポジトリ名 と リモート のフィールドはデフォルト値のままにしてください。 非公開 オプションを選択してください。

   GitHub に登録されていない場合は、 アカウントの追加 をクリックしてから GitHub でログイン をクリックします。

   

   開いたブラウザーウィンドウに GitHub の認証情報を入力するか、そこで新しいアカウントを作成してください。 WebStorm に戻ると、 共有する フィールドにアカウント名が表示されます。

3. 共有 をクリックしてください。 プロジェクトが GitHub で正常に公開されると、次の通知が表示されます。

   

   通知のリンクをクリックして、GitHub のリポジトリを開きます。

1. Ctrl+T または Git | プロジェクトの更新 を押します。 表示された プロジェクトの更新 ダイアログでは、デフォルトのマージオプションのままにしてください。 OK をクリックして、現在のブランチの最新バージョンを取得します。

   

2. VCS ウィジェットには、現在のブランチ名 — main が表示されます。 それをクリックし、 ローカル ノードで main ブランチを選択し、 「メイン」からの新しいブランチ を実行します。

   

3. 開いたダイアログで、ブランチの名前（例: new_feature ）を指定し、 ブランチをチェックアウトする オプションを選択すると、すぐに新しいブランチに切り替わります。

   

   これで、新しく作成されたブランチに切り替わります。

   

1. project に新しいファイル（例： git-features.md ）を追加し、WebStorm から Git バージョン管理に追加を提案されたら 追加 をクリックしてください。

   その後、 README.md ファイルを開き、既存のテキストを新しい説明に置き換えます。

   # Demo This is a demo project where you will learn how to commit and push changes, create and merge branches. Refer to `git-features.md` to check the list of Git operations.

   プロジェクト ツールウィンドウ（Alt+1 ）やエディタタブでは、WebStorm によりファイルに異なる色が付けられます。変更済みファイルには青、新規追加ファイルには緑が使われます。 さらに、変更されたファイルのガター領域には、修正行のそばに色付きの変更マーカーが表示されます。

   

2. 具体的に何が変更されたかを確認するには、ガターマーカーをクリックします。

   

   別のエディタータブで違いを表示するには、 行の差異を表示 をクリックしてください。

   

3. すべての変更を一度にプレビューするには、 コミット ツールウィンドウ（Alt+0 ）に移動してください。 ファイルをダブルクリックすると、エディターで差分ビューが開きます。

   

   詳細は Git リポジトリの変更を調査する をご覧ください。

1. コミット ツールウィンドウ（Alt+0 ）で、両方のファイルの横にあるチェックボックスを選択し、コミットメッセージ（例: Update README.md ）を入力します。

   コミットメッセージを入力する際、project ファイル名には 自動補完 （Ctrl+Space ）を使用できます：

   

   コミット をクリックしてください。

2. Ctrl+Shift+K をプッシュするか、メインメニューから Git | プッシュ を選択して、変更内容をリモートリポジトリにプッシュします。 「コミットのプッシュ 」ダイアログが開きます。 ここで、プッシュされるすべてのコミットと、影響を受けるすべてのファイルを確認できます。

   変更をプッシュする前に、各ファイルの違いを確認できます。 これを行うには、ファイルを右クリックして 差分の表示 を選択するか、 Ctrl+D をプッシュします。

   

3. プッシュ をクリックしてください。

   その後、WebStorm はすべての変更を GitHub 上のリモートリポジトリへプッシュします。

ブランチのマージ

1. Git ブランチ ウィジェットで main ブランチを選択し、 チェックアウト をクリックします。

2. ステップ 6 では、 new_feature ブランチ内の README.md ファイルを変更しました。 次に、マージの競合をシミュレートするために、 main ブランチ内のテキストをもう一度更新してみましょう。

   # Tutorial This is a test project where you will learn how to work with the most popular Git operations.

   ステップ 2 で行ったように、このテキストの後に新しい行が作成されるように、 Enter を押してください。 これは、後々の競合解決に役立ちます。

3. ステップ 7 の説明に従って変更をコミットしてプッシュします。 コミットメッセージを記述します (例: Add information about Git tutorial)。

4. VCS ウィジェットの ローカル ノードで、 new_feature を選択し、 「new_feature」を「main」にマージする をクリックします。

   

競合の解決

1. 競合 ダイアログには、競合を解決するためのいくつかのオプションがあります。

   • 自分側を適用 は、現在のブランチで行われた変更を保持します。

   • 相手側を適用 は、現在のブランチにマージする変更を適用します。

   • 専用のダイアログで手動で競合を解決するには、 マージ。

   マージ をクリックしてください。 リビジョンをマージ ダイアログが開きます。

   

   • メインからの変更点 と呼ばれる左側のペインには、ローカルコピーからの読み取り専用の変更が表示されます。

   • new_feature からの変更点 と呼ばれる右側のペインには、 main にマージする new_feature ブランチからの読み取り専用の受信変更が表示されます。

   • 結果 と呼ばれる中央のペインは、競合を解決した結果を表示する、完全に機能するエディターです。

2. このダイアログでは、 / をクリックして変更を承認するか、 をクリックして変更を却下し、中央の 結果 ペインにコードを入力できます。 詳しくは Git の競合を解決する をご覧ください。

   左ペインの main からの変更を 1 つ受け入れるために、 をクリックします。 同じ行に対する new_feature からの変更は不要なので、右ペインの赤い競合行にある をクリックして破棄します。

   new_feature からの残りの競合しない変更については、右側のペインで をクリックします。

   中央のパネルで結合結果を確認します。 結合されたテキストは次のようになります。

   # Demo This is a test project where you will learn how to work with the most popular Git operations. Refer to `git-features.md` to check the list of Git operations.

   

3. 適用 をクリックしてください。

   WebStorm は new_feature ブランチを main ブランチにマージします。

4. Ctrl+Shift+K をプッシュするか、メインメニューから Git | プッシュ を選択して、変更をリモートリポジトリにプッシュします。

main ブランチ内の README.md ファイルを開きます。 これらの変更がどのコミットからのものなのかを確認するには、次のいずれかを実行します。

• エディター内または プロジェクト ツールウィンドウ（Alt+1 ）でファイルを右クリックし、「Git | 履歴の表示 」を選択します。 Git ツールウィンドウの ヒストリー タブが開きます。

  

  このタブでは、ファイルに影響を与えたすべてのコミットを表示し、関心のある変更が追加されたコミットを確認できます。

• エディターで、履歴を表示したいコード断片を選択し、選択範囲を右クリックして「Git | 選択範囲の履歴を表示​ 」を選択します。 すると、「選定の歴史 」ダイアログが開きます。

  

  ここでは、関心のあるコード選択に影響を与えたすべてのコミットを確認できます。