「Web × プログラミング」 ウェブを支える技術を知り、覚え、活用！さまざまなプログラムとウェブとの関わりや技術を基礎から知り学ぶ勉強会。 2017年2月のテーマはJavaScript。 JavaScriptの言語としての基礎やWeb通信との関係（クライアントサイド、サーバサイドなど）をスライドを通して学んだ後、参加者でディスカッションしました。 このスライドはセッション部分のスライドになります。 https://webxpg.connpass.com/event/48940/

1. 株式会社ステラリンク
〒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

2. 本日のアジェンダ
 開会
 セッション
 JavaScriptとは
 Webのしくみとプログラミング
 JavaScriptの実行環境
 JavaScript→Ajaxへ
 高速化・軽量化の取り組み
 サンプルコード
 質問＆相談タイム
 まとめ・閉会
 次回のテーマ
2

3. 自己紹介
石川 博之
Hiroyuki Ishikawa
Twitter： @stellalink_jp
@y3sei
Facebook： 石川博之（y3sei）
株式会社ステラリンク 代表取締役
有限会社メック システムエンジニア
光市成人のつどい企画運営委員会 委員長
光市青少年ボランティア育成協議会 企画実行副委員長
光市観光協会 広報委員
山口県指定無形民俗文化財 島田人形浄瑠璃芝居 保存会 会員（人形遣い）
元周南コンピュータ・カレッジ 非常勤講師
元山口県ソフトウェアセンター 認定講師
(一財)リスクマネジメント協会 会員
3

4. セッション
7

5. JavaScript
 スクリプト言語
 マルチパラダイムプログラミング言語
 弱い動的型付け
 元々はNetspace, Inc.が開発
 Netscape Navigator 2.0で初搭載
 現在は ECMAScript-262 にて仕様定義あり
 http://www.ecma-international.org/publications/standards/Ecma-262.htm
8

6. JavaScriptとは
JavaScript ≠ Java
11

7. JavaScriptとは
JavaScript
 OOPスクリプト言語
 主にブラウザ上で稼働
 スタンドアロンのアプリケー
ションは作成不可
 コンパイル不要
 （どちらかといえば）
クライアントサイド
Java
 OOPプログラミング言語
 JITコンパイラによるVMで実行
 スタンドアロンのアプリケー
ションを作成可能
 コンパイル必須
 主にサーバサイド
12

8. Webのしくみとプログラミング
リクエスト
レスポンスクライアント サーバ
URLからサーバを特定
リクエスト
レスポンス受信
受信結果を解析
スクリプトの場合は処理
画面表示
リクエスト受信
スクリプトの場合は処理
結果をブラウザに返す
13

9. 言語の種類
コンパイル言語
 機械語のコードに翻訳したも
のを実行
インタプリタ言語
 実行時に評価器によりソース
コードを直接解釈して実行
ソースコード
コンピュータ
ソースコード
評価器
機械語コード
コンパイラ
実行
実行
14

10. JavaScriptの実行環境
ブラウザ内に組み込まれたエンジンが処理
（クライアント側で実行される場合）
 Chakra … InternetExplorer、Edge
 Google V8 … Google Chrome、Android Browerなど
 JavaScriptCore … WebKit系（Safariなど）
 SpiderMonkey … Firefox
etc...
15

11. JavaScriptの実行環境
JavaScript は遅い
JavaScript は環境依存が強い
 JavaScriptが遅い原因は主にインタプリタの特徴と一致
 最近では実行エンジンにJIT（Just-In-Time）コンパイラが搭載され、高速化
してきている
 速度改善やスマートフォン環境の普及により、新しいウェブサービスでは内
部をAPIベースとしフロントをJavaScript由来のUIを選択する傾向がある
 環境依存傾向なのは歴史にあり
 Netscape vs Microsoft
 ブラウザシェア争いの歴史の中で、各ブラウザが独自拡張した関数や機能などを
投入したことで互換性が失われた
 現在は ECMAScript が策定されたことで解消しつつある
 一部ではまだ使えないものもあるので開発には一定の注意が必要
 Ajax初期のIEと他ブラウザとの実装問題とか…
 また多くのライブラリが開発され誤差も吸収されてきている
は解消傾向
16

12. JavaScript→Ajaxへ
 一時は技術的要素などを軽視した利用が多かった時期があり、結果
として評価を下げる傾向にあった（2000年ごろ）
 不要なアニメーションの多用
 ポップアップウィンドウの多用
 ブラウザクラッシャー（ブラクラ） など
 ウイルス対策などの関係もあり JavaScript 無効を既定値とする社会
的風潮があった時期も
 2005年に Microsoft が開発した JavaScript による非同期通信を利
用した技術に「Ajax」と命名、再び爆発的普及期へ
 Ajax…Asynchronous JavaScript + XML
 XMLHttpRequest （HTTP通信を行うためのクラス）を利用
 画面遷移なしに動作させることができる
 データはDOM、XML、JSONなどでやりとり
 元のスクリプトがあるサーバとしか通信できない（クロスドメイン問題）
17

13. Ajax
従来の通信方式 Ajaxによる通信方式
UI UI
Webサーバ Webサーバ / XML サーバ
DB DBプログラム等 プログラム等
Ajax engine（JavaScript）
HTTP
request
HTTP
request
response
(HTML等)
response
(XML、JSON等)
HTML等call
18

14. Ajax
DOM
 Document Object Model
 W3C勧告のHTML文章やXML
文章をアプリケーションから
呼び出すためのAPI
 定義のみ
 DOMの実装は各メーカがそれ
ぞれ「XMLパーサ」として提
供している
 必ずこれ！というものがない
ので実装時に注意
JSON
 JavaScript Object Notation
 JavaScriptにおけるオブジェク
ト（データ）の記述法をまと
めたもの
 JavaScriptと組み合わせる必
要があるものではない
 他の言語間でのデータ共有に
も使用されている
19

15. Ajax
XML/DOM
<xml>
<name>John Smith</name>
<age>33</age>
</xml>
JSON
{"name": "John Smith", "age": 33}
20

16. 高速化・軽量化の取り組み
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

17. 最近ではサーバサイドスクリプトとして利用されてきている
 Node.js
 Rhino
 Aptana Jaxer など
 クライアントサイドと同じ言語で実装できるため、エンジニアの負
担が減る（開発、デバッグの面で）
 元々クライアントサイド用の言語として拡張されてきた経緯から、
サーバサイドで実装するためには専用のクラスや関数による対応が
必要
 フレームワークが構築されてきた
 現状はNode.jsが事実上デファクトスタンダード状態
22

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

19. 参考文献
 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