AIによる校正

Author: hayatosc

README.md

@@ -17,11 +17,11 @@
   - Astroの考え方を知ろう
   - レイアウトを作ろう
   - ページを作ってみよう
-- Chapter 3: ブログ投稿を作ろう
+- Chapter 2: ブログ投稿を作ろう
   - AstroとMarkdown
   - Markdownでブログ記事を書こう
   - コンテンツ管理をしてみよう
-- Chapter 4: Astroをデプロイしてみよう
+- Chapter 3: Astroをデプロイしてみよう
   - トップページを完成させよう
   - GitHub Pagesにデプロイしよう
 

docs/ch0/1_env.md

@@ -7,15 +7,15 @@
 - [Visual Studio Code](https://code.visualstudio.com)
   - プログラミングをするエディタです。
 - [Node.js](https://nodejs.org/ja)
-  - プログラム(JavaScript)を動作させるランタイムです。
+  - プログラム(JavaScript)を動作させるランタイム(実行環境)です。
 - [pnpm](https://pnpm.io/ja/)
   - パッケージマネージャーと呼ばれる、Node.jsのパッケージや実行などの機能を管理するツールです。
   - デフォルトで付属するnpmでも十分ですが、パフォーマンスなどにメリットがあります。
 - [git](https://git-scm.com)
   - コミットという単位でファイルの更新履歴を管理するバージョン管理システムです。
 - [GitHub](https://github.com)
   - gitのレポジトリをインターネット上に上げるサービスです。
-  - 学生は有料版が無料で使えます。GitHub CopilotというAIがコード書いてくれるサービスも無料です。
+  - 学生は有料版が無料で使えます。GitHub CopilotというAIがコードを記述してくれるサービスも無料です。
 
 ### コマンドの確認
 
@@ -30,7 +30,7 @@ $ node -v
 >[!NOTE]
 > ここでの `$` はコマンド実行の先頭であることを表しています。この場合、あなたが入力するのは `node -v` だけです。
 
-導入に成功しているならば、バージョンが表示されるはずです。
+導入に成功していれば、バージョンが表示されます。
 
 ![cmd](/docs/ch0/img/cmd.jpg)
 

docs/ch0/2_clone_and_push.md

@@ -25,6 +25,9 @@ $ pnpm run dev
 
 サーバーが起動し、 http://localhost:4321 に以下のようなページができれば成功です。
 
+> [!NOTE]
+> `localhost:4321`は「自分のパソコン上の4321番ポートで動いているサーバー」という意味です。開発中は、このURLでWebサイトを確認できます。
+
 ![](/docs/ch0/img/astro-init-screenshot.png)
 
 Astroへようこそ 🚀
@@ -103,7 +106,7 @@ $ git push
 
 ### (補足)VSCodeでgit操作
 
-gitのコマンドを覚えるの、大変ですよね。でも大丈夫！VSCodeにはgitを操作するツールがついています！
+gitのコマンドを覚えるのは大変ですが、VSCodeにはgitを操作するツールが付属しています。
 
 ![](/docs/ch0/img/vscode-git.png)
 

docs/ch0/3_astro_tech.md

@@ -18,7 +18,7 @@ JavaScriptに静的な型をつけられるようにした言語です。
 
 ## JSX
 
-HTML(厳密には違う)をJavaScriptのコード内に書けるようにした言語です。元々はReactというWebフレームワークのために作られました。
+HTMLのようにタグを書きながら、JavaScriptのロジックも一緒に書ける記法です。元々はReactというWebフレームワークのために作られました。
 
 ```jsx
 function Hello(name) {
@@ -29,6 +29,6 @@ function Hello(name) {
 }
 ```
 
-HTMLをJavaScriptのロジックで記述できるため、複雑なUIも比較的楽に書けるメリットがあります。
+HTMLの書き方とJavaScriptの変数や関数を組み合わせることで、複雑なUIをもったWebページを作りやすくなります。
 
 [次のページへ](/docs/ch0/4_javascript.md)

docs/ch0/4_javascript.md

@@ -57,7 +57,7 @@ console.log(object);
 console.log(object.name);
 ```
 
-これを実行してみると色々出力されますよね。順番に見ていきましょう。
+これを実行してみると様々な値が出力されます。順番に確認していきましょう。
 
 ### 変数の定義
 
@@ -67,7 +67,7 @@ JavaScriptには2つの変数があります。
 
 - `const variable = ...`
   - constは変更不可能です。
-- `let varivable = ...`
+- `let variable = ...`
   - letは変更可能です。
   - `variable = ...` という形で代入する値を変えられます。
 
@@ -113,13 +113,13 @@ console.log(multiplyNumber(5, 3)); // Output: 15
 
 ```
 
-実行すると、8と2が出力されるはずです。
+実行すると、8、2、15が出力されます。
 
 JavaScriptには関数定義の方法が2つあります。通常の関数宣言とアロー関数です。
 
-アロー関数は比較的近年できた方法です。短く書けるので推奨している人も多いです。
+アロー関数は比較的近年できた記法です。短く書けるので推奨している人も多いです。
 
-特にmapメソッドなどは圧倒的に楽になります。
+特にmapメソッド（配列の各要素を変換する機能）などでは、コードがとても短くなり便利です。
 
 ```js
 const numArray = [1, 2, 3]
@@ -196,13 +196,13 @@ export const subtractNumber = (a, b) => {
 
 ```js
 // index.js インポート側
-import { addNumber, substractNumber } from './lib' // 名前は固定される
+import { addNumber, subtractNumber } from './lib.js' // 名前は固定される
 
 console.log(addNumber(5, 3)); // Output: 8
 console.log(subtractNumber(5, 3)); // Output: 2
 ```
 
-#### default import
+#### default export
 
 `export default` という構文を用います。1ファイルあたり1つしか使うことができませんが、インポート側で名前を変更することができます。
 
@@ -247,9 +247,9 @@ const addNumber = (a, b) => {
 + console.log(addNumber(1, '2')); // 12
 ```
 
-これはJavaScriptの仕様で、文字列型が優先されるのです。これは意図していない動作ですよね。
+JavaScriptは実行時に変数の型を判別するため、このようなことが起こります。これは意図していない動作ですよね。
 
-では、これを防ぐにはどうしたらいいでしょうか。ここで登場するのが **TypeScript** です。
+これを防ぐにはどうしたらいいでしょうか。ここで登場するのが **TypeScript** です。
 
 ### TypeScriptの初歩
 
@@ -308,11 +308,11 @@ index.ts:5:26 - error TS2345: Argument of type 'string' is not assignable to par
 Found 1 error in index.ts:5
 ```
 
-きちんとエラーが出てくれました。これでバグを未然に防ぐことができましたね。
+きちんとエラーが検出されました。これでバグを未然に防ぐことができます。
 
 このように、プログラムが実行される際に、データ型に矛盾が生じないことを保証することを **型安全性** と呼びます。
 
-TypeScriptは **JavaScriptの型安全を高めた言語** といえるでしょう。
+TypeScriptは **JavaScriptに型安全性を追加した言語** といえるでしょう。
 
 ### 型定義の `type` と `interface`
 

docs/ch1/3_create_layout.md

@@ -132,7 +132,7 @@ header {
 </style>
 ```
 
-既にCSSについては学習しているかと思いますので詳細は説明しませんが、flexboxを活用して両脇に配置していますね。
+既にCSSについては学習済みかと思いますので詳細は省略しますが、flexboxを活用して両脇に配置しています。
 
 これを `src/layouts/default.astro` で読み込みましょう。
 
@@ -157,15 +157,15 @@ import '../styles/global.css'
 </html>
 ```
 
-こんな感じのヘッダーが確認できるはずです！
+こんな感じのヘッダーが確認できます。
 
 ![](/docs/ch1/img/header.png)
 
 ここまでのコミットログ: [ac7c995](https://github.com/s-union/astro-hands-on/commit/ac7c995e629858189fc5a80f1e56b4eaa3dd30b1)
 
 ## フッターを作ろう
 
-続いてフッターも簡易的にですが実装しましょう。今回は事前に読み込んだCSSでフッターが一番下になるように調整されているのでそのまま書いていきます。
+続いてフッターも簡単なものを実装しましょう。今回は事前に読み込んだCSSでフッターが一番下になるように調整されているのでそのまま書いていきます。
 
 ```astro
 ---

docs/ch1/4_create_pages.md

@@ -53,9 +53,12 @@ const { title } = Astro.props;
 </style>
 ```
 
-注目すべきなのは `Props` の部分です。各コンポーネントはpropsという引数を定義し、そこに好きな値を入れることで、コンポーネントの再使用性を高めています。
+注目すべきなのは `Props` の部分です。各コンポーネントはprops（プロパティ）という引数を定義し、そこに値を入れることで、コンポーネントの再使用性を高めています。
 
-ただし、どんな値でも入れてよいわけではなく、今回の場合は `title` に `string` 型のみが入るよう設定しています(ここはTypeScriptの記述方式ですね)。
+> [!NOTE]
+> propsとは「properties（属性）」の略で、コンポーネントに外部から値を渡すための仕組みです。
+
+ただし、どんな値でも入れてよいわけではなく、今回の場合は `title` に `string` 型（文字列）のみが入るよう設定しています(これはTypeScriptの機能ですね)。
 
 ### Titleコンポーネントを利用しよう
 

docs/ch2/1_markdown.md

@@ -8,7 +8,7 @@
 
 Markdownとは、文章を記述するための軽量なマークアップ言語です。シンプルな記述で太字や斜線、見出しなどの装飾を行うことができます。MarkdownはHTMLに変換することを念頭に設計されましたが、その手軽さと汎用性の高さからWordやPowerpointなどの別のファイル形式にも変換できるようなツールも開発されています。
 
-**このハンズオンもMarkdownで記述されています。** PreviewをCodeにするとそれが分かると思います。
+**このハンズオンもMarkdownで記述されています。** PreviewをCodeにするとそれが確認できます。
 
 ## Markdownの書き方
 
@@ -20,7 +20,7 @@ Markdownはただのプレーンテキストですので、メモ帳などでも
 
 ## Markdownの記法
 
-Markdownには様々な仕様(方言)が存在していますが、[GitHub Flavored Markdown](https://github.github.com/gfm/)という仕様がよく用いられています。今回のハンズオンでもこの仕様に準拠した形で説明したいと思います。
+Markdownには様々な書き方の仕様（方言）が存在していますが、[GitHub Flavored Markdown](https://github.github.com/gfm/)というGitHubが定めた標準的な仕様がよく用いられています。今回のハンズオンでもこの仕様に沿って説明したいと思います。
 
 ### 見出し
 
@@ -146,7 +146,7 @@ Markdownには様々な仕様(方言)が存在していますが、[GitHub Flavo
 
 これらのMarkdownはあくまでも一例です！この他にも、例えば[TeX互換の数式を扱えたり](https://docs.github.com/ja/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions)、[ハイライト付きのコードブロックを使えたり](https://docs.github.com/ja/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks)します。
 
-参考資料をベースに調べてみるといいでしょう。
+参考資料をベースに調べてみることをお勧めします。
 
 ## 参考
 

docs/ch2/3_content_collection.md

@@ -3,7 +3,7 @@
 Astroではコンテンツ管理を行うための機能が備わっています。今回はこれを利用して、ブログ記事を型安全に取り出す方法を学びます。
 
 > [!IMPORTANT]
-> 今回の内容はTypeScriptをある程度理解している人向けですので、全てを理解する必要はありません。難しいと感じたらコピペでも大丈夫です。
+> 今回の内容は少し高度ですが、サンプルコードをコピーして使えばちゃんと動作します。最初は全てを理解する必要はありませんので、まずは手を動かして体験してみることから始めましょう。
 
 ## コンテンツ管理の設定をしよう
 
@@ -34,7 +34,10 @@ export const collections = { blog };
 
 ### 解説
 
-Astroには `defineCollection` という関数を定義し、それをエクスポートすることで、外部から型安全にコンテンツを参照する仕組みがあります。
+Astroには `defineCollection` という関数を用意して、それをエクスポートすることで、外部から安全にコンテンツを参照する仕組みがあります。
+
+> [!NOTE]
+> これによって、ブログ記事などのコンテンツを簡単に管理できるようになります。また、TypeScriptの型チェック機能により、データの形式が正しいかどうかも自動で確認してくれます。
 
 <details>
 <summary>より詳細な解説(TypeScriptに慣れている人向け)</summary>
@@ -43,11 +46,17 @@ Astroには `defineCollection` という関数を定義し、それをエクス
 
 #### loader
 
-コンテンツを読み込む方式を定義します。今回の場合、 `glob` という関数を用いて `src/content/blog` 以下の拡張子 `.md` のファイルを読み込むように指定しています。
+コンテンツを読み込む方式を定義します。
+
+> [!NOTE]
+> loaderとは、ファイルをどのように読み込むかを決める設定です。今回は `glob` という機能を使って、`src/content/blog` フォルダ内のすべての `.md` ファイルを自動で見つけて読み込むように設定しています。
 
 #### schema
 
-スキーマという、loaderで読み込んだデータのデータ構造(今回の場合Markdownのフロントマター)を定義し、読み込み時にそのデータ構造と一致しているかをチェックします。
+スキーマ（schema）とは、データの構造や形式を定義するもので、ここではloaderで読み込んだデータのデータ構造（今回の場合Markdownのフロントマター）を定義し、読み込み時にそのデータ構造と一致しているかをチェックします。
+
+> [!NOTE]
+> 簡単に言うと「このブログ記事にはtitleとcreatedが必須で、updatedは任意」といったルールを決めることです。こうすることで、間違ったデータが入ってもエラーで教えてくれます。
 
 [Zod](https://zod.dev) というライブラリが元になっており、こうすることで予期しないデータ構造にエラーを出したり、コンテンツを読み込む際に型安全にオプションを使うことができます。
 
@@ -108,7 +117,10 @@ const { Content } = await render(entry);
 
 ### 解説
 
-Astroは `getStaticPaths()` という関数を使うことで、動的にルーティングを設定することができます。こうすることで、Markdownファイルを増やすだけで、自動でURLが設定されるようになり、管理の手間が省けるというわけです。
+Astroは `getStaticPaths()` という関数を使うことで、動的にルーティングを設定することができます。
+
+> [!NOTE]
+> これは「どのURLでどのページを表示するか」をプログラムで自動的に決める機能です。こうすることで、Markdownファイルを増やすだけで、自動でURLが設定されるようになり、管理の手間が省けるというわけです。
 
 <details>
 <summary>より詳細な解説(TypeScriptに慣れている人向け)</summary>

docs/ch2/4_blog_style.md

@@ -1,6 +1,6 @@
 # ブログのスタイルを調整しよう
 
-ここまででブログの記事を表示させることができましたが少し味気無いですね。CSSを書いてスタイルを調整していきましょう。
+ここまででブログの記事を表示させることができましたが、少し味気ないですね。CSSを書いてスタイルを調整していきましょう。
 
 ## 画像ファイルを読み込む
 
@@ -80,7 +80,7 @@ const image = imageModules[`../../images/${entry.data.cover}`];
 </style>
 ```
 
-Astroには `<Image />` というコンポーネントがあります。このコンポーネントに画像を渡すと、画像を自動で圧縮し、 `.webp` という拡張子で出力してくれます。ただファイルサイズが小さくなるだけでなく、現代のWebサイトは圧縮した画像形式である `.webp` か `.avif` であることが求められているので、これはとてもありがたい機能ですよね。
+Astroには `<Image />` というコンポーネントがあります。このコンポーネントに画像を渡すと、画像を自動で圧縮し、 `.webp` という拡張子で出力してくれます。ファイルサイズが小さくなるだけでなく、現代のWebサイトでは圧縮した画像形式である `.webp` や `.avif` の利用が推奨されているため、これは非常に有用な機能です。
 
 ## 残りのスタイルも調整する