プログラミング
ローカル開発サーバー、ネットワークURL、ポート、ビルド、デプロイ、警告、Webエラーの用語集です。
42 件
ローカル開発
localhost
http://localhost:3001ブラウザまたはコマンドを実行しているコンピュータと同じコンピュータを指すホスト名。
サイトを、開発サーバーが実行されている同じMacまたはPCで確認する場合に、localhostを使用します。
スマートフォンまたはタブレットは独自のローカルホストを持ち、そのため、Macのローカルホストアドレスを使用できません。
http://localhost:3001ローカルサイトをlocalhostで開き、新しい参照ページを確認します。
ローカル開発
127.0.0.1
http://127.0.0.1:3001同じローカルコンピュータを指すループバックIPアドレス。
同じデバイスでのテストでは、通常、localhostと同じように使用されます。
http://127.0.0.1:3001localhostが正しく解決されない場合は、127.0.0.1を試してください。
ローカル開発
Dev server
npm run dev開発中に使用されるサーバーで、高速な再ビルドと開発専用の機能があります。
サイトのビルドまたはデプロイ前に、変更をプレビューするために使用します。
開発サーバーの動作は、常にデプロイされた本番環境の動作と同一ではありません。
npm run dev開発サーバーを開始して、iPhoneでページを確認できるようにします。
ローカル開発
Port
http://localhost:3001マシン上で接続を受信するサーバープロセスを識別する番号。
1つのサーバーがポート3001を使用している場合、別のサーバーは3002などの別のポートを使用する必要があります。
http://localhost:3001ポート3001がすでに使用中の場合は、別のポートで開発サーバーを開始します。
ローカル開発
Local URL
Local: http://localhost:3001開発サーバーが実行されている同じデバイスで使用されるアドレス。
開発マシンでのデスクトップブラウザのチェックには、ローカルURLを使用します。
Local: http://localhost:3001開発サーバーを開始した後、ローカル URL を教えてください。
ネットワーク接続
Network URL
Network: http://172.30.1.55:3001同じネットワーク上の他のデバイスが、開発サーバーにアクセスするために使用するアドレス。
iPhone、iPad、または同じWi-Fi上の別のコンピュータからサイトを確認する場合に使用します。
開発サーバーは、0.0.0.0などのネットワークアクセス可能なホストでリッスンする必要があります。
Network: http://172.30.1.55:3001開発サーバーをNetwork URLで開始して、iPadでテストできるようにします。
ネットワーク接続
IP address
172.30.1.55ネットワーク上のデバイスを識別する数値アドレス。
LAN IPを使用すると、同じWi-Fiネットワーク上の別のデバイスから開発サーバーにアクセスできます。
ローカルネットワークのIPアドレスは、Wi-Fiまたはルーターの状態が変化すると変更されることがあります。
172.30.1.55デバイスのテストに許可されたDevOriginsを追加する際には、現在のLAN IPアドレスを使用してください。
ネットワーク接続
Host
--hostname 0.0.0.0サーバーがリクエストをリッスンし始める際にバインドするアドレス。
0.0.0.0へのバインドにより、開発サーバーがネットワーク上の他のデバイスからアクセスできるようになります。
--hostname 0.0.0.0電話でのテスト用に、ホスト名 0.0.0.0 で開発サーバーを実行します。
ネットワーク接続
Same network
同じ Wi-Fi ネットワークに接続された Mac と iPhone同じローカルネットワークに接続されたデバイス。通常は同じWi-Fiルーターです。
スマートフォンは、ネットワーク設定が許可されている場合にのみ、Macの開発サーバーに接続できます。
同じ Wi-Fi ネットワークに接続された Mac と iPhoneサイトのデバッグ前に、iPhoneとMacが同じネットワークに接続されていることを確認します。
Next.js の動作
allowedDevOrigins
allowedDevOrigins: ['172.30.1.55']Next.jsの開発設定で、特定のオリジンが開発リソースにアクセスできるようにする機能。
LAN IPを使用して、電話またはタブレットからNext開発サーバーをテストする場合に必要になることがあります。
これは開発環境です。デプロイされた静的サイトは、同じ開発リソースへのアクセスパスを使用しません。
allowedDevOrigins: ['172.30.1.55']開発テスト用に、現在のLAN IPアドレスをallowedDevOriginsに追加する。
ネットワーク接続
Cross-origin
Blocked cross-origin requestスキーム、ホスト、またはポートが異なる、異なるオリジン間のリクエスト。
開発ツールは、デフォルトで機密性の高い開発リソースへのクロスオリジンアクセスをブロックする場合があります。
Blocked cross-origin requestこのクロスオリジン警告が、本番環境のデプロイメントに影響を与えるかどうかを説明してください。
Next.js の動作
HMR
/_next/webpack-hmrHot Module Replacementは、ブラウザを完全にリロードせずに、開発中に更新します。
HMR開発リソースがブロックされている場合、ページは読み込まれる可能性がありますが、インタラクティブな更新またはスクリプトが開発中に予期しない動作をする可能性があります。
HMRは開発時のみで、最終的な静的エクスポートには含まれません。
/_next/webpack-hmriPhoneの問題が、ブロックされたHMR開発リソースによって引き起こされているかどうかを確認します。
Next.js の動作
Turbopack
Next.js 16.2.5 (Turbopack)Next.jsで開発およびビルドワークフローに使用されるバンドラー。
開発サーバーまたはビルド出力に、その名前が表示されることがあります。
Next.js 16.2.5 (Turbopack)Turbopack の出力を要約し、ビルドが成功したかどうかを教えてください。
Next.js の動作
App Router
src/app/[locale]/reference/page.tsxアプリディレクトリに基づいたNext.jsのルーティングシステム。
フォルダの下にpage.tsxファイルを追加すると、ルートが作成されます。
src/app/[locale]/reference/page.tsxApp Routerのフォルダ構造を使用して、新しい参照ページを追加する。
Next.js の動作
generateStaticParams
generateStaticParams()Next.jsの関数で、どの動的ルートがビルド時に生成されるかを宣言します。
ローカルページは、これを使用して/en、/ko、/ja、およびその他の言語パスを作成します。
generateStaticParams()新しい参照ページに、すべてのロケールで generateStaticParams が設定されていることを確認してください。
ビルドと出力
Build
npm run buildサイトを本番環境または静的な出力用にコンパイルおよび準備するプロセス。
TypeScript、ルーティング、および静的生成の問題を検出するために、デプロイ前にビルドを実行します。
npm run buildビルドを実行し、新しいルートが生成されたことを確認します。
ビルドと出力
Lint
npm run lintスタイル、正確性、およびフレームワークのルールに関する問題を検出する、静的コードチェック。
Lintは、ビルドまたはコミット前の簡単なチェックです。
npm run lintリファレンスページを編集した後、`lint` を実行します。
ビルドと出力
Static export
output: "export"ページが実行中のサーバーを必要とする代わりに、静的ファイルとして生成されるビルド出力。
静的エクスポートは、サイトを事前に構築されたHTML、CSS、およびJavaScriptファイルとしてホストするのに役立ちます。
一部のサーバー専用機能は、静的なエクスポートでは動作しません。
output: "export"新しいページが、静的なエクスポートに対応していることを確認します。
ビルドと出力
SSG
● (SSG) prerendered as static HTML静的サイト生成は、ビルド時にページを作成します。
`generateStaticParams` を使用した参照ページは、ビルド時に各ロケールで生成されます。
● (SSG) prerendered as static HTMLビルド出力に、参照ルートがSSGとして表示されることを確認する。
ビルドと出力
Prerender
静的コンテンツとしてプリレンダーユーザーが要求する前にページをレンダリングする処理。通常はビルド時に行われます。
事前レンダリングされたページは、HTMLがすでに存在するため、高速に読み込まれます。
静的コンテンツとしてプリレンダーすべてのロケールページが正常にプリレンダーされていることを確認します。
ビルドと出力
Bundle
静的なJSバンドルブラウザで使用するために、コードと依存関係を組み合わせたコンパイル済みファイル。
大きなバンドルは、読み込み速度に影響を与える可能性があるため、サイトの成長に合わせて監視する必要があります。
静的なJSバンドル単純な参照ページの場合、重いライブラリを追加しないでください。
デプロイ
Deploy
静的な出力をデプロイする。作成したサイトを公開し、ユーザーがウェブ上でアクセスできるようにします。
デプロイは、ローカルチェック、Lint、およびビルドが成功した後に実行されます。
静的な出力をデプロイする。まだデプロイしないでください。ページを準備して、ビルドを実行してください。
デプロイ
Production
プロダクションデプロイメントユーザーがアクセスする、実際のデプロイ環境。
制作環境は、ローカルの開発サーバーとは異なり、異なる方法でテストする必要があります。これは、開発環境でのみ利用可能な機能が本番環境には存在しないためです。
プロダクションデプロイメントこの警告が、本番環境に影響を与えるか、開発環境にのみ影響を与えるかを説明してください。
デプロイ
Hosting
静的なホスティングプロバイダーデプロイされたサイトファイルを保存および提供するサービスまたはサーバー。
静的エクスポートは、サーバー側のロジックが不要な場合に、静的ホスティングによって配信できます。
静的なホスティングプロバイダー出力が、静的ホスティングで動作することを確認してください。
デプロイ
Domain
example.comユーザーがサイトにアクセスするために入力する、人間が読めるアドレス。
ドメインは、DNSを介してデプロイされたホスティングの場所を指します。
example.com本番環境で動作するリンクに、`localhost` を直接記述しないでください。
デプロイ
DNS
レコード / CNAMEレコードドメイン名をサーバーまたはホスティングターゲットにマッピングするシステム。
カスタムドメインからデプロイされたサイトにアクセスするには、DNSが正しく構成されている必要があります。
レコード / CNAMEレコード問題がDNSの問題なのか、アプリケーションのビルドの問題なのかを説明してください。
デプロイ
Cache
clear browser cacheページを高速にロードするために使用されるファイルのコピーまたは応答を保存します。
デプロイ後、古いキャッシュされたファイルにより、ブラウザが以前のバージョンを表示し続けることがあります。
clear browser cache古いページがキャッシュによってまだ表示されているかどうかを確認します。
実行環境
Node.js
node --version開発ツール、ビルドスクリプト、およびサーバーを実行するために使用されるJavaScriptランタイム。
Next.js の dev コマンドと build コマンドは、Node.js で実行されます。
node --versionこの警告が Node.js、Next.js、またはアプリケーションコードから発生しているかどうか教えてください。
実行環境
npm
npm run buildJavaScriptプロジェクトで一般的に使用されるパッケージマネージャーおよびスクリプト実行ツール。
package.json には、npm が実行できる dev、lint、build などのスクリプトが定義されています。
npm run build`npm build` スクリプトを実行し、結果をまとめます。
実行環境
package.json
"scripts": { "dev": "next dev -p 3001" }スクリプト、依存関係、およびパッケージメタデータを定義するプロジェクトファイル。
プロジェクトが実行することを想定しているコマンドを知るために、package.jsonを確認します。
"scripts": { "dev": "next dev -p 3001" }実行する開発コマンドを決定する前に、package.jsonを確認します。
実行環境
Environment variable
NEXT_PUBLIC_SITE_URL=https://example.comソースコード以外のアプリまたはビルド環境に供給される値。
環境変数は、サイトのURL、APIキー、およびデプロイメント固有の設定に使用されます。
機密情報は、公開されているクライアント側の変数を通じて公開されるべきではありません。
NEXT_PUBLIC_SITE_URL=https://example.com環境変数が既に存在する場合は、本番サイトのURLを直接記述しないでください。
エラーと警告
404
404 Not Found要求されたページまたはファイルが見つからないことを意味するエラー。
ルートが削除、名前変更、または静的出力で生成されなかった場合に発生することがあります。
404 Not Found削除された古いprogramming-basicsのURLが、現在は404を返すかどうかを確認します。
エラーと警告
500
500 Internal Server Errorサーバーがリクエストを処理中に失敗したことを意味するエラー。
開発環境では、ターミナルまたはブラウザのオーバーレイに通常、ソースエラーが表示されます。
500 Internal Server Error500エラーが発生した場合は、ターミナルのエラーメッセージを確認し、エラーが発生しているファイルを特定します。
エラーと警告
Module not found
Module not found: Can't resolve '@/lib/programming'インポートが、見つからないファイルまたはパッケージを指していることを意味するエラー。
ファイルを移動、削除、または名前変更したものの、インポートを更新しなかった場合に発生することがよくあります。
Module not found: Can't resolve '@/lib/programming'削除されたファイルを参照しているインポートをすべて検索し、更新する。
エラーと警告
Export not found
Export programmingBasicsCopy doesn't existファイルが存在するが、要求された名前付きエクスポートがそのファイルによって提供されていないことを意味するエラー。
データオブジェクトの名前が変更されたものの、インポートが古い名前を使用している場合に発生することがあります。
Export programmingBasicsCopy doesn't exist古いエクスポート名を、新しい名前に変更します（すべての箇所で）。
エラーと警告
EADDRINUSE
listen EADDRINUSE: address already in use 0.0.0.0:3001別のプロセスが、要求されたホストとポートを使用していることを意味するエラー。
意図的に置き換えたい場合は、別のポートを使用するか、既存のサーバーを停止します。
listen EADDRINUSE: address already in use 0.0.0.0:3001EADDRINUSEが表示された場合は、どのポートが使用中かを確認し、別のポートを使用してください。
エラーと警告
DeprecationWarning
[DEP0205] DeprecationWarning: module.register() is deprecatedAPIは現在機能していますが、後で削除または変更される可能性があるという警告。
警告は注意する必要がありますが、必ずしもビルドを中断するエラーではありません。
[DEP0205] DeprecationWarning: module.register() is deprecatedこの DeprecationWarning が無害であるか、コードの変更が必要であるか教えてください。
エラーと警告
Hydration
Hydration failed because the server rendered HTML didn't matchクライアントサイドのJavaScriptが、サーバーでレンダリングされたHTMLに接続するプロセス。
ミスマッチエラーは、サーバーとクライアントが異なる初期コンテンツをレンダリングする場合に発生します。
Hydration failed because the server rendered HTML didn't matchハイドレーションが失敗した場合は、クライアントでどのように異なるコンポーネントがレンダリングされるかを確認します。
コマンド
npm run dev
npm run devローカル開発サーバーを開始するプロジェクトスクリプト。
ページを編集し、変更をローカルで確認する場合に利用します。
npm run dev`npm run dev` を実行し、ローカル URL とネットワーク URL を教えてください。
コマンド
npm run build
npm run buildプロダクションビルドまたは静的エクスポートを作成するプロジェクトスクリプト。
アプリケーションが正常に生成されることを確認するために、変更後に実行します。
npm run build`npm run build` を実行し、警告またはエラーをまとめます。
コマンド
npm run lint
npm run lintlintチェックを実行するプロジェクトスクリプト。
ビルド前に実行し、多くのコードの問題を迅速に特定します。
npm run lintサイトをビルドする前に `lint` を実行します。
コマンド
curl
curl -I http://localhost:3001/koHTTPリクエストを行い、応答を確認するためのコマンドラインツール。
curl can quickly check whether a local or deployed page responds with 200, 404, or another status.
curl -I http://localhost:3001/ko新しい参照ルートが200を返すかどうかを確認するために、curlを使用します。