Contenu connexe Similaire à JSer Class #3 (20) JSer Class #33. 開催概要
• 開催日時
• 3/2(水)〜 毎週水曜 19:30〜21:30 全3回予定
• 会場
• コラボレーションスペース(N・W)
• コンテンツ
• 第1回 JavaScriptの言語仕様
• 第2回 DOMとXmlHttpRequest、軽量フレームワーク
• 第3回 クライアントサイドMVC
再掲
4. 参考情報
• サイト
• JavaScriptガイド@MDN
• https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
• 書籍
• JavaScript 第6版(サイ本)
• http://www.amazon.co.jp/dp/4873115736
• Effective JavaScript
• http://www.amazon.co.jp/dp/4798131113
再掲
19. altJSの例
言語名 開発元 説明
CoffeeScript Jeremy
Ashkenas
altJSの嚆矢となった言語。便利な構文/ショートハンドの導入。そ
れと不可分のコードの曖昧性の急拡大(XML/JSONに対するYAML
のようなもの)。ようするに状況は却って悪化。
ClojureScript Rich Hickey JVM上で稼働するLisp方言であるClojureのコードを元にJavaScript
コードを生成する。Clojureの売りは並列分散処理のはずだが…。
Dart Google クライアントサイドにランタイムが必要。つまりJavaScriptの糖衣
構文ではなく、独立した言語。
TypeScript Microsoft JavaScriptのスーパーセットであり、ECMAScript v6以降の先行実
装でもある。後程さらに詳しく取り上げる。
Scala.js École
polytechnique
fédérale de
Lausanne
/Typesafe
JVM上で稼働するOOP+FP言語であるScalaのコードを元に
JavaScriptコードを生成する。Java/C#以上に強力な型システム、
高度な型推論、にも関わらずシンプルな記法、内部DSL、強力な標
準APIといったScalaの特徴をそのまま移植(*)。当然の結果として
ものすごいファイルサイズになる。
* Scala.jsについてはこちらも参照のこと: http://m12i.hatenablog.com/entry/2015/07/20/104347
20. altJSの実行時エラー解析
• altJSには以下の2つのコードが存在することになる:
A) もともとのソースコード(非JS)
B) コンパイル後のソースコード(JS)
• 実行時のエラーはもちろんB側で起きる。
• エラーを解析するには、B側のコードのエラー箇所がA側のコー
ドのどこに対応するかを知る必要がある。
• この対応付けを実現するのが、コンパイラにより生成され
る.mapファイル(*)。
• .mapに対応したブラウザではエラー発生時にもともとのコード
の位置情報を表示してくれる。
* .mapファイルはjQueryなどのライブラリでも利用されている。この場合.mapはライブラリのもとのソースコー
ドとそれをminifyしたコードとを対応付ける(たぶん歴史的にはこの利用法が先行する)。
21. 余談)ランタイム on ランタイム
• Python
• IronPython .NETランタイムで稼働するPython
• Jython JVM上で稼働するPython
• Cython コンパイルされC言語化されるPython
• PyPy Pythonインタプリタ上で稼働するPython
• Ruby
• JRuby JVM上で稼働するRuby。CRubyより早い?
• Erlang
• Elixir Erlangランタイム上で稼働するRubyライクな言語
研究目的、既存リソー
スとの統合目的など
いろいろな動機
25. TypeScript言語仕様
基本型
• string JavaScriptのstring
• number JavaScriptのnumber
• boolean JavaScriptのboolean
• any 変数/戻り値型。あらゆる型のサブタイプ。
• void 戻り値型。「戻り値がない」の意。
• enum データ/変数/戻り値型。numberのサブタイプ。
• Array<T> JavaScriptのArray。
• null/undefined 説明省略! なぜかここだけ
C#チックという謎。
any/voidはデータ型
ではなく変数型である。
当たり前だが、念のため。
39. 補足)構造的部分型
• Structural Subtype(Subtyping)。
• 型の宣言によらず、インスタンスが持っている"形"(Shape。
JSの場合ようはプロパティ)によってサブ型と判定されること。
• 「ダックタイピング」(アヒルに見えるしアヒルのようにガー
ガー鳴くならアヒルに違いない)を実現するための仕組み。
• Python/RubyではAPIの柔軟性のためダックタイピングが推奨
されるが「だからAPI開発者はまず引数として渡されたオブ
ジェクトのメンバーの存否をチェックして…」となる。しかし
ScalaやTypeScriptでは「そういうことはコンパイラに任せて
ください」となる。
40. 付録)開発環境構築
コンパイラの導入
• VS 2015を利用される場合、プリイントール済み。
• VS 2013の場合はMicrosoftが公開している無料のツール
TypeScript 1.5 for Visual Studio 2013を導入するだけ。
• LinuxやMac OS Xで開発をする場合やWindows OSでもVS以外
を利用される場合、まずnode.jsのパッケージ管理ツールである
npmを導入し、その後下記コマンドを実行してTypeScriptコン
パイラをインストール:
$ sudo npm install -g typescript
42. 付録)開発環境構築
Hello World
• 次にgreeter.tsをつくる:
interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return "<h1>Hello, " + person.firstname +
" " + person.lastname + "</h1>";
}
var user = {firstname: "Marc", lastname: "Bloch"};
document.body.innerHTML = greeter(user);
46. 付録)開発環境構築
VS Codeおすすめの理由
• Linux OSやMac OS Xでも利用できる。
• 初期費用がかからない。
• 言語と同じ開発元でサポートに信頼がおける。
• 現時点でツールの安定性が高い。
• 独自拡張など便利だが非公式のナレッジが不要。
• EclipseなどのIDEと併用する上で機能が十分にシンプル。
47. 付録)開発環境構築
VS Codeでビルド・タスクを用意
① プロジェクト・ディレクトリ(ただのディレクトリ)を作成する。
② VS Codeを起動する。
③ [File]→[Open]でファイル/ディレクトリ・ピッカーを表示する。
④ 上記ディレクトリを選択して[Open]。
⑤ Ctrl+Shift+P(Mac OS XではCommand+Shift+P)でコマンド・パ
レットを表示する。
⑥ 「Tasks: Configure Task Runner」と入力しEnter。
⑦ .vscodeというサブディレクトリが作成され、その中にtasks.jsonが作成
される。
⑧ tasks.jsonのargsの値をコンパイル対象ファイルにあわせ修正し保存。
⑨ Ctrl+Shift+B(Mac OS XではCommand+Shift+B)でビルド実行。
51. 補足)RESTful API
• REST: Representational State Transfer。
• RESTful API: RESTの原則に準じたAPI。
• そもそもRESTの概念がよくわからない&一定していないので
RESTfulの定義もあやふやっぽい(*)。
• しかしようするに「標準化されたスキーマ情報を持たない(**)
Web サービスで、リソースのCRUDをHTTPメソッド
POST/GET/PUT/DELETEで表現するもの」。
• ─って、ますますよくわからない?
* 白状すると少なくとも「あやふや」な原因の半分は私の勉強不足なだけだと思います。
** これは「スキーマがない」ということではない。「スキーマを機械/プログラムが理解可能な形式で表現す
ることはしない」ということである。RESTful API登場以前から一般に利用されてきたSOAPというプロトコルで
はWDSLというXMLのサブセットで、クライアント/サーバがやり取りするデータの形式を定義している。