JavaScriptの素振りする技術
ライブラリをちょっと試す
ライブラリをブラウザで試す
- JavaScriptライブラリはデモを置いてることも多い
- デモがないとローカルで動かすのは面倒くさい
- わざわざローカルで
npm installして...
- わざわざローカルで
- ちょっとしたこと試す時に使えるツール
npmをその場で試す
- Tonic: a better REPL for node.js
- Browserify + REPLのようなサービス
- npmからリンクが貼られてる!
- 例: Tonic: npm on Tonic
他にも色々
- RequireBin
- Browserify + JSFiddle的なサービス
- Firefox DevTools
- URLをページにインジェクト出来る
- 開発ツールバーの
injectコマンド - ライブラリを読み込ませてConsoleで叩く
JS Envy
ライブラリをちょっと試すまとめ
- ライブラリをちょっと試すだけならブラウザだけでイケる
- 説明文をそのまま鵜呑みよりは一行でも実行する
- 実行するためのツールは色々充実してきている
- Node.js向けでもBrowserifyで動くレベルならブラウザでREPLができる
ライブラリの新しい機能を試す
- ライブラリで新しい機能追加された
- リリースノートに細かいことが書かれてない
- 関連: われわれは、いかにして変更点を追うか
- ちょっと探しても見つからなかったら実際に試す
例) Jasmineのランダムテスト
- 2015-12-07のJS: Jasmine 2.4.0、Redux入門、Firefox Platform Status - JSer.info
- Jasmine 2.4.0で追加されたランダムテストの紹介
- Release Notesには細かいことが書かれない
- 実際に試さないと正確なことが書けなかった
動かす前の認識
Run jasmine's specs in random order
デフォルトでランダム実行になった?
Add support for returning run details for reporting randomness
どういう意味?
動かす
$ mkdev jasmine-random-example
$ npm install -g jasmine
$ jasmine init
$ jasmine examples
$ jasmine # run
jasmine.jsonに"random": falseというのが増えていた- => デフォルトは
falseだった
- => デフォルトは
動かす
- Node.jsのjasmineだと
trueにしても何故かランダムじゃない - jasmineはHTML上で動かせる事を思い出した
- HTMLで動かしたら設定を見つけた！
- run details for reporting randomnessは
seed値のパーマネントを作るという意味
動かした後の認識
- デフォルトではランダム順序の実行ではなかった
Add support for returning run details for reporting randomness
これはseed値が失敗した時にでるという意味だと分かった
動かすことで得たもの
- 10分ぐらいで適当に動かせて認識を正すことができた
- ついでにそのままGitHubにpushして動くサンプルを作れた
- https://github.com/azu/jasmine-random-example/
- http://azu.github.io/jasmine-random-example/?random=true
|壁|
実際に動かすまでには壁がある
- ライブラリを読み込んで実行するまでに色々手順が必要
- 自分なり手順をテンプレ化しておく = 素振り
- npm install -> write code -> git push が大まかな流れ
@azu のケース
# ghqディレクトリにhogeを作ってhogeへ移動
mkdev hoge
# git, npm, license init
init-node.sh
### Development... ###
# Githubリポジトリを作成
hub create -d "description"
# git push -uのスクリプト
git pushup
使用してるスクリプト
- https://gist.github.com/azu/09dd6f27f52e2e8d9978
- 基本的に覚えられるコマンドしか使わない
init-node.shはpecoで色々なパターンを選択して使う- 大体どの言語でも同じパターンで作って公開してる
ライブラリの使い勝手を試す
- 使い勝手を把握するのは実際に何かを書かないと分かりにくい
- コストが高いのであんまり多用できない
- でも、書かないと使い勝手を見るのは難しい
何を持って使い勝手を試すか
- 結局素振り
- 書くものがないならElectronやNW.js
- 環境が固定されてる、新しい機能が使いやすい
- メンテを考えないならコンテキストが混ざってるNW.jsだと楽
とりあえず作る
- 作ってGitHubにあげる
- 完成しなくてもGitHubにあげる
- そのままローカルのゴミ箱に捨てるよりはGitHubに捨てる
- ゴミ箱に捨ててしまうと記憶からも無くなってしまう
適当に作ったもの
- JSer.info Pull Request Form
- Angularを試したくなり作った
- JSer.infoに紹介してもらいたい記事のPull Requestが出来るようになりました - JSer.info
- JSer.info contributing item preview
- Vue.js 1.0を試したくなり作った
- azu/hatebu-mydata-search
- Flux Utilsを試したくなり作った
- はてなブックマーク検索を作りながらFlux Utilsについて学ぶ | Web Scratch
- azu/bookmarkletter
- azu/video-prefetcher
- azu/video-shortcut-controller
- azu/video-transcript-note
- azu/video-transcript-tracker
<video>と<track>に触りたくて作った- 動画とルビ翻訳された字幕をみながらMarkdownメモできるアプリを書いた | Web Scratch
- jser/stat-js
- naturalを使った自然言語解析がやりたくなった
- azu/audio-node-flow
- Web Audio APIに触りたくて書いた
- => Web Audio APIの標準に同様のものが追加されてた Web Audio Method Chaining Sample
- JavaScriptとWeb Audio事始め
Issueを出す
- 問題がある時に一番いいのは再現可能なサンプル
- 合わせてスクリーンショットなど
- 再現可能なサンプルを作って公開するのは面倒
Issueのサンプル
- JSFiddleみたいなパーマネントリンクだけ済むならそれを出す
- コマンドだったり、ファイルサイズみたいな問題だと実際にリポジトリを作る
- 素振りで慣れておけばサンプルをあげるのも5分かからない
Issueのサンプル : deku
- Reduce build file size by azu · Pull Request #297 · dekujs/deku
- Add "browser" field for browserify by azu
- Browserifyで使うとファイルサイズが50KB増える問題
- 実際にファイルサイズが50KBになるリポジトリへリンク
まとめ
- 実際にローカル環境を作らなくてもJavaScriptは動かせる
- ローカル環境でもパターン化してスグ動かせるように素振り
- バグ報告には再現可能なサンプルを一緒に出そう
- ゴミはゴミ箱ではなくGitHubへ
- ライブラリ書く側はドキュメントを分かりやすく書こう、デモを作ろう