Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vscodeでのNode.js利用準備

More than 1 year has passed since last update.

前回でvscodeの基本設定を理解したことにしてNode.jsを触っていく

Windows環境でのNode.jsのインストール

ここはvscodeとは関係なく共通でやるところ。

Node.jsはjavascriptプラットフォームであり、WindowsPCには規定でインストールされていない。Windowsに規定でインストールされているのはpowershell環境だけである…。よってNode.jsの公式からささっとインストールする。

powershellコンソールを起動し"node -v"と実行してバージョンが返ってくればOK。

環境設定(プロジェクト)

これからあなたはnodejsアプリケーションを開発する。ということで、それ用のフォルダを1つ用意し、そこをワークスペースとする。ワークスペースの作り方は前回のエントリの通り。

ワークスペースを作成したら、npm initでnodejsプロジェクトを初期化する。するとpackage.jsonが生成される。いくつか質問を投げられるが、全てEnterを押せばよい。

npmについて

npmとはnodejsのパッケージ管理ツールである。パッケージ管理ツールとはコマンド1つで指定したパッケージをしかるべきリポジトリ(ダウンロードサイト)からダウンロードしてくれるものである(もちろん他にも機能はある)。nodejsしかりphtyonしかり、最近の言語にはパッケージ管理システムが備わっており、このやり方が現在のデファクトスタンダードである。dllやらモジュールやらを窓の杜からダウンロードするのはやめましょう。

※ なお、我らがpowershellにもPackageManagementというそのまんまの名前すぎるパッケージマネジメントシステムが存在する。

環境設定(ESLint)

nodejsのコーディングルールをチェックしてくれるESLintをインストールする。

1. vscodeに拡張インストール

vscodeで拡張名"eslint"を指定するとインストールできる。

2. npm install eslint でeslintをダウンロード

nodejsのパッケージの一つとして存在するeslintをダウンロード

3. ダウンロードしたeslint.jsを設定する。

node .\node_modules\eslint\bin\eslint.js --init

で設定が可能である。

環境設定(開発に利用するパッケージ)

その他、自分が開発するプログラムに必要なパッケージを

npm install [パッケージ]

でダウンロードする。ダウンロードしたパッケージはnode_modulesというフォルダに保存される。また、package.jsonにパッケージ名が追記され、このプロジェクトでどのパッケージが必要であるかが記録されるようになる。仮に何らかの要因でダウンロードしたパッケージを消去して再ダウンロードしたい場合、単純に

npm install

を実行すればよい。githubなどより他人のプロジェクトをcloneした場合、通常github上にモジュールの実体はないがpackage.jsonに必要なパッケージの記録があるため、同じくnpm installを実行して環境を整える。

また、何らかの目的で依存しているパッケージをインストールしたくない場合、

.npmrc

に記載すると、指定したパッケージがインストールされなくなる。

デバッグ設定

vscodeではF5を押下する事でプログラムのデバッグ開始が可能である。試しに自分がプログラムを作成しF5を押下すると、フォルダのユーザーセッティング配下にlaunch.jsonが自動的に生成されてしまう。これが通常の動きかはよくわからない。とにかく、このlaunch.jsonに設定を記載する事で、デバッグ設定をカスタマイズできる。

通常、デバッグ設定をカスタマイズするニーズは少ないと思うが、デバッグ対象プログラムが複数ある場合(index.jsとapp.jsなど)、2通りの設定を記載する事で、どちらのプログラムに対してもデバッグを行うことが出来る。

余談だが、vscode全体のユーザー設定でデバッグ設定を記載することも可能である。この場合、GUIからの設定は出来ず、settings.jsonを直接いじるように誘導される。どちらにせよ、全体の設定で統一されたデバッグ設定を使うニーズは少ないと思われる。

自分用メモ

自分はWindowsでハードリンクを設定したフォルダで作業をしていたが、そのファイルにブレークポイントを設定してもブレークポイントが機能しなかった。デバッグ実行時はおそらくハードリンクパスではない、正規のファイル名でデバッグを実行しており、そのファイルにはブレークポイントが未設定と認識されたのではないか、と思われる。

teraco
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away