ES6 を学べる tower-of-babel を作りました。 (workshopper の作り方)

さて、NodeSchool が開校された時に、ES6を学べるチュートリアル的なものがほしいと思い、tower-of-babelという名前のチュートリアルツールを作成しました。

<a href="https://github.com/yosuke-furukawa/tower-of-babel">yosuke-furukawa/tower-of-babel</a>github.com

このツールはnpm/node.jsを使って作っています。実際に動かすときはnpmがあれば動きます。
npmのインストールは他の記事を参考にしてください。npmが入っていれば、以下のようにすれば実行可能です。

$ npm install tower-of-babel -g
$ tower-of-babel

そうすると下記のようなダイアログが起動するのでエクササイズを選択して各種問題を解いてください。
全ての問題を解き終わった頃にはなんとなく ES6 の構文が使いたくなってくるはずです。

なにか問題があれば気軽に tower-of-babel のリポジトリに連絡をください。

<a href="https://github.com/yosuke-furukawa/tower-of-babel/issues">yosuke-furukawa/tower-of-babel</a>github.com

以下の話はworkshopperを作ってみたい方限定です。

workshopperの作り方

さて、NodeSchoolが如何に素晴らしいか、如何に初心者のNode.jsを押し上げるのに一役買っているかは前回の記事で軽く触れましたが、同じカリキュラムしか存在しないと受講生のみんなは飽きてきます。

今でもNodeSchoolには素晴らしいカリキュラムが数多く存在しますが、自分達から率先して新しいカリキュラムを作るのも良いと思います。

今回はそんな形で新しいカリキュラムを作るのにどうやって作ったらいいのか、解説します。
今回のブログを読めば大体みんな作れるようになるかと思います。

workshopper / workshopper-exercise のインストール

適当なプロジェクト名のフォルダを作り、 npm init で package.json のひな形を作っておいてください。

$ npm init
$ npm i workshopper workshopper-exercise -S

workshopper の実体はあのファンシーなターミナルメニューを持つテストランナーです。
workshopper-exercise はテストランナーに対する validator、つまりアサーション機能の役割を果たしています。

最近では workshopperをさらに機能拡充した workshopper-adventure があります。これはworkshopper 新バージョンのβ版的な位置づけで色々便利な機能があります。大阪NodeSchoolのオーガナイザーであるマーティンが作っています。

workshopper の定義を行う

プロジェクトフォルダの適当なファイルを作ってそのファイルを実行できるようにします。

tower-of-babelの場合は、プロジェクトフォルダのルートに `tower-of-babel.js` を作ってそこに定義を書きました。

#!/usr/bin/env node

const workshopper = require('workshopper-adventure');
const path        = require('path');

function fpath (f) {
  return path.join(__dirname, f)
}

workshopper({
  name        : 'tower-of-babel',
  title       : 'Tower of Babel',
  subtitle    : 'Learn ES6 features using babel',
  appDir      : __dirname,
  menuItems   : [],
  languages   : ['ja'],
  exerciseDir : fpath('./exercises/')
})

こんな感じ。

エクササイズを作っていく

ここまで行くと後はエクササイズを作っていくまでです。

exercises フォルダを作成し、その中に menu.json を作りましょう。

[
    "BABEL SETUP",
    "CLASS",
    "CLASS EXTEND",
    "MODULES WITH NAME",
    "MODULES DEFAULT EXPORT",
    "BLOCK SCOPE",
    "COMPUTED PROPERTY",
    "ITERATOR FOR OF",
    "GENERATOR",
    "DESTRUCTURE",
    "ARROW FUNCTION",
    "REST AND SPREAD"
]

このmenu.jsonの配列の要素一つ一つがエクササイズになります。このエクササイズのフォルダを作成します。

フォルダを一個一個作成してもいいんですが、以下のコマンドを実行すると勝手にスケルトンが作られて便利です。

$ node_modules/workshopper/util/makews.js exercises/menu.json

exercises
├── arrow_function
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
├── babel-processor.js
├── babel_setup
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
├── block_scope
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
├── class
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
├── class_extend
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
├── computed_property
│   ├── exercise.js
│   ├── problem.ko.md
│   ├── problem.md
│   └── solution
│       └── solution.js
・・・

exercise.js にexerciseをrun, verifyした時の検証の方法を記述します。
problem.md に問題文そのものを記述します。markdownで書けます。
solution/solution.js に回答のJavaScriptを記述します。

実際の例を上げるとこんな感じです。