完全日本語のチュートリアルで、OSS 活動を始める 🚀
初心者でも簡単に参加できるように設計された、日本語のオープンソースプロジェクトです。
チュートリアルに沿って、初めての貢献(コントリビュート)を体験してください!
あなたの最初のプルリクエストを、喜んでお手伝いします ✌️
このプロジェクトは、Git/GitHub の実践的な使い方や、オープンソースでコラボレーションする作法を学ぶための、日本語のチュートリアルです!
- Git/GitHub の、実践的な使い方を学びたい初心者
- オープンソースに興味があるが、どのように貢献すればよいかわからない人々
- もしくは、より多くの貢献を通して、コラボレーションを楽しみながら、スキルを高めたい方
- 1 人では学習しづらい、GitHub を使った実際の共同開発を体験すること
- 誰もが自信を持って、オープンソースプロジェクトに貢献する方法を学ぶこと
- そして、オープンソースカルチャーが好きな開発者同士が、繋がる手助けをすること
そもそもオープンソースとは❓❓
オープンソースとは:
あるプロジェクトがオープンソースである時、それは誰でも自由に使って、学び、修正して、あなたのプロジェクトをいかなる目的であっても配布できるということを意味します。
ほとんどの場合、オープンソースのプロジェクトは、誰でも自由に開発に参加できます!
オープンソースのプロジェクトに対して貢献(コントリビュート)することは、
他の開発者との共同開発を通して、自身のスキルを高める素晴らしい方法です。
もしあなたがオープンソースに無関心で、労力を割く必要があるかどうか疑問に思っているなら、
こちらを参照してみて下さい:オープンソースにコントリビュートする理由は?
さっそくオープンソースプロジェクトへの貢献を、体験してみましょう!
このプロジェクトの参加者として、Contributors.json ファイルに下記の情報を追記します!
"name": "あなたのハンドルネーム",
"github": "あなたのGitHubアカウントのURL",
"favoriteColor": "あなたの好きなカラーコード",
"favoriteEmoji": "あなたの好きな絵文字"
入力された情報は、絵文字のアイコンとして、Webサイト上に表示されます。
なので、コントリビューターが増えるたびに、サイト上が賑やかになります!
emoji-animation.mp4
私たちは、First Contributions JA の Web サイトを、今よりもっとPOPにしたいです!
ぜひ、実際に手を動かしてみてください
8 つの簡単なステップで、オープンソースのコントリビューターになる 😎
- もし助けが必要な場合、Discussionsで質問してください!
- このプロジェクトに関する改善点を見つけた場合は、Issuesから報告してください!
どんな些細なことでも、大歓迎です 🙌
- もし GitHub のアカウントを持っていない場合は、Sign upからアカウントを作成してください。
- そして、必要に応じて全くの初心者向けのGitHub Hello World のチュートリアルを先に行うことをお勧めします。
- パスワードの代わりとなるアクセストークンが設定されていない場合、クローンなどのタイミングでエラーが生じることがあります。
- その場合はGitHub アクセストークンの設定を参照してください。
- GitHub 上のプロジェクトページ(このページ)の右上にある "Fork" ボタンをクリックして、このリポジトリをフォークします。
- そして、"Create fork"ボタンをクリックします。
- 「Repository name」「Description」「Copy the
main
branch only」などの項目は、すべて初期のままでOKです!
- 「Repository name」「Description」「Copy the
Tip
これにより、あなたの GitHub アカウントに、このリポジトリのコピーが作成されます 👍
GitHub 上でファイルを編集することも可能ですが、
より一般的なワークフローを体験するため、フォークしたリポジトリをあなたのローカルマシンにコピーします。
- GitHub 上の、フォークしたリポジトリのページに移動し、緑色の "Code" ボタンをクリックし、HTTPS の URL をコピーします。
- URL は、次のようになっているはずです:
https://github.com/<あなたのアカウント名>/first-contributions-ja.github.io.git
- URL は、次のようになっているはずです:
- ターミナルを開き、リポジトリをクローンするディレクトリに移動します。
- 例えば、クローン先をデスクトップに指定する場合、以下のコマンドを使用できます。
cd desktop
- 以下のコマンドを使用して、フォークしたリポジトリをローカルマシンにクローンします:
git clone 先ほどコピーしたクローンURL
Tip
これにより、リポジトリがあなたのローカルマシンにコピーされ、ローカル環境で作業することが可能になりました 💻
-
次のコマンドで、リポジトリのディレクトリ内に移動します:
cd first-contributions-ja.github.io
-
次のコマンドで、このプロジェクトに必要なパッケージを、インストールします:
npm install
メモ: npm install とは❓❓
Node.jsがインストールされている状態で、
npm install
コマンドを実行すると、このプロジェクトに必要なライブラリを一括でインストールできます。- ローカルサーバーを起動し、ブラウザでの表示を確認すること
npm run dev
コマンド実行後、表示されるURLをクリックすれば確認可能です
- コミット時にコードのチェック・整形を自動で行うこと
- huskyというライブラリを使って実行されます
- 自動で実行されるので、何かコマンドを実行したり、作業をする必要はありません
npm install
コマンドについて、より詳しい内容は、こちらを参照してみて下さい!その場合、2通りの対処法があります。
npm install
の手順を飛ばす。- この手順を行わずとも、最低限のコントリビューション体験はできるため、難しい場合は飛ばしていただいてかまいません。
- どのくらいの方がここでつまずくか参考までに知りたいので、プルリクエストに「
npm install
がうまくいかなかった」といった報告をしていただけると大変参考になります。
- Node.js をインストールする。
- インストールの手順に関しては、以下のサイトを参照してみて下さい。
- Node.js 公式サイト / Node.jsインストール方法(macOS) Progate / Node.jsインストール方法(Windows) Progate
- Node.jsについて知りたい場合は Node.jsとはなにか?なぜみんな使っているのか? Qiita を参照してみて下さい。
- Web/JavaScript 開発に興味がある場合は、この機会にインストールすることを、おすすめします😎
- ローカルサーバーを起動し、ブラウザでの表示を確認すること
- 次に、プロジェクトの
main
ブランチからあなたの作業を切り離すために、新しいブランチを作成してください。- 次のコマンドを使用できます:
git switch -c <ブランチ名>
- ブランチ名は、あなたがこれから行う作業に関連した意味のある名前を付けます。 なので、次のようになります:
git switch -c add-yourname
- 🚧注意)
yourname
をあなたのハンドルネームに置き換えることを忘れないでください- ブランチ名には、ひらがな、漢字、空白は使わず、半角英数字で入力してください
- ❌: おぎのちひろ、荻野ちひろ、Ogino Chihiro
- 例:
git switch -c add-oginochihiro
- 次のコマンドを使用できます:
Tip
これにより、プロジェクトのmain
リポジトリに直接影響を与えることなく、変更を加える準備が整いました 🍵
- 作業を開始するため、VSCode などのお好きなコードエディタで、クローンしたフォルダを開きます。
- 変更を加える前に、前のステップで作成したブランチで作業することを確認してください!
- 次のコマンドで、現在のブランチを確認できます:
git status
- それでは Contributors.json ファイルに変更を加えます。
- Contributors.json ファイルの「リストの末尾」に、以下のコードをコピーして貼り付けます。
, { "name": "あなたのハンドルネーム", "github": "あなたのGitHubアカウントのURL", "favoriteColor": "あなたの好きなカラーコード", "favoriteEmoji": "あなたの好きな絵文字" }
- そして、貼り付けたテキストの中身を、あなた独自の内容に置き換えます。
<!-- 変更後 --> ~~ }, { "name": "oginochihiro", "github": "https://github.com/first-contributions-ja", "favoriteColor": "#ffffff", "favoriteEmoji": "🐉" } ]
- 再びターミナルに移動し、以下のコマンドを使用して、変更をローカルリポジトリにコミットします。
yourname
をあなたのハンドルネームに置き換えることを忘れないでください。
git add . git commit -m "yournameをコントリビューターに追加"
Tip
これにより、あなたが Contributors.json ファイルに加えた変更が、記録されます 📝
- フォークしたリモートリポジトリに変更をプッシュします:
git push origin HEAD
Tip
これにより、先ほどのコミット(ローカルでの変更内容)を、GitHub上のあなたのリモートリポジトリに反映させます 👾
- GitHub 上の、フォークしたリモートリポジトリのページ(
https://github.com/あなたのアカウント/first-contributions-ja.github.io
)に移動します。 - 上部に表示されている"Compare & pull request" ボタンをクリックします。
- そして、以下のことを確認したら、"Create pull request" ボタンをクリックします。
- 念のため、あなたのリポジトリの
add-yourname
ブランチから、first-contributions-jsのmain
ブランチに向かっていることを確認してください! - タイトルは初期入力のままで、description は空欄でOKです!
- 念のため、あなたのリポジトリの
Tip
これにより、あなたがフォークして行った変更を、フォーク元のリポジトリに反映させるようにリクエストします 🎁
プロジェクトのメンテナーによって、あなたの PR がレビュー(確認)されます。
- レビュアーが PR に対して変更を求めるのはごく普通のことです。もしそれが起こっても、よくある事だと考えて修正を加えてください。
- その場合、先ほどと同じ作業用ブランチに戻り、要求された修正を行ったら、同じように変更をコミットしてプッシュするだけです。
- PR は新しいプッシュによって、自動的に更新されます。
ほとんどの場合は 24 時間以内にレビューしますが、数日の遅れが発生することもあります。気長にお待ちください ☕
- プルリクエストが承認されると、あなたが加えた変更はメインプロジェクトにマージされます。
お疲れ様です!
そして First Contributions JA に、時間と労力を割いて貢献していただきありがとうございます!!
Important
もしこのプロジェクトが役に立つと思った場合は、ページの上部から ⭐star ボタンを押してください!
また、このプロジェクトを広めるために、フォロワーや知り合いに共有してください!
あなたは、オープンソースのプロジェクトに貢献する方法を学びました!
- 行った作業を振り返って、知識を定着させてください。
- あなたはコントリビューターとしてよく体験する、標準的なワークフロー(ドキュメントを読む → フォーク → 変更を加える → プルリクエスト)を完了したところです!
- First Contributions JA は、オープンソースで運営・開発されているプロジェクトなので、上記のチュートリアルとは別の形で貢献することもできます。
- Discussionsにて、このプロジェクトに関する感想を聞かせてください 🙌
- もし興味があれば、その他の貢献を確認してください。
- 他のオープンソースプロジェクトにも、貢献してみてください!
- GitHub 上の初心者向けのトピック(first-contributionsやgood-first-issue)をチェックしてみてください!
- 貢献したいリポジトリがあれば、「good first issue」というラベルのついたイシューを探してください。
- これは一般的に、特定のプロジェクトやオープンソース自体に慣れていない初心者向けのイシューであることを表します!
より多くの貢献がしたい方は、貢献ガイドラインを参照してください!
コードの追加やバグの修正、ドキュメントの改善など、どんな些細な貢献も大歓迎です 🤝
このプロジェクトは、MIT LICENSEの下でライセンスされています。
このプロジェクトは、first-contributionsやContribute-To-This-Projectなどの、
初心者向けに設計された素晴らしいオープンソースプロジェクトから影響を受けています。