1. はじめに

僕が以前書いたModern JavaScript概観、そしてElectronへは、読んで貰えただろうか？

あれは初学者には全く向いてないエントリだ。

あのエントリは、僕の理解したモダンなJavaScript全体について概観することを目的としているからね。

あれを読んで、「今のJavaScriptってこんなに大変なのか…」と感じた人は多いだろう。

しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。

と言う訳で、今回はちゃんと初心者向けのエントリを書いた。

少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。

1.1. 開発環境

Thinkpad X1 Carbon 2016年モデルにWindows10をインストールしてある。

ハードウェアスペックは、こうだ。

CPU i7 6600U @ 2.6GHz
メモリ 16GB
ストレージ SAMSUNG NVMe SSD 950 PRO 512GB

少し高級かもしれないけど開発者用のマシンとしては普通だよね。

2. Nodeをインストールしよう

WindowsにNodeをインストールする方法は色々あるんだけど、nvm for windows を使ってほしい。

ここからnvm-setup.zipをダウンロードして中に入っているnvm-setup.exeを実行する。

nvmのインストールが終わったら、PowerShellを起動して以下のようにコマンドを入力する。

nvm install latest

そうすると、細かいバージョンやディレクトリ名は違うかもしれないが、こういうメッセージが出力されるはずだ。

Downloading node.js version 7.7.4 (64-bit)...  
Complete  
Creating C:\dev\js\nvm\temp

Downloading npm version 4.1.2... Complete  
Installing npm v4.1.2...

Installation complete. If you want to use this version, type

nvm use 7.7.4

次に、出力された最後の行と同じコマンドを入力する。

nvm use 7.7.4

これで、最新版のNodeがインストールできた。

Nodeはかなり頻繁に新しいバージョンがリリースされるから、定期的にnvm install latestして、最新版をnvm useして欲しい。

パフォーマンスが改善したり、細かい問題が解決されたりしているかもしれないからね。

3. VS Codeをインストールする

Nodeのランタイムをインストールしたら次はエディタをインストールしよう。

世の中JavaScriptを快適に書けるエディタは色々あるけど、今はVS Codeがおススメだ。

ここから、自分のOSに合ったインストーラをダウンロードして実行しよう。

4. リファレンスをブックマークする

エディタをインストールしたので、さぁコードを書こうと言いたいところだけど、まだ少しやる事がある。

ちゃんとしたリファレンスサイトをブラウザでブックマークして、困った時はそこを見るようにしてほしいんだ。

Macには、Dashって便利なアプリがあると聞いた覚えがあるのだけど、僕は使ったことが無いので分からない。

5. プロジェクトを構成する

プロジェクトをきちんとセットアップするのは、面倒だと感じるかもしれないけど便利なことが多いから少し頑張ってほしい。

まずは、作業用のディレクトリを作ろう。好きなパスにディレクトリを作ってくれればいい。

ここでは、C:/dev/js/projects/js_for_beginner というディレクトリを作った。

エクスプローラで、このディレクトリを右クリックすると Open with Code というメニューを選ぶ。

VS Codeが起動したら、Ctrlキーを押しながら@キーを押す。これで、VS Code内にPowerShellが起動するはずだ。

ここで以下のようなコマンドを入力する。

npm init -y

これでデフォルトのpackage.jsonが生成される。

6. Babelを導入する

NodeはES2015の構文が殆ど使えるので、Babelを使う強いモチベーションはimport文を使いたいかどうかだけなんだけども、まぁ、使いたい。

Babelを導入するために、以下のようなコマンドをVS Code上に開いたPowerShellで入力する。

npm install babel-cli babel-preset-env -D

このコマンドが終了するとpackage.jsonの中身はこういう風になっているはずだ。

{
  "name": "js_for_beginner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-env": "^1.2.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここにBabel用の設定を追加すると、こうなる。

{
  "name": "js_for_beginner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "source-map-support": "^0.4.14"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-env": "^1.2.2"
  },
  "scripts": {
    "compile": "babel src --out-dir .",
    "exec": "node -r babel-register src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "sourceMaps": "inline",
    "presets": [
      ["env", { "targets": {"node": 7}, "useBuiltIns": true}]
    ]
  }
}

npm scriptにcompileタスクとexecタスクを追加した。併せて、babelというエントリを一番最後に追加した。

compileタスクは実行すると、srcディレクトリにあるJavaScriptがコンパイルされてプロジェクトのルートディレクトリに出力される。

execタスクを実行する、コンパイルせずに直接srcディレクトリにあるindex.jsを動かせる。

babelエントリのsourceMapsは、コンパイルしたJavaScriptの末尾にデバッグ用のSourceMapを付加するという設定だ。

presetsのenvは、Nodeと最新のJavaScriptの差分だけをコンパイル時に取り込むようにする設定だ。これによってコンパイル後のモジュールが不用意に大きくなるのを避けられる。

6.1. Source Map Supportの導入

Babelを導入するだけだと、エラーが起きた時のスタックトレースが自分の書いたコードと合わないので、source-map-support も導入する。

npm install source-map-support -S

srcディレクトリに、index.jsというファイルを以下の内容で作ってみよう。

import "source-map-support/register";  
import * as fs from "fs";

console.log(fs.readFileSync("package.json").toString());

throw new Error();

これを動かすには、VS CodeのPowerShellで以下のコマンドを入力する。

npm run exec

一行目のimport "source-map-support/register";をコメントアウトした時と、そうでない時でスタックトレースの行番号が微妙に変わるので確認して欲しい。

7. AVAを導入する

最後は、テスティングフレームワークの導入だ。これで最後なので頑張ってほしい。

いい加減なスクリプティングで言語を勉強するよりは、テストコードを動かしながら言語を勉強した方がよりよい作法が身につくからね。

npm install ava -D

モジュールをインストールしたら、package.jsonにAVA用の設定を追加する。

{
  "name": "js_for_beginner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "source-map-support": "^0.4.14"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-env": "^1.2.2"
  },
  "scripts": {
    "compile": "babel src --out-dir .",
    "exec": "node -r babel-register src/index.js",
    "test": "ava"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "sourceMaps": "inline",
    "presets": [
      ["env", { "targets": {"node": 7}, "useBuiltIns": true}]
    ]
  },
  "ava": {
    "files": [ "test/**/*.js" ],
    "source": [ "src/**/*.js" ]
  }
}

npm scriptのtestタスクの中身をAVAを実行するように変更した。

併せて、AVAがテスト実行する際に、テスト対象コートと、テストコードをどういう基準で探すのかをavaエントリに定義する。

testディレクトリに、index.jsというファイルを以下の内容で作ってみよう。

import test from "ava";

test(async t => {  
  let foo = Promise.resolve("foo");
  t.is(await foo, "foo");
});

これを動かすには、VS CodeのPowerShellで以下のコマンドを入力する。

npm run test

AVA自体の説明については、前回のエントリや公式のドキュメントを参照して欲しい

8. まとめ

僕の気持ちとしては、Yarn、Flow、ESlint、documentation.jsあたりは必須ですと書きたい。

でも、これらは無くても少し不便なだけでコードが書けない訳じゃないので今回は紹介しなかった。

よりよい環境を目指すんなら、必須だけど初学者にいきなり要素技術を沢山積んでも学習しきれないだけで、意味が無いからね。

そういう揃ってる環境が欲しいなら、僕が作ったjs-boilerplateのmasterブランチを参考にして欲しい。

Menu

初学者としてJavaScriptを学ぶ