株式会社ステラリンク

〒743-0065 山口県光市上島田7-1-1 http://www.stellalink.co.jp/ info@stellalink.co.jp

Web × プログラミング ～JavaScript 編～

代表取締役 石川 博之

日時：2017/2/16 18:30～20:00 （毎月第3木曜）

会場：Creative Coworking カラム （山口県周南市）

株式会社ステラリンク

〒743-0065 山口県光市上島田7-1-1 http://www.stellalink.co.jp/ info@stellalink.co.jp

本日のアジェンダ

開会

セッション

JavaScriptとは

Webのしくみとプログラミング

JavaScriptの実行環境

JavaScript→Ajaxへ

高速化・軽量化の取り組み

サンプルコード

質問＆相談タイム

まとめ・閉会

次回のテーマ

2

自己紹介

石川 博之 Hiroyuki Ishikawa

Twitter： @stellalink_jp @y3sei Facebook： 石川博之（y3sei）

株式会社ステラリンク 代表取締役 有限会社メック システムエンジニア 光市成人のつどい企画運営委員会 委員長 光市青少年ボランティア育成協議会 企画実行副委員長 光市観光協会 広報委員 山口県指定無形民俗文化財 島田人形浄瑠璃芝居 保存会 会員（人形遣い）

元周南コンピュータ・カレッジ 非常勤講師 元山口県ソフトウェアセンター 認定講師 (一財)リスクマネジメント協会 会員

3

セッション

7

JavaScript

スクリプト言語

マルチパラダイムプログラミング言語

弱い動的型付け

元々はNetspace, Inc.が開発

Netscape Navigator 2.0で初搭載

現在は ECMAScript-262 にて仕様定義あり

http://www.ecma-international.org/publications/standards/Ecma-262.htm

8

JavaScriptとは

JavaScript ≠ Java

11

JavaScriptとは

JavaScript

OOPスクリプト言語

主にブラウザ上で稼働

スタンドアロンのアプリケーションは作成不可

コンパイル不要

（どちらかといえば） クライアントサイド

Java

OOPプログラミング言語

JITコンパイラによるVMで実行

スタンドアロンのアプリケーションを作成可能

コンパイル必須

主にサーバサイド

12

Webのしくみとプログラミング

リクエスト

レスポンス クライアント サーバ

URLからサーバを特定

リクエスト

レスポンス受信

受信結果を解析

スクリプトの場合は処理

画面表示

リクエスト受信

スクリプトの場合は処理

結果をブラウザに返す

13

言語の種類

コンパイル言語

機械語のコードに翻訳したものを実行

インタプリタ言語

実行時に評価器によりソースコードを直接解釈して実行

ソースコード

コンピュータ

ソースコード

評価器

機械語コード

コンパイラ

実行

実行

14

JavaScriptの実行環境

ブラウザ内に組み込まれたエンジンが処理 （クライアント側で実行される場合）

Chakra … InternetExplorer、Edge

Google V8 … Google Chrome、Android Browerなど

JavaScriptCore … WebKit系（Safariなど）

SpiderMonkey … Firefox

etc...

15

JavaScriptの実行環境

JavaScript は遅い JavaScript は環境依存が強い

JavaScriptが遅い原因は主にインタプリタの特徴と一致

最近では実行エンジンにJIT（Just-In-Time）コンパイラが搭載され、高速化してきている

速度改善やスマートフォン環境の普及により、新しいウェブサービスでは内部をAPIベースとしフロントをJavaScript由来のUIを選択する傾向がある

環境依存傾向なのは歴史にあり

Netscape vs Microsoft

ブラウザシェア争いの歴史の中で、各ブラウザが独自拡張した関数や機能などを投入したことで互換性が失われた

現在は ECMAScript が策定されたことで解消しつつある

一部ではまだ使えないものもあるので開発には一定の注意が必要

Ajax初期のIEと他ブラウザとの実装問題とか…

また多くのライブラリが開発され誤差も吸収されてきている

は解消傾向

16

JavaScript→Ajaxへ

一時は技術的要素などを軽視した利用が多かった時期があり、結果として評価を下げる傾向にあった（2000年ごろ）

不要なアニメーションの多用

ポップアップウィンドウの多用

ブラウザクラッシャー（ブラクラ） など

ウイルス対策などの関係もあり JavaScript 無効を既定値とする社会的風潮があった時期も

2005年に Microsoft が開発した JavaScript による非同期通信を利用した技術に「Ajax」と命名、再び爆発的普及期へ

Ajax…Asynchronous JavaScript + XML

XMLHttpRequest （HTTP通信を行うためのクラス）を利用

画面遷移なしに動作させることができる

データはDOM、XML、JSONなどでやりとり

元のスクリプトがあるサーバとしか通信できない（クロスドメイン問題）

17

Ajax

従来の通信方式 Ajaxによる通信方式

UI UI

Webサーバ Webサーバ / XML サーバ

DB DB プログラム等 プログラム等

Ajax engine（JavaScript）

HTTP request

HTTP request

response (HTML等)

response (XML、JSON等)

HTML等 call

18

Ajax

DOM

Document Object Model

W3C勧告のHTML文章やXML文章をアプリケーションから呼び出すためのAPI

定義のみ

DOMの実装は各メーカがそれぞれ「XMLパーサ」として提供している

必ずこれ！というものがないので実装時に注意

JSON

JavaScript Object Notation

JavaScriptにおけるオブジェクト（データ）の記述法をまとめたもの

JavaScriptと組み合わせる必要があるものではない

他の言語間でのデータ共有にも使用されている

19

Ajax

XML/DOM

<xml>

<name>John Smith</name>

<age>33</age>

</xml>

JSON

{"name": "John Smith", "age": 33}

20

高速化・軽量化の取り組み

JavaScriptライブラリが構築されている

Prototype JavaScript Framework（prototype.js）

YUI Library

jQuery

AngularJS

Backbone.js

Dojo Toolkit

Express.js

Ext JS

Google Web Toolkit (GWT)

Impact

MochiKit

MooTools

QUnit

WinJS etc...

21

最近ではサーバサイドスクリプトとして利用されてきている

Node.js

Rhino

Aptana Jaxer など

クライアントサイドと同じ言語で実装できるため、エンジニアの負担が減る（開発、デバッグの面で）

元々クライアントサイド用の言語として拡張されてきた経緯から、サーバサイドで実装するためには専用のクラスや関数による対応が必要

フレームワークが構築されてきた

現状はNode.jsが事実上デファクトスタンダード状態

22

ご清聴ありがとうございました

25

参考文献

JavaScript（Wikipedia）

https://ja.wikipedia.org/wiki/JavaScript

Standard ECMA-262（ECMAScript® 2016 Language Specification ）

http://www.ecma-international.org/publications/standards/Ecma-262.htm

サーバサイドJavaScriptの本命「node.js」の基礎知識

http://www.atmarkit.co.jp/ait/articles/1102/28/news105.html

26