Web開発のためのGit：プロジェクトの典型的なワークフローを理解する

Web開発は、本質的にコラボレーションに関連しています。 ほとんどの場合、他の開発者と協力しますが、そうでない場合でも、Gitは他の多くの方法であなたを助けることができます。

Gitは、私たちが作成するアプリケーションのバージョンを制御するソフトウェアです。 これは、ソロ開発者、大企業、さらには世界最大のオープンソースプロジェクトであるLinuxでも使用されています。

Web開発者として、GitをWeb開発に適切に使用する方法を知ることは非常に重要です。 「gitadd」、「git commit」、「gitpush」について話しているだけではありません。 Gitを使用してWebプロジェクトを作成するワークフロー全体を知っておく必要があります。

まだ納得していませんか？ はじめましょう！

なぜGitを使うのですか？

これらは、Gitの使用を開始する理由のほんの一部です。

• 構成： v1、v2、v3などのフォルダーでプロジェクトを管理する代わりに、ファイルのすべてのバージョンを格納する特別なデータベースを備えた1つのプロジェクトがあります。
• コラボレーション： Gitを使用すると、競合を発生させることなく、あなたと他の人が同時に同じプロジェクトに取り組むことができます。
• オープンソース： Gitはオープンソースですが、コラボレーションして優れたオープンソースソフトウェアを作成するために使用するツールでもあります。 誰でもGitHubやBitbucketなどのプラットフォームでオープンソースプロジェクトにプルリクエストを行うことができます。
• プラットフォームの柔軟性：現在、Gitlab、GitHub、Bitbucket、SourceForgeなど、さまざまなGitホスティングサービスから選択できます。 すべてのプロジェクトにセルフホストソリューションを使用することもできます。
• 簡単なバックアップ：間違いを簡単に元に戻し、プロジェクトのコードベースを失うことはありません。

GitHubという用語については1〜2回言及しましたが、GitとGitHubの違いは何ですか？

Gitをまったく使用したことがない場合、これは混乱を招く可能性があります。 簡単に言えば、GitとGitHubは関連していますが、異なるツールです。

Gitはファイルの変更を管理するために使用するバージョン管理システム（VCS）であり、GitHubはプロジェクトファイルとそのGit履歴をオンラインで保存するために使用するサービスです（プロジェクトの.git /フォルダーにあります）。 。

Gitはローカルのマシンにインストールされ、GitHubやGitLabなどのサービスをホストしないと、他の開発者とのコラボレーションは非常に困難になります。

GitHubは、クローン作成、フォーク、マージなど、コラボレーションを改善する他の機能を追加することでGitを強化します。 これら2つのツールを組み合わせることで、プロジェクトを開発、管理し、他の人に見せるための比較的フレンドリーなエコシステムを実現できます。

Web開発ワークフローの基本的なGit

次のセクションでは、実践的な練習を通じて、Web開発のためのGitワークフローについて詳しく学びます。

インストール要件

Gitをまだインストールしていない場合は、これが最適なタイミングです。 インストールは簡単で、ほとんどのオペレーティングシステムで利用できます。

公式ダウンロードページからダウンロードするか、LinuxまたはmacOSを使用している場合はパッケージマネージャーを使用してインストールします。

インストールですべてがうまくいったことをテストするには、アプリケーションメニューで「ターミナル」を検索するか、WindowsでGit bash（デフォルトでGitにインストールされています）を開いて、LinuxまたはmacOSでターミナルを起動します。

次に、次のように入力します。

 git --version

応答としてGitバージョンを取得した場合は、問題ありません。

GitHubアカウントも必要になるため、必ずGitHubにサインアップまたはログインしてください。

Gitをインストールし、GitHubアカウントにログインしたら、次のセクションに進むことができます。

共同プロジェクトの基本的なGitワークフロー

前述のように、ほとんどの場合、ソロプロジェクトを開発することはありません。 コラボレーションは重要なスキルであり、GitとGitHubは、シンプルでありながら効果的なプロセスにするのに役立ちます。

Gitプロジェクトの一般的なワークフローは次のようになります。

1. リポジトリまたはリポジトリのクローンを作成して、プロジェクトのローカルコピーを取得します。 共同作業をしている場合は、最初にリポジトリをフォークする必要があります。
2. 作業する機能の代表的な名前でブランチを作成します。
3. プロジェクトを編集します。
4. ローカルマシンに変更をコミットします。
5. 変更をリモートリポジトリにプッシュします。
6. 元のリポジトリへのプルリクエストを作成します。
7. 元のリポジトリのメインブランチで競合をマージして解決します。

チュートリアル

さあ、手を汚しましょう！

このガイドでは、簡単なHTMLWebサイトを作成します。 実用的な目的で、ベースプロジェクトをHTMLサイトリポジトリからGitHubアカウントにフォークします。 これは、公開されているすべてのリポジトリに対して実行できます。

HTMLサイトをフォークするには、このGitHubリポジトリに移動し、ページの右上にある[フォーク]ボタンをクリックします。

これで、GitHubアカウントでのみ利用できる元のリポジトリのフォークができました。 変更のコミットを開始するまでは、まったく同じリポジトリです。

ご覧のとおり、公開リポジトリのフォークには数秒しかかかりません。 これはオープンソースプロジェクトには最適ですが、組織にプライベートリポジトリがある場合は、フォークする前にコントリビューターとして含める必要があることに注意してください。

フォークをローカルマシンに持ってくる時が来ました。 これを行うには、コマンドgit cloneを使用してクローンを作成する必要があります。このコマンドは、リモートサーバーからGitリポジトリを取得します。

 git clone remote_url

remote_urlをフォークのURLに置き換える必要があります。 GitHubリポジトリの正確なURLを取得するには、そのページに移動して[コード]をクリックします。 次に、 SSHを選択し、それが提供するリンクをコピーします。

フォークされたリポジトリのクローンを作成するために実行するコマンドは次のとおりです。

 git clone [email protected]:yourusername/HTML-site.git

リポジトリのクローンを作成すると、その名前のフォルダーが作成されます。 そのフォルダーの中には、プロジェクトのソースコード（この場合はHTMLサイト）と、 .gitという名前のフォルダーの中にあるGitリポジトリがあります。

グラフィカルファイルマネージャで新しいフォルダを開くか、 lsまたはdirコマンドを使用してターミナルから直接ファイルを一覧表示することにより、新しいディレクトリ内のファイルの一覧を表示できます。

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

このHTMLサイトは非常にシンプルです。 実用的な目的でBootstrapを使用し、Unsplashからいくつかの写真を使用して、サイトの無料画像をダウンロードできます。

ブラウザでindex.htmlファイルを開くと、いくつかの画像を含む簡単なページが表示されます。

このプロジェクトをいじくりまわす時が来ました。 非常に空っぽに感じられ、サイト名のヘッダーがユーザーエクスペリエンスを向上させる可能性があります。

これを行うには、 HTMLサイトディレクトリに入り、 headerという名前のブランチを作成します。 この新しいブランチでは、メイン（元の）ブランチに影響を与えないため、すべてのファイルを編集して、必要な数のコードを実装できます。

次のコマンドを実行します。

ニュースレターにサインアップ

トラフィックを1000％以上増やした方法を知りたいですか？

インサイダーのWordPressのヒントを含む週刊ニュースレターを受け取る20,000人以上の他の人に参加してください！

今すぐ購読

git checkout -b header

これにより、「header」という名前のブランチが作成され、この直後にそのブランチに切り替わります。 これは次と同等です。

 git branch header git checkout header

すべてが正常に行われたことを確認するには、次を実行します。

 git status # On branch header # nothing to commit, working tree clean

「main」ブランチから「header」ブランチにシフトしたことがわかりますが、ファイルを編集していないため、作業ツリーはまだクリーンです。

お気に入りのコードエディタで、分岐したプロジェクトのindex.htmlファイルを開きます。 このファイルには、Bootstrap 5へのリンクがいくつか含まれているため、フレームワークのすぐに使用できるコンポーネントを利用できます。

<body>タグ内で画像コンテナの上にあるindex.htmlファイルに次のコードを追加します。

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

はるかに見栄えが良い！ 他のブランチや変更を自由に行ってください。

プロジェクトの編集が完了したら、すべての変更をローカルリポジトリにコミットします。 プロジェクトディレクトリ内で、ターミナルに次のように入力します。

 git add --all git commit -m "Added simple header in index.html file"

プロジェクトを最初に開始するときは、説明的なコミットメッセージが表示されるのが一般的ですが、時間の経過と焦点のシフトにより、メッセージの品質が低下する傾向があります。 良い命名慣行に遅れずについていくようにしてください。

これで、ローカルリポジトリ（まだコンピュータでのみ使用可能）にコミットしたので、それをリモートリポジトリにプッシュします。

通常どおりコミットをプッシュしようとすると、現在headerブランチで作業しているため、コミットは機能しません。 headerのアップストリームブランチを設定する必要があります：

 git push --set-upstream origin header

2021年8月13日以降、GitHubではSSH認証を使用する必要があるため、キーが正しく設定されていることを確認してください。

この後、フォークされたリポジトリ（ https://github.com/yourusername/HTML-site/branchesなど）にheaderという名前の新しいブランチが表示されるはずです。

元のリポジトリへのプルリクエストを作成するには、[アクティブなブランチ]セクションの[比較]をクリックします。

これにより、プルリクエストが表示されます。ここで、マージするブランチ（元のブランチまたはフォーク）を選択する必要があります。 デフォルトでは、ベースリポジトリとマージするオプションが表示されます。

プルリクエストオプションをクリックしたら、以前のコミットと同様に、加えられた変更の簡単な説明を書き込む必要があります。 繰り返しになりますが、簡潔でありながら説明的であるようにしてください。

[プルリクエストの作成]ボタンをクリックして、ベースリポジトリの所有者が変更を受け入れるかフィードバックを提供するのを待ちます。

おめでとうございます—これで、Web開発用の一般的なGitワークフローのすべてのステップが完了しました。

これは本当に基本的な例でしたが、ロジックはすべてのサイズのプロジェクトにまたがっています。 大規模な共同プロジェクトでも、このワークフローを緊密に実装するようにしてください。

KinstaでGitを使用する方法

Kinstaユーザーの場合、MyKinstaポータル内からGitとGitHubを使用する2つの方法がすでにあります。

最初のオプションから始めましょう。 GitHub、Gitlab、BitbucketなどのGitホスティングサービスから簡単にSSHで接続してリポジトリをプルできます。

これを行うには、[サイト]タブに移動し、サイトを選択して、[SSHの詳細]セクションに移動し、SSHターミナルコマンドをコピーします。

上記のコマンドをターミナルに貼り付け、サイトのパブリックフォルダー（ / www / yoursitename /の下にあります）にアクセスして、SSH経由でサイトにログインします。 ここにすべてのWordPressファイルが配置されているので、作業中のカスタムテーマまたはプラグインを使用してGitリポジトリをプルダウンできます。

簡単なコマンドでGitリポジトリをプルダウンする方法は次のとおりです。

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

ここで、Kinstaに新しいGitHubデプロイメント機能を導入すると、GitHubリポジトリから完全なWordPressサイトをデプロイできます。

GitHubリポジトリには、WordPressコアファイルのコピーが含まれている必要があります。もちろん、サイトのコンテンツはwp-contentフォルダー内に含まれている必要があります。

このオプションを簡単に見てみましょう。

会社のサイトの1つにアクセスして、ステージング環境を作成します。 これは数分以上かかることはありません。

ステージングサイトに移動したら、[展開]タブに移動し、[セットアップの開始]ボタンをクリックします。 KinstaがGitHubアカウントに接続できるようにするGitHubモーダルが表示されます。

次に、サイトをプルするリポジトリを選択します。

最後に、サイトを展開し、ステージングサイトのURLからアクセスします。

この機能はまだベータ版ですが、まもなくすべてのKinstaユーザーがアクセスできるようになります。

GitとKinstaの使用は、それらを上手に使用することがわかっている場合、強力な組み合わせになる可能性があります。 ここでのチュートリアルは簡単な例を示していますが、Gitナレッジベースの記事からさらに多くのことを学ぶことができます。

概要

今日、GitはWeb開発に欠かせないツールです。ほとんどの場合、他の人と協力して可能な限り最高のプロジェクトを作成するからです。

この記事では、プロジェクトでGitを使用するいくつかの重要な理由について説明し、Gitリポジトリでのコラボレーションの基本的なワークフローを示しました。

Gitは非常に強力なツールであるため、WordPressホスティングにも使用を拡張できるため、Web開発スキルの武器の一部としてGitを学習して実装することだけがメリットになります。

Web開発のためのこの基本的なGitワークフローを改善するための他の提案はありますか？ コメント欄でお知らせください！