タイトル/名前 | 更新者 | 更新日 |
---|---|---|
Java/Nashorn(Java8以降のJavaScriptエンジン)の参考URLメモ(2015-03時点) | msakamoto-sf | 2017-02-12 16:28:06 |
JavaScript/参考メモ/AST,構文解析,Call Graph,CFG(Control Flow Graph)生成周り(2015-03時点) | msakamoto-sf | 2017-02-12 16:25:23 |
JavaScript/参考メモ/asm.js(2015-03時点) | msakamoto-sf | 2017-02-12 16:22:20 |
JavaScript/参考メモ/altJSとtranspiler(2015-03時点) | msakamoto-sf | 2017-02-12 16:21:07 |
JavaScript/参考メモ/VirtualDOM(2015-04時点) | msakamoto-sf | 2017-02-12 16:20:54 |
JavaScript/参考メモ/Polyfill(2015-03時点) | msakamoto-sf | 2017-02-12 16:20:42 |
JavaScript/参考メモ/Promise関連(2015-04時点) | msakamoto-sf | 2017-02-12 16:20:28 |
JavaScript/参考メモ/Data Binding, ObserverパターンとVue.js(2015-03時点) | msakamoto-sf | 2017-02-12 16:20:11 |
技術/Chrome/初期設定で起動する(--user-data-dir) & リモートデバッグ可能にする(--remote-debugging-port) | msakamoto-sf | 2017-02-12 16:18:14 |
技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点) | msakamoto-sf | 2017-02-12 16:11:02 |
Java8のJavaScriptエンジン、Nashorn(ナースホルン)の参考URLのメモ書きです。
参考URLその1:
特徴:
以下、参考URLその2.
以上。
(今思ったんだが、JSON.stringifyとかJSON.parseも使えるなら、複雑なデータ構造をプログラマブルにカスタマイズするような用途だと、組み込みのNashornをうまく活用できはしまいか。)
JavaScriptのAST,構文解析,Call Graph, CFG(Control Flow Graph)生成周りの2015-03時点での参考URLメモです。
JavaScriptのParserにはどんなのがある?:
Esprimaというのが有望そう?:
結構ライブラリが充実してきてる。Lintなどで構文解析する需要が大きいらしい。
ASTを変換することでカバレッジ計測用のコードを挿入するアプローチ。以下はあくまでもブラウザ上で実行されるJSのカバレッジ計測。node.jsエコシステムについては未調査。
asm.jsについての参考URLのメモ書きです。
参考:
altJSやJavaScript transpiler (ES6で書いたのをES5に変換する) 界隈、現在どうなってるのかググって参考URLのメモ(2015-03時点)。
JavaScriptでのVirtualDOM参考URLメモ(2015-04時点)。
いくつかVirtualDOMの機能を取り込んだメジャーなライブラリがある。Facebookのreact.jsがその一つ。他にもReactive.jsというのがあるが、この辺りはreactiveプログラミングのライブラリの中にVirtualDOM機能を含んでいる。もちろんVirtualDOM単体のライブラリもあり、そのへんもmizchi先生のQiita記事で触れられてる。
とりあえず2015年時点なら、このAdvent Calendarの記事全部目を通せば大体勉強できそう:
React・・・じゃない、Reactive.jsを使った動くサンプルコードをjsfiddleで公開してくれてるので、分かりやすい記事:
JS界隈のエッジな記事は、日本だとQiitaに集まってる気がするので。とりあえずggrksかQiitaで検索すれば良さそう:
JavaScriptの"Polyfill"ってなんなのかググった参考URLのメモ。
要するにHTML/JS/CSSの最新仕様や、まだドラフトとか提案段階の機能を、古いブラウザとかでも先取りして動かせるようにしてくれるライブラリをまとめて "Polyfill" というカテゴリで扱ってるらしい。
そのため、SVGだとかWeb ComponentsだとかCSS3の一部の機能だったりとか、ピンポイントで先行実装したライブラリが何種類も、それぞれ勝手に開発されて流行り廃りしてる状況。
ただし、古いブラウザでもできることに限界があったりするので、どこまでの機能を提供してくれるのか、要注意らしい。
JavaScriptのPromiseの参考URLメモ。
ES6で正式登場、ブラウザによっては一部機能先行実装。未対応のブラウザでも、Polyfill(互換実装)あり。
概要とか、ひと通りサンプルコード付きで分かりやすかった学習サイト:
初期の仕様とりまとめサイトとか、MDNとか:
その他入門系:
JavaScriptでのData Bindingってどうしてるのか、軽くググってみたところObserverパターンの応用であり、JSでのライブラリの代表例としてVue.jsというのがありましたので、2015-03時点で参考URLをメモ。
JavaScriptでObserverパターンはどう作るか?いくつか、実際にサンプルコードで例示してくれてる記事が見つかった。
参考:
その他、Stack Overflowより:
2015-03現在、Observerを基盤としたDataBindingと、さらに一部ではReactなどのパラダイムを取り入れたライブラリ・フレームワークが百花繚乱なのがJavaScript界隈のホットな現状。
その中で、Vue.jsを使ったMVVMとData Bindingのサンプルがいくつか見つかったので、メモ。
(1) まずchrome.exeがどこにあるか調べる。Winならタスクマネージャからchrome.exeのプロパティを開いてフルパスを確認する。2015-03-29時点で試してみたら、以下の場所にあった。インストール時の状況や環境によって変わるかも。
C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application\chrome.exe
(2) 初期状態とするため、空のプロファイルディレクトリを作成する。"c:\work\temp\chrome-test-profile1" というフォルダを作成したら、"--user-data-dir" オプションに指定して起動する。
コマンドプロンプトを開き、以下のように実行する。
> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application > chrome.exe --user-data-dir=c:\work\temp\chrome-test-profile1
(3) リモートデバッグを行いたい場合は、"--remote-debugging-port=NNNN" オプションを付けて以下のように起動する。
> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application > chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\work\temp\chrome-test-profile1
(4) 起動したchromeウインドウで、試しに何かデバッグしたいWebサイトを読み込んでみる。
(5) デバッガとして操作するChromeを起動し、"--remote-debugging-port" に指定したポートでlocalhostにアクセスしてみる。 上の例なら以下にアクセス:
http://localhost:9222/
→ "Inspectable pages" という画面で、デバッグ対象chromeで表示しているタブ一覧が表示される。デバッグしたいタブをクリックすると、対応するDevTools画面が表示される。
Web開発でもJSのライブラリやフレームワークで目にするようになったMVVM(Model View ViewModel)とかData Binding って何だろう、とぐぐったので、2015-03時点の参考URLのメモ。
分かりやすかった:
MSDNの固めの解説記事:
MVVMとData Bindingの関連性の自分なりの認識:
Data Bindingについては、以下の記事が基本的な作りを解説してくれてて分かりやすかった:
ただ、Observeによる処理の流れでは、重い処理が間に入ると流れがそこで止まってしまう。そのためマルチスレッドで重い処理を切り出すなどの工夫が必要となる。
MVVMにおけるマルチスレッド処理の活用について、いくつか参考になりそうな記事が見つかったのでメモ: