検索

• [ Prev ]
• [ Next ]
• [ Java ]

Java8のJavaScriptエンジン、Nashorn（ナースホルン）の参考URLのメモ書きです。

参考URLその１：

• Java SE 8の新JavaScriptエンジン「Nashorn」が実現する次世代の “JavaScript in Java”環境【Java EEエキスパート・シリーズ】 (WebLogic Channel)
  • https://blogs.oracle.com/wlc/entry/javaee_c117
• NashornとServerSideJavaScript
  • http://www.slideshare.net/MizuhoSakamaki/nashornserversidejavascript

特徴：

• ECMAScript-262 Edition 5に準拠。
• ASTにした後JVMコードに変換するので、HotSpotVMのパフォーマンスの恩恵に預かれる。
• Rhinoの呼び出し方からAPIを変えてないので、Rhinoの呼び出しをそのままNashornでも使える。

以下、参考URLその２．

• Java スクリプトプログラマーズガイド
  • http://docs.oracle.com/javase/jp/8/docs/technotes/guides/scripting/index.html
• Java 8 Nashorn Tutorial - Benjamin Winterberg
  • http://winterbe.com/posts/2014/04/05/java8-nashorn-tutorial/
• The Nashorn Java API
  • http://docs.oracle.com/javase/8/docs/technotes/guides/scripting/nashorn/api.html
• Oracle Nashorn: A Next-Generation JavaScript Engine for the JVM
  • http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html
• Project Nashorn
  • http://www.eclipse.org/community/eclipse_newsletter/2014/january/article4.php

以上。

（今思ったんだが、JSON.stringifyとかJSON.parseも使えるなら、複雑なデータ構造をプログラマブルにカスタマイズするような用途だと、組み込みのNashornをうまく活用できはしまいか。）

• [ Prev ]
• [ Next ]
• [ Up ]
• [ Java ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptのAST,構文解析,Call Graph, CFG(Control Flow Graph)生成周りの2015-03時点での参考URLメモです。

JavaScriptのcall graphを生成するには？

• How to generate call-graphs for given javascript? - Stack Overflow
  • http://stackoverflow.com/questions/10182387/how-to-generate-call-graphs-for-given-javascript
• Get Control flow graph from Abstract Syntax Tree
  • http://www.drawbackz.com/stack/440545/get-control-flow-graph-from-abstract-syntax-tree.html

JavaScriptの構文解析ライブラリ

JavaScriptのParserにはどんなのがある？：

• Parser API - Mozilla | MDN
  • https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API
• Java Parser for JavaScript: List all Functions/Variables - Stack Overflow
  • http://stackoverflow.com/questions/22985727/java-parser-for-javascript-list-all-functions-variables

Esprimaというのが有望そう？：

• Esprima
  • http://esprima.org/
• Esprima Documentation
  • http://esprima.org/doc/index.html
• Esprima: Parser
  • http://esprima.org/demo/parse.html#
• Swatinem/esgraph
  • https://github.com/Swatinem/esgraph
  • Esprimaの出力からcall graphをgraphviz形式で出力してくれる。

JavaScriptの構文解析→AST変換までしてくれるライブラリなど

結構ライブラリが充実してきてる。Lintなどで構文解析する需要が大きいらしい。

• JavaScript AST Walker
  • http://azu.github.io/slide/tkbjs/js-ast-walker.html#0
• カジュアルJavaScript AST
  • http://azu.github.io/slide/JSojisan/#1
• tkbjsでJavaScript ASTについて発表してきました | Web Scratch
  • http://efcl.info/2013/1117/res3481/
• JSオジサンで現在のJavaScript ASTについて発表してきた | Web Scratch
  • http://efcl.info/2014/0328/res3756/
• JavaScript AST visualizer
  • http://jointjs.com/demos/javascript-ast
  • これとか、AST構文を分かりやすくグラフ表示にしてくれる。Esprimaの応用例らしい。
  • →元はJSでダイアグラムを作るライブラリのデモらしい。
  • JointJS - JavaScript diagramming library - Demos.
    • http://jointjs.com/demos
• ajaxorg/treehugger
  • https://github.com/ajaxorg/treehugger
  • これはAST構文ツリーを辿るためのライブラリとして紹介されてた：

JSのカバレッジ計測

ASTを変換することでカバレッジ計測用のコードを挿入するアプローチ。以下はあくまでもブラウザ上で実行されるJSのカバレッジ計測。node.jsエコシステムについては未調査。

• script-cover - Javascript code coverage detector for web pages in Chrome - Google Project Hosting
  • https://code.google.com/p/script-cover/
• Google Testing Blog: ScriptCover makes Javascript coverage analysis easy
  • http://googletesting.blogspot.jp/2011/10/scriptcover-makes-javascript-coverage.html
• ScriptCoverDesign - script-cover - An overview of ScriptCover design - Javascript code coverage detector for web pages in Chrome - Google Project Hosting
  • https://code.google.com/p/script-cover/wiki/ScriptCoverDesign

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

asm.jsについての参考URLのメモ書きです。

• asm.jsとは：最適化のために、専用の制限を加えたJS仕様と、その最適化処理系。らしい。
• C/C++で記述したコードをJSに変換できる。C/C++で書かれた純粋なデータ処理ロジックをそのままJSに持ち込めるので、画像処理や音声データ処理で蓄積されたC/C++の資産をJSでも活用できる。
• 例としてC/C#などで画像処理アルゴリズムを記述して、それをLLVM-IRに吐き出し、それをJSに変換、そこまで行けばasm.jsで最適化することで、ブラウザアプリから高速にそうしたアルゴリズムを利用可能になる。
• 類似技術としてはPNaClという、ネイティブコードをブラウザ上で動作させる技術がある。

参考：

• http://asmjs.org/
• asm.jsとかPNaClとかLLVMに興味あったので調べて回ったら少しだけ理解できた話 - hdk_embeddedの日記
  • http://d.hatena.ne.jp/hdk_embedded/20131128/1385669904
• asm.jsについてこれさえ知っておけば超絶ライフハックで明日から収入が三倍になって身長が伸びて血圧が下がって寿命が10年伸びて彼女が出来て合コンでモテて子供が神童と呼ばれ東大首席入学で末は博士か大臣かコースまっしぐらで老後も安泰で人類も平和になるだいたい10個くらいの何か - snyk_s log
  • http://saneyukis.hatenablog.com/entry/2013/03/27/174709
• IEとChromeがasm.jsをサポート
  • http://www.infoq.com/jp/news/2015/03/ie-chrome-asmjs
• 明日から使えるasm.js - Low Level JavaScript - 「LLJS」 マイナー言語アドベントカレンダー・一日目 - Qiita
  • http://qiita.com/mizchi/items/ccc1429ca6156233bdee
• LLVM Project Blog: FTL: WebKit’s LLVM based JIT
  • http://blog.llvm.org/2014/07/ftl-webkits-llvm-based-jit.html
• John Resig - Asm.js: The JavaScript Compile Target
  • http://ejohn.org/blog/asmjs-javascript-compile-target/

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

altJSやJavaScript transpiler (ES6で書いたのをES5に変換する) 界隈、現在どうなってるのかググって参考URLのメモ(2015-03時点)。

altJSの一覧, 比較資料

• List of languages that compile to JS · jashkenas/coffeescript Wiki
  • https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
• JavaScript - AltJSの選び方フローチャート - Qiita
  • http://qiita.com/mizchi/items/c5f101cfab8fd456ca20
• JavaScript と altJS - ペパボのフロントエンドスタンダード
  • http://pepabo.github.io/docs/frontend/standard/javascript-and-altjs.html
• altJSの選び方
  • http://www.slideshare.net/terurou/altjs
• 天下一altJS武闘会 - 資料一覧 - connpass
  • http://connpass.com/event/6402/presentation/

メジャーなaltJSの公式URL、参考記事

• Welcome to TypeScript
  • http://www.typescriptlang.org/
  • TypeScript Advent Calendar 2014 - Qiita
    • http://qiita.com/advent-calendar/2014/typescript
• CoffeeScript
  • http://coffeescript.org/
• JSX - a faster, safer, easier JavaScript
  • https://jsx.github.io/
  • JSX の現在と未来 - Oct 26 2013
    • http://www.slideshare.net/kazuho/jsx-oct-26-2013
  • JSX 速さの秘密 - 高速なJavaScriptを書く方法
    • http://www.slideshare.net/kazuho/jsx-28985279
• Haxe - The Cross-platform Toolkit
  • http://haxe.org/
• Dart: Structured web apps
  • https://www.dartlang.org/
  • ChromeへのDartVM統合を断念、Dart開発チームが発表。今後はJavaScriptへのコンパイルにフォーカス － Publickey
    • http://www.publickey1.jp/blog/15/chromedartvmdart.html
• AtScript - Wikipedia, the free encyclopedia
  • http://en.wikipedia.org/wiki/AtScript
  • GoogleのAngular 2はマイクロソフトのTypeScriptで開発されると発表。TypeScript 1.5以降でECMAScript 6とアノテーションなどを取り込んでいくと － Publickey
    • http://www.publickey1.jp/blog/15/googleangular_2typescripttypescript_15ecmascript_6.html
  • Angular 2フレームワークとTypeScript言語でMicrosoftとGoogleが協働 - TechCrunch
    • http://jp.techcrunch.com/2015/03/06/20150305microsoft-and-google-collaborate-on-typescript-hell-has-not-frozen-over-yet/
  • → TypeScriptにAtScriptの機能が取り込まれる？？？

JavaScript Transpiler

• 開発が勢いづく6to5 JavaScriptトランスパイラ
  • http://www.infoq.com/jp/news/2015/02/6to5-javascript-transpiler
• Babel · The transpiler for writing next generation JavaScript
  • https://babeljs.io/
• traceur-compiler 入門 - from scratch
  • http://yosuke-furukawa.hatenablog.com/entry/2014/07/31/093041
• Using the ES6 transpiler Babel on Node.js
  • http://www.2ality.com/2015/03/babel-on-node.html

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptでのVirtualDOM参考URLメモ(2015-04時点)。

いくつかVirtualDOMの機能を取り込んだメジャーなライブラリがある。Facebookのreact.jsがその一つ。他にもReactive.jsというのがあるが、この辺りはreactiveプログラミングのライブラリの中にVirtualDOM機能を含んでいる。もちろんVirtualDOM単体のライブラリもあり、そのへんもmizchi先生のQiita記事で触れられてる。

• A JavaScript library for building user interfaces | React
  • http://facebook.github.io/react/
• Ractive.js | The diamond age of web development
  • http://www.ractivejs.org/
• VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
  • http://qiita.com/mizchi/items/4d25bc26def1719d52e6
  • 詳しい。MVC, MVVM, React, Fluxの話題にも言及してる。

とりあえず2015年時点なら、このAdvent Calendarの記事全部目を通せば大体勉強できそう：

• VirtualDOM Advent Calendar 2014 - Qiita
  • http://qiita.com/advent-calendar/2014/virtual-dom

React・・・じゃない、Reactive.jsを使った動くサンプルコードをjsfiddleで公開してくれてるので、分かりやすい記事：

• Ractive.js の紹介 — KaoriYa
  • http://www.kaoriya.net/blog/2014/12/13/

JS界隈のエッジな記事は、日本だとQiitaに集まってる気がするので。とりあえずggrksかQiitaで検索すれば良さそう：

• VirtualDomに関する11件の投稿 - Qiita
  • http://qiita.com/tags/virtualdom

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptの"Polyfill"ってなんなのかググった参考URLのメモ。

• Polyfill - Wikipedia, the free encyclopedia
  • http://en.wikipedia.org/wiki/Polyfill
• HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki
  • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
• HTML5 Please - Use the new and shiny responsibly
  • http://html5please.com/
• jQuery から卒業するための第1歩を polyfills から学ぼう | girigiribauer.com
  • http://girigiribauer.com/archives/1233
• IE対応のバッド・プラクティス「Polyfill」の危険性 | Webamb | ウェブアンブ
  • http://webamb.com/coding/1251.html

要するにHTML/JS/CSSの最新仕様や、まだドラフトとか提案段階の機能を、古いブラウザとかでも先取りして動かせるようにしてくれるライブラリをまとめて "Polyfill" というカテゴリで扱ってるらしい。

そのため、SVGだとかWeb ComponentsだとかCSS3の一部の機能だったりとか、ピンポイントで先行実装したライブラリが何種類も、それぞれ勝手に開発されて流行り廃りしてる状況。

ただし、古いブラウザでもできることに限界があったりするので、どこまでの機能を提供してくれるのか、要注意らしい。

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptのPromiseの参考URLメモ。

ES6で正式登場、ブラウザによっては一部機能先行実装。未対応のブラウザでも、Polyfill(互換実装)あり。

概要とか、ひと通りサンプルコード付きで分かりやすかった学習サイト：

• JavaScript Promises: There and back again - HTML5 Rocks
  • http://www.html5rocks.com/ja/tutorials/es6/promises/
• JavaScript Promiseの本
  • http://azu.github.io/promises-book/

初期の仕様とりまとめサイトとか、MDNとか：

• Promise - JavaScript | MDN
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
• Promises
  • https://www.promisejs.org/
• Promises/A+
  • https://promisesaplus.com/

その他入門系：

• JavaScript - 今更だけどPromise入門 - Qiita
  • http://qiita.com/koki_cheese/items/c559da338a3d307c9d88
• Promises: ブラウザーJavaScriptの新しい非同期標準になるか？
  • http://www.infoq.com/jp/news/2014/05/promises-javascript
• Promiseが実装された - JS.next
  • http://js-next.hatenablog.com/entry/2013/11/28/093230
• "promise" による JavaScript での非同期プログラミング - Internet Explorer ブログ (日本語版) - Site Home - MSDN Blogs
  • http://blogs.msdn.com/b/ie_jp/archive/2011/10/05/10220180.aspx
• Understanding javascript-promises
  • https://spring.io/understanding/javascript-promises
• Futures and promises - Wikipedia, the free encyclopedia
  • http://en.wikipedia.org/wiki/Futures_and_promises

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptでのData Bindingってどうしてるのか、軽くググってみたところObserverパターンの応用であり、JSでのライブラリの代表例としてVue.jsというのがありましたので、2015-03時点で参考URLをメモ。

• 技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点) でもWPFの世界の参考記事をいくつかググって並べたが、One Way / Two Way / Once の3種類位あるらしい。
• One-Way は単方向。Two-Wayが双方向。Onceは最初の一度きり、という具合に使い分けされてるらしい。
• 実装としては、Observerパターンを使って、オブジェクトの変更イベントを購読(subscribe)して、データの変更やViewの変更イベントをお互いに伝え合う形。
• JSで開発する場合は、Two-Wayの利用頻度が高めなのかも。

JavaScriptとObserverパターン

JavaScriptでObserverパターンはどう作るか？いくつか、実際にサンプルコードで例示してくれてる記事が見つかった。

• 【JS】オブザーバパターンの実装 | kotazi.com
  • http://kotazi.com/archives/1039
• JavaScriptデザインパターン – 第3部：プロキシ、オブザーバー、コマンド | Adobe Developer Connection
  • http://www.adobe.com/jp/devnet/html5/articles/javascript-design-patterns-pt3-proxy-observer-command.html
• Observer JavaScript Design Pattern with examples- dofactory.com
  • http://www.dofactory.com/javascript/observer-design-pattern

JavaScriptでのData Bindingのサンプル

参考：

• Two-Way Data Binding
  • http://n12v.com/2-way-data-binding/
  • PureJSやBackbone, React, Angular, Meteor のそれぞれでData Bindingのサンプルを書いて解説してくれてる
• Easy Two-Way Data Binding in JavaScript - Luca Ongaro
  • http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/
  • 自力でTwo-Way Data Bindingを実装、jQueryで楽してる記事
• Data-binding Revolutions with Object.observe() - HTML5 Rocks
  • http://www.html5rocks.com/en/tutorials/es7/observe/
  • Chrome36から使えるようになった Object.observe()を使ったData Bindingのサンプル

その他、Stack Overflowより：

• javascript - What is two way binding? - Stack Overflow
  • http://stackoverflow.com/questions/13504906/what-is-two-way-binding
• html - How to Implement DOM Data Binding in JavaScript - Stack Overflow
  • http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript

Vue.jsの参考URL

2015-03現在、Observerを基盤としたDataBindingと、さらに一部ではReactなどのパラダイムを取り入れたライブラリ・フレームワークが百花繚乱なのがJavaScript界隈のホットな現状。
その中で、Vue.jsを使ったMVVMとData Bindingのサンプルがいくつか見つかったので、メモ。

• クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
  • http://www.slideshare.net/sekiyousuke/mvvm-vuejs
• はじめよう　Vue.js - Qiita
  • http://qiita.com/kitfactory/items/9c9b9312ace03e731b33
• Getting Started - vue.js
  • http://vuejs.org/guide/

• [ Prev ]
• [ Next ]
• [ JavaScript ]

• [ Prev ]
• [ Next ]
• [ 技術 ]

(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画面が表示される。

• [ Prev ]
• [ Next ]
• [ 技術 ]

• [ Prev ]
• [ Next ]
• [ 技術 ]

Web開発でもJSのライブラリやフレームワークで目にするようになったMVVM(Model View ViewModel)とかData Binding って何だろう、とぐぐったので、2015-03時点の参考URLのメモ。

• WPF(Windows Presentation Foundation)やSilverlightの世界で生まれた考え方らしい。
• そのため、MSDNとかWindows系の開発者のblog等で丁寧に動作原理を解説してる記事が多い。
• Model View ViewModel - Wikipedia
  • http://ja.wikipedia.org/wiki/Model_View_ViewModel

分かりやすかった：

• MVVMパターンの常識 ― 「M」「V」「VM」の役割とは？ － ＠IT
  • http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html
• MVVM パターンをより深く理解する - Yuta Watanabe's Blog
  • http://yutawatanabe.hatenablog.com/entry/mvvm-sessions
• いまさら聞けない「MVVM + Messenger パターン」超入門 - present
  • http://tnakamura.hatenablog.com/entry/20110218/mvvm_messenger
• WPF MVVM初心者がみたMVVMライブラリが提供するもの | tocsworld
  • https://tocsworld.wordpress.com/2014/06/13/wpf-mvvm%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E3%81%BF%E3%81%9Fmvvm%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%8C%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B%E3%82%82%E3%81%AE/

MSDNの固めの解説記事：

• Model-View-ViewModel (MVVM) パターンの使用 - Windows app development
  • https://msdn.microsoft.com/ja-jp/library/windows/apps/jj883732.aspx
  • Windows デベロッパーセンタ > ゲームの開発 > Windows ストアゲーム "リバーシ" (XAML、C#、C++) -> Model-View-ViewModel(MVVM) パターンの使用
• 5: Implementing the MVVM Pattern Using the Prism Library 5.0 for WPF
  • https://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx
  • MSDN Developer Network > Documentation > Prism > Prism 5 - Developer's Guide to Microsoft Prism Library 5.0 for WPF > 5:Implementing the MVVM Pattern

MVVMとData Bindingの関連性の自分なりの認識：

• MVVMのキーとなるのがObserverパターンであり、この応用としてData Bindingがある。
• View と ViewModelはData Bindingで結ばれている、つまり双方向でObserveな関係（誤解してるかもなので、今の時点でのイメージ的な言い回し）。
• Viewへの変更イベントはそのままViewModelへ通知され、ViewModelが対応するModelをアップデートする。
• 逆に、別のコードからのModelへの変更はそのままViewModelに通知され、ViewModelが適切なPresentationに変換してViewに通知する。

Data Bindingについては、以下の記事が基本的な作りを解説してくれてて分かりやすかった：

• 連載　WPF／Silverlight UIフレームワーク入門：第2回 データの表示と入力に必要な知識 (1/5) - ＠IT
  • http://www.atmarkit.co.jp/ait/articles/0905/19/news145.html

ただ、Observeによる処理の流れでは、重い処理が間に入ると流れがそこで止まってしまう。そのためマルチスレッドで重い処理を切り出すなどの工夫が必要となる。

MVVMにおけるマルチスレッド処理の活用について、いくつか参考になりそうな記事が見つかったのでメモ：

• wpf - MVVM and multi threading - Stack Overflow
  • http://stackoverflow.com/questions/4604878/mvvm-and-multi-threading
• MVVM - MVVM アプリにおけるマルチスレッドとディスパッチ
  • https://msdn.microsoft.com/ja-jp/library/dn630646.aspx
• MVVM and Threading | Actively Lazy
  • http://blog.activelylazy.co.uk/2015/01/11/mvvm-and-threading/

• [ Prev ]
• [ Next ]
• [ 技術 ]