JavaScript 開発環境をセットアップする方法-jsチュートリアル-php.cn

JavaScript 開発環境をセットアップする方法

Barbara Streisand

リリース： 2024-10-22 20:00:44

オリジナル

790 人が閲覧しました

記事 2: JavaScript 開発環境をセットアップする方法

はじめに

ブラウザコンソールで最初の JavaScript プログラムを作成したので、次は適切な開発環境をセットアップします。これは、コースを進めるにつれて、より複雑なコードを効率的に作成してテストするのに役立ちます。

この投稿では、開発者の間で最も人気のあるコードエディターの 1 つである Visual Studio Code (VS Code) を使用して開発環境をセットアップする方法を説明します。

ステップ 1: Visual Studio Code をインストールする

Visual Studio Code (VS Code) は、軽量でありながら強力なコードエディターです。無料で使いやすく、JavaScript との連携も良好です。

VS Code をインストールする手順:

VS コードをダウンロード: 公式 Web サイトにアクセスし、オペレーティングシステム (Windows、macOS、または Linux) のインストーラーをダウンロードします。
アプリケーションをインストールします: お使いのシステムに基づいてインストール手順に従ってください。通常は、ダウンロードしたファイルをダブルクリックし、プロンプトに従うだけで簡単です。

インストールしたら、Visual Studio Code を開きます。次のようになります:

How to Set Up Your JavaScript Development Environment

(これは VS Code インターフェイスのサンプル画像です)

ステップ 2: Node.js をインストールする (オプションですが推奨)

JavaScript はブラウザ内で実行されますが、Node.js をインストールすると、ブラウザの外で JavaScript を実行できるようになり、開発環境がより多用途になります。

Node.js をインストールする手順:

Node.js をダウンロード: Node.js Web サイトにアクセスし、オペレーティングシステムの LTS (長期サポート) バージョンをダウンロードします。
Node.js をインストールします: 指示に従ってインストールしてください。

インストール後、コマンドプロンプト (Windows) または ターミナル (macOS/Linux) を開き、次のコマンドを入力して Node.js がインストールされているかどうかを確認します。

node -v

ログイン後にコピー

これにより、Node.js のバージョン番号が返され、インストールが確認されます。

ステップ 3: 最初の JavaScript ファイルを作成する

VS Code がインストールされたので、最初の JavaScript ファイルを作成しましょう。

JavaScript ファイルの作成手順:

VS コードを開きます.
新しいフォルダーを作成します: コンピューター上に、JavaScript プロジェクト用のフォルダーを作成します。これは、JavaScript 学習などと呼ぶことができます。
VS Code でフォルダーを開きます: VS Code で、ファイル > に移動します。フォルダーを開き、作成したばかりのフォルダーを選択します。
新しい JavaScript ファイルを作成します: 左側のエクスプローラーパネルで、新しいファイル ボタンをクリックし (または Ctrl N を押して)、ファイルに script.js.

ステップ 4: VS Code で JavaScript を作成して実行する

それでは、新しい script.js ファイルに基本的な JavaScript を書いてみましょう。

例:

script.js に次のコードを記述します:

node -v

ログイン後にコピー

この JavaScript ファイルを実行するには、いくつかのオプションがあります:

オプション 1: ブラウザで JavaScript を実行する

同じフォルダーに HTML ファイル (例:index.html) を作成します。
次の基本的な HTML コードを追加します。

console.log("Hello, World from VS Code!");

ログイン後にコピー

ブラウザでindex.htmlを開きます(ファイルを右クリックして、Chromeで開くまたはお好みのブラウザを選択できます)。
ブラウザコンソール (F12 または Ctrl Shift I) を開くと、次のメッセージが表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

オプション 2: Node.js を使用して JavaScript を実行する (インストールされている場合)

コマンドプロンプト または ターミナル を開きます。
cd コマンドを使用して、script.js があるフォルダーに移動します。例えば：

Hello, World from VS Code!

ログイン後にコピー

次のコマンドを実行して、JavaScript ファイルを実行します。

cd path/to/javascript-learning

ログイン後にコピー

次のメッセージが表示されます:

node script.js

ログイン後にコピー

次のステップ

開発環境がセットアップされ、ブラウザーと Node.js の両方で JavaScript を正常に実行できたので、JavaScript プログラミングをさらに深く掘り下げる準備が整いました。次回の投稿では、JavaScript の変数と、それらを使用してデータを保存する方法について説明します。

さらにエキサイティングなレッスンをお楽しみに!

プロのヒント:

VS Code に慣れたら、コード lint 用の ESLint や変更時にブラウザを自動リロードする Live Server などの拡張機能をインストールすることで、ワークフローを強化できます。

私のウェブサイトにアクセスしてください - リドイ・ハサンのポートフォリオ
私の LinkedIn プロフィールにアクセスしてください - Ridoy Hasan

以上がJavaScript 開発環境をセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。