サンプル コードを検索して理解する

GitHub のコードから学ぶ方法

GitHub のプロジェクトから学ぶのは、新しい手法を学び、自分のプロジェクトのインスピレーションを得ることができるすばらしい方法です。

ただし、GitHub には何百万もの公開リポジトリがあるため、自分のプロジェクトに適用できるコードを見つけるのは大変な作業です。 ぴったりのリポジトリを見つけても、コードベースを調べて役立つサンプルを見つけるのは難しい場合があります。

プロジェクト全体を理解しようとするのではなく、1 つの機能または関数を選び、それがどのように機能するかを確認することをお勧めします。 Copilot Chat と GitHub の検索機能を使って機能を見つけ、コードベース全体でそれを追跡することができます。 バックエンドからフロントエンドに至るまでこの機能がどのように機能するかを確認できるため、これは学習に最適な方法です。

このガイドでは、Jekyll Web サイト上のファイルからデータを読み込んで表示する方法を学ぶシナリオ例に従って、両方の方法について学びます。 その後は、そのヒントや手法を他のプロジェクトやプログラミング言語に適用できるようになります。

サンプル プロジェクトを検索する

最初の手順は、学ぶのに適したプロジェクトを見つけることです。

Copilot Chat を使ってリポジトリを特定する

学習に役立つコードを含むプロジェクトを見つける最も簡単な方法は、Copilot Chat に、条件と一致するリポジトリを検索するよう依頼することです。

Copilot Chat を開いて、汎用チャットを開始します。 次に、次のように質問します。

Jekyll を使ってリポジトリ内のファイルのデータを表示するという、人気のリポジトリをいくつか見つけることはできますか?

関連するリポジトリへのリンクが Copilot から返されたら、リポジトリに関するフォローアップの質問をすることができます。

多くの場合、Copilot からは、最後の回答としてその他の結果を含む GitHub 検索へのリンクが返されます。 次に、これらの結果をレビューします。

検索を使ってその他のオプションを特定する

Copilot により、検索結果へのリンクが表示された場合は、そのリンクをクリックします。 それ以外の場合は、以下の手順に従って独自の検索クエリを作成します。

1. [Advanced search] に移動します。
2. [Advanced options] セクションで、[Written in this language] ドロップダウンを使ってプログラミング言語を選びます。 Jekyll サイトの場合は、[HTML] を選びます。
3. 必要に応じて、[Repositories options] の [With this many stars] の横に「>150」と入力します。 これは、適切に管理され、人気があるリポジトリを見つけるのに役立ちます。
4. ページの上部に戻り、[Search] をクリックします。

プロジェクトを選ぶ

Copilot と検索の結果を確認したら、github/choosealicense.com リポジトリを使います。 このリポジトリには、ライセンスの選択に関するページ (オープンソース ライセンスに関する情報を共有する Jekyll Web サイト) のソース コードが含まれています。

特に注目するのは、データ ファイルの人気のあるオープンソース ライセンスを表示している「Licenses」(ライセンス) ページです。

プロジェクト内での方向性を決める

データ ファイルを表示するコードを掘り下げる前に、リポジトリの概要について確認しておきましょう。

初めてリポジトリにアクセスする場合、どこから始めればよいのか判断するのが難しい場合があります。 各プロジェクトはそれぞれ独自の方法で編成されていますが、共通の文書化手法があるため、通常は方向性を把握する際に利用できます。

README.md ファイル

README.md ファイルを読むことを常にお勧めします。これはリポジトリのフロント ページであり、ファイル一覧の下に自動的に表示されます。 メンテナによって含まれる情報は異なりますが、多くの場合、プロジェクトに関する情報、ローカル コンピューター上でのビルド方法、ドキュメントへのリンクが記載されています。

github/choosealicense.com リポジトリの README.md ファイルには、ライセンス ファイルの保存場所 (/_licenses)、各ライセンスが持つことができる属性、コンピューター上で Web サイトを実行する方法が説明されています。

Copilot Chat の使用

README.md ファイルで不明な点がある場合は、Copilot に質問して、リポジトリ内を調べて機能を見つけることができます。

Copilot Chat を開くには、検索バーの横にある [ GitHub Copilot] アイコンをクリックして、質問を入力します。 次に例を示します。

この Jekyll Web サイトのメイン ランディング ページは何ですか?

リポジトリについて Copilot に質問すると、関連するファイルを取得し、機能内でそれらが果たす役割の説明と、リンクを表示することができます。

リポジトリの wiki

もう 1 つの考えられる情報源は、リポジトリの wiki です。これは、ドキュメントをホストするリポジトリのセクションです。 GitHub のすべてのリポジトリには Wiki を使う機能が備わっていますが、すべてのリポジトリで使われているわけではありません。 Wiki にアクセスするには、リポジトリの [Wiki] タブをクリックします。

リリース

リポジトリのソース コードが実行可能ファイルに組み込まれている場合、リポジトリ メンテナによっては、リポジトリのリリースを使ってバイナリ ファイルを公開する場合があります。 このようなバイナリ ファイルをダウンロードして実行すると、自分でプロジェクトをビルドしなくても、コードベースを調べながらアプリケーションがどのように機能するかを確認できます。

リポジトリのリリースは、ファイル一覧と README.md の右側のサイドバーに表示されます。

内部ドキュメント

リポジトリのコンテンツで内部ドキュメントを検索することもできます。 これは、1 つの Markdown ファイル、または Markdown ファイルが多数あるディレクトリの場合があります。 検索する際によく使う名前として、"docs"、"documentation"、"wiki"、"resources"、"help"、"manual" などがあります。

ソース コード内を調べる

リポジトリの全体的な構造を理解したら、次は、GitHub の検索を使って、探している特定の機能を見つけましょう。

リポジトリ内でページの上部にある検索フィールドをクリックすると、GitHub によって自動的に repo 検索修飾子が追加されるため、検索結果は表示しているリポジトリに限定されます。

まず、検索する対象が必要です。 たとえば、調べている機能に固有のテキストの文字列です。また、ページの HTML ソースを見て、特定の class または id 属性を見つけることもできます。

この例では、「repo:github/choosealicense "If you’re looking for a reference table?"」というクエリを使って、ライセンス ページの上部にあるテキストを検索します。 これにより、1 つの結果 (licenses.html というファイル) が返されます。

結果をクリックして、さらに深く掘り下げましょう。 licenses.html は、探していた「Licences」(ライセンス) ページのソースです。 検索した文字列と、各ライセンスが以下のコードに含まれていることがわかります。

{% include license-overview.html license-id="agpl-3.0" %}

ソース コードを理解する

関心のある特定のコードが見つかったら、そのコードの理解に進むことができます。

コードについて Copilot Chat に質問する

Copilot を使うと、ファイルや特定のコード行についてさらに詳しく知ることができます。 Copilot は、プログラミング言語に関する情報とリポジトリのコンテキストを組み合わせて、質問に詳しく回答します。

{% include %} タグの 11 行目で何が起こっているかを Copilot に説明してもらいましょう。 行番号をクリックします。 次に、行の右側にある [] をクリックします。 チャット ウィンドウで次のように質問します。

「この行で何が起こっていますか?」

Copilot により、この行に license-overview.html ファイルが含まれていること、表示する license-id として "agpl-3.0" を渡していることが説明されます。

コメントを読む

コメントは人間が判読できる注釈であり、コードを理解するために使用できますが、実行されることはありません。 通常、これらは // や /* などの文字で区切られます。

注目すべきコメントの種類をいくつか紹介します。

• 行: 特定の行の動作を説明する 1 行のコメント
• ブロック: 関数またはファイル全体が行っている内容を説明する複数行のコメント
• ファイル: ファイルの先頭にあるブロック コメント。コードベースの特定の部分の概要が記載されています

プログラミング言語リファレンスで関数を検索する

すべてのプログラミング言語には、その言語のあらゆる側面を説明するオンラインのリファレンスがあります。

検索エンジンを使ってプログラミング言語と関数を検索すると、その関数のリファレンス ページへのリンクが見つかるはずです。

この例では、検索エンジンで「jekyll include」を検索すると、Jekyll ドキュメントの「includes」に関するドキュメントが返されます。 Jekyll のドキュメントをさらに詳しく読むと、ライセンス自体が _licenses ディレクトリ内のコレクションであることがわかります。

これまでに学んだ内容を要約すると、licenses.html ファイルには、表示されている各ライセンスの /_includes/license-overview.html が含まれています。 /_includes/license-overview.html ファイルは、/_licenses コレクション内のライセンスに提供されている license-id と同じ内容であり、詳細が記載されています。

少し変更を加えて試してみる

コンピューター上でローカルにプロジェクトを実行できる場合は、少し変更を加えて何が起こるかを確認するのがお勧めの学習方法です。

まずテキストの変更から始めて、関数とファイルがどのように相互作用するかを実験するなど、より大きな変更に進むことができます。

_includes ディレクトリ内の license-overview.html ファイルを見つけて、ライセンスの表示方法を変更したり、コレクションからライセンスを読み込む方法を試してみたりしてください。

いずれかのライセンス ファイルの先頭にあるメタデータを変更する、license-overview.html に表示される属性を変更する、さらには独自の属性を追加してみることができます。 変更を加えたら、README.md の指示に従ってブラウザーで表示してテストできます。

学んだことを応用する

github/choosealicense.com リポジトリは大規模な Jekyll プロジェクトの好例であり、Jekyll と GitHub Pages を使ってどれほどのことを実現できるかを示しています。 リポジトリの構造、コレクションの使用方法、ライセンス データを含める方法から学んだことを応用して、自分のプロジェクトをビルドできますか?

次のステップ

サンプル コードがどのように機能するかを理解したら、それを自分のプロジェクトで再利用できます。 コードの再利用はソフトウェア開発の強力な要素ですが、それを正しく合法的に行うには、重要な手順に従う必要があります。 詳細なチュートリアルについては、「他のユーザーのコードをプロジェクトで再利用する」を参照してください。