34
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-01-28

alt

翻訳元

サーバサイド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が壊れるリスクを負うのはサーバサイドの人間です。

34
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?