講演資料


講義資料スライドの表紙

講義資料スライドの表紙です。スライド画像、または下の要約文中の青いページ番号リンクをクリックすると、別のタブで無駄なノイズのない、純粋なPDFビューア画面が起動し、指定されたページへ直接ジャンプして快適に閲覧できます。

全体概要

本セミナーは、2015年という転換期におけるモバイル・アプリ開発の構造的変化を、Facebook Parseを中心軸に据えながら俯瞰する講義です。2012年にZuckerbergが「HTML5への過度な賭け」を最大の失敗と認めた [p.2] 一方、2015年のf8カンファレンスでは「FacebookはWebを憎んでいない」 [p.3] と宣言されました。この一見矛盾する二つの発言の間に、本講義が照らし出そうとする技術史的な断絶と連続が凝縮されています。

モバイルは今や「人類史上最大のプラットフォーム」と呼ばれ、セルラー接続数が地球上の人口を超える規模に達しています [p.16]。同時に、モバイルCPUの処理性能は指数関数的に向上し、PCと肩を並べるまでになりました [p.18], [p.19]。こうした物理的な変化が、アプリ開発の重心を「サーバーサイドのWebアプリ」から「モバイルサイドの開発」へと不可逆的に押し動かしています。

この移行を象徴するのが、Facebook・Amazon・Microsoft・Twitterが相次いで投入したモバイル向けクラウドバックエンドサービス群です [p.11]。中でもFacebook Parseは、Parse Objectという「モバイルとクラウドの間を自由に行き来するRemote ObjectかつData Object」という独自のコンセプトで、新しいアプリ開発スタイルの典型を体現しています [p.62]。非同期処理のデフォルト採用、Promiseによるコールバック地獄の解消、強力なPUSH通知機構、クラウドサイドで動作するCloud Codeなど、Parse の設計思想は従来のWebアプリとは根本的に異なります。

さらに、本講義はParseに留まらず、FacebookがHTML5への反省を踏まえて構築した新世代Web技術——Flux、React、React Native、GraphQL＋Relay——の連鎖的な展開を追います。「Write once, run anywhere」を否定し、「Learn once, write anywhere」を掲げるReact Nativeの哲学 [p.58], [p.59] は、Webテクノロジーとネイティブ開発の関係を根底から問い直すものです。本セミナーは、こうした技術変革の全体像を、具体的なコードと設計思想の双方から丁寧に解説する、2015年春の時点における必読の技術的俯瞰講義と言えます。

講義のロードマップ

■ Part 1: モバイル・アプリをめぐる動向

  • この部の核心:

アプリ開発の主舞台が「Server/Client」から「Cloud/Mobile」へと移行しつつある構造的背景を、ハードウェアの進化と開発スタイルの変化という二つの軸で説明します。従来のサーバーサイドWebアプリが抱える負荷・トラフィック・プログラムとViewの分離困難といった問題が、「Thin Server Architecture」という2008年のコンセプトの再注目につながっていることを示します [p.26]。

  • 論理展開:
  • Facebook・Amazon・Microsoft・Twitterが相次いでモバイル向けバックエンドサービスを投入しており、業界全体が同じ方向に向かっていることを確認します [p.7], [p.8], [p.9], [p.10]。
  • モバイルCPUはPCと性能が拮抗し、クライアント側でリッチな処理が可能になったことが、サーバーサイド中心主義の見直しを促しています [p.19]。
  • 同期型から非同期型への移行が必須となる理由として、ネットワーク越しの呼び出しが「1ナノ秒を1秒とした場合に3日〜5年のブロック」に相当することを示します [p.33]。
  • PULLモデルからPUSHサポートへの移行として、Google GCM・Apple APNSという既存インフラとParseのPUSH機能の対応関係を整理します [p.44], [p.45], [p.46]。
  • FacebookがHTML5を否定したのちに「React Native」でWebテクノロジーを再活用する逆説的な展開と、Flux・React・GraphQL＋Relayからなる新技術スタックの全体像を予告します [p.50]。

■ Part 2: Parseの世界

  • この部の核心:

Parse Object、Query、Promises、PUSH、Cloud Codeという5つのコア機能を、具体的なコード例（JavaScript・Android Java・iOS Swift・.NET C#の4言語対応）とともに詳解します。Parseの設計思想は「モバイルサイドプログラミング＋最小限のCloud Code」というThin Server Architectureの実践であり、全ての非同期メソッドがPromiseを返すことでコールバックのネストを排除しています [p.114]。

  • 論理展開:
  • Parse Object は `extend`→`new`→`set`→`save` の非同期フローで生成・保存され、`objectId`・`createdAt`・`updatedAt` が自動付与されます [p.64], [p.68], [p.70]。一対一・一対多は親オブジェクト参照で、多対多は `Parse.Relation` で表現します [p.79], [p.83]。
  • Queries は `.equalTo`・`.greaterThan`・`.containedIn`・`.matchesQuery` 等のメソッドチェーンで構築し、.NET版ではLINQ構文が利用可能です [p.90], [p.92]。サブクエリー・OR結合・地理的検索など、SQLと同等の表現力を持ちます [p.105], [p.110]。
  • Promises は `then`・`resolve`・`reject` によるチェーン、`Parse.Promise.when` による並列実行、エラーのスキップ伝播というFluentなフローを提供します [p.118], [p.121], [p.123]。
  • PUSH は Channel方式とAdvanced Targeting（Parse.Query連携）の2モードを持ち、プラットフォーム別配信・時刻指定・有効期限設定が可能です [p.125], [p.133], [p.148], [p.157]。セキュリティ上の理由からCloud Codeからの送出が推奨されます [p.127]。
  • Cloud Code は `Parse.Cloud.define` でJavaScript関数をデプロイし、`beforeSave`・`afterSave`・`beforeDelete`・`afterDelete` トリガーでバリデーション・データ変換・副作用処理をAOP的に実装します [p.160], [p.169], [p.171], [p.172], [p.173]。

■ Part 3: Web技術の新しい展開

  • この部の核心:

ParseとReactの統合（Parse＋React）から始まり、React Native・GraphQL＋Relayへと連鎖する「Facebookの新世代Web技術スタック」を解説します。MVCの双方向データフローを一方向に整理したFluxを出発点に、「UIのみに特化したJavaScriptライブラリ」としてのReactの設計哲学を示し、最終的にはNative UIコンポーネントをJavaScriptから操作するReact Nativeの「Learn once, write anywhere」戦略へと帰着します [p.176], [p.182], [p.217]。

  • 論理展開:
  • Flux→React: MVCの複雑な双方向依存（多対多のModel-View結合）[p.178] を Action→Dispatcher→Store→View の一方向フローに整理します [p.179]。ReactはこのViewに特化し、`render`メソッドとJSX記法でコンポーネントを宣言的に記述、`props`と`state`の分離により状態変化が自動的に再描画を引き起こします [p.186], [p.195]。
  • Parse＋React: `ParseReact.Mixin` を追加することで `observe` ライフサイクルメソッドが有効になり、ReactコンポーネントをParse Queryにsubscribeさせてデータ変化をFlux-styleで受け取ります [p.201], [p.207]。データ変更はFluxのAction的な `ParseReact.Mutation.dispatch()` で行い、楽観的更新も可能です [p.210], [p.211]。
  • React Native: HTMLもBrowserもWebViewも使わず、JavaScriptからiOSネイティブコンポーネント（UITabBar・UINavigationController等）を直接操作します [p.217], [p.219]。flexboxレイアウト・StyleSheet・非同期実行・Chrome DevToolsデバッグを標準サポートし、`RCT_EXPORT_MODULE`・`RCT_EXPORT_VIEW_PROPERTY` マクロでObjective-CとJavaScriptをブリッジします [p.224], [p.227], [p.228]。
  • GraphQL＋Relay: GraphQLはネストしたデータ従属性を宣言的に記述するクエリー言語で [p.235]、RelayはReactコンポーネントとGraphQL Queryを「Co-location（同じファイル内に配置）」することで、過不足のないデータ取得・自動的なクエリーバッチ最適化・自動subscriptionを実現します [p.234], [p.247], [p.248]。Fluxとの住み分けとして、大量データフローにはRelay、アプリ状態管理にはFluxという組み合わせが推奨されます [p.258]。