first-contributions-ja.github.io: A TypeScript repository from first-contributions-ja

完全日本語のチュートリアルで、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 アクセストークンの設定を参照してください。

Step 1:このリポジトリをフォーク

GitHub 上のプロジェクトページ（このページ）の右上にある "Fork" ボタンをクリックして、このリポジトリをフォークします。

そして、"Create fork"ボタンをクリックします。
- 「Repository name」「Description」「Copy the main branch only」などの項目は、すべて初期のままでOKです！

Tip

これにより、あなたの GitHub アカウントに、このリポジトリのコピーが作成されます 👍

Step 2:ローカルマシンへクローン

GitHub 上でファイルを編集することも可能ですが、
より一般的なワークフローを体験するため、フォークしたリポジトリをあなたのローカルマシンにコピーします。

GitHub 上の、フォークしたリポジトリのページに移動し、緑色の "Code" ボタンをクリックし、HTTPS の URL をコピーします。
- URL は、次のようになっているはずです：https://github.com/<あなたのアカウント名>/first-contributions-ja.github.io.git

ターミナルを開き、リポジトリをクローンするディレクトリに移動します。
- 例えば、クローン先をデスクトップに指定する場合、以下のコマンドを使用できます。
```
cd desktop
```
以下のコマンドを使用して、フォークしたリポジトリをローカルマシンにクローンします：
```
git clone 先ほどコピーしたクローンURL
```

Tip

これにより、リポジトリがあなたのローカルマシンにコピーされ、ローカル環境で作業することが可能になりました 💻

Step 3:作業用ブランチを作成

次のコマンドで、リポジトリのディレクトリ内に移動します：
```
cd first-contributions-ja.github.io
```
次のコマンドで、このプロジェクトに必要なパッケージを、インストールします：
```
npm install
```
メモ: npm install とは❓❓

Node.jsがインストールされている状態で、npm installコマンドを実行すると、このプロジェクトに必要なライブラリを一括でインストールできます。

npm installした後にできること
- ローカルサーバーを起動し、ブラウザでの表示を確認すること
  - npm run devコマンド実行後、表示されるURLをクリックすれば確認可能です
- コミット時にコードのチェック・整形を自動で行うこと
  - huskyというライブラリを使って実行されます
  - 自動で実行されるので、何かコマンドを実行したり、作業をする必要はありません
npm installコマンドについて、より詳しい内容は、こちらを参照してみて下さい！

🚧注意) もし、あなたのローカルマシンに、Node.js がインストールされていない場合、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リポジトリに直接影響を与えることなく、変更を加える準備が整いました 🍵

Step 4:変更を加える

作業を開始するため、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": "🐉"
  }
]
```

Step 5:変更をコミット

再びターミナルに移動し、以下のコマンドを使用して、変更をローカルリポジトリにコミットします。
- yournameをあなたのハンドルネームに置き換えることを忘れないでください。
```
git add .
git commit -m "yournameをコントリビューターに追加"
```

Tip

これにより、あなたが Contributors.json ファイルに加えた変更が、記録されます 📝

Step 6:変更をプッシュ

フォークしたリモートリポジトリに変更をプッシュします：
```
git push origin HEAD
```

Tip

これにより、先ほどのコミット（ローカルでの変更内容）を、GitHub上のあなたのリモートリポジトリに反映させます 👾

Step 7:プルリクエスト（PR）を作成

GitHub 上の、フォークしたリモートリポジトリのページ（https://github.com/あなたのアカウント/first-contributions-ja.github.io）に移動します。
上部に表示されている"Compare & pull request" ボタンをクリックします。

そして、以下のことを確認したら、"Create pull request" ボタンをクリックします。
- 念のため、あなたのリポジトリのadd-yournameブランチから、first-contributions-jsのmainブランチに向かっていることを確認してください！
-  タイトルは初期入力のままで、description は空欄でOKです！

Tip

これにより、あなたがフォークして行った変更を、フォーク元のリポジトリに反映させるようにリクエストします 🎁

Step 8:レビューとフィードバックに対応

プロジェクトのメンテナーによって、あなたの PR がレビュー（確認）されます。

レビュアーが PR に対して変更を求めるのはごく普通のことです。もしそれが起こっても、よくある事だと考えて修正を加えてください。
- その場合、先ほどと同じ作業用ブランチに戻り、要求された修正を行ったら、同じように変更をコミットしてプッシュするだけです。
- PR は新しいプッシュによって、自動的に更新されます。

ほとんどの場合は 24 時間以内にレビューしますが、数日の遅れが発生することもあります。気長にお待ちください ☕

Finish:🎉

プルリクエストが承認されると、あなたが加えた変更はメインプロジェクトにマージされます。

お疲れ様です！
そして 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などの、
初心者向けに設計された素晴らしいオープンソースプロジェクトから影響を受けています。

first-contributions-ja/first-contributions-ja.github.io