ncdc_ModernApp_20200428

マネージャー層向け
モダンアプリケーション
開発戦略セミナー
マイクロサービス、 S PA、サーバレス…
2 0 2 0 / 0 4 / 2 8
N C D C 株式会社
⼗川亮平

View Slide

Copyright © NCDC Co., Ltd. All rights reserved.
プレゼンター紹介
⼗川亮平
取締役/CTO
NCDCでは、モバイル、API、IoT、機械学
習などを使った新規サービスの企画⽴案や、
プロジェクト推進の⽀援を担当。
Webサービス／モバイルアプリのバックエ
ンドプラットフォームである「AppPot」
のプロダクトマネージャーとして、マーケ
ティング活動やAPIの開発を⾏っている。
2

View Slide

NCDCのサービス
l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します
3
NCDC
CX/UX
デザイン
先端
テクノロジー
自社
サービス
• 新規サービス企画
• CX/UXデザインコンサルティング
• IoT/AI
• クラウドインテグレーション
• モバイル・Web先端技術
• モバイルプラットフォーム
[AppPot]の製造・販売
• IoTプラットフォーム
• [AppPot IoT]の製造・販売

View Slide

NCDCのサービスの特徴
4
ビジネスモデルのデザイン PoC・検証システム・インテグレーション
ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせでシステムを構築します
ITアーキテクチャのデザインリファレンス実装
DX推進のための組織デザイン
4

View Slide

今日お伝えしたいこと
5
１０年間でテクノロジーは
⼤きく進歩
クラウド、サーバーレス、コンテナ、
複雑なアプリケーションを開発できるJavaScript
フレームワーク・・・
ビジネス、ユーザーからの求められ
るレベルがあがっている
ビジネスに貢献するIT
すばらしいUX
もっと早くリリースしたい
モダンなアプリケーション開発ができるかどうかが
⼤きな違いになってくる
Enabler Needs

View Slide

これらを支えるテクノロジー
l マイクロサービス・アーキテクチャ
l アプリケーションプラットフォーム
• サーバレス
• コンテナ（ Docker、Kubernetes）
• マネージドサービス
l SPA（Single Page Application）
• React
• Vue.js
6

View Slide

大きなトレンド①
モノリシックからマイクロサービスへ
7
モノリシックな
システム
マイ
クロ
サー
ビス
様々な機能を１つのシステ
ムで実現。
各機能やデータは密に連携
しているため、システム改
修時に影響範囲が⼤きく、
変更に時間がかかる
マイ
クロ
サー
ビス
マイ
クロ
サー
ビス
機能の塊で、システムを分割。
各マイクロサービスは独⽴性を
保ち、他サービスと連携しなが
ら全体の機能を提供するという
考え⽅
Ex)ECサイトで商品、買い物か
ご、決済、顧客管理を別のサー
ビスとして構築。

View Slide

マイクロサービスと小さなチームでアジャイル
8
マイクロサービス
プロダクトオーナー
エンジニアデザイナー
マイクロサービスマイクロサービス
⼤きなシステム、チームは情報伝達の効率性を優先した仕様を凍結して
後戻りしないウォーターフォールと、PMを頂点とした階層構造の深い組織となる。
マイクロサービスで⼩さなシステム規模を保つことで、
マイクロサービスごとのフラットで⼩さな組織で柔軟に対応可能となる

View Slide

大きなトレンド②
APIによるコラボレーション
9
顧客向け
フロントエンド
管理向け
社内の
他システム
他社の
他システム
API
データベース
以前はAPIを作るということが、⼤変な作業でしたが、
現在は⾮常に簡単に作れるようになり、連携の⼿法として⼀般的になりました。

View Slide

マイクロサービスと技術レイヤー
10
商品
買い物
かご
決済配送
バックエンド
（API）
データベース
技術
レイヤー
どのような単位で
マイクロサービスに分けるか

View Slide

システムの特性に合わせて、採用する技術を
組み合わせることが容易になってきている
11
商品買い物
かご
外部の
決済
サービ
ス
配送
パッ
ケージ
ソフト
バックエンド
（API）
データベース
技術
レイヤー
どのような単位で
マイクロサービスに分けるか
MySQL NoSQL
DB
Node.js Java
顧客向けフロントエンド

View Slide

マイクロサービスの粒度
l 独⽴性が⾼く、意味のある機能を実現する（サービス）
• 影響範囲・依存関係を狭くする
l 機能の凝集性を⾼く、他サービスとの結合度を低く
• ビジネスとしてのモノの「意味が近い」の単位
• ビジネスとしてコトが⼀つのサービス内で完結するか︖
処理のトランザクションが分散しないか︖
l サービス間のトランザクション制御は基本避けたい。システムが複雑化しやすい
データ取得（参照時）に多くのAPI経由でのデータ取得にならないか︖
l テーブル間Joinで取得できたデータがAPI経由になるとパフォーマンス低下
12

View Slide

アプリケーションプラットフォーム
（サーバレス、コンテナ）
13

View Slide

クラウドネイティブなアプリケーション設計
l クラウドを利⽤することで、インフラの調達、管理をクラ
ウドベンダーに任せることができるようになりました
l さらにクラウドを前提としたアプリケーション設計を
⾏うことで、「俊敏性（アジリティ）」、「拡張性（ス
ケーラブル）」を得られます
l このような構成をクラウドネイティブと呼びます
14

View Slide

クラウドネイティブとは具体的には何を指すのか
l コンテナ、サーバレスなどの技術、
クラウドベンダーが提供しているマネージドサービスを
積極的に利⽤してサービスの設計、開発を⾏います
l 俊敏性
• ⾃分たちで作る量を減らし、クラウドベンダーが提供している機能を
サービスとして利⽤する
• インフラだけでなく、OS、ミドルウェアをプラットフォームとして提
供し、その上に作る⾃分たちの付加価値提供に集中する
l 拡張性
• 利⽤者の増加に応じて、オートスケールできる基盤、アプリケーション
の設計にする
15

View Slide

サーバレスや、コンテナが流行っている背景
l DevOps、Infrastructure as Codeの取り組みのなかで
従来の開発チームとインフラチーム、運⽤チームの
垣根が低くなってきている
開発チームがアプリだけでなく、
ミドルウェアやインフラ構築、リリースなどの
運⽤の⼀部を担当するようになってきている
l その際、従来の⼿順書ベースの環境構築、運⽤ではなく、
コードで定義して、⾃動化することが求められる
16

View Slide

サーバレスとはサーバーが無い？
l 実際には物理的なサーバー上にアプリケーションを配置し
ますが、開発者がサーバーや、実⾏基盤のようなミドル
ウェアを意識する必要がありません
l 暗黙的にはこのような処理が⾏われています
l 処理の実⾏回数により課⾦が⾏われる
アプリケーション
サーバー
①処理要求
ビルド済み
②サーバー上に
読み込み
③処理の実⾏
④アプリケーションの破棄
17

View Slide

サーバレスとはサーバーが無い？
l 実際には物理的なサーバー上にアプリケーションを配置し
ますが、開発者がサーバーや、実⾏基盤のようなミドル
ウェアを意識する必要がありません
l 暗黙的にはこのような処理が⾏われています
l 処理の実⾏回数により課⾦が⾏われる
サーバー
①処理要求
ビルド済み
②サーバー上に
読み込み
③処理の実⾏
④アプリケーションの破棄
サーバーなどのハード障害はあり得る。
しかし、次の処理要求は別の正常な
サーバーで処理される。
サーバーの復旧や、フェイルオーバー
などの仕組みを⾃分たちで考える必要
がない
多少のオーバーヘッドがあります。
サーバーへの読み込み、アプリケー
ションの破棄はクラウド側で最適化
される
（できるだけ再利⽤してくれる）
18

View Slide

コンテナとは
l Dockerの仮想化技術がベースとなっている
• Kubernetes、AWS ECSなどはDockerコンテナを運⽤するためのもの
（オートスケール、フェイルオーバー、負荷分散など）
• 徹底的に⾃動化ができるようになっている。
図は下記より引用
https://www.docker.com/resources/what-container
19

View Slide

コンテナとは
l Dockerの仮想化技術がベースとなっている
• Kubernetes、AWS ECSなどはDockerコンテナを運⽤するためのもの
（オートスケール、フェイルオーバー、負荷分散など）
• 徹底的に⾃動化ができるようになっている。
図は下記より引用
https://www.docker.com/resources/what-container
ハードウェアは意識しませんが、
OS、ミドルウェアなどの準備、管
理は必要
サーバレスと違い、常時起動してお
くような処理もできる
Dockerが動作する別のホストへ
コンテナを持っていくことができる
可搬性
本番環境→検証環境
１号機→２号機
20

View Slide

サーバレスとコンテナの使い分け
マネージドサービスサーバレスコンテナ IaaS
機能 • 提供されたもの
を使う
• ⾃前で開発
• 処理が15分以内
• コネクションプール
が使えず、DBは
RDBMSと相性悪い
• ⾃前で開発 • ⾃前で開発
アプリフレー
ムワーク例
• 使⽤しない • Serverless
Framework
• Spring Boot • Spring Boot、
Spring Framework
インフラ • クラウドベン
ダーに任せる
• クラウドベンダーに
任せる
• リクエスト数に応じ
て使った分だけ課⾦
• ハードウェア、仮想
化環境はクラウドベ
ンダーに任せる
• ⽤意したインスタン
スに合わせて課⾦
• ハードウェアは提供さ
れる。
• OS以上を⾃前で構築
• ⽤意したインスタンス
に合わせて課⾦
運⽤ • クラウドベン
ダー
• 基本、クラウドベン
ダーに任せる
• 機能のリリースなど
は⾃前
• コンテナ管理はクラ
ウドベンダー
• コンテナイメージ、
アプリは⾃前
• インフラ管理より下の
レイヤーはクラウドベ
ンダー
• OS、アプリは⾃前
サービス
例
• AWS Cognito
認証サービス
• AWS Lambda • ECS（AWS独⾃）
• EKS（Kubernetes）
• EC2
21
• 開発しなくて良い／運⽤コストが下がる
• 制約は⼤きい
やりたいことと提供されるものがあっている場
合には、⾮常に効果を発揮する。
要件とフィットしていれば、使ったほうが良い
• ⾃由度が⾼い
• 開発、運⽤の費⽤は相対的に
⼤きい

View Slide

AWS Lambdaの起動のオーバーヘッドついて
AWSから事前に起動させておくオプションが提供
22
https://aws.amazon.com/jp/blogs/aws/new-provisioned-concurrency-for-lambda-functions/

View Slide

事例）サーバレスとマネージドサービスをフル活用したアーキテクチャ
23
Webアプリ
コンテンツ
アプリ向けAPI Lambda
業務ロジック
DynamoDB
添付ファイル
Cognito
ユーザー認証
利⽤者
社内システム
社内システム
社内向けAPI
Lambda
業務ロジック
マスタ
データ連携
バッチによる
⽇次データ取り込み
AWS ⾃社データセンター
Cloud
Front
S3
⾃社営業
向け配信
SNS
Push通知

View Slide

事例）サーバレスとマネージドサービスをフル活用したアーキテクチャ
24
Webアプリ
コンテンツ
アプリ向けAPI Lambda
業務ロジック
DynamoDB
添付ファイル
Cognito
ユーザー認証
利⽤者
社内システム
社内システム
社内向けAPI
Lambda
業務ロジック
マスタ
データ連携
バッチによる
⽇次データ取り込み
AWS ⾃社データセンター
Cloud
Front
S3
⾃社営業
向け配信
SNS
Push通知
AWS Lambda
サーバレスな処理実装
Cognito
マネージドな
認証サービス
DynamoDB
スケールアウト可能な
データベース
アプリケーションは
S3とCloudFrontで配信

View Slide

複雑なアプリケーションを
開発できるJavaScriptフレームワークの登場
SPA（React、Vue.js）
25

View Slide

アーキテクチャは歴史を繰り返しながら発展
26
ホストコンピュータークラサバ Webアプリ SPA
Windows95
LAN化
⼀⼈⼀台に向かう
クライアント配布の⼿間
をブラウザ利⽤で解決
スマホのネイティブアプリ登場でクライア
ントリッチ/サーバーシンプル（API）に
HTML5/JavaScriptの標準化・フレームワー
クの成熟
サーバーサイドがシンプルになったことで、再
利用性が上がる。かつサーバレス等のシンプ
ルなアーキテクチャが可能に
サーバー︓Fat
クライアント︓Thin
サーバー︓Thin
クライアント︓Fat
サーバー︓Fat
クライアント︓Thin
サーバー︓Thin
クライアント︓Fat
ダム端末
ダム端末
VB,C++ ,Notes
PHP, Java, .Net
React,Vue.js

View Slide

言語やフレームワークの進化で、複雑なアプリ
ケーションをJavaScriptで実装可能になった
27
HTML+
JavaScriptで
⾒た⽬のインタ
ラクション
2005-2006
AJAX / jQuery
の登場
2010-2012
Web技術の標準化
と様々なフレーム
ワーク乱⽴
2013-2015
React とSPAフ
レームワークの
主要概念登場
Google Map の出現︓
ページ遷移のない滑ら
かな動きが画期的
→ 画⾯遷移中⼼のUI
から離れたWebアプ
リケーションの登場
Flashなどとともに、
Webブラウザでリッ
チな表現が追求される
UIの複雑化・肥⼤化
→ フロントエンドの
ための様々なフレーム
ワークが考案される
Backbone.js,
AngularJS, Knockout
など
JavaScriptでできるこ
とが増えてきたが、ス
タンダードは定まらな
かった
→ 混迷の時代︓⼤企
業は静観、 jQuery が
依然としてメインに
2018-
React / Vue に
よるSPA実装が
スタンダード化
React の出現︓仮想
DOMという概念の導
⼊
→ 複雑になりがちな
DOM操作を抽象化
Flux の提唱︓単⽅向
データバインディング
によるシンプル化
→ それまでの双⽅向
バインディングは複雑
化に耐えきれなかった
コンポーネント指向︓
部品をコンポーネント
単位で分割
Vue.js がReactに次
ぐフレームワークと
して台頭
Reactの唱えた思想が
広まり、SPA開発の
知⾒が蓄積される
ReactとVueの2⼤勢
⼒によるモダンなフ
ロントエンド開発が
トレンド
→ ⽅向性が定まり、
⼤企業も重い腰を上
げ始めている
Webサイトを作
るためのもの

View Slide

フロントエンドの実装言語
l モダンなJavaScriptフレームワークによるSPA開発が主流に
• JavaScriptフレームワーク︓JavaScriptエコシステムの発展により、
ユーザーによりリッチな体験を届けることができるようになり、その開
発をサポートするフレームワークの使⽤が主流になっている。
• SPA（Single Page Application）︓ページ遷移を⾏わないWebアプリ
ケーションの形態。従来の「サーバーでページを⽣成して返す」という
考え⽅ではなく、「サーバーはデータやビジネスロジックを担当し、ブ
ラウザがその処理を元にページを⽣成する」のが特徴。
l ブラウザで実⾏されるフロントエンドがより重要に
• フロントでの処理の⽐率が上がり、また動きが多様になったためロジッ
クが複雑化する傾向にある。
• フレームワークやプラグインをパッケージ管理ツールで組み合わせ、よ
り⾼度な実装が求められるようになった。
28 28

View Slide

モダンなJavaScriptフレームワークでできること
l UIコンポーネントの共通化
• ボタン、フォーム、ダイアログ・・・
• UIカタログを作って複数のアプリケーションから再利⽤することも可能
l 状態の管理
• ログイン状態、ユーザーの⼊⼒したデータを⼀次保持
l 処理のルーティング
• 画⾯からのユーザーのアクションを、どの処理に渡すか
など、これまでサーバー側でしかできなかったことが、フロントエン
ドだけでできるようになることで、よりリッチなUI、
複雑なアプリケーションを実装できるようになっている
29

View Slide

React vs. Vue
l Reactとは︖
• 2013年に登場した、Facebookを中⼼に開発されたオープンソースのフ
ロントエンドライブラリ
• テンプレート、コンポーネント、仮想DOMによる効率化等の最新フロ
ントエンド構築に必要な機能を有する
• ほぼ全てをJavaScriptで実装し、JavaScriptの恩恵を最⼤限に受けられ
る
• 学習コストがそれなりに⾼く、慣れるまで時間がかかる
• 秩序が保たれており、書き⽅を統⼀しやすく、⼤規模アプリケーション
の開発に向く
30

View Slide

React vs. Vue
l Vueとは︖
• 2014年に登場した、AngularJS開発に携わったEvan Youによって開発
されたオープンソースのフロントエンドライブラリ
• Reactと同じく最新フロントエンド構築に必要な機能を有する
• 従来のHTML/CSS ベースのコードと組み合わせて使⽤することも多く、
部分的にVueを導⼊するなど柔軟な採⽤が可能
• HTMLベースの直感的なテンプレートを提供しており、理解しやすく
とっつきやすい
• 柔軟な書き⽅を許す⼀⽅で、各開発者での差やライブラリの実装⽅法の
差も⼤きく、⼤規模な開発には慎重なルール設定を要する
31

View Slide

モダンアプリケーション化の始め⽅
32

View Slide

モダンアプリケーションの導入
エンジニアの育成（サーバーサイド）
l Javaや.NETなどでサーバーサイドのアプリケーションを開発して
いたエンジニアが、サーバレスや、コンテナに対応したアプリ
ケーションを開発することは⽐較的容易
各クラウドベンダーが提供する実⾏環境
• AWS Lambda︓Java、Go、PowerShell、Node.js、C#、Python、Ruby
• Microsoft Azure︓C#、Node.js、F#、Java、PowerShell、Python、
TypeScript
• Google Cloud Functions︓Node.js、Python、Go
l ただし、サーバレス、コンテナの特徴を活かすためにいつくかの
やるべきことがあります。
• アプリ層にステートを持たない
• Infrastructure as Code（インフラ構築の⾃動化）
など
33

View Slide

エンジニアの育成（フロントエンド）
l SPAはJavaScriptで複雑なアプリケーションを組めるように
したものなので、Webサイトのエンジニアで、アプリケー
ションの開発は未経験というエンジニアにはハードル⾼め。
l 逆に何らかの⾔語でアプリケーションを開発していた⼈が
JavaScriptとSPAのフレームワークを覚えるという⼿もある
l UIの部分の、API呼び出しや処理ロジックを各エンジニアを
最初は分けるというのもあり
34

View Slide

どんなシステムに適用していくか
l サーバレス、コンテナ、SPAとも数ヶ⽉のキャッチアップは
必要だと思います。
l そのため、設計が失敗したと気づいた時に
リファクタリングが可能な
規模がそれほど⼤きくなく、期間にも若⼲余裕のある
プロジェクトが適しています。
35

View Slide

まとめ

View Slide

今日お伝えしたいこと
37
１０年間でテクノロジーは
⼤きく進歩
クラウド、サーバーレス、コンテナ、
複雑なアプリケーションを開発できるJavaScript
フレームワーク・・・
ビジネス、ユーザーからの求められ
るレベルがあがっている
ビジネスに貢献するIT
すばらしいUX
もっと早くリリースしたい
モダンなアプリケーション開発ができるかどうかが
⼤きな違いになってくる
Enabler Needs

View Slide

これらを支えるテクノロジー
l マイクロサービス・アーキテクチャ
l アプリケーションプラットフォーム
• サーバレス
• コンテナ（ Docker、Kubernetes）
• マネージドサービス
l SPA（Single Page Application）
• React
• Vue.js
38

View Slide

NCDCのサービスの特徴
39
ビジネスモデルのデザイン PoC・検証システム・インテグレーション
ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせでシステムを構築します
ITアーキテクチャのデザインリファレンス実装
DX推進のための組織デザイン
39

View Slide

View Slide

ncdc_ModernApp_20200428

ncdc_ModernApp_20200428

NCDC

More Decks by NCDC

Other Decks in Technology

Featured

Transcript