モバイル用Webフレームワーク最前線

共通スキルでアプリ開発を促進する
モバイル用
Webフレームワーク
最前線
アシアル株式会社
田中正裕

アシアル株式会社
会社概要
• 創業：2002年
• 事業所：東京（本社）、サンフランシスコ
• 従業員数：約50名（8国籍）
事業内容
• 開発プラットフォーム事業：開発ツール、UIフレームワーク
• 教育事業：トレーニング、セミナー、執筆
• 開発支援事業：アプリ開発、サーバーサイド（PHP）開発

自己紹介
田中正裕
アシアル株式会社代表取締役
» Twitter: @massie
» HTML5エキスパート
» Cordovaユーザー会、発起人

引き続きWeb技術
は高いシェア
Developer Economics 2016 Surveyより

StackOverflow Developer Survey 2016より
2011年（5年前）は
56%だった
JavaScriptは
コミュニティが発展している言語に

JSフレームワークの進化
その結果…

jQuery ≫ AngularJS ≫ その他
約60万
約20万
約5万
3万以下
投稿をタグ順に並べたグラフ

フレームワークの移り変わり
jQuery AngularJS Backbone.jsReact
Google Trendsでの検索ボリューム
Node.js
JavaScriptフレームワークの主役は代わろうとしている

JavaScriptの進化
HTML5がW3Cの勧告
TypeScript 1.0
HTML5.1が勧告の予定
ES2016
ES6 (ES2015)
ChromeがBlinkエンジンに分離
特にブラウザーに依存しないNode.jsが普及するにつれ、新しいES
バージョンやAltJSを積極的に使えるようになった。

ブラウザ言語から、ユニバーサル言語へ
クライアントサイド
JavaScript
トランスパイラー
サーバーサイド
JavaScript
Universal JavaScript

JSフレームワークの潮流
jQueryなど
・DOMセレクタ、Ajax等の簡易インターフェース
・ブラウザーでロードして実行
・クロスブラウザー対応
AngularJS、Bootstrapなど
・プログラムの構造化
・バインディング
・SPA（シングルページアプリケーション）
React、Angular 2など
・仮想DOM
・コンポーネント指向（モジュラーデザイン）
・Universal JavaScript

jQueryなど
・仮想DOM
Internet Explorerの互換性向上、
QuerySelector API等のサポートに伴い、
jQueryを必要とするケースは減少

jQueryなど
・仮想DOM
バインディングのための処理の負荷が
高く、パフォーマンスが犠牲になる。
特にモバイル端末にて課題となる。

jQueryなど
・仮想DOM
プログラムの構造化やバインディング
といった特徴は引き継ぎ、最新の
JavaScriptにあわせて大幅に進化。

仮想DOM + コンポーネント
仮想的に構築されたDOMツリーをブラウザーにレンダリング。
コンポーネントを定義し組み合わせていくことでアプリを構成する。
<body>
<header-component>
ヘッダー
</header-component>
<page-component>
<list-component>
自作UIコンポーネント
</list-component>
</page-component>
</body>
<body>
<header>
ヘッダー
</header>
<div id=“page”>
<ul>
<li>自作UIコンポーネント</li>
</ul>
</div>
</body>
仮想DOM リアルDOM

差分だけを更新する
http://blog.takanabe.tokyo/2015/05/19/583/

今後のトレンドは仮想DOM
Riot.js Vue.js
MVCに代わるステートマネジメント手法も登場
続々登場する仮想DOMフレームワーク
MobX
Fluxパターンを実装したもの

Tony Hisgett from Birmingham, UK

一方、モバイルWebも進化
 十分に高速で大容量な端末スペック
 WebViewの自動更新でフラグメンテーション回避
 Progressive Web Apps
 Service Workerやプッシュ通知を組み合わせネイティブア
プリのようなUser Experienceを実現する技術
♥

モバイルで使うJavaScript
ネイティブ層
ブラウザー
JavaScript
Webアプリ
ネイティブコード
JavaScript
ハイブリッドアプリ
アプリとして
パッケージング
従来型のWebアプリだけでなく
ハイブリッドアプリでアプリ化することができる
Cordovaや
React Nativeなど

CordovaとReact Native
レンダリングがWebViewか、ネイティブUIか？
• JavaScript＋HTML5で記述
• アプリはWebView上で動作
• 多くのネイティブプラグイン
• 完全クロスプラットフォーム
• JavaScriptで記述
• アプリはJSエンジンで動作
• React Native用の
UIコンポーネントを使う
• “Learn once, write anywhere”

モバイル開発の課題
 フレームワーク選定
 UI実装
 ツール・デプロイ・デリバリー

モバイルUIの実装は難しい
 ネイティブと同じルック＆フィール
 フラットとAndroid Material Design
 Ripple Effectなどのアニメーション効果
 モバイルならではのコンポーネント
 ページスタックの管理
 無限スクロールやスワイプ操作
 クロスプラットフォーム
 表示する端末にあわせて表示を切り替え

UI開発に必要なもの
iOS と Android のデザインに対応し、
自動的にプラットフォームを識別してくれて、
Angular 1, 2, Reactなどと組み合わせられる、
パフォーマンスを犠牲にしない、
無料で使える UIフレームワーク

• OSに応じてUIを切り替え＋
CSSで簡単カスタマイズ
• JSフレームワークに依存しない
• Apache License

完全なクロスプラットフォーム
• Web技術でiOSとAndroidを同時に開発
• 実行する端末に応じて自動的にコンポーネントを切り替え
• ページ遷移アニメーションやエフェクトも各OSに最適化

豊富なUIコンポーネント
• Navigator
• Tab bar
• Split view
• Infinite list
• Splitter
• Button
• Switch
• Floating action
button
• Progress
• Floating label
• Ripple effect
• Gesture control
• Pull to refresh
…

もうひとつの課題
 ツール・デプロイ・デリバリー

Monacaクラウドで
アプリ作成までワンストップ
• ローカルでも、クラウドでも
• Onsen UIでReactやAngular 2もサポート
• デバッガーで簡単に実機で確認
無料プランも
あります！

日本で最も普及している
Cordova開発環境の一つ
16万人

Webサイト
Onsen UI
https://ja.onsen.io
Monaca
https://ja.monaca.io/

8/24 (水)・9/9 (金)
Onsen UI / Monaca入門講座
▶ https://ja.monaca.io/service/training.html

第1部：「プロトタイピングによるチームコラボレーション〜Prott活用方法〜」
株式会社グッドパッチアカウントマネージャー佐宗純様
第2部：「モバイル・IoT時代に求められる開発手法とは？〜mBaaSを活用した具
体事例！お見せします〜」
ニフティ株式会社 IoTデザインセンター三嶋英城様
第3部：「Monaca事例から学ぶHTML5モバイルアプリの活用ポイント」
アシアル株式会社マーケティング・事業開発担当取締役塚田亮一
▶ https://form.k3r.jp/asial/0826seminar

ありがとうございました
アンケートと引き替えに
Onsen UI 温泉の素を
お配りしています！

モバイル用Webフレームワーク最前線

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to モバイル用Webフレームワーク最前線

Similar to モバイル用Webフレームワーク最前線 (20)

More from アシアル株式会社

More from アシアル株式会社 (15)

モバイル用Webフレームワーク最前線

Editor's Notes