要求開発アライアンス納涼会　LT　（フロント開発）

10分でわかるフロント開発
株式会社ビッグツリーテクノロジー＆コンサルティング
SI事業部アーキテクチャG リード
高安厚思
1Copyright (C) 2018 Atsushi Takayasu All Rights Reserved.

1 2 3 4 5前提条件という名の言い訳
▌ご存知の方はご存知だと思いますが
私はフロントエンジニアではありません！
▌プラットフォームビジネスとしてAPIを展開し
ようとするとどうしてもここが話題になるの
で、勉強した話をしたいと思います。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 2

1 2 3 4 5背景
▌SoEにおけるアプリケーションは基本的にマルチ
チャネル（Web、スマートフォンなど）が要求され
るが、コストは最小限にしたい
▌MSAで構成したシステムを画面UIでどう統合するか
は意外に課題であり、その解決案の一つとして見て
いた

1 2 3 4 5位置情報サービス（API）
▌室内の位置情報を元にした位置情報サービスを提供
しています。
▌ハードが必要です！
経路管理
BLE管理経路/
BLE情報
運営者
位置情報
APIs
位置情報
経路情報/
BLE情報
利用者

1 2 3 4 5MSAと統合の例
▌MSAに基づいたサービスを画面で統合する
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
⑪
【引用元】
https://www.slideshare.net/JayLee1/cf-meetup-in-seoul-spring-cloud-services

1 2 3 4 5SPAを実現するJSエコシステム
▌Node,jsをベースとするJSのエコシステムによって
SPA（Single Page Application）を実現しています。
Node
webpackなど
各ライブラリコマンド（vue-cli-serviceなど）
React Angular Vue

1 2 3 4 5SPAを実現するルータ
▌URLとコンポーネントをマッピングして、DOM（仮
想DOM）の書き換えを支援する。
<Switch>
<Route exact path='/' component={Top} />
<Route exact path='/tasks' component={Task} />
</Switch>
<NavDropdown eventKey={5} id={5}title="タスク">
<LinkContainer exact to="/tasks">
<MenuItem eventKey="5.1" onClick={ () =>
this.updateModal(false)} >検索・一覧</MenuItem>
</LinkContainer>
ルート定義（ReactRouter Bootstrap)
メニュー定義（ ReactRouter Bootstrap)

1 2 3 4 5Webコンポーネント
▌ようやく、Webコンポーネント（画面）が定義でき
るようになりました！
▌実際はまだまだなので、各ライブラリが独自実装し
ている
https://caniuse.com/#search=Custom

1 2 3 4 5コンポーネントの例
▌VUEJSで見てます。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize
this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank"
rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-
cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank" rel="noopener">babel</a></li>
〜略〜
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

1 2 3 4 5コンポーネント間の通信
▌コンポーネント間にイベントを受け渡す、情報を受
け渡す時に原則として親子関係でしか実施できませ
ん。（ライブラリによります）
▌不便（正確には少し違う）なので、Fluxという仕組
みを利用します
Component
Action
Dispatcher
Store

1 2 3 4 5最後に
▌SPAのフロントアプリケーションはB2Cサイトだけ
でなく社員向けシステムでも求められてつつある。
▌特にハイブリッド開発としてSPAのJSアプリケー
ションをビルドすることで対応することもできるた
め大きな注目を浴びている
▌コンポーネント、ルータ、Fluxを意識するとわかり
やすいかと。
https://qiita.com/superyusuke/items/948d2a084f87eaa3f9c2
https://raw.githubusercontent.com/kamranahmedse/developer-
roadmap/master/images/frontend-v2.png
参考URL

要求開発アライアンス納涼会 LT （フロント開発）

More Related Content

What's hot

Similar to 要求開発アライアンス納涼会 LT （フロント開発）

More from Atsushi Takayasu