「モダン Web」とは

http, https(get, post)

クライアントサーバー• Web サーバー • Web ブラウザー

ページ(HTML)

ページ(HTML)

クライアントサーバー• Web サーバー• アプリケーションサーバー

http, https(get, post)

Query string, form

ページ(HTML)

クライアントサーバー• Web サーバー• アプリケーションサーバー

• Web ブラウザー

ページ(cHTML/HDML/WML)

http, https(get, post)

Query string, form

クライアントサーバー• Web サーバー• アプリケーションサーバー

• Web ブラウザー

レスポンシブ

ページ(HTML)

http, https(get, post)

Query string, form

http, https(get, post)

クライアント• Web サーバー• アプリケーションサーバー

• アプリケーション

{ }JSON

< >XML

データ

http, https(get, post)

クライアントサーバー• Web サーバー• アプリケーションサーバー

• アプリケーション• SPA(Single page application)

{ }JSON

< >XML

データ

{ }JSON

< >XML

データ

73533 Altea 4|

Ajax

WebSocket

WebRTC

REST

• 画面遷移は DOM 操作• ページのリフレッシュは不要• リッチなエクスペリエンス

Web 電話 タブレット/PC

ゲーム機 IoT車載

コンテンツ アプリ

クライアントロジック

サーバーロジック

クライアントロジック

サーバーロジック

• サーバーサイド、クライアントサイドサイド、それぞれで開発/メンテナンスが可能

{ }JSON

Ajax

Webブラウザー(SPA)

ネイティブアプリ

API

iOS

認証

ストレージ

キャッシュ

WebSocket

WebRTC

< >XML

REST {リクエスト

レスポンス

サービスを中心としたインターネットシステム

サーバー クライアント

モダン Web アプリケーションについて

<logon-form caption=“アカウント情報” label=“cancel:キャンセル;ok:ログオン” />

HTML templates 〇 〇 〇 〇Custom Elements × 〇 × ×Shadow DOM × 〇 × ×HTML Imports × 〇 × ×

13 4550 9.1

caniuse.com より

Medium

Low

High

Service Worker

Service Worker

Web Notifications

Web Application Manifest

CSS3 アニメーション

https://www.youtube.com/watch?v=MxTaDhwJDLg

Service Workers × 〇 〇 ×Fetch API △ 〇 〇 ×Web Notifications △ 〇 〇 ×Web Application

Manifest× 〇 〇 ×

13 4550 9.1

caniuse.com より

開発中

High

開発中

Web Assembly Internal

Build

Canary

51.0.2677.0

Nightly -

AngryBots

〇 〇 〇 〇

WebVR

〇 〇 〇 × - △ △ -

Web フロントエンドの開発リソース

jQuery,

Prototype.js,

Dojo,

KendoUI,

Underscore.js

YUI(※開発終了)

ライブラリ フレームワーク

Angular.js,

React.js,

Fulx,

Vue.js,

Backbone.js,

Knockout.js,

WinJS,

Sencha,

Ember.js

テンプレート

エンジン

Handlebars,

EJS,

Mustache,

Hogan,

Underscore,

jQuery.EJS,

PURE

altJS

TypeScript

Babel

CoffeeScript

Dart

Bootstrap,

Foundation,

Pure,

Gumby,

INK,

Cardinal,

Skeleton

フレームワーク

LESS

SCSS(Sass)

Stylus

TASS

プリプロセッサ

軽量マークアップ

Markdown

Haml

Jade

Slimパッケージ

マネージャーnpm,

bower

Gulp,

Grunt、

Broccoli

タスクランナーモジュール管理

Browserify

(CommonJS),

AMD(RequireJS),

webpack

Rich/Chaos

CSS

JS

学習コスト

運用コスト

ロックイン

機能の範囲

開発生産性

ブラウザサポート

ベンダサポート

情報

ドキュメント

書籍類

• 標準技術は不変

• Web ブラウザーで動作するのは、HTML, CSS, JavaScript

技術はあくまでも「手段」

では「目的」は?

• コンポーネント化: Web のために生まれ変わった従来の設計プラクティス

• Microsoft Edge と Web コンポーネント

• 2016 年の展望: Microsoft Edge の開発者向け情報

参考

マイクロソフト最大規模の技術コンファレンス～すべてのエンジニアが活躍できるオープンな世界を目指して～

• 開催日時：2016年5月24日（火）~ 2016年5月25日（水）• 開催場所：ザ・プリンスパークタワー東京• 参加費用： 早期割引価格 68,000円（税抜) -4/28まで 通常価格 80,000円（税抜) -4/29より MCP取得者割引 56,000円（税抜）

• 合計セッション数：134セッション

詳細・お申込・・・ http://aka.ms/decode16