Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

フロント開発の第1歩

  • Identifiez-vous pour voir les commentaires

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

  1. 1. 10分でわかるフロント開発 株式会社ビッグツリーテクノロジー&コンサルティング SI事業部 アーキテクチャG リード 高安 厚思 1Copyright (C) 2018 Atsushi Takayasu All Rights Reserved.
  2. 2. 1 2 3 4 5前提条件という名の言い訳 ▌ご存知の方はご存知だと思いますが 私はフロントエンジニアではありません! ▌プラットフォームビジネスとしてAPIを展開し ようとするとどうしてもここが話題になるの で、勉強した話をしたいと思います。 Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 2
  3. 3. 1 2 3 4 5背景 ▌SoEにおけるアプリケーションは基本的にマルチ チャネル(Web、スマートフォンなど)が要求され るが、コストは最小限にしたい ▌MSAで構成したシステムを画面UIでどう統合するか は意外に課題であり、その解決案の一つとして見て いた Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 3
  4. 4. 1 2 3 4 5位置情報サービス(API) ▌室内の位置情報を元にした位置情報サービスを提供 しています。 ▌ハードが必要です! Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 4 経路管理 BLE管理 経路/ BLE情報 運営者 位置情報 APIs 位置情報 経路情報/ BLE情報 利用者
  5. 5. 1 2 3 4 5MSAと統合の例 ▌MSAに基づいたサービスを画面で統合する Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 5 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ 【引用元】 https://www.slideshare.net/JayLee1/cf-meetup-in-seoul-spring-cloud-services
  6. 6. 1 2 3 4 5SPAを実現するJSエコシステム ▌Node,jsをベースとするJSのエコシステムによって SPA(Single Page Application)を実現しています。 Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 6 Node webpackなど 各ライブラリコマンド(vue-cli-serviceなど) React Angular Vue
  7. 7. 1 2 3 4 5SPAを実現するルータ ▌URLとコンポーネントをマッピングして、DOM(仮 想DOM)の書き換えを支援する。 Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 7 <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)
  8. 8. 1 2 3 4 5Webコンポーネント ▌ようやく、Webコンポーネント(画面)が定義でき るようになりました! ▌実際はまだまだなので、各ライブラリが独自実装し ている Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 8 https://caniuse.com/#search=Custom
  9. 9. 1 2 3 4 5コンポーネントの例 ▌VUEJSで見てます。 Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 9 <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>
  10. 10. 1 2 3 4 5コンポーネント間の通信 ▌コンポーネント間にイベントを受け渡す、情報を受 け渡す時に原則として親子関係でしか実施できませ ん。(ライブラリによります) ▌不便(正確には少し違う)なので、Fluxという仕組 みを利用します Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 10 Component Action Dispatcher Store
  11. 11. 1 2 3 4 5最後に ▌SPAのフロントアプリケーションはB2Cサイトだけ でなく社員向けシステムでも求められてつつある。 ▌特にハイブリッド開発としてSPAのJSアプリケー ションをビルドすることで対応することもできるた め大きな注目を浴びている ▌コンポーネント、ルータ、Fluxを意識するとわかり やすいかと。 Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 11 https://qiita.com/superyusuke/items/948d2a084f87eaa3f9c2 https://raw.githubusercontent.com/kamranahmedse/developer- roadmap/master/images/frontend-v2.png 参考URL

×