要求開発アライアンス納涼会　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　（フロント開発）

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie 要求開発アライアンス納涼会　LT　（フロント開発） (20)

Mehr von Atsushi Takayasu

Mehr von Atsushi Takayasu (10)