最近のWeb関連技術の動向あれこれ

最近のWeb関連技術の動向
あれこれ
2014/11/21
CC研究部会
高岡大介
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
1

Agenda
• Concept
• Architecture
• Back-end Technology
• Front-end Technology
• Development
• Programming Language/Paradigm
• Next Spec
2

Concept
最近のWeb開発の考え方
• モバイルファースト
• 数年前から
• オフラインファースト
• 昨年くらいから
⇒ モバイル中心の考え方
3

(Mobile) Architecture
4

MEAP
• Mobile Enterprise Application Platform
• ３つ以上のモバイルアプリをサポートしている
• ３つのモバイル用OSをサポートしている
• 少なくとも３つのバックエンドのデータソース（既存システム
とか）と連携が必要
• Product
• IBM Worklight
• SAP Mobile Platform
• Kony
• Sencha Space
5

MADP
• Mobile application development platform
• 2013年からガートナーがまた言い出した。
• MEAPに加え、アプリケーションの開発、配布、
保守管理までを含む。
• 参考: モバイルアプリ開発を効率化する切り札「MEAP」と「BaaS」を徹
底解説 http://businessnetwork.jp/Detail/tabid/65/artid/3372/
Default.aspx
6

BYOD（Bring Your Own Device）
が一つのきっかけ。
バラバラの端末でも業務システムを
使えるようにするためのアーキテクチャ。
7

ところが、
BYODは終わったという話しも
8

• アップルとＩＢＭが提携「BYOD」市場は終焉へ
http://diamond.jp/articles/-/56772
• さようならBYOD、企業が気付いた「会社がスマホを
支給した方が何かと便利」http://
techtarget.itmedia.co.jp/tt/news/1408/15/
news03.html
デバイスやOSが統一されると、MEAPとか不要？
⇒ まぁケースバイケースですね
9

Back-end Technology
10

(X)aaS
• IaaS、PaaS、SaaS と色々あります
• 次は ⇒ (m)BaaS！？
• Mobile Backend as a Service
• 主な提供プレイヤー
• Parse（facebook傘下）
• Kinvey（Google提携）
11

抽象的なサービス/APIで疎結合が
Backendの主流になるか？
と、思いきやそうでもない。
やっぱり自前でインフラ用意したい
12

Infrastructure As Code
• インフラをコードで表す。
• Chef, Puppet, Vagrant
• Immutable Infrastructure
• 自動化、バージョン管理、複製、再現性
13

Docker
• Docker
• コンテナ型の仮想化ソフトウェア
• マシン仮想化ではなくプロセス仮想化。chrootに近い
• 仮想マシンと比べて軽量高速
• 続々と対応
• Google Compute Engine、Google App Engine
• Amazon EC2 Container Service
• Microsoft AzureとWindows Server も対応
14

Front-end Technology
15

フロントエンド開発のツール
• CSSプリプロセッサ
• Sass（Less）、Compass
• AltJS
• CoffeeScript, TypeScript, Hexe, Dart, ClojureScript,,,
• パッケージ管理:
• bower
• モジュールローダー
• requireJS、CommonJS, Browserify
• テスト:
• jasmine、PhantomJS、karma
• タスクランナー
• Grunt, gulp, broccoli
• ジェネレーター
• Yeoman
16

JSフレームワーク
• MV* フレームワーク
• Backbone
• Knockout
• AngularJS
• Ext、Ember、etc
• Angular本命かと思いきや最近disられ気味。
• ⇒ Vue.js、React
17

開発環境
• LAMP から MEAN スタックへ
• MongoDB
• Express
• AngularJS
• NodeJS
まだケースバイケース。
• そもそもレイヤー合ってない。OSレイヤーどこいった
18

Programming Language/
Paradigm
19

関数型言語
• 最近、関数型が人気（Scala, Haskel、Ocaml、Erlang）
• エアバスはOcamlで飛んでいる。
• Facebook、Twitter でErlang採用（一部）
• 特徴
• ファーストクラス関数、高階関数
• Immutable（副作用なし）
• 参照透過性
• 型安全、宣言的、遅延評価
• バグが少ない（入りにくい）、保守性など
• Java8 でもエッセンスを取り込み（ストリーム＋ラムダ式）
20

リアクティブ
• Reactive Programming
• エクセルとかの例
• 今のとこ要するにデータバインディング
• View - (View)Modelのバインド
• AngularJS、Vue.jsなど
• React
21

FRP
• Functional Reactive Programming
• リアクティブを関数的に
• Model自体をストリームでリアクティブに扱う。
• http://latentflip.com/bacon-talk-realtimeconfeu/
• ライブラリなど
• RxJS
• BaconJS
• Elm
22

Next Spec
23

Web Components
• 要素
• Custom Elements
• Shadow Dom
• Templates
• Imports
• Decorators
• 現状の実装
• Polymer
• （余談: Material Design）
24

HTML5.1
• 先日、HTML5がようやく勧告に！
• HTML5で入りきらなかったものが5.1に。入るかもしれないのを一部紹
介
• Service Workers
• ネットワーク割り込みでキャッシュ
• http://html5experts.jp/myakura/8365/
• http://html5experts.jp/iwase/7006/
• Navigation Controllerから改名
⇒ Web Workerと紛らわしいから元のでよかったのに。。。
• Canvas 2D Context Level2
• WebGL 2
25

ES6/ES7
• ECMA Script 6/7
• アロー記法
• ブロックスコープ
• 分割代入
• クラスとモジュール
• iterators
• generator（yield）
• Object.observe
• Promise
• WeakMap/Set
26

CSS
• CSS Regions/Exclusions
• 任意の形状にコンテンツを流し込み。排他。
• CSS4
• セレクタの拡張。親指定など多数
• メディアクエリの追加修正
27

おわりに
• やっぱりモバイル大事
• iOS8でWebGLサポート。3D、VRが本格的にWebにくる。
• 一部よりもどしが起きている。歴史は繰り返す
• BaaS ⇒ Docker
• Angular ⇒ React（E4X!?）
• OOP ⇒ Functional（Lisp!?）
• 色んなレイヤで仮想化が進む。
28

http://aitc.jp
https://www.facebook.com/aitc.jp
ハルミン
AITC非公式イメージキャラクター
29

最近のWeb関連技術の動向あれこれ

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à 最近のWeb関連技術の動向あれこれ

Similaire à 最近のWeb関連技術の動向あれこれ (20)

Plus de dsuke Takaoka

Plus de dsuke Takaoka (19)

最近のWeb関連技術の動向あれこれ