今回のメインの開発環境Node.js、使用言語TypeScript、nodemon、Node.jsのフレームワークExpressまでインストールと必要な設定を行います。
プロジェクトを格納するディレクトリを作成
プロジェクトを格納するディレクトリを作成するためにターミナルを開きます。まずは⌘＋shiftを入力したらSpotlight検索が開きます。
そこにterminalと入力していくと検索候補の中にターミナルが現れます。選択してターミナルを開きます。
そして以下のコマンドを実行してください。ディレクトリ名をmemoappとしてmkdirで作成します。そしてcdでmemoappディレクトリに移動します。移動したらVS Codeを開きます。
作成するディレクトリの場所は好きなところでOKです。ただ後々わかりやすいように作成する場所を決めておくと良いでしょう。私はデスクトップ上にディレクトリを作成しています。
mkdir memoapp cd memoapp code .
VS Code上でCtrlキー＋shiftキー＋^キーを押すとVSCodeにターミナルが表示されます。次からはVS Codeのターミナルを使用します。
Node.js関連の環境設定
Node.jsのインストール
まずはNode.jsをインストールします。Node.jsに移動すると以下のように表示されます。ダウンロードの選択肢には推奨版と最新版があります。推奨版を選択してダウンロードします。LTSとは長期サポート版でリリースからバグフィックスが行われて安定しているので安心です。
node-v16.16.0.pkgがダウンロードされたらMySQLの環境を整えた時と同じようにインストールを指示通りに進めてください。
インストールが終わったら以下のコマンドをターミナルで実行します。Node.jsのバージョンが表示されたら成功です。
node -v v16.16.0
npm初期化処理 package.jsonを生成
次はpackage.jsonを生成します。以下のコマンドをターミナルで実行します。memoappディレクトリ内にpackage.jsonが自動生成されます。
mkdir memoapp cd memoapp npm init -y
TypeScript関連の環境設定
TypeScriptのインストール
まずはTypeScriptをインストールします。以下のコマンドをターミナルで実行します。
npm i -D typescript
@types/nodeのインストール
Node.jsをTypeScriptで扱えるようにするための@types/nodeパッケージをインストールします。以下のコマンドをターミナルで実行します。
npm i -D @types/node
ts-nodeのインストール
TypeScriptで直接実行するためのts-nodeパッケージをインストールします。以下のコマンドをターミナルで実行します。
npm i -D ts-node
TypeScript設定ファイル tsconfig.jsonを生成
次はtsconfig.jsonを生成します。以下のコマンドをターミナルで実行します。memoappディレクトリ内にtsconfig.jsonが自動生成されます。
npx tsc --init
tsconfig.jsonを見るとコメントアウトされたコードは不要なので削除します。ただコメントアウトされた”outDir”と”rootDir”の項目は設定を加えます。
“rootDir”はソースファイルを格納するディレクトリを指定します。memoappディレクトリ内のsrcディレクトリを指定します。”outDir”は出力されるファイルを格納するディレクトリを指定します。memoappディレクトリ内のdictディレクトリを指定します。srcディレクトリとdictディレクトリはmkdirなどを使って作成しておきます。
またプログラムで扱うファイルをincludeで指定します。今回はsrcディレクトリ以下のディレクトリやファイルを指定します。ワイルドカードが使えば任意のディレクトリやファイルを指定できます。
ついでに項目の右側にあるコメントアウトされた説明を削除しておきます。
package.jsonの編集
package.jsonを編集します。”main”の”index.js”を先ほど作成したsrcディレクトリの中にapp.tsというファイルを作成します。そしてapp.tsを指定するように変更します。
{
"name": "memoapp",
"version": "1.0.0",
"description": "",
// "main": "index.js",を以下のように変更
"main": "src/app.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC"
}nodemonの環境設定
nodemonのインストール
nodemonをインストールします。以下のコマンドをターミナルで実行してください。nodemonはファイルの変更が検出されたときにホットリロードを実行するパッケージです。
npm install -g nodemon
package.jsonの編集
nodemonを使えるようにpackage.jsonを編集します。”scripts”内にnodemonの実行コマンド”nodemon ./src/app.ts”を”nodemon”という別名（エイリアス）で設定します。別名とはコマンドにつけた任意の名前です。
{
"name": "memoapp",
"version": "1.0.0",
"description": "",
"main": "src/app.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"nodemon": "nodemon ./src/app.ts" // ここに追加
},
"keywords": [],
"author": "",
"license": "ISC"
}以下のようにコマンドを実行すると、設定したコマンドを代わりに実行します。ただ今はapp.tsには何も記載されていないので何も実行されません。後ほど動作確認で動くかどうか確認します。
npm run nodemon
今回の場合はコマンドが短いのであまり恩恵を受けられません。ただ上のtestのようにコマンドが長くなると入力が大変です。そこでscriptsにあらかじめ設定しておくと短いコマンドで実行できるので便利です。
Express関連の環境設定
Expressのインストール
Expressをインストールします。以下のコマンドをターミナルで実行します。
npm i express
@types/expressのインストール
npm i -D @types/express
ExpressをTypeScriptで扱えるようにするための@types/expressパッケージをインストールします。以下のコマンドをターミナルで実行します。
express-validatorのインストール
Expressでバリデーションを設定するexpress-validatorパッケージをインストールします。以下のコマンドをターミナルで実行します。
npm i express-validator
動作確認
これまでのインストールができているか動作確認を行います。ExpressまでインストールしているのでExpressの記事を参考に動作確認を行います。以下のコードをsrcディレクトリの中のapp.tsに入力します。
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('<H1>Hello World!</H1>')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})ただ記事のコードはJavaScriptで書かれているので1行目がエラーとなってしまいます。そこで1行目を以下のように変更します。
import express from "express"; //ここを変更
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("<H1>Hello World!</H1>");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});以下のコマンドをターミナルで実行してください。
npm run nodemon
実行するとlocalhost:3000が立ち上がります。アクセスすると以下のように表示されます。
これで動作確認まで完了しました。次回はESLintとPrettierの環境設定を行います。
