diff --git a/src/content/docs/ja/tutorial/1-setup/1.mdx b/src/content/docs/ja/tutorial/1-setup/1.mdx index c679227efcee6..973b1cf3c7e94 100644 --- a/src/content/docs/ja/tutorial/1-setup/1.mdx +++ b/src/content/docs/ja/tutorial/1-setup/1.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Astroウェブサイトの作成に使用するツールをインストールする @@ -52,9 +51,9 @@ v18.14.1 このチュートリアルでは**VS Code**を使用しますが、お使いのオペレーティングシステムに対応したエディタであれば何でも構いません。 ::: + 1. [VS Code](https://code.visualstudio.com/#alt-downloads)またはお好みのコードエディタをダウンロードしてインストールしてください。 - - + diff --git a/src/content/docs/ja/tutorial/1-setup/2.mdx b/src/content/docs/ja/tutorial/1-setup/2.mdx index 31c402e358617..b2b37abc0d62b 100644 --- a/src/content/docs/ja/tutorial/1-setup/2.mdx +++ b/src/content/docs/ja/tutorial/1-setup/2.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - `create astro` セットアップウィザードを実行して、新しいAstroプロジェクトを作成する @@ -25,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 新しいAstroサイトを作成するおすすめの方法は、`create astro`セットアップウィザードを使用することです。 + 1. ターミナルのコマンドラインで、お好みのパッケージマネージャーを使用して次のコマンドを実行します。 @@ -57,21 +57,23 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 4. スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。 -5. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、`y`を入力します。 +5. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、`n`を入力します。 -6. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、`n`を入力します。 +6. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、`y`を入力します。 7. プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、`y`を入力します。 + インストールウィザードが完了したら、このターミナルはもう不要です。VS Codeを開いて続きの作業をおこないます。 ## VS Codeでプロジェクトを開く -1. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。 + +8. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。 -2. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、[Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。 +9. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、[Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。 -3. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。 +10. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。 ```sh user@machine:~/tutorial$ @@ -80,18 +82,19 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; :::tip[キーボードショートカット] ターミナルの表示と非表示を切り替えるには、Ctrl + J（macOSではCmd ⌘ + J）を使用します。 ::: + これで、コンピュータのターミナルアプリではなくウィンドウ内のターミナルを使用して、チュートリアルの残りの部分を進められるようになりました。 - ## Astroをdevモードで実行する 作業中にプロジェクトファイルをウェブサイトとしてプレビューするには、Astroを開発（dev）モードで実行する必要があります。 ### devサーバーを起動する -1. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。 + +11. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。 @@ -112,18 +115,21 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Astroがdevモードで実行されていることをターミナル上で確認できるはずです。🚀 + ## ウェブサイトのプレビューを確認する プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。 -1. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！ + +12. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！ （Astroは、ポート4321が使用可能な場合、デフォルトで`http://localhost:4321`を使用します。） Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。 ![Astroという単語が上部に表示された白い空白のページ。](/tutorial/minimal.png) + :::tip[Astroのdevサーバーを使用する] diff --git a/src/content/docs/ja/tutorial/1-setup/3.mdx b/src/content/docs/ja/tutorial/1-setup/3.mdx index 5bb6940873807..66e52b501495f 100644 --- a/src/content/docs/ja/tutorial/1-setup/3.mdx +++ b/src/content/docs/ja/tutorial/1-setup/3.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - 新しいウェブサイトに最初の編集を加える @@ -21,6 +20,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ## ホームページを編集する + 1. コードエディターのファイルエクスプローラーペインで`src/pages/index.astro`に移動し、これをクリックしてファイルの内容を編集可能なタブで開きます。 `index.astro`ファイルの内容は以下のようになっています。 @@ -32,7 +32,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; - + Astro @@ -55,6 +55,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` 3. ブラウザ上のプレビューを確認すると、ページの内容が新しいテキストに更新されているはずです。 + おめでとうございます！あなたはもうAstroの開発者です！ diff --git a/src/content/docs/ja/tutorial/1-setup/4.mdx b/src/content/docs/ja/tutorial/1-setup/4.mdx index 7eaaf30d0bc56..7e49b0b5be397 100644 --- a/src/content/docs/ja/tutorial/1-setup/4.mdx +++ b/src/content/docs/ja/tutorial/1-setup/4.mdx @@ -10,8 +10,7 @@ import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - プロジェクトリポジトリをオンラインに保存する @@ -27,6 +26,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ローカルのコードをGitHubに保存する方法はいくつかありますが、このチュートリアルでは、コマンドラインのgitを使わない方法を紹介します。 + 1. ブラウザでGitHub.comにログインし、画面右上の+をクリックして新しいリポジトリを作成します。 2. リポジトリの名前を決めます。プロジェクトフォルダーと同じ名前である必要はありません。 @@ -34,13 +34,13 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 3. いくつかのオプションが表示されますが、デフォルトのままで構いません。下にスクロールしてCreate Repositoryボタンをクリックします。 4. 次におこなうべきセットアップの手順が複数表示されますが、これらは必要ありません。リポジトリのURLをメモしておいてください。このままページを閉じて構いません。 - + ## ローカルのコードをGitHubにコミットする 一つ前のセクションで、ページのコンテンツを変更しました。プロジェクトファイルが変更されたことにより、VS Codeの「ソース」メニューアイコンの上に数字が表示されているはずです。このソースタブは、GitHub上のファイルを更新するために定期的にアクセスする場所です。 - + 1. ソース管理タブをクリックすると、変更されたファイルのリストが表示されます。`git`をインストールする必要があるというメッセージが表示された場合は、指示に従ってからVS Codeをリロードします。 2. コミットメッセージの上にある「3点リーダー」•••メニューをクリックし、リモート > リモートを追加するを選択します。 @@ -54,7 +54,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; 6. ステージされたコミットがないというメッセージが表示され、ステージするかどうか尋ねられる場合があります。常時をクリックして続行します。 7. 最後に、変更されたファイルのリストが公開ボタンに置き換わります。これをクリックして、コミットした変更をGitHubに送信します。 - + ### GitHubでプロジェクトを確認する diff --git a/src/content/docs/ja/tutorial/1-setup/5.mdx b/src/content/docs/ja/tutorial/1-setup/5.mdx index 6177f1e96b98e..059ca17b3a6c6 100644 --- a/src/content/docs/ja/tutorial/1-setup/5.mdx +++ b/src/content/docs/ja/tutorial/1-setup/5.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - GitHubのリポジトリを新しいNetlifyアプリとして追加する @@ -28,6 +27,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ## 新しいNetlifyサイトを作成する + 1. もしまだであれば、[Netlify](https://netlify.com)で無料アカウントを作成します。 ユーザー名をメモしておきます。`https://app.netlify.com/teams/username`で、ダッシュボードと作成済みのサイトが表示されます。 @@ -37,6 +37,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; Gitプロバイダーに接続するように求められます。GitHubを選択し、画面の指示に従ってGitHubアカウントを認証します。次に、提供されたリストからAstroプロジェクトのGitHubリポジトリを選択します。 3. 最後のステップでは、Netlifyがアプリのサイト設定を表示します。Astroプロジェクトの場合はデフォルトのままで問題ないため、下にスクロールしてDeploy siteをクリックします。 + おめでとうございます、Astroウェブサイトが作成できました！ diff --git a/src/content/docs/ja/tutorial/1-setup/index.mdx b/src/content/docs/ja/tutorial/1-setup/index.mdx index 56bfbeaa64eaa..4f83ce5bef2c5 100644 --- a/src/content/docs/ja/tutorial/1-setup/index.mdx +++ b/src/content/docs/ja/tutorial/1-setup/index.mdx @@ -10,6 +10,7 @@ i18nReady: true import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; +import { Steps } from '@astrojs/starlight/components'; これから何を作成するのかわかったところで、必要なツールを準備していきましょう！ @@ -22,6 +23,8 @@ import Box from '~/components/tutorial/Box.astro'; 以下の手順に従って、ユニット2に進んでください！ **StackBlitzを設定する** + + 1. [astro.new](https://astro.new)にアクセスし、「Empty Project」テンプレートの「Open in StackBlitz」ボタンをクリックします。 2. 右上にある「Sign in」ボタンをクリックして、GitHubの認証情報を使いログインします。 @@ -29,6 +32,7 @@ import Box from '~/components/tutorial/Box.astro'; 3. StackBlitzのエディタウィンドウの左上にある「Fork」をクリックして、テンプレートを保存します。 4. プロジェクトが読み込まれるまで待つと、「Empty Project」スターターのライブプレビューが表示されます。 + **変更を加える** @@ -36,9 +40,11 @@ import Box from '~/components/tutorial/Box.astro'; **GitHubリポジトリを作成する** + 1. ファイルリストの一番上にあるConnect Repositoryボタンを押して、新しいリポジトリの名前を入力し、Create repo & pushをクリックします。 2. GitHubにコミットすべき変更があると、ワークスペースの左上に「Commit」ボタンが表示されます。これをクリックすると、コミットメッセージを入力してリポジトリを更新できます。 + **サイトをデプロイする**