ES6入門のセッションした話&Talkie.js超オススメ
今日開催された春のJavaScript祭でES6入門の話をしてきました!
スライド資料は以下です。
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++