レッスン1

ビデオを見るレッスン1イントロ

このレッスンでは、最も小さな問題である1文字のテキスト変更に取り組みます。そのためには、次のことを学ばなければなりません：

  • GitLab開発環境のセットアップ方法。
  • GitLabコードベースをナビゲートする方法。
  • GitLabプロジェクトでマージリクエストを作成する方法。

これら3つのことを学んだ後、GitLabチームメンバーがライブコーディングデモを行います。デモでは、小さなイシューを一つ完成させることで、学んだことを一つ一つ使っていきます。

Linked items” セクションに、今回ライブコーディングするイシューとよく似たイシューのリストがあります。

GDKとは何ですか？

ビデオをご覧ください：GDKとは？

GDK (GitLab Development Kit)はGitLabのローカルインスタンスで、開発者は自分のコンピュータでGitLabを実行し、テストすることができます。フロントエンドのみのアプリケーションとは異なり、GDKはバックエンドサービス、API、ローカルデータベースを含むGitLabアプリケーション全体を実行します。これにより、開発者は変更を加え、リアルタイムでテストし、変更を検証することができます。

GDKを使うためのヒント

  • トラブルシューティングドキュメントGDKでイシューが発生した場合は、GDKリポジトリにあるトラブルシューティングのドキュメントを参照してください。これらのリソースには、一般的な問題の解決に役立つコマンドやヒントが記載されています。
  • Railsコンソールの使用：Railsコンソールは、ローカルのGitLabインスタンスとやりとりするのに欠かせないツールです。gdk rails c を実行することでアクセスでき、機能フラグの有効化・無効化やバックエンドのオペレーションなどに使えます。
  • 常にアップデートgdk update を実行して、GDK を定期的に更新してください。このコマンドは、GitLabプロジェクトの最新ブランチ、GDKとその依存関係の最新ブランチを取得します。GDKを常に最新の状態に保つことで、GitLabの最新バージョンで作業できるようになり、最新のバグフィックスを確実に入手できるようになります。

さらにサポートが必要な場合や具体的な質問がある場合は、Discordや その他のサポートチャンネルを通じてGitLabコミュニティに連絡することができます。

GDKをローカルにインストールして使うには

ビデオをご覧ください：GDKのインストール.

最新のインストール手順については、GitLab Development Kitのドキュメントを参照してください。

以下はステップごとの概要です：

  1. 前提条件：
  2. インストール
    • GitLab Development Kit(GDK)をインストールするディレクトリを選択します。
    • ターミナルを開き、選択したディレクトリに移動します。

    • ターミナルからインストールスクリプトをダウンロードして実行します：

       curl "https://gitlab.com/gitlab-org/gitlab-development-kit/-/raw/main/support/install" | bash
    • 安全性を確保するため、信頼できるソースからのスクリプトのみを実行してください。
    • インストールには20分以上かかる場合があります。
  3. リポジトリの選択
    • GitLabのメインリポジトリをクローンする代わりに、より広いコミュニティメンバーに推奨されるコミュニティフォークを使用してください。
    • コミュニティフォークをインストールするには、提供されている指示に従ってください。
  4. GDKの構造：
    • インストール後、GDKディレクトリが作成されます。
    • GDKディレクトリの中にはGitLabプロジェクトフォルダがあります。
  5. GDKでの作業
    • GDK には、インストールを操作するためのコマンドがたくさん用意されています。これらのコマンドを実行するには、GDKまたはGitLabフォルダ内にいる必要があります。
    • GDK を起動するには、ターミナルでgdk start というコマンドを実行します。
    • ターミナルでgdk help を実行すると、利用可能なコマンドやオプションを調べることができます。

さらに質問やイシューがある場合は、ドキュメントを参照するか、コミュニティのサポートを求めることを忘れないでください。

GDKをローカルで実行する代わりにGitpodを使う場合

ビデオを見てください：GitLabでGitpodを使う.

Gitpodは、仮想マシン、特にGitLab Development Kit(GDK)を自分のマシン上で実行する代わりにGitpodサーバー上で実行できるサービスです。ウェブベースのインテグレーション開発環境(IDE) を提供し、コードを編集したりGDKのアクションを見ることができます。Gitpodは、GDK環境を素早く立ち上げたり、GDKをローカルにインストールせずに小規模なマージリクエストを行ったり、リソースが十分でないマシンでGDKを実行したりするのに便利です。

Gitpodを使うには：

  1. GitLabコミュニティフォークのウェブサイトに行き、Editを選択し、Gitpodを選択します。
  2. エディタ (VS Code デスクトップまたはブラウザ) やコンテキスト (通常はmain またはmaster ブランチ) などの設定を行います。
  3. Openを選択して Gitpod ワークスペースを作成します。この作業には20分ほどかかるかもしれません。GitLab Development Kit(GDK) が Gitpod ワークスペースにインストールされます。このインストールは、完全なGDKをダウンロードしてローカルにインストールするよりも高速です。

ワークスペースが作成されると、選んだIDEがブラウザで動いているのがわかるでしょう。必要であれば、デスクトップIDEに接続することもできます。Gitpod は、ローカルで VS Code を使うのと同じように扱えます。ブランチを作成し、コードを変更してコミットし、コミュニティフォークにプッシュします。

その他のヒント

  • ワークスペースがタイムアウトしないように、定期的にコードをプッシュすることを忘れないでください。アイドル状態のワークスペースは、最終的に破棄されます。
  • GitLabフロントエンドのインスタンスを公開するなど、必要に応じてGitpodワークスペース設定をカスタマイズしてください。
  • 分数が足りなくなったら、Discord サーバーのサポートチームに連絡してください。
  • Gitpod のワークスペースでgdk start やgdk status などのコマンドを使い、ローカルで実行しているときと同じように問題のトラブルシューティングを行ってください。

以上の手順を踏むことで、Gitpodを活用してローカルにインストールすることなくGitLab Development Kitで効率的に開発することができます。

ビデオをご覧ください：GitLabコードベースをナビゲートする方法。

GitLabコードベースのナビゲート方法を理解することは、コントリビューターにとって不可欠です。コードベースをナビゲートして特定のファイルを見つけることは難しいことですが、効率的に変更を加えたりイシューにアドレスしたりするためには非常に重要です。ここでは、ファイルを見つけ、GitLabのどこにレンダリングされているかを見つけるためのステップバイステップのプロセスを探ります。

作業しようとしているファイルがすでにわかっていて、それがレンダリングされている場所を探したい場合：

  1. ファイルの目的を理解する手がかりを集めることから始めます。ファイル自体に関連する情報、たとえばキーワードや、そのファイルの文脈を示すような特定のコンテンツを探します。
  2. また、ファイルのパス（あるいはフォルダ構造）を調べることで、そのファイルがどこでレンダリングされているのかをインサイトすることができます。GitLabの多くのルーティングは、フォルダ構造と非常によく似ています。
  3. このコンポーネントがどの機能（あるいは機能の一つ）で使われているのかがわかれば、GitLab のユーザードキュメントを活用してその機能のページに移動する方法を見つけることができます。
  4. コンポーネントの階層をたどってファイル名をグローバル検索し、コンポーネントをレンダリングする親コンポーネントを特定します。コンポーネントの階層をたどって、GitLabユーザードキュメントで検索できる機能をトレースします。
  5. GitLensのような拡張子を持つgit blame 、このファイルが変更された最近のMRを見つけることができます。ほとんどのMRには “How to validate “のセクションがあり、それをたどっていくことができます。もしMRにそれがなければ、前の変更を探し、検証ステップがあるものを見つけるまでたどってください。

どのページを修正する必要があるかわかっていて、ファイルパスを見つけたい場合、以下のことを試してみてください：

  • 翻訳変数を検索できるように、ユニークで変数を含まないコンテンツを探してください。
  • Vue Dev Toolsを使ってコンポーネント名を検索してみてください。
  • コンポーネントの HTML 内で、data-testid 、id 、またはユニークな CSS クラスのようなユニークな識別子を探し、それらの識別文字列をコードベース全体で検索します。

マージリクエストの書き方

ビデオをご覧ください：MRの上手な書き方。

マージリクエストを書くとき、注意すべき重要なことがいくつかあります：

  • あなたのMRはGitLabプロジェクトのドキュメントの永久的な一部となります。将来的には、あるコードがなぜそのように動作するのか、なぜ別の解決策を使わないのかを理解するために使われるかもしれません。
  • 少なくとも2人のエンジニアがあなたのコードをレビューします。効率化のためには（あなたが書いたコードそのものと同じように）、MRを正しくするのに少し時間をかけたほうが、他の人が読むのに早く、読みやすくなります。
  • GitLabで作成したMRは公開されます。つまり、ジョブを探すときに、特に自慢できるMRへのリンクをポートフォリオページに追加することができます。
  • MRは技術文書なので、技術的な書き方をするようにしましょう。もしテクニカルライティングが何なのかわからない場合は、Googleのテクニカルライティングのショートコースを参照してください。もしあなたがGitLabのドキュメントにも貢献しているのであれば、GitLabのテクニカルライティング基礎コースがあります。

ライブコーディング

ビデオをご覧ください：レッスン1のコード・ウォークスルー

今度はあなたが最初のMRを完成させる番です。私たちが完成させたばかりのイシューとよく似たイシューのリストが「リンクされた項目」にあります。貢献者に感謝します！(もし残っていないようでしたら、Discordや 他のサポートチャンネルでお知らせください。）