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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Copyright © NCDC Co., Ltd. All rights reserved. アーキテクチャは歴史を繰り返しながら発展 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

Copyright © NCDC Co., Ltd. All rights reserved. 言語やフレームワークの進化で、複雑なアプリ ケーションを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サイトを作 るためのもの

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

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

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

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

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

Copyright © NCDC Co., Ltd. All rights reserved. モダンアプリケーションの導入 エンジニアの育成（サーバーサイド） 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

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

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

まとめ

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

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

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

Copyright © NCDC Co., Ltd. All rights reserved. 40 ご相談はお気軽に︕ [email protected] www.ncdc.co.jp

No content