【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。
「イイダリョウが書くブログ（仮）」→「クモのようにコツコツと」

Codepen Settingの旅、第3回です。
第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。今回はこれまたアルトいいねの「AltJS」。少ない記述量でJSが書けるメタ言語です。
それでは行ってきます！

CoffeeScript
- CoffeeScriptの主な記法
LiveScript
- LiveScriptの主な記法
TypeScript
- TypeScriptの主な記法
Babel
- Babelの主な記法
まとめ

※参考：JSの基本についてはこちら
【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4
【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5

※2019/10/20：この記事上にソースコードがありませんでしたが、追記しました。

コードはボタンを押すとアラートで「ハローワールド」的なイベントです。
コメントアウトの中に元のJSのコードがあります。

CoffeeScript

Coffer Scriptは少ない記述量で済むAltJS。
少ない記述量といえばjQueryだが、AltJSはAltCSSと同様コンパイルする。

CoffeeScriptの主な記法

コメントは#（1行）か###（複数行）
文末のセミコロン不要
関数、メソッドのカッコ不要
変数のvar不要
関数や制御構文の波カッコ不要
関数はアロー（->）を使う

HTMLコード

<section id="coffee">
  <h1>Coffee Script事始め</h1>
  <p>CodePen Settingの旅、JS編第一回。Coffer Scriptは少ない記述量で済むAltJS。<br>
少ない記述量といえばjQueryだが、AltJSはコンパイルする。</p>
  <section id="hello">
    <h2>基本構文</h2>
    <ul>
      <li>コメントは#（1行）か###（複数行）</li>
      <li>文末のセミコロン不要</li>
      <li>関数、メソッドのカッコ不要</li>
      <li>変数のvar不要</li>
      <li>関数や制御構文の波カッコ不要</li>
      <li>関数は->を使う</li>
    </ul>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>

CoffeeScriptコード

###関数
function hellow(){
window.alert('hellow CoffeeScript');
window.alert('こんにちは、珈琲スクリプト');
window.alert('おしまい');
}
###

#関数
hellow  = ->
  window.alert 'hellow CoffeeScript' 
  window.alert 'こんにちは、珈琲スクリプト'
  window.alert 'おしまい'

###変数
var btn = document.getElementById('btn');
###

#変数
btn = document.getElementById 'btn'

###イベント
btn.addEventListener('click', hellow, false);
###

#イベント
btn.addEventListener 'click',  hellow, false

Rubyライクとのことで確かに記述量は減っているのだが、個人的にはカッコは目印にもなっていたんだな、という印象を持った。
無くなって初めてわかる有り難みみたいな。記述が少ない分、インデントも厳密です。アロー関数はスッキリしてて良さげですね。
Rubyを元々書いてた方がフロントに入るにはいいと思う。JSが初めてのプログラミング言語の人にとっては学習コストが生じます。
なお、コンパイルはNodeでできるようです。

LiveScript

LiveScriptはCoffeScriptの拡張言語らしい。
CoffeeScriptはRubyライクとのことだったがLiveScriptはHuskellライクに関数型のような書き方ができるそうな。

LiveScriptの主な記法

コメントは#（1行）は使えるが###（複数行）は使えない？
CoffeeScriptそのものの記述でも動く(?)
関数が!で実行できるらしいが…
カリー化とは何か？

HTMLコード

<section id="live">
  <h1>Live Script事始め</h1>
  <p>CodePen Settingの旅、JS編第2回。LiveScriptはCoffeScriptの拡張言語らしい。<br>
CoffeeScriptはRubyライクとのことだったがLiveScriptはHuskellライクに関数型のような書き方ができるそうな。</p>
  <section id="hello">
    <h2>特徴</h2>
    <ul>
      <li>コメントは#（1行）は使えるが###（複数行）は使えない？</li>
      <li>CoffeeScriptそのものの記述でも動く(?)</li>
      <li>関数が!で実行できるらしいが…</li>
      <li>カリー化とは何か？</li>
    </ul>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>

LiveScriptコード

/*関数
function hellow(){
window.alert('hellow CoffeeScript');
window.alert('こんにちは、珈琲スクリプト');
window.alert('おしまい');
}
*/

#関数
hellow  = ->
  window.alert 'hellow LiveScript' 
  window.alert 'こんにちは、生スクリプト'
  window.alert 'おしまい'

/*変数
var btn = document.getElementById('btn');
*/

#変数
btn = document.getElementById 'btn'

/*イベント
btn.addEventListener('click', hellow, false);
*/

#イベント
btn.addEventListener 'click',  hellow, false

正直、関数型の知識が希薄なため、この簡単なコードではCoffeeScriptとの違いを体験できなかった…。食べられないほうカリー？
別途もっと関数型の利点が活かせるコードを書いてみたいと思います。すいません。。

TypeScript

TypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。
CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。

TypeScriptの主な記法

変数に「:」で静的型付けができる。
関数内の引数も「:」で静的型付け
アロー関数式「=>」が使える
クラス定義ができる

HTMLコード

<section id="type">
  <h1>TypeScript事始め</h1>
  <p>CodePen Settingの旅、JS編第3回。TypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。<br>
CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。</p>
  <section id="hello">
    <h2>特徴</h2>
    <ul>
      <li>変数に「:」で静的型付けができる。</li>
      <li>関数内の引数も「:」で静的型付け</li>
      <li>アロー関数式「=>」が使える</li>
      <li>クラス定義ができる</li>
    </ul>
    <p>素のJSでもそのまま行けるようなのでJSからの書き換えもしやすそう。</p>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>

TypeScriptコード

/*関数
function hellow(){
window.alert('hellow TypeScript');
window.alert('こんにちは、型スクリプト');
window.alert('おしまい');
}*/

/*アロー関数*/
var hellow = () => {
window.alert('hellow TypeScript');
window.alert('こんにちは、型スクリプト');
window.alert(title + 'は第' + num + '回です。');
window.alert('おしまい');
}



/*変数
var btn = document.getElementById('btn');*/

/*変数（型付け）*/
var btn:object;
btn = document.getElementById('btn');

var title:string;
title = 'JS編';

var num:number;
num = 3;

/*イベント*/
btn.addEventListener('click', hellow, false);

やっと見慣れている記法になった！素のJSもそのまま活かせるので、既存サイトの修正にも使えそう。
型指定はJSの自由すぎる部分に制限を加えてエラーを軽減する利点がある。アロー関数はCoffeeとは少し形が違いますね。
クラス定義については今回は踏み込めなかった。すみません。。
コンパイルはNodeでできるそうです。

（2020/04/26追記）

gulpでTypeScriptをコンパイル！

※参考：【JS】TypeScriptをGulpでコンパイルしてみる - クモのようにコツコツと

Babel

JS編の最後を飾るBabelはブラウザがまだ対応していない最新のESに準拠した記述ができるAltJSとのこと。

Babelの主な記法

最新のESに準拠
変数にletやconstなどが使える
アロー関数式「=>」が使える
クラス定義ができる

HTMLコード

<section id="coffee">
  <h1>Babel事始め</h1>
  <p>CodePen Settingの旅、JS編第4回。JS編の最後を飾るBabelはブラウザがまだ対応していない最新のESに準拠した記述ができるAltJSとのこと。
  </p>
  <section id="hello">
    <h2>特徴</h2>
    <ul>
      <li>最新のESに準拠</li>
      <li>変数にletやconstなどが使える</li>
     <li>アロー関数式「=>」が使える</li>
      <li>クラス定義ができる</li>
    </ul>
    <p>Babelも素のJSがそのまま行けるようなのでJSからの書き換えもしやすそう。</p>
    <p><small>※letは再宣言が出来ない。<br>
※constは再宣言も再代入もできない。<br>
 →いずれもvarより厳密だが、全てvarに置き換えても問題はない。
</small></p>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>

Babelコード

/*関数
function hellow(){
window.alert('hellow TypeScript');
window.alert('こんにちは、型スクリプト');
window.alert('おしまい');
}*/

/*アロー関数*/
var hellow = () => {
window.alert('hellow Babel');
window.alert('こんにちは、バベル');
window.alert(title + 'は第' + num + '回です。');
window.alert('おしまい');
}



/*変数
var btn = document.getElementById('btn');*/

/*最新の変数*/
const btn = document.getElementById('btn');

let title = 'JS編';

var num = 4;

/*イベント*/
btn.addEventListener('click', hellow, false);

Babelも素のJSがそのまま行けるようなのでJSからの書き換えもしやすそう。
機能はTypeScriptに似ているが書き方が少し違うところもあり、これはESがTypeScriptなどを機能として参考にしているが、書き方は違う形に決定したためです。
なので、Babelで書いておけば後々ブラウザが対応して、コンパイルしなくても動く部分が含まれることになります。未来を先取り！

最近ESでは「var」に加えて新しい変数が増えています。「let」は再宣言が出来ない、「const」は再宣言も再代入もできない、などいずれもvarより厳密です。
それらを全てvarに置き換えても問題はないです。

BabelもNodeでコンパイルができるらしいです。

（2020/04/26追記）

BabelでES6〜のJSをES5にコンパイル！

※参考：【JS】BabelでESをコンパイルする - クモのようにコツコツと