📚 docs: READMEにチュートリアルの内容記載 #8

* 📚 docs:  READMEの作成 #8

* 📚 docs: リンクの修正

* 📚 docs: 正しくないリンクの修正

* 📚 docs: バッジの追加

* 📚 docs: TODOのコメントアウト

* 📚 docs: 細かいテキストの修正

* 📚 docs: 空白や表記の修正

Author: kazzyfrog

README.md

@@ -1,36 +1,261 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+[![Deploy Next.js site to Pages](https://github.com/first-contributions-ja/first-contributions-ja.github.io/actions/workflows/nextjs.yml/badge.svg)](https://github.com/first-contributions-ja/first-contributions-ja.github.io/actions/workflows/nextjs.yml)
+![Static Badge](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat)
+[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
+<img src="https://img.shields.io/badge/license-MIT-blue.svg">
+<img src="https://img.shields.io/badge/contributions-welcome-blue.svg?style=flat">
+[![Static Badge](https://img.shields.io/badge/first_contributions-%F0%9F%94%B0-white?style=flat)](https://github.com/topics/first-contributions)
 
-## Getting Started
+# First Contributions JA
 
-First, run the development server:
+> 完全日本語のチュートリアルで、OSS 活動を始める 🚀
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+初心者でも簡単に参加できるように設計された、日本語のオープンソースプロジェクトです。<br>
+チュートリアルに沿って、初めての貢献（コントリビュート）を体験してください！
+
+あなたの最初のプルリクエストを喜んでお手伝いします ✌️
+
+<br>
+
+## はじめに
+
+このプロジェクトは、Git/GitHub の実践的な使い方や、オープンソースでコラボレーションする作法を学ぶための、日本語のチュートリアルです！
+
+### これは誰のためのものですか？
+
+- Git/GitHub の、実践的な使い方を学びたい初心者
+- オープンソースに興味があるが、どのように貢献すればよいかわからない人々
+- もしくは、より多くの貢献を通して、コラボレーションを楽しみながら、スキルを高めたい方
+
+### このプロジェクトの目的は？
+
+- 1 人では学習しずらい、GitHub を使った実際の共同開発を体験すること
+- 誰もが自信を持って、オープンソースプロジェクトに貢献する方法を学ぶこと
+- そして、オープンソースカルチャーが好きな開発者同士が、繋がる手助けをすること
+
+### なぜオープンソースに貢献するの？
+
+オープンソースのプロジェクトに貢献することは、知識を共有し、他の開発者と協力する素晴らしい方法です。
+
+もしあなたがオープンソースに無関心で、労力を割く必要があるかどうか疑問に思っているなら、<br>
+こちらを参照してみて下さい：[オープンソースにコントリビュートする理由は？](https://opensource.guide/ja/how-to-contribute/#%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E7%90%86%E7%94%B1%E3%81%AF)
+
+<br>
+
+## 参加方法
+
+さっそくオープンソースプロジェクトへの貢献を、体験してみましょう！
+
+### どんな貢献をすればいいの？
+
+> このプロジェクトの参加者として、Contributors.json ファイルに必要な情報を入力し、プロフィールカードを作成します！
+
+記載する情報は、以下のとおりです：
+
+```
+"name": "あなたのハンドルネーム",
+"github": "あなたのGitHubアカウントのURL",
+"favoriteStack": "あなたの好きなプログラミング言語・技術スタック",
+"introduction": "自己紹介・挨拶"
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+これから行うチュートリアルは、次の９つのステップで完了します！<br>
+実際に手を動かしてみてください :octocat:
+
+- [実際に手を動かす](#実際に手を動かす)
+  - [セットアップ:](#セットアップ)
+  - [Step 1: このリポジトリをフォーク](#step-1このリポジトリをフォーク)
+  - [Step 2: ローカルマシンへクローン](#step-2ローカルマシンへクローン)
+  - [Step 3: 作業用ブランチを作成](#step-3作業用ブランチを作成)
+  - [Step 4: 変更を加える](#step-4変更を加える)
+  - [Step 5: 変更をコミット](#step-5変更をコミット)
+  - [Step 6: 変更をプッシュ](#step-6変更をプッシュ)
+  - [Step 7: プルリクエスト（PR）を作成](#step-7プルリクエストprを作成)
+  - [Step 8: レビューとフィードバックに対応](#step-8レビューとフィードバックに対応)
+  - [Finish: 🎉](#finish)
+- [さらなるステップ](#さらなるステップ)
+- [その他の貢献](#その他の貢献)
+
+## 実際に手を動かす
+
+> 9 つの簡単なステップで、オープンソースのコントリビューターになる :sunglasses:
+
+- もし助けが必要な場合、[Discussions](https://github.com/first-contributions-ja/first-contributions-ja.github.io/discussions)で質問してください！
+- このプロジェクトに関する改善点を見つけた場合は、[Issues](https://github.com/first-contributions-ja/first-contributions-ja.github.io/issues)から報告してください！
+
+どんな些細なことでも、大歓迎です 🙌
+
+---
+
+### セットアップ：
+
+- もし GitHub のアカウントを持っていない場合は、[Sign up](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home)からアカウントを作成してください。
+  - そして、必要に応じて全くの初心者向けの[GitHub Hello World のチュートリアル](https://docs.github.com/ja/get-started/quickstart/hello-world)を先に行うことをお勧めします。
+- パスワードの代わりとなるアクセストークンが設定されていない場合、クローンなどのタイミングでエラーが生じることがあります。
+  - その場合は[GitHub アクセストークンの設定](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)を参照してください。
+
+---
+
+### Step 1:このリポジトリをフォーク
+
+- GitHub 上のプロジェクトページの右上にある "Fork" ボタンをクリックして、このリポジトリをフォークします。
+- そして、"Create fork"ボタンをクリックします。
+
+これにより、あなたの GitHub アカウントに、このリポジトリのコピーが作成されます 👍
+
+---
+
+### Step 2:ローカルマシンへクローン
+
+GitHub 上でファイルを編集することも可能ですが、<br>
+より一般的なワークフローを体験するため、フォークしたリポジトリをあなたのローカルマシンにコピーします。
+
+- ターミナルを開き、リポジトリをクローンするディレクトリに移動します。
+  - 例えば、クローン先をデスクトップに指定する場合、以下のコマンドを使用できます。
+  ```
+  cd desktop
+  ```
+- GitHub 上の、フォークしたリポジトリのページに移動し、緑色の "Code" ボタンからクローンする URL をコピーします。
+  - URL は、次のようになっているはずです；`https://github.com/<あなたのアカウント名>/first-contributions-ja.github.io.git`
+- 以下のコマンドを使用して、フォークしたリポジトリをローカルマシンにクローンします：
+  ```
+  git clone 先ほどコピーしたクローンURL
+  ```
+
+これにより、リポジトリがあなたのローカルマシンにコピーされ、ローカル環境で作業することが可能になりました 💻
+
+---
+
+### Step 3:作業用ブランチを作成
+
+- 次のコマンドでリポジトリのディレクトリ内に移動します：`cd first-contributions-ja`
+- プロジェクトの`main`ブランチからあなたの作業を切り離すために、新しいブランチを作成してください。
+  - 以下のコマンドを使用できます：
+  ```
+  git switch -c <ブランチ名>
+  ```
+- ブランチ名は、あなたがこれから行う作業に関連した意味のある名前を付けます。
+  - 例えば以下のようになります（`yourname`をあなたのハンドルネームに置き換えることを忘れないでください）：
+  ```
+  git switch -c add-yourname
+  ```
+
+これにより、プロジェクトの`main`リポジトリに直接影響を与えることなく、変更を加える準備が整いました 🍵
+
+---
+
+### Step 4:変更を加える
+
+- 作業を開始するため、VSCode などのお好きなコードエディタで、クローンしたフォルダを開きます。
+  - 変更を加える前に、前のステップで作成したブランチで作業することを確認してください。
+- それでは Contributors.json ファイルに変更を加えます。
+  - **Contributors.json ファイルの「リストの先頭」に、以下のコードをコピーして貼り付けます。**
+  ```
+  {
+    "name": "あなたのハンドルネーム",
+    "github": "あなたのGithubアカウントのURL",
+    "favoriteStack": "好きなプログラミング言語・技術スタックを１つ",
+    "introduction": "自己紹介・挨拶"
+  },
+  ```
+- そして、貼り付けたテキストの中身を、あなた独自の内容に置き換えます。
+  - 例えば、全て置き換えたら以下のようになります：
+  ```
+  <!-- 変更後 -->
+  [
+    {
+      "name": "oginochihiro",
+      "github": "https://github.com/first-contributions-ja",
+      "favoriteStack": "Github",
+      "introduction": "ここで働かせて下さい！"
+    },
+    {
+     〜〜
+  ```
+
+---
+
+### Step 5:変更をコミット
+
+- 以下のコマンドを使用して、変更をローカルリポジトリにコミットします。
+  - `yourname`をあなたのハンドルネームに置き換えることを忘れないでください。
+  ```
+  git add .
+  git commit -m "yournameをコントリビューターに追加"
+  ```
+
+これにより、あなたが Contributors.json ファイルに加えた変更が、記録されます 📝
+
+---
+
+### Step 6:変更をプッシュ
+
+- フォークしたリモートリポジトリに変更をプッシュします：
+  ```
+  git push origin HEAD
+  ```
+
+---
+
+### Step 7:プルリクエスト（PR）を作成
+
+- GitHub 上の、フォークしたリモートリポジトリのページ（`https://github.com/あなたのアカウント/first-contributions-ja`）に移動します。
+- 上部に表示されている"Compare & pull request" ボタンをクリックします。
+- そして、"Create pull request" ボタンをクリックします。
+
+これにより、あなたがフォークして行った変更を、フォーク元のリポジトリに反映させるようにリクエストします 🎁
+
+---
+
+### Step 8:レビューとフィードバックに対応
+
+プロジェクトのメンテナーによって、あなたの PR がレビューされます。
+
+- レビュアーが PR に対して変更を求めるのはごく普通のことです。もしそれが起こっても、よくある事だと考えて修正を加えてください。
+  - その場合、先ほどと同じ作業用ブランチに戻り、要求された修正を行ったら、同じように[変更をコミット](#step-5変更をコミット)してプッシュするだけです。
+  - PR は新しいプッシュによって、自動的に更新されます。
+
+ほとんどの場合は 24 時間以内にレビューしますが、数日の遅れが発生することもあります。気長にお待ちください ☕
+
+---
+
+### Finish:🎉
+
+- プルリクエストが承認されると、それはメインプロジェクトにマージされます。
+
+お疲れ様です！<br>
+そして first-contributions-ja に、時間と労力を割いて貢献していただきありがとうございます！！
+
+<br>
+
+## さらなるステップ
+
+あなたは、オープンソースのプロジェクトに貢献する方法を学びました！
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- 行った作業を振り返って、知識を定着させてください。
+  - あなたはコントリビューターとしてよく体験する、標準的なワークフロー（**ドキュメントを読む → フォーク → 変更を加える → プルリクエスト**）を完了したところです！
+- first-contributions-ja は、オープンソースで運営・開発されているプロジェクトなので、上記の[チュートリアル](#実際に手を動かす)とは**別の形で貢献**することもできます。
+  - もし興味があれば、[その他の貢献](#その他の貢献)を確認してください。
+  - または、[Discussions](https://github.com/first-contributions-ja/first-contributions-ja.github.io/discussions)にて、このプロジェクトに関する感想を聞かせてください 🙌
+- 他のオープンソースプロジェクトにも、貢献してみてください！
+  - GitHub 上の初心者向けのトピック([first-contributions](https://github.com/topics/first-contributions)や[good-first-issue](https://github.com/topics/good-first-issue)）をチェックしてみてください！
+  - 貢献したいリポジトリがあれば、「**good first issue**」というラベルのついたイシューを探してください。
+  - これは一般的に、特定のプロジェクトやオープンソース自体に慣れていない初心者向けのイシューであることを表します！
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+> もしこのプロジェクトが役に立つと思った場合は、ページの上部から ⭐**star ボタン**を押してください！<br>
+> また、このプロジェクトを広めるために、フォロワーや知り合いに共有してください！
 
-## Learn More
+<br>
 
-To learn more about Next.js, take a look at the following resources:
+## その他の貢献
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+より多くの貢献がしたい方は、[貢献ガイドライン](./docs/CONTRIBUTING.md)を参照してください！<br>
+コードの追加やバグの修正、ドキュメントの改善など、どんな些細な貢献も大歓迎です 🤝
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## ライセンス
 
-## Deploy on Vercel
+このプロジェクトは、[MIT LICENSE](/LICENSE)の下でライセンスされています。
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 謝辞
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+このプロジェクトは、[first-contributions](https://github.com/firstcontributions/first-contributions)や[Contribute-To-This-Project](https://github.com/Syknapse/Contribute-To-This-Project)などの、<br>
+初心者向けに設計された素晴らしいオープンソースプロジェクトから影響を受けています。