web × プログラミング ~javascript編~(2017/2/16)
Post on 21-Mar-2017
140 Views
Preview:
TRANSCRIPT
株式会社ステラリンク
〒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
top related