Web Music Hackathon #5

Web Music Hackathon #5に参加してきました.

「Twitterを楽器にする」というコンセプトで, MMLを書き込んで投稿すると音楽が再生されるChrome Extensionを作成しました.

過去にツイートされたMMLも演奏可能にし, ビジュアライゼーション機能や, WebSocketによるセッション機能もつけました.

GitHubリポジトリ : https://github.com/Korilakkuma/Music-Tweet

そして…なぜかわからないけど表彰されました〜

gulpでES2015 Modulesを利用可能にする

まずは, 必要なモジュールのインストール

$ npm install --save-dev browserify babelify vinyl-source-stream

gulpfile

var gulp       = require('gulp');
var browserify = require('browserify');
var babelify   = require('babelify');
var source     = require('vinyl-source-stream');

gulp.task('compile', function() {
    return browserify('src/main.js', {debug: true})
               .transform(babelify)
               .bundle()
               .on('error', function(error) {
                   console.error(error.message);
               })
               .pipe(source('bundle.js'))
               .pipe(gulp.dest('build/'));
});

試してみます.

src/main.js

import Greeter from './Greeter.js';

const greeter = new Greeter('Hello World');

console.log(greeter.greet());  // Hello World

src/Greeter.js

class Greeter {
    constructor(message) {
        this.message = message;
    }

    greet() {
        return this.message;
    }
}

export default Greeter;
$ node build/bundle.js
Hello World

以上です

gulpでeslint できる環境をつくる

eslintでリンティングできる環境を作成します.

1. gulp-eslintのインストール

$ npm install --save-dev gulp-eslint babel-eslint

2. .eslintrcの作成

{
  "parser": "babel-eslint",
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended"
  ]
}

3. gulpfileにタスクを追加

var gulp   = require('gulp');
var eslint = require('gulp-eslint');

gulp.task('lint', function() {
    return gulp.src('src/*.js')
               .pipe(eslint())
               .pipe(eslint.format())
               .pipe(eslint.failAfterError());
});

gulp + Babel で ES2015を利用できる環境をつくる

1. gulpとgulp-babel, babel-preset-es2015をインストールします

$ npm install --save-dev gulp gulp-babel babel-core babel-preset-es2015

2. gulpfile.jsの作成

var gulp   = require('gulp');
var babel = require('gulp-babel');

gulp.task('compile', function() {
    gulp.src('src/*.js')
        .pipe(babel())
        .pipe(gulp.dest('build/'));
});

3. プロジェクトのルートに.babelrcを作成

{
  "presets": ["es2015"]
}

以上で, ES2015を利用できる環境ができました.
試してみましょう.

src/test.js

  let greet = () => 'Hello World !!';

console.log(greet());

これをコンパイルします.

$ gulp compile

build/test.js

'use strict';

var greet = function greet() {
  return 'Hello World !!';
};