こんばんは！
今回は仕事上の都合でcoffeeScriptを扱うことになったのでその最初の一歩について記録に残そうかと思います！

　そもそもCoffeeScriptって何？

今までes2015で書くことに慣れていた自分としてはなんなんだというところから始まりました。
coffeeScript公式はこちら
いつものように最初にかいてある文字をよんでみる作戦。日本語訳には自信ないのでお気になさらず。英語だけが真実です。

CoffeeScript is a little language that compiles into JavaScript.
CoffeeScriptはjavascriptにコンパイルされる小さな言語です。
Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart.
扱いにくいjava風の名残のもと、javascriptはいつだってりっぱなハートをもってきました。
CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.
CoffeeScriptはシンプルな方法で、javascriptのいい部分を伝えようという試みです。
The golden rule of CoffeeScript is: “It’s just JavaScript.”
CoffeeScriptの重要なルールはこうです。
”javascriptなだけだ！”
The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime.
コードは一つづつを、同意のJsへとコンパイルし、実行に中断はありません。
You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa).
あなたはいかなるjavascriptライブラリをシームレスにCoffeeScriptからつかえます。(逆もまた同じく。)
The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.
コンパイルされた出力は読みやすく、きれいにプリントされていて、同じ手書きで入力されたJavaScriptよりも早く実行しやすくなります。

自分の理解だとAltjsって（ここでは触れません。
javascriptで書きづらかったこと、かゆいところに手が届かなかったところ、
そんな所を保管して書きやすくした言語って理解なので、
CoffeeScriptも例に漏れず、公式サイトを見る限りだとそれで基本的には理解はあってそうな予感がします。

それでは環境構築してみる

必要なものはnodeとnpmですね。

@('v')/front/coffee$ npm -v
5.3.0

@('v')/front/coffee$ node -v
v6.10.1

ありますね。大丈夫。

CoffeeScript本体のインストールだけだと動かなそうです。
なぜなら、CoffeeScriptはコンパイル時にJavascriptに変換されるので
コンパイラーを入れないとですね。
公式サイトにbabelでいく方法が紹介されていたのでそこをみて

@('v')/front/coffee$ npm install --global coffeescript@next
@('v')/front/coffee$ npm install --save-dev coffeescript@next babel-cli babel-preset-env

入りました。
まずはversion確認しましょう。

@('v')/front/coffee$ coffee -v
- bash: coffee command not found

pathが通ってないくさい
自分の環境はbashなので
bash_profileにpathを追加します。

~/.bash_profile

# coffee scriptの勉強のためpath追加@2017/08/17
export PATH=/usr/local/share/npm/bin:$PATH

もう一度

@('v')/front/coffee$ coffee -v
CoffeeScript version 2.0.0-beta4

うまくインストールできているのでversionの確認ができましたね！

webpackもいれていきましょう！

webpack.config.js

module.exports = {
  entry: {
    route: ['./src/entry.js']
  },
  output: {
    filename: 'build/[name].js'
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.coffee$/,
        loader: 'coffee-loader'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.coffee', '.css']
  }
};

package.jsonにbuildのためのscriptを追加しましょう！

package.json

{
  "name": "coffee",
  "version": "1.0.0",
  "description": "lessonです！",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.7",
    "coffeescript": "^2.0.0-beta4",
    "eslint": "^4.4.1",
    "webpack": "^3.5.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "`npm bin`/webpack"
  },
  "author": "",
  "license": "ISC"
}

eslintとかはいつも使って書くのを自分の癖にしたいのでいれてるだけで必須ではないです。

coffeeを使ったコードを準備

./src/entry.js

import './js/hello.coffee'

entryで設定したファイルを作成。

./src/js/hello.coffee

class Hello
  constructor: (@name) ->
  say: ->
   alert "plz say hello #{@name}."
Cof = new Hello "CoffeeScript"
Cof.say() #実行

その中で、coffeeScriptをimportしてあげます。

それではコンパイルチェックしてみる

ときは満ちた。今こそ、buildのとき！！！！！！！
自分の環境だとyarn入れてるので、yarnコマンド実行です！

@('v')/front/coffee$ yarn build
yarn build v0.27.5
$ `npm bin`/webpack
Hash: 26aed259a298d2b71394
Version: webpack 3.5.4
Time: 1085ms
         Asset  Size  Chunks             Chunk Names
build/route.js  7 kB       0  [emitted]  route
   [0] multi ./src/entry.js 28 bytes {0} [built]
   [1] ./src/entry.js 44 bytes {0} [built]
   [2] ./src/js/hello.coffee 257 bytes {0} [built]
Done in 2.86s.

▂▅▇█▓▒░('ω')░▒▓█▇▅▂うわあああああああ！！！！！！無事にできたっぽい！

よし、吐き出されたoutputを確認します。javascriptで書き直されてるはずですね。
うーん全部だと長いですが、今回書いたcoffee部分だけ抜き出すと

build/route.js

/***/ (function(module, exports) {

var Hello, Cof;

Hello = (function() {
 function Hello(name) {
   this.name = name;
 }

 Hello.prototype.say = function() {
   return alert("plz say hello " + this.name + ".");
 };

 return Hello;

})();

Cof = new Hello("CoffeeScript");

Cof.say();


/***/ })

constructor内で"＠name"としてthis.nameを表現したところも、きちんと治っています！
あとはclass内で定義したmethod"say"もきちんとprototypeで宣言されています！

よし、これであとはどんどん開発していけばいいですね！

注意：
初めて使ってみたので間違ってるところあると思います。。(；´ω｀)φ..
もし発見したらそっと教えていただけると嬉しいです。

では、Happy coding!