エンジニアをリングする

プログラをミングしたり。

my web site twitter

ES6入門のセッションした話&Talkie.js超オススメ

今日開催された春のJavaScript祭でES6入門の話をしてきました!
スライド資料は以下です。

HELLO, ES6 ~これから迎えるJSのミライ~

ES6入門な感じで、以下のようなことをざっくり話しました。

  • ES6って何
  • 何が変わるの
    • 新しい構文の紹介
    • 新しい機能の紹介
  • どうやったら使えるの
    • まずはちょっと試したい人へ
    • プロダクトのコードに使いたい人へ
    • テストだけES6で書いて慣れたい人へ

ちょっと駆け足でしたが、内容はスライドに全部書いてあるので、見てもらえれば思い出せると思います。
スライド、さっそくはてブがついててうれしい(^ω^)

会場の100人超のほか、生放送してたschoo経由でも見てくださった方もいたようで、ありがとうございます!
LT含め人前で話すのが初めてだったので緊張しました><
でも楽しかったので、これからも機会があれば喋るの挑戦したいなーと思います!
JSオジサンとか出たい・・・!

一番言いたいこと

↑のスライド、Talkieというスライドライブラリで作ったのですが、マジ便利ということを声を大にして言いたいです!!!!
TalkieはMarkdownで書けるHTMLベースのスライドライブラリなのですが、今回のスライド、テキストベースじゃなくてKeyNoteとかのGUIベースで作ってたら5倍ぐらい時間かかってたと思います。。。

サンプルがてら、スライドの1〜4ページまでのコードはというと・・・

<script layout="cover" invert type="text/x-markdown"
  backface="image/sai.jpg" backface-filter="brightness(.4)">
# Hello, ES6
## ~これから迎えるJSのミライ~
2015.4.25 [@yoshiko-pg](http://yoshiko-pg.github.io)
</script>


<script layout type="text/x-markdown">
# 突然ですが
## JavaScript読めますか?
</script>


<script layout invert type="text/x-markdown"
  backface="image/koara1.jpg" backface-filter="blur(1px) brightness(.6)">
# 余裕?
</script>


<script layout="code" type="text/x-markdown">
## このコード読めますか?

\```javascript
function sum (...nums) {
  return nums.reduce((a, b) => a + b)
}
console.log(sum(1,2,3,4)); // 10

function hi (name = 'Bob') {
  console.log(`Hi, my name is ${name}`);
}
hi('Tom'); // Hi, my name is Tom
hi();      // Hi, my name is Bob
\```
</script>

こんな感じです。
背景に画像敷くのも、ぼかすのも暗くするのも、script要素の属性ひとつで超簡単!!!
コードのシンタックスハイライトも、Highlight.jsを読み込んでおけば勝手にやってくれるので超簡単!!!
(Highlight.jsはES6の構文対応してないので今回のサンプルコードは微妙に色がバグってますが)

スライドの公開もGitHubPagesに上げればPCからもスマホからも見れるし。
発表時の最大化もポインターの表示もキーひとつで超簡単!!!
あと外部Webページ紹介したい時もiframeで埋め込めるし・・・もちろんリンクもできるし・・・

便利すぎてスライド作るの楽しかったです。
作者のahomuさん尊敬しました。
私もこういうライブラリ作れるようになりたいですねー・・・

ロジックにはBacon.jsが使われていて、そこがこのライブラリに興味持ったきっかけでもあったので、実装も読もうと思います。

使い方はhttp://ahomu.github.io/Talkie/が説明兼実際に動くサンプルになっているのでスライドとそのソースコード見た感じでわかると思います。

いやーすばらしい

結論

ES6胸熱
Talkie++