# サンプル コードを検索して理解する GitHub のサンプル コードから学び、コーディング スキルを高めましょう。 ## GitHub のコードから学ぶ方法 GitHub のプロジェクトから学ぶのは、**新しい手法を学び**、自分のプロジェクトの**インスピレーションを得る**ことができるすばらしい方法です。 ただし、GitHub には何百万もの公開リポジトリがあるため、自分のプロジェクトに適用できるコードを見つけるのは大変な作業です。 ぴったりのリポジトリを見つけても、コードベースを調べて役立つサンプルを見つけるのは難しい場合があります。 プロジェクト全体を理解しようとするのではなく、1 つの機能または関数を選び、それがどのように機能するかを確認することをお勧めします。 コパイロットチャット と GitHub の検索機能を使って機能を見つけ、コードベース全体でそれを追跡することができます。 バックエンドからフロントエンドに至るまでこの機能がどのように機能するかを確認できるため、これは学習に最適な方法です。 このガイドでは、Jekyll Web サイト上のファイルからデータを読み込んで表示する方法を学ぶ**シナリオ例**に従って、両方の方法について学びます。 その後は、そのヒントや手法を他のプロジェクトやプログラミング言語に適用できるようになります。 ## サンプル プロジェクトを検索する 最初の手順は、学ぶのに適したプロジェクトを見つけることです。 ### コパイロットチャット を使ってリポジトリを特定する 学習に役立つコードを含むプロジェクトを見つける最も簡単な方法は、[コパイロットチャット](https://github.com/copilot) に、条件と一致するリポジトリを検索するよう依頼することです。 [コパイロットチャット](https://github.com/copilot) を開いて、汎用チャットを開始します。 次に、次のように質問します。 > Jekyll を使ってリポジトリ内のファイルのデータを表示するという、人気のリポジトリをいくつか見つけることはできますか? 関連するリポジトリへのリンクが Copilot から返されたら、リポジトリに関するフォローアップの質問をすることができます。 多くの場合、Copilot からは、最後の回答としてその他の結果を含む GitHub 検索へのリンクが返されます。 次に、これらの結果をレビューします。 ### 検索を使ってその他のオプションを特定する Copilot により、検索結果へのリンクが表示された場合は、そのリンクをクリックします。 それ以外の場合は、以下の手順に従って独自の検索クエリを作成します。 1. [\[Advanced search\]](https://github.com/search/advanced) に移動します。 2. \[Advanced options] セクションで、\[Written in this language] ドロップダウンを使ってプログラミング言語を選びます。 Jekyll サイトの場合は、\[HTML] を選びます。 3. オプションとして、\[Repositories options] の \[With this many stars] の横に「`>150`」と入力します。 これは、適切に管理され、人気があるリポジトリを見つけるのに役立ちます。 4. ページの上部に戻り、**\[Search]** をクリックします。 > \[!TIP] > 検索クエリにトピックとテキストを追加することで、検索結果をさらに絞り込むことができます。 たとえば、`topic:jekyll "blog"`、所有者が Jekyll に関連するものとして分類し、リポジトリ名または説明に "blog" という単語が含まれるリポジトリが返されます。 人気のあるトピックの一覧については、[GitHub に関するトピック](https://github.com/topics)を参照してください。 ### プロジェクトを選ぶ Copilot と検索の結果を確認したら、[`github/choosealicense.com`](https://github.com/github/choosealicense.com) リポジトリを使います。 このリポジトリには、ライセンスに関する情報を共有する Jekyll Web サイトである [Choose a License](https://choosealicense.com/) のソース コードopen source含まれています。 特に、[Licenses](https://choosealicense.com/licenses/) ページに関心があります。このページには、データ ファイルからの一般的なopen source ライセンスが表示されます。 ## プロジェクト内での方向性を決める データ ファイルを表示するコードを掘り下げる前に、リポジトリの概要について確認しておきましょう。 初めてリポジトリにアクセスする場合、どこから始めればよいのか判断するのが難しい場合があります。 各プロジェクトはそれぞれ独自の方法で編成されていますが、共通の文書化手法があるため、通常は方向性を把握する際に利用できます。 ### README.md ファイル **README.md** ファイルを読むことを常にお勧めします。これはリポジトリのフロント ページであり、ファイル一覧の下に自動的に表示されます。 メンテナによって含まれる情報は異なりますが、多くの場合、プロジェクトに関する情報、ローカル コンピューター上でのビルド方法、ドキュメントへのリンクが記載されています。 [ `github/choosealicense.com` ](https://github.com/github/choosealicense.com) リポジトリの README.md ファイルには、ライセンス ファイルの保存場所 (`/_licenses`)、各ライセンスが持つことができる属性、コンピューター上で Web サイトを実行する方法が説明されています。 ### コパイロットチャット の使用 README.md ファイルで不明な点がある場合は、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` 属性を見つけることもできます。 この例では、「[](https://choosealicense.com/licenses/)」というクエリを使って、`repo:github/choosealicense "If you’re looking for a reference table?"`の上部にあるテキストを検索します。 これにより、1 つの結果 (`licenses.html` というファイル) が返されます。 結果をクリックして、さらに深く掘り下げましょう。 [ `licenses.html` ](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html) は、探していた「Licenses」(ライセンス) ページのソースです。 検索した文字列と、各ライセンスが以下のコードに含まれていることがわかります。 ```markdown {% include license-overview.html license-id="agpl-3.0" %} ``` ## ソース コードを理解する 関心のある特定のコードが見つかったら、そのコードの理解に進むことができます。 ### コードについて コパイロットチャット に質問する Copilot を使うと、ファイルや特定のコード行についてさらに詳しく知ることができます。 Copilot は、プログラミング言語に関する情報とリポジトリのコンテキストを組み合わせて、質問に詳しく回答します。 `{% include %}` タグの 11 行目で何が起こっているかを Copilot に説明してもらいましょう。 行番号をクリックします。 次に、行の右側にある をクリックします。 チャット ウィンドウで次のように質問します。 > 「この行で何が起こっていますか?」 Copilot により、この行に `license-overview.html` ファイルが含まれていること、表示する `"agpl-3.0"` として `license-id` を渡していることが説明されます。 > \[!TIP] > コパイロットチャット からの回答を理解できない場合は、回答を簡単にすることや、特定の部分についてさらに詳しく説明することをいつでも依頼できます。 ### コメントを読む コメントは人間が判読できる注釈であり、コードを理解するために使用できますが、実行されることはありません。 通常、これらは `//` や `/*` などの文字で区切られます。 注目すべきコメントの種類をいくつか紹介します。 * **行**: 特定の行の動作を説明する 1 行のコメント * **ブロック**: 関数またはファイル全体が行っている内容を説明する複数行のコメント * **ファイル**: ファイルの先頭にあるブロック コメント。コードベースの特定の部分の概要が記載されています ### プログラミング言語リファレンスで関数を検索する すべてのプログラミング言語には、その言語のあらゆる側面を説明するオンラインのリファレンスがあります。 検索エンジンを使ってプログラミング言語と関数を検索すると、その関数のリファレンス ページへのリンクが見つかるはずです。 この例では、検索エンジンで「`jekyll include`」を検索すると、Jekyll ドキュメントの[「includes」に関するドキュメント](https://jekyllrb.com/docs/includes/)が返されます。 Jekyll のドキュメントをさらに詳しく読むと、ライセンス自体が [](https://jekyllrb.com/docs/collections/) ディレクトリ内の`_licenses`であることがわかります。 > \[!TIP] プログラミング言語リファレンスで関数が見つからない場合は、その関数がコードベース自体で定義されている可能性があります。 それを見つけることを [GitHub Copilot](https://github.com/copilot) に依頼します。 これまでに学んだ内容を要約すると、[`licenses.html`](https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html) ファイルには、表示されている各ライセンスの [`/_includes/license-overview.html`](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) が含まれています。 [ `/_includes/license-overview.html` ](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) ファイルは、`license-id` コレクション内のライセンスに提供されている `/_licenses` と同じ内容であり、詳細が記載されています。 ### 少し変更を加えて試してみる コンピューター上でローカルにプロジェクトを実行できる場合は、少し変更を加えて何が起こるかを確認するのがお勧めの学習方法です。 まずテキストの変更から始めて、関数とファイルがどのように相互作用するかを実験するなど、より大きな変更に進むことができます。 `license-overview.html` ディレクトリ内の [](https://github.com/github/choosealicense.com/blob/gh-pages/_includes/license-overview.html) ファイルを見つけて、ライセンスの表示方法を変更したり、コレクションからライセンスを読み込む方法を試してみたりしてください。 いずれかのライセンス ファイルの先頭にあるメタデータを変更する、`license-overview.html` に表示される属性を変更する、さらには独自の属性を追加してみることができます。 変更を加えたら、README.md の指示に従ってブラウザーで表示してテストできます。 ### 学んだことを応用する [ `github/choosealicense.com` ](https://github.com/github/choosealicense.com) リポジトリは大規模な Jekyll プロジェクトの好例であり、Jekyll と GitHub Pages を使ってどれほどのことを実現できるかを示しています。 リポジトリの構造、コレクションの使用方法、ライセンス データを含める方法から学んだことを応用して、自分のプロジェクトをビルドできますか? ## 次のステップ サンプル コードがどのように機能するかを理解したら、それを自分のプロジェクトで再利用できます。 コードの再利用はソフトウェア開発の強力な要素ですが、それを正しく合法的に行うには、重要な手順に従う必要があります。 詳細なチュートリアルについては、「[他のユーザーのコードをプロジェクトで再利用する](/ja/get-started/learning-to-code/reusing-other-peoples-code-in-your-projects)」を参照してください。