ES2015とwebpackもちょこっと


**「ES6」**とも言う。
JavaScriptの新しい書き方。
昔のjavascriptの不便だったところが簡単にいい感じになったらしい。

#ES2015とは
これまでのJavaScript (ES5)に様々な機能が追加され新仕様となったもの。
CoffeescriptやTypescriptなどの派生Javascript (AltJS) とは異なり、将来ブラウザに実装される予定の規約だそう。

##対応ブラウザ

- Chrome
- Firefox

##非対応ブラウザ

- IE10,11

ただし、ChromeやFirefoxも完全対応ではない。
nodeも6なら対応されてきている。

#Babel

ES2015仕様のJavascriptをES5仕様に整形するツール。

```console
$ npm init
$ npm i webpack babel-loader html-loader babel-core  babel-preset-es2015 --save
```

`webpack.confing.js` に設定をいろいろ。

```js:webpack.config.js
module.exports = {
    entry: {
        app: './src/app.js', //コンパイルする対象
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/public/assets/js' //どこに出すか
    },
    module: {
        loaders: [
            { test: /\.js/,exclude: /node_modules/, loader: "babel" ,query:{presets:"es2015"}},
        ]
    },
};
```

#Arrows（アロー関数）

`function(){}` は `() => {}` になる。
引数もとれる

```js:app.js
$(function(){
    $(".link").on("click", function(){
        
    });
});

$( ()=>{
    $(".link").on("click", (event)=>{
        
    });
});
```

##注意点

`this` は使えないので使いたいなら `currentTarget()` を。
`this` にはいろいろな使われ方があり、すごく複雑らしい。
`this` を含めた[javascriptのわかりにくいところ](http://bonsaiden.github.io/JavaScript-Garden/ja/ "javascriptのわかりにくいところ")についてのサイトもあるので、時間があるときにチェックするといいかも。

#Template Strings

バックチルダ「`」⇦これを使うと変数が使えたりする。
めっちゃ長いhtmlを書きたいときとかに便利。

#Destructuring

##今までの書き方

```js
var user = {
	name: "John",
	age: 18
	}
```
```js	
	var name = user.name;
	var age = user.age;
```

##新しい書き方

```js
	var {name, age} = user;
	
	setUserProfile(user);
	
	var setUserProfile = (user) => {
		$(".nameElement").text(name)
		$(".ageElement").text(age)
	}
```

#LetとConst
```js
"use strict";
```
とスクリプトの一番最初に書くとストリクトモードになる。
これで `let` や `const` が使えるようになる。

## `const`

varと同じように使えるが **書き換えはできない** 。

```js
$(()=>{
	const name = "hoge";
	name = "piyo";
})
```

みたいにするとエラーになる。

## `let`

スコープの中でしか使えない変数。

```js
$(".link").on("click", ()=>{
	let age = 18;
});

console.log(age);
```

#Object assign

```js
var name = "John";
var age = 23;
var email = "taro.yamada@gmail.com";

var user = {name, age, email};

var user_a = user;
var user_b = $.extend({},user); // ディープコピー

var hoge = funtion(user){
	options = Object.assign({},options,{
		email: "hoge@gmail.com",
		age: 18;		
	}}
	console.log(user)

user.age = 24;

console.log(user, user_a, user_b)
```

#CommonJS Modules

まとめて読み込む側。

```js
$(()=>{
    require("./module_top.js");
    require("./module_content.js");
    require("./module_foot.js");
});
```

部品側

```js
$(()=>{
    // TOP画面に関するアニメーション
    console.log("ここではトップ画面の機能を実装します");

});

module.exports = {}; //これを忘れずに
```

##スクロールとか

```js
modules.exports = ()=>{
	
}
```

```js
var scrollTop = require("./scrollTop.js");
```

#webpackはgulpと違って一つずつファイルを読み込むこと

```js
"entry": {
    //"site": `${path.src}assets/js/site.js`,
    "admin": `${path.src}assets/js/admin/admin.js`,
    "auth": `${path.src}assets/js/front/common.js`,
    "front": `${path.src}assets/js/front/common.js`,
    "page": `${path.src}assets/js/front/front.js`,
},
```

#おまけ：jQueryをCDNじゃなくライブラリを直接取り込む場合

```console
$ npm i jquery
```

なんかjQueryの **2系** を落とすのがいいそうなので

```console
$ npm i jquery@2
```

として私は落としました。
これでインストールされる。一度 **Webpack** を立て直すのを忘れずに。

あとはjQueryを使うファイル中に

```js
var $ = require("jquery");
```

として読み込めばOK。