--- title: "ローカル開発環境を整えましょう" slug: "set-up-your-local-development-environment" abstract: "まずはローカルの開発者環境を設定し、GitHubやAzureのDevOpsリポジトリをクローンし、アプリケーションを起動してSitecoreAIを使い始めましょう。" time: "10 minutes" --- # ローカル開発環境を整えましょう これは「入門ガイド」シリーズの第3部です。ここでの手順を完了する前に、[プロジェクトと環境を作成し](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/deploy-a-project-and-environment.html "Deploy a project and environment")、[サイトとページを作成し](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/create-a-site-and-a-page.html "Create a site and a page")ている必要があります。 このトピックでは、GitHubやAzureのDevOpsリポジトリをローカルマシンにクローンし、そのパッケージをインストールし、ローカルホストをプレビューエンドポイントに接続して作業を可視化することで、ローカル開発環境を設定する方法について説明します。 このウォークスルーシリーズでは、フロントエンド開発(FED)優先アプローチを採用し、[Dockerベースの開発アプローチ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/using-docker-for-full-stack-development.html "Using Docker for full-stack development")で適用される最低限のマシン固有の要件を排除しています。ただし、より良い開発者体験のためには常に性能のあるマシンが推奨されます。 ## Content SDK (Next.js) Content SDKを使ってローカル環境を設定するには: 1. 最新のNode.js LTSバージョンを必ずインストールしてください。 2. Deployアプリで、先ほど作成した環境を開いてください。まだデプロイログ画面にいる場合は、パンくずを使うか、**プロジェクト** タブからナビゲートできます。 ![The deployment log in the Deploy app](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/XMC_deploy_log_environment.png) 3. **開発者設定**タブで、コンテキストスイッチャーが**プレビュー**に設定されていることを確認してください。 ![The preview and live context switcher in the Developer settings in Deploy](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/XMC_deploy_dev_settings_preview.png) 4. 環境リポジトリのクローンコマンドをローカルマシンにコピーし、ターミナルで実行してください。クローンができたら、コードエディタでリポジトリを開きます。 5. Deployアプリに戻って、画面上のコードブロックから環境変数をコピーします。 6. /examples/kit-nextjs-skate-parkフォルダに新しい.env.localファイルを作成し、コピーした変数を貼り付けます。 > !注このウォークスルーでは、スターターリポジトリにあるSkate Parkのサンプルを使っています。箱から出してから使えるいくつかのコンポーネントが入っているからです。本格的なプロジェクトなら、examples/basic-nextjs (Next.jsプロジェクト)やexamples/basic-spa (Angularプロジェクト)のような空のプロジェクトから始めることが多いです。 7. ターミナルでディレクトリ(*CD*)をexamples/kit-nextjs-skate-parkフォルダに変更してください。 8. 必要なパッケージをインストールするには、npm installを実行してください。 9. アプリケーションヘッドをローカルで実行し、プレビューエンドポイントに接続するには、npm run devを実行してください。 10. ブラウザでhttp://localhost:3000/.例えば、*Hello Worldの組み込みコンポーネント*など、ページ[に追加](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/create-a-site-and-a-page.html "Create a site and a page")した際に入力したテキストが表示されるはずです。 ## ASP.NETコアSDK ASP.NET Core SDKを使ってローカル環境を設定するには: 1. Deployアプリで、先ほど作成した環境を開いてください。まだデプロイログ画面にいる場合は、パンくずを使うか、**プロジェクト** タブからナビゲートできます。 ![The deployment log in the Deploy app](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/XMC_deploy_log_environment.png) 2. **開発者設定**タブで、コンテキストスイッチャーが**プレビュー**に設定されていることを確認してください。 ![The preview and live context switcher in the Developer settings in Deploy](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/XMC_deploy_dev_settings_preview.png) 3. 環境リポジトリのクローンコマンドをローカルマシンにコピーし、ターミナルで実行してください。クローンができたら、コードエディタでリポジトリを開きます。 4. ./headapps/aspnet-core-starter/appsettings.jsonファイルを複製して、./headapps/aspnet-core-starter/appsettings.Development.jsonに名前を変えてください。 5. Deployアプリに戻って、画面上のコードブロックから環境変数をコピーし、新しく作成したappsettings.Development.jsonファイルに貼り付けます。 6. Visual Studio Codeを使っている場合は、F5を押してソリューションを作成して実行してください。コマンドラインインターフェースを使っている場合は、/headapps/aspnet-core-starter folderに移動してdotnet restore && dotnet runを実行します。 7. ブラウザでhttp://localhost:5001/.次に追加するコンポーネントをテストするために使う空白のページが見えるはずです。 これでローカル開発インスタンスが[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)環境にリンクされています。次に、[最初のコンポーネントを作成します](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/build-your-first-component.html "Build your first component")。