<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>
#btn {
  display: inline-block;
padding: 1em;
background: #666;
border-radius: 5px;
  color: #fff;
}

#btn:hover {
  opacity: 0.7;
  cursor : pointer;
}
/*関数
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);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.