Scratch 3.0 を Hackしよう。Babel を触ってみよう

今回は Babel を触ってみましょう。 Babel は、もっともモダンな JavaScript を
現在のブラウザー向けのレガシーな JavaScript に変換するツールです。
Scratch3.0 で利用されています。

<img width="1638" alt="babel.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/567d4490-97fd-b726-044e-b3b6e511d80d.png">


https://babeljs.io/


# なぜ Babel 

なぜ、ここで、Babel を 取り上げるのか?
一つには、Scratch で 利用されているからです。 Babel を使えたほうがコードが読みやすい。当然のことです。

それ以上に、感じて欲しいのが、 Scratchのコードに流れる感覚です。
より、モダンで洗練された物を作ろうとする。
そういった感覚です。

Scratch は、 子供向けかも知れません。しかし、その 根底 流れるものは、
子供騙しではありません。


# Babelとは

Babel は、もっともモダンな JavaScript を
現在のブラウザー向けのレガシーなJavaScriptに変換するツールです。




# Babel x Webpack で Hello World


## package.json を作成する

- 1. mkdir babel01
- 2. cd babel01
- 3. npm init -f


## babel と webpack をインストール

- 4. npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015


## webpack の Hello World を書く


- 5. emacs webpack.config.js

```
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```

- 6. mkdir src
- 7. emacs src/index.js

```
console.log("Hello, World!!");

```

- 8. webpack
- 9. node dist/bundle.js
- 
>
> Hello, World!!
>



# Babel で Hello World!!


- 10. emacs webpack.config.js

```
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      include: path.resolve(__dirname, 'src'),
      query: {
        presets: ['es2015']
      }
    }]
  },
};
```

- 11. emacs src/index.js

```
class HelloWorld {
    hello() {
        console.log("Hello, World!!");
    }
}

var helloWorld = new HelloWorld();
helloWorld.hello();
```

- 12. webpack
- 13. node dist/bundle.js
- 
>
> Hello, World!!
>


# PS

今回のコード
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/babel01

# MORE

はい、色々 Googleして見てください。
https://www.google.co.jp/search?q=es2015

手を動かして見てください。理解が進むと思います。

http://babeljs.io/
http://ccoenraets.github.io/es6-tutorial/
https://babeljs.io/learn-es2015/



# PS

### 次回

続く

### 以下の場所でも、アレコレ書いていきます。

[Scratch3.0 自分専用機 を作ろう!! (0)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)
[Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)](http://blogger.firefirestyle.net/2017/12/scratch-30-5-webpack.html)
[Scratch 3.0 自分専用機 を作ろう!! (6) Scratch3.0 の package.jsonを読んでみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-6-scratch30-packagejson.html)
[Scratch 3.0 自分専用機 を作ろう!! (7) scratch-gui を インストールしてみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-7-scratch-gui.html)
[Scratch 3.0 自分専用機 を作ろう!! (8) scratch-vm に利用されている、scratch-xxx を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-8-scratch-vm-scratch-xxx.html)
[Scratch 3.0 自分専用機 を作ろう!! (9) Babel を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-9-babel.html)

[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://www.gitbook.com/book/kyorohiro/firestyle/details)
[火の型 With Scratch 2.0 (プログラム入門) 　第01巻](https://www.gitbook.com/book/kyorohiro/firestyle01/details)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://www.gitbook.com/book/kyorohiro/doc_scratch/details)