世界一シンプルなサーバサイドnodeでES6の始め方

8586 ワード
babel es6 Node.js Node.js テキストリンク

翻訳元

サーバサイドnodeってcommonjsで書かれることが多いですよね。
フロントエンドの人はcommonjsをみるとES6が使いたくてしょうがなくなります。commonjsも素晴らしいですが、せっかくなので慣れ親しんだES6で開発しましょう。

プロジェクトを作成

mkdir my-project-name
cd my-project-name

nodeアプリを作成する

npm init -y

// jsファイルはsrcフォルダに入れるのが慣例

mkdir src
cd src
touch index.js

// index.js
console.log('Hello kaba');

Nodeアプリが完成しました。
それでは走らせてみましょう。


node src/index.js

ターミナルに「Hello kaba」
と表示されて入れば成功です。
Nodeアプリを作ることができました。

nodeにはエイリアスを作成する機能があります。
Package.jsonのscriptプロパティに以下のように記述してください。

// package.json
{
  ...
  "main": "index.js",
  "scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

npm startとターミナルに打ちましょう。
コンソールにHello kabaは表示されましたか？

nodemon

次にnodeの開発に必須なNodemonを入れます。
Nodemonは、コードに変更があると、サーバーをリロードするライブラリです。（ホットリロード）
このライブラリがあるとコードに変更があるたびにnpm startをせずに済みます。

npm install nodemon --save-dev

// package.json
{
  ...
  "main": "index.js",
  "scripts": {
+"start": "nodemon src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

まず、npm startしましょう。
次に、index.jsの中身を書き換えます

// index.js
console.log(‘Hello kaba. I am node.’)

ファイルをセーブすると、ターミナルに「Hello kaba. I am node」と表示されれば成功です。

babel

ES6でnodeを開発するにはbabelの設定をする必要があります。babel7になり、設定がとても簡単になりました。
もうサーバサイドでもbabelを使って良い時代になりました。

npm install @babel/core @babel/node --save-dev

{
  ...
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

npm install @babel/preset-env --save-dev
touch .babelrc

// .babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

完成です。
これでES6を使うことができます。
それではES6の機能であるexport defaultをindex.jsに記述します。

// index.js
console.log('Hello kaba. I am node.')

const foo = 'foo'
export default foo

npm startしましょう。
エラーが起きません！
サーバサイドnodeでES6を使うことが出来ました。

尚、同僚のサーバサイドエンジニアにES6を使うことに文句を言われたら、大人しく引き下がりましょう。
運用の時にES6が壊れるリスクを負うのはサーバサイドの人間です。