LT slide at Kanazawa.rb meetup #40

1. モダンな感じで
Chrome Extension
作ってみた
t_murano
Kanazawa.rb meetup #40

2. 自己紹介
• t_murano (@k242hd_akg)
• 社会人1年目
• Vimmer
• ISUCON出たりたまに競プロやってたり…

3. 最近こんなの作ってた

5. アプリは置いておいて
モダンな話

6. 使ってる技術とか
Babel npm
Webpack
jsdom
Sinon.JS
power-assert
mocha
React
ES6

7. 使ってる技術とか
Babel npm
Webpack
jsdom
Sinon.JS
power-assert
mocha
React
ES6
テスト関係
言語関係
※無理やり分類するとこんな感じ
View関係

8. 言語関係は

9. 1. npmで必要なパッケージを取得
2. ES6でコードを書く
3. Babelでトランスパイル
4. Webpackでガッチャンコ

10. 以上！

11. テストツール
• mocha : test framework
• power-assert : assertion library
• Sinon.JS : test double
• jsdom : DOM simulator

12. jsdom
• 昔はブラウザ上でテストしてた(…らしい)
• ブラウザではなくNode.js上でDOMを構築
• CLIで結構テストが走る → 楽ちん

13. React
• JUST THE UI
• Virtual DOM (あんまり意識しないと思う)
• DOMの変更や構造が把握しやすくなる

14. 2つのComponent
inputのeventをcatch
定義しておいた props (I/F)
ラベルを変更

15. アプリ作って思ったこと
• ChromeExtensionでも基本的にはSPA等と変わ
らないので、モダンな技術が使える
• Reactとjsdomでテスト書きやすい感じ
• Google先生を相手にすると厄介

16. まとめ
• モダン化いいね

17. おわり