okunokentaro/gist:6e228182d2d72594d38189bccab0b2e9

## gistfile1.txt
2016/04/24 にQiitaに投稿した記事のアーカイブです

---

追記161231: 続編を書きました。『[素振り環境を晒す2016年末](http://qiita.com/armorik83/items/0e22c9999944e4687af5)』

---

@armorik83です。みなさん素振りしてますか。

## 素振りとは
この辺。

- [JavaScriptのトレンドを素振りして確認する方法](http://qiita.com/azu/items/bacd146ed2e26980b9b0)
- [JavaScriptの素振りする技術](http://azu.github.io/slide/2015/year-end/javascript-swing.html)

私はだいたい設計の下書きやペアプロなどで[Babel repl](https://babeljs.io/repl/)や[TypeScript Playground](https://www.typescriptlang.org/play/)、あとは[Plunker](https://plnkr.co/)と[JSFiddle](http://jsfiddle.net/)あたりをよく使ってます。

いくつかのライブラリを組み合わせたいとき、昔はCDNから取ってこられたので簡単だったけど、最近は`npm i`した方がむしろ準備が早いケースも増えてきて、組み合わせての検証や練習をする際に、素振り環境は持っておくに越したことはないです。

## 素振りpackage.json

```package.json
{
  "name": "suburi",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npm run webpack",
    "start": "superstatic --port 8080 --host 127.0.0.1",
    "webpack": "webpack ./index.js --module-bind 'js=babel-loader' --output-filename ./built/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-3": "^6.5.0",
    "superstatic": "^4.0.2",
    "webpack": "^1.13.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.7.4"
  }
}
```

ざっくりと。素振り中に型検証は要らないので、[Babel](https://babeljs.io/)で。[`stage-3`](https://babeljs.io/docs/plugins/preset-stage-3/)を入れるのは`async/await`を練習しておきたいとき。`stage-3`を外すなら、一緒に`babel-polyfill`も外せる。

今は一律で[webpack](https://webpack.github.io/)とBabelを使っているが、たぶんブラウザの[対応状況](http://kangax.github.io/compat-table/es6/)を見てるとwebpackだけにしていいはず。

`gulp`とか`lint`もなし。全部`npm run`でまかなう。

`npm start`に[`superstatic`](https://www.npmjs.com/package/superstatic)を当てているのは、HTML5 pushStateをまともに扱えるNode.js実装のローカルサーバをこれしか知らなかったから。（他にもあったらすいません）Angular 2やってるので、ルータ周りが正しく動くため重宝するし、phpとかpythonなどの他言語に依存しないので勧めやすい。

## 最初にやること
以下のコマンドを打って準備。skeletonのリポジトリを用意するのが好みの人もいるかと思うが、cloneとか面倒なのでgitも使わずコピペで済ませたいということで。

```
mkdir ~/Desktop/suburi && cd $_
touch package.json .babelrc superstatic.json index.html
```

終わったら次にこれ。

```
npm i
```


## 関連ファイルをいくつか

各種設定ファイルなどです。

```json:.babelrc
{
  "presets": ["es2015", "stage-3"]
}
```

```superstatic.json
{
  "rewrites": [
    {
      "source":"/**",
      "destination":"/index.html"
    }
  ]
}
```

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>suburi</title>
</head>
<body>
  <script src="./built/index.js"></script>
</body>
</html>
```
	2016/04/24 にQiitaに投稿した記事のアーカイブです

	---

	追記161231: 続編を書きました。『[素振り環境を晒す2016年末](http://qiita.com/armorik83/items/0e22c9999944e4687af5)』

	---

	@armorik83です。みなさん素振りしてますか。

	## 素振りとは
	この辺。

	- [JavaScriptのトレンドを素振りして確認する方法](http://qiita.com/azu/items/bacd146ed2e26980b9b0)
	- [JavaScriptの素振りする技術](http://azu.github.io/slide/2015/year-end/javascript-swing.html)

	私はだいたい設計の下書きやペアプロなどで[Babel repl](https://babeljs.io/repl/)や[TypeScript Playground](https://www.typescriptlang.org/play/)、あとは[Plunker](https://plnkr.co/)と[JSFiddle](http://jsfiddle.net/)あたりをよく使ってます。

	いくつかのライブラリを組み合わせたいとき、昔はCDNから取ってこられたので簡単だったけど、最近は`npm i`した方がむしろ準備が早いケースも増えてきて、組み合わせての検証や練習をする際に、素振り環境は持っておくに越したことはないです。

	## 素振りpackage.json

	```package.json
	{
	"name": "suburi",
	"version": "0.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"build": "npm run webpack",
	"start": "superstatic --port 8080 --host 127.0.0.1",
	"webpack": "webpack ./index.js --module-bind 'js=babel-loader' --output-filename ./built/index.js"
	},
	"keywords": [],
	"author": "",
	"license": "MIT",
	"devDependencies": {
	"babel-core": "^6.7.7",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.6.0",
	"babel-preset-stage-3": "^6.5.0",
	"superstatic": "^4.0.2",
	"webpack": "^1.13.0"
	},
	"dependencies": {
	"babel-polyfill": "^6.7.4"
	}
	}
	```

	ざっくりと。素振り中に型検証は要らないので、[Babel](https://babeljs.io/)で。[`stage-3`](https://babeljs.io/docs/plugins/preset-stage-3/)を入れるのは`async/await`を練習しておきたいとき。`stage-3`を外すなら、一緒に`babel-polyfill`も外せる。

	今は一律で[webpack](https://webpack.github.io/)とBabelを使っているが、たぶんブラウザの[対応状況](http://kangax.github.io/compat-table/es6/)を見てるとwebpackだけにしていいはず。

	`gulp`とか`lint`もなし。全部`npm run`でまかなう。

	`npm start`に[`superstatic`](https://www.npmjs.com/package/superstatic)を当てているのは、HTML5 pushStateをまともに扱えるNode.js実装のローカルサーバをこれしか知らなかったから。（他にもあったらすいません）Angular 2やってるので、ルータ周りが正しく動くため重宝するし、phpとかpythonなどの他言語に依存しないので勧めやすい。

	## 最初にやること
	以下のコマンドを打って準備。skeletonのリポジトリを用意するのが好みの人もいるかと思うが、cloneとか面倒なのでgitも使わずコピペで済ませたいということで。

	```
	mkdir ~/Desktop/suburi && cd $_
	touch package.json .babelrc superstatic.json index.html
	```

	終わったら次にこれ。

	```
	npm i
	```


	## 関連ファイルをいくつか

	各種設定ファイルなどです。

	```json:.babelrc
	{
	"presets": ["es2015", "stage-3"]
	}
	```

	```superstatic.json
	{
	"rewrites": [
	{
	"source":"/**",
	"destination":"/index.html"
	}
	]
	}
	```

	```index.html
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<base href="/">
	<meta charset="UTF-8">
	<title>suburi</title>
	</head>
	<body>
	<script src="./built/index.js"></script>
	</body>
	</html>
	```