i18n(ja): Add new ”develop-and-build.mdx” translation (#10452)

* i18n(ja): Add new `develop-and-build.mdx` translation

* modified some contents

---------

Co-authored-by: Yan <[email protected]>

src/content/docs/ja/develop-and-build.mdx

@@ -0,0 +1,144 @@
+---
+title: 開発とビルド
+description: '新しいプロジェクトの作業を始める方法'
+i18nReady: true
+---
+import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+Astroプロジェクトが用意できたら、いよいよAstroでの開発を始めましょう！🚀
+
+## プロジェクトを編集する
+
+プロジェクトを編集するには、コードエディターでプロジェクトフォルダを開きます。開発モードでdevサーバーを実行すると、コードを編集するたびにサイトの更新内容をリアルタイムで確認できます。
+
+また、[開発環境をカスタマイズ](#開発環境を設定する)することで、TypeScriptの設定やAstro公式エディター拡張機能のインストールなどが行えます。
+
+### Astroのdevサーバーを起動する
+
+Astroには開発用の組み込みサーバーがあり、プロジェクト開発に必要なすべてが揃っています。`astro dev` CLIコマンドを使うことで、ローカルの開発サーバーを起動し、新しいWebサイトの動作を確認できます。
+
+すべてのスターターテンプレートには、`astro dev`を実行するためのスクリプトがあらかじめ設定されています。プロジェクトディレクトリに移動したら、お気に入りのパッケージマネージャーを使用してこのコマンドを実行し、Astroの開発サーバーを起動しましょう。
+
+<Tabs>
+  <TabItem label="npm">
+  ```shell
+  npm run dev
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```shell
+  pnpm run dev
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```shell
+  yarn run dev
+  ```
+  </TabItem>
+</Tabs>
+
+すべてが正常に動作すれば、Astroは[http://localhost:4321/](http://localhost:4321/)でプロジェクトを配信します。ブラウザでそのリンクを開き、新しいサイトを確認しましょう！
+
+### 開発モードで作業する
+
+Astroは`src/`ディレクトリ内のファイル変更をリアルタイムで検出し、サイトのプレビューを自動的に更新します。そのため、開発中にサーバーを再起動する必要はありません。devサーバーが実行中であれば、常に最新のサイトプレビューをブラウザで確認できます。
+
+ブラウザでサイトを表示すると、[Astro devツールバー](/ja/guides/dev-toolbar/)にアクセスできます。これを使えば、[アイランド](/ja/concepts/islands/)の検証やアクセシビリティの問題の特定など、開発作業をサポートしてくれます。
+
+もしdevサーバー起動後にブラウザでプロジェクトが開けない場合は、`dev`コマンドを実行したターミナルに戻り、表示されているメッセージを確認してください。エラーが発生した場合や、プロジェクトが [http://localhost:4321/](http://localhost:4321/)以外のURLで提供されている場合には、そのメッセージに詳細が表示されているはずです。
+
+## サイトのビルドとプレビュー
+
+ビルド時に生成されるサイトのバージョンを確認するには、まずdevサーバーを停止します(<kbd>Ctrl</kbd> + <kbd>C</kbd>)。その後、ターミナルで使用しているパッケージマネージャーに対応するビルドコマンドを実行します:
+
+    <Tabs>
+      <TabItem label="npm">
+      ```shell
+      npm run build
+      ```
+      </TabItem>
+      <TabItem label="pnpm">
+      ```shell
+      pnpm build
+      ```
+      </TabItem>
+      <TabItem label="yarn">
+      ```shell
+      yarn run build
+      ```
+      </TabItem>
+    </Tabs>
+
+Astroは、デプロイ可能なサイトを別のフォルダ（デフォルトでは`dist/`）にビルドします。ターミナルで進行状況を確認でき、ビルド中にエラーが発生した場合は通知されます。これにより、本番環境へデプロイする前にプロジェクトのビルドエラーを把握できます。また、TypeScriptが`strict`または`strictest`に設定されている場合、`build`スクリプトは型エラーのチェックも実行します。
+
+ビルドが完了したら、ターミナルで適切な`preview`コマンド（例: `npm run preview`）を実行すると、ローカルでビルドされたサイトをブラウザプレビューで確認できます。
+
+このプレビューは、ビルドコマンドを最後に実行した時点のコードに基づいています。これは、Webにデプロイされた際のサイトの見た目を確認するためのものです。ビルド後にコードを変更しても、ビルドコマンドを再実行するまではプレビューに**反映されません**のでご注意ください。
+
+プレビューを終了し、他のターミナルコマンドを実行するには、(<kbd>Ctrl</kbd> + <kbd>C</kbd>)を使用してください。例えば、devサーバーを再起動すれば、開発モードに戻り、編集したコードのライブプレビューがリアルタイムで確認できます。
+
+<ReadMore>Astro CLIと、ビルド中に使用するターミナルコマンドについての詳細は、[Astro CLIリファレンス](/ja/reference/cli-reference/)をご覧ください。</ReadMore>
+
+:::tip 
+コードを追加・変更しすぎる前に、[新しいサイトをすぐにデプロイする](/ja/guides/deploy/)ことも検討しましょう。これにより、最小限の動作するバージョンを公開でき、後でデプロイ時に発生するトラブルシューティングの時間や労力を節約できます。
+:::
+
+## 次のステップ
+
+成功です!Astroでの開発準備が整いました!🥳
+
+次におすすめする作業をいくつか紹介します。どの順番で読んでも問題ありません。また、ドキュメントから一旦離れてAstroプロジェクトのコードベースで自由に作業し、困った時や質問がある時に戻ってきても大丈夫です。
+
+### 開発環境を設定する
+
+以下のガイドを参考に、開発体験を自分好みに設定してみましょう。
+
+<CardGrid>
+  <LinkCard
+    title="エディターのセットアップ"
+    description="コードエディターをカスタマイズして、Astro開発を快適にし、新しい機能を活用しましょう。"
+    href="/ja/editor-setup/"
+  />
+  <LinkCard
+    title="Devツールバー"
+    description="Devツールバーの便利な機能を学びましょう。"
+    href="/ja/guides/dev-toolbar/"
+  />
+  <LinkCard
+    title="TypeScriptの設定"
+    description="型チェックやIntelliSenseなどのオプションを設定しましょう。"
+    href="/ja/guides/typescript/"
+  />
+</CardGrid>
+
+### Astroの機能を学びましょう
+
+<CardGrid>
+  <LinkCard
+    title="コードベースを理解する"
+    description="プロジェクト構造ガイドでAstroのファイル構造について学びましょう。"
+    href="/ja/basics/project-structure/"
+  />
+  <LinkCard
+    title="コンテンツコレクションを作成する"
+    description="フロントマッターによる検証や自動型安全性を活用して、サイトにコンテンツを追加しましょう。"
+    href="/ja/guides/content-collections/"
+  />
+    <LinkCard
+    title="ビュー遷移を追加する"
+    description="シームレスなページ遷移やアニメーションを作成しましょう。"
+    href="/ja/guides/view-transitions/"
+  />
+  <LinkCard
+    title="アイランドについて学ぶ"
+    description="Astroのアイランドアーキテクチャについて詳しく学びましょう。"
+    href="/ja/concepts/islands/"
+  />
+</CardGrid>
+
+### 入門チュートリアルを試してみる
+
+[入門チュートリアル](/ja/tutorial/0-introduction/)では、空白ページから完全に機能するAstroブログを構築する方法を学べます。
+
+このチュートリアルでは、Astroの基本（ページ、レイアウト、コンポーネント、ルーティング、アイランドなど）を順を追って学習できます。さらに、Web開発が初めての方のために、必要なアプリケーションのインストール、GitHubアカウントの作成、サイトのデプロイ手順を学べる、オプションの初心者向け学習ユニットも用意されています。