コンテンツにスキップ

開発とビルド

Astroプロジェクトが用意できたら、いよいよAstroでの開発を始めましょう！🚀

プロジェクトを編集する

セクションタイトル： プロジェクトを編集する

プロジェクトを編集するには、コードエディターでプロジェクトフォルダを開きます。開発モードでdevサーバーを実行すると、コードを編集するたびにサイトの更新内容をリアルタイムで確認できます。

また、開発環境をカスタマイズすることで、TypeScriptの設定やAstro公式エディター拡張機能のインストールなどが行えます。

Astroのdevサーバーを起動する

セクションタイトル： Astroのdevサーバーを起動する

Astroには開発用の組み込みサーバーがあり、プロジェクト開発に必要なすべてが揃っています。astro dev CLIコマンドを使うことで、ローカルの開発サーバーを起動し、新しいWebサイトの動作を確認できます。

すべてのスターターテンプレートには、astro devを実行するためのスクリプトがあらかじめ設定されています。プロジェクトディレクトリに移動したら、お気に入りのパッケージマネージャーを使用してこのコマンドを実行し、Astroの開発サーバーを起動しましょう。

ターミナルウィンドウ
npm run dev

すべてが正常に動作すれば、Astroはhttp://localhost:4321/でプロジェクトを配信します。ブラウザでそのリンクを開き、新しいサイトを確認しましょう！

開発モードで作業する

セクションタイトル： 開発モードで作業する

Astroはsrc/ディレクトリ内のファイル変更をリアルタイムで検出し、サイトのプレビューを自動的に更新します。そのため、開発中にサーバーを再起動する必要はありません。devサーバーが実行中であれば、常に最新のサイトプレビューをブラウザで確認できます。

ブラウザでサイトを表示すると、Astro devツールバー (EN)にアクセスできます。これを使えば、アイランドの検証やアクセシビリティの問題の特定など、開発作業をサポートしてくれます。

もしdevサーバー起動後にブラウザでプロジェクトが開けない場合は、devコマンドを実行したターミナルに戻り、表示されているメッセージを確認してください。エラーが発生した場合や、プロジェクトが http://localhost:4321/以外のURLで提供されている場合には、そのメッセージに詳細が表示されているはずです。

サイトのビルドとプレビュー

セクションタイトル： サイトのビルドとプレビュー

ビルド時に生成されるサイトのバージョンを確認するには、まずdevサーバーを停止します(Ctrl + C)。その後、ターミナルで使用しているパッケージマネージャーに対応するビルドコマンドを実行します:

ターミナルウィンドウ
npm run build

Astroは、デプロイ可能なサイトを別のフォルダ（デフォルトではdist/）にビルドします。ターミナルで進行状況を確認でき、ビルド中にエラーが発生した場合は通知されます。これにより、本番環境へデプロイする前にプロジェクトのビルドエラーを把握できます。また、TypeScriptがstrictまたはstrictestに設定されている場合、buildスクリプトは型エラーのチェックも実行します。

ビルドが完了したら、ターミナルで適切なpreviewコマンド（例: npm run preview）を実行すると、ローカルでビルドされたサイトをブラウザプレビューで確認できます。

このプレビューは、ビルドコマンドを最後に実行した時点のコードに基づいています。これは、Webにデプロイされた際のサイトの見た目を確認するためのものです。ビルド後にコードを変更しても、ビルドコマンドを再実行するまではプレビューに反映されませんのでご注意ください。

プレビューを終了し、他のターミナルコマンドを実行するには、(Ctrl + C)を使用してください。例えば、devサーバーを再起動すれば、開発モードに戻り、編集したコードのライブプレビューがリアルタイムで確認できます。

Astro CLIと、ビルド中に使用するターミナルコマンドについての詳細は、Astro CLIリファレンスをご覧ください。

次のステップ

セクションタイトル： 次のステップ

成功です!Astroでの開発準備が整いました!🥳

次におすすめする作業をいくつか紹介します。どの順番で読んでも問題ありません。また、ドキュメントから一旦離れてAstroプロジェクトのコードベースで自由に作業し、困った時や質問がある時に戻ってきても大丈夫です。

開発環境を設定する

セクションタイトル： 開発環境を設定する

以下のガイドを参考に、開発体験を自分好みに設定してみましょう。

エディターのセットアップ コードエディターをカスタマイズして、Astro開発を快適にし、新しい機能を活用しましょう。
Devツールバー Devツールバーの便利な機能を学びましょう。
TypeScriptの設定 型チェックやIntelliSenseなどのオプションを設定しましょう。

Astroの機能を学びましょう

セクションタイトル： Astroの機能を学びましょう
コードベースを理解する プロジェクト構造ガイドでAstroのファイル構造について学びましょう。
コンテンツコレクションを作成する フロントマッターによる検証や自動型安全性を活用して、サイトにコンテンツを追加しましょう。
ビュー遷移を追加する シームレスなページ遷移やアニメーションを作成しましょう。
アイランドについて学ぶ Astroのアイランドアーキテクチャについて詳しく学びましょう。

入門チュートリアルを試してみる

セクションタイトル： 入門チュートリアルを試してみる

入門チュートリアルでは、空白ページから完全に機能するAstroブログを構築する方法を学べます。

このチュートリアルでは、Astroの基本（ページ、レイアウト、コンポーネント、ルーティング、アイランドなど）を順を追って学習できます。さらに、Web開発が初めての方のために、必要なアプリケーションのインストール、GitHubアカウントの作成、サイトのデプロイ手順を学べる、オプションの初心者向け学習ユニットも用意されています。

貢献する コミュニティ Sponsor