Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web × プログラミング ~JavaScript編~(2017/2/16)

431 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Web × プログラミング ~JavaScript編~(2017/2/16)

  1. 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. 2. 本日のアジェンダ  開会  セッション  JavaScriptとは  Webのしくみとプログラミング  JavaScriptの実行環境  JavaScript→Ajaxへ  高速化・軽量化の取り組み  サンプルコード  質問&相談タイム  まとめ・閉会  次回のテーマ 2
  3. 3. 自己紹介 石川 博之 Hiroyuki Ishikawa Twitter: @stellalink_jp @y3sei Facebook: 石川博之(y3sei) 株式会社ステラリンク 代表取締役 有限会社メック システムエンジニア 光市成人のつどい企画運営委員会 委員長 光市青少年ボランティア育成協議会 企画実行副委員長 光市観光協会 広報委員 山口県指定無形民俗文化財 島田人形浄瑠璃芝居 保存会 会員(人形遣い) 元周南コンピュータ・カレッジ 非常勤講師 元山口県ソフトウェアセンター 認定講師 (一財)リスクマネジメント協会 会員 3
  4. 4. セッション 7
  5. 5. JavaScript  スクリプト言語  マルチパラダイムプログラミング言語  弱い動的型付け  元々はNetspace, Inc.が開発  Netscape Navigator 2.0で初搭載  現在は ECMAScript-262 にて仕様定義あり  http://www.ecma-international.org/publications/standards/Ecma-262.htm 8
  6. 6. JavaScriptとは JavaScript ≠ Java 11
  7. 7. JavaScriptとは JavaScript  OOPスクリプト言語  主にブラウザ上で稼働  スタンドアロンのアプリケー ションは作成不可  コンパイル不要  (どちらかといえば) クライアントサイド Java  OOPプログラミング言語  JITコンパイラによるVMで実行  スタンドアロンのアプリケー ションを作成可能  コンパイル必須  主にサーバサイド 12
  8. 8. Webのしくみとプログラミング リクエスト レスポンスクライアント サーバ URLからサーバを特定 リクエスト レスポンス受信 受信結果を解析 スクリプトの場合は処理 画面表示 リクエスト受信 スクリプトの場合は処理 結果をブラウザに返す 13
  9. 9. 言語の種類 コンパイル言語  機械語のコードに翻訳したも のを実行 インタプリタ言語  実行時に評価器によりソース コードを直接解釈して実行 ソースコード コンピュータ ソースコード 評価器 機械語コード コンパイラ 実行 実行 14
  10. 10. JavaScriptの実行環境 ブラウザ内に組み込まれたエンジンが処理 (クライアント側で実行される場合)  Chakra … InternetExplorer、Edge  Google V8 … Google Chrome、Android Browerなど  JavaScriptCore … WebKit系(Safariなど)  SpiderMonkey … Firefox etc... 15
  11. 11. JavaScriptの実行環境 JavaScript は遅い JavaScript は環境依存が強い  JavaScriptが遅い原因は主にインタプリタの特徴と一致  最近では実行エンジンにJIT(Just-In-Time)コンパイラが搭載され、高速化 してきている  速度改善やスマートフォン環境の普及により、新しいウェブサービスでは内 部をAPIベースとしフロントをJavaScript由来のUIを選択する傾向がある  環境依存傾向なのは歴史にあり  Netscape vs Microsoft  ブラウザシェア争いの歴史の中で、各ブラウザが独自拡張した関数や機能などを 投入したことで互換性が失われた  現在は ECMAScript が策定されたことで解消しつつある  一部ではまだ使えないものもあるので開発には一定の注意が必要  Ajax初期のIEと他ブラウザとの実装問題とか…  また多くのライブラリが開発され誤差も吸収されてきている は解消傾向 16
  12. 12. JavaScript→Ajaxへ  一時は技術的要素などを軽視した利用が多かった時期があり、結果 として評価を下げる傾向にあった(2000年ごろ)  不要なアニメーションの多用  ポップアップウィンドウの多用  ブラウザクラッシャー(ブラクラ) など  ウイルス対策などの関係もあり JavaScript 無効を既定値とする社会 的風潮があった時期も  2005年に Microsoft が開発した JavaScript による非同期通信を利 用した技術に「Ajax」と命名、再び爆発的普及期へ  Ajax…Asynchronous JavaScript + XML  XMLHttpRequest (HTTP通信を行うためのクラス)を利用  画面遷移なしに動作させることができる  データはDOM、XML、JSONなどでやりとり  元のスクリプトがあるサーバとしか通信できない(クロスドメイン問題) 17
  13. 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. 14. Ajax DOM  Document Object Model  W3C勧告のHTML文章やXML 文章をアプリケーションから 呼び出すためのAPI  定義のみ  DOMの実装は各メーカがそれ ぞれ「XMLパーサ」として提 供している  必ずこれ!というものがない ので実装時に注意 JSON  JavaScript Object Notation  JavaScriptにおけるオブジェク ト(データ)の記述法をまと めたもの  JavaScriptと組み合わせる必 要があるものではない  他の言語間でのデータ共有に も使用されている 19
  15. 15. Ajax XML/DOM <xml> <name>John Smith</name> <age>33</age> </xml> JSON {"name": "John Smith", "age": 33} 20
  16. 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. 17. 最近ではサーバサイドスクリプトとして利用されてきている  Node.js  Rhino  Aptana Jaxer など  クライアントサイドと同じ言語で実装できるため、エンジニアの負 担が減る(開発、デバッグの面で)  元々クライアントサイド用の言語として拡張されてきた経緯から、 サーバサイドで実装するためには専用のクラスや関数による対応が 必要  フレームワークが構築されてきた  現状はNode.jsが事実上デファクトスタンダード状態 22
  18. 18. ご清聴ありがとうございました 25
  19. 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

×