JavaScriptは、ウェブページに思考や反応の能力を与えるため、最も重要なフロントエンド言語の1つです。フロントエンド開発者であれば、IDEにJavaScriptを追加したいと思うかもしれません。このチュートリアルでは、VSCodeにJavaScriptをインストールする方法について説明します。
VSCodeにJavaScriptをインストールする
Visual Studio Codeは、完全に無料でオープンソースのコードエディターです。Microsoftによって開発されており、軽量で高速、拡張可能な設計のため、開発者から高く評価されています。このコードエディターはさまざまなプログラミング言語をサポートしており、このチュートリアルではJavaScriptに焦点を当てます。
VSCodeにJavaScriptをインストールするには、以下に記載されている手順に従う必要があります。
- Visual Studio Codeをインストールする
- Node.JSをインストールする
- JavaScriptプログラムを作成して実行する
これらについて詳しく説明します。
1] Visual Studio Codeをインストールする
まず、コンピューターにVisual Studio Codeをインストールする必要があります。これを行うには、code.visualstudio.comに移動して、お好みのプラットフォーム用のアプリをインストールします。ダウンロードしたら、ダウンロード場所に移動してコンピューターにインストールします。
2] Node.JSをインストールする
Node.jsは、Windows、Linux、Unix、macOSなどのさまざまなオペレーティングシステムで実行できる、無料でオープンソースのJavaScriptランタイム環境です。V8 JavaScriptエンジンを使用して、ウェブブラウザーの外でJavaScriptコードを実行します。Node.jsを使用すると、JavaScriptを使用してコマンドラインツールを作成したり、サーバー側のスクリプティングを実行したりできます。
拡張機能センターからNode.JS拡張機能パックをインストールできます。したがって、対応するアイコンをクリックして拡張機能セクションに移動し、「Node.JS」を探して、関連付けられているインストールアイコンをクリックします。このパッケージには、JavaScriptとNode.jsの作業に役立つ便利な拡張機能のコレクションが含まれています。
JavaScriptコードを実行するには、JavaScriptランタイムであるNode.jsをインストールする必要があります。公式サイトのNodejs.orgからダウンロードできます。ほとんどのユーザーにとって最も安定していて適しているため、LTS(長期サポート)バージョンを選択することをお勧めします。
3] JavaScriptプログラムを作成して実行する
コードを実行するための環境が作成されたので、コーディングを開始しましょう。これを行うには、まずVSCodeファイルを作成する必要があります。そのため、Visual Studio Codeを開き、[ファイル] > [新規ファイル]に移動します。任意の名前を付けますが、.js拡張子を使用します。したがって、「javascript.js」という名前を付けることができます。保存するには、Ctrl + Shift + Sまたは[ファイル] > [名前を付けて保存]を使用します。すべてが正常に機能していることを確認するには、次のコマンドを使用します。
console.log("Hello, world!");
このJavaScriptコードは、プログラムとの通信用のテキストベースインターフェイスであるコンソールを介して「Hello, world!」を出力します。
4] JavaScriptファイルを実行する
JavaScriptの実行は、Javaファイルの実行ほど簡単ではありません。ボタンをクリックするだけでコードを実行できるIDEにボタンを追加するCodeRunnerをインストールするか、ターミナルを開いて「cd」またはディレクトリ変更コマンドを使用してファイルパスに移動する必要があります。したがって、ファイルパス(cd ~/Desktop/JS)にcdしてから、node filename.jsを実行します。ただし、Code Runnerはこれを自動的に行います。
「node」は内部または外部コマンドとして認識されません
「「node」は内部または外部コマンドとして認識されません」というエラーが表示された場合は、システムにパス変数が定義されていません。したがって、環境変数にパスを定義するには、以下に記載されている手順に従う必要があります。
- Win + Rを押して「環境変数」と入力し、[システム環境変数の編集]セクションを開きます。
- [環境変数]をクリックします。
- [パス]を選択し、[編集]をクリックします。
- [新規]をクリックし、Nodejsがインストールされているパスを貼り付けます。私の場合は、「C:\Program Files\nodejs」でした
- [OK]をクリックします。
最後に、Visual Studio Codeを再起動して、問題が解決したかどうかを確認します。
VS CodeにJavaScriptを追加する方法
Visual Studio CodeにJavaScriptを追加するには、最初にVSCodeをインストールしてからNode.JSをインストールする必要があります。完了したら、.JSファイルを作成し、コードを作成してから、コードの記述を開始します。実行するには、ターミナルを使用してファイルパスに移動してから、node filename.jsを実行するか、Code Runner拡張機能をダウンロードします。
VS CodeでJavaScriptを実行できますか?
はい、VS CodeでJavaScriptを使用できます。実際、VS CodeはJavaScriptに対して優れたデバッグサポートを提供します。ブレークポイントの設定、オブジェクトの検査、コールスタックのナビゲート、デバッグコンソールでのコードの実行が簡単です。VS Codeでのデバッグの詳細については、code.visualstudio.comにアクセスしてください。
コメントする