「ちょうどよい」フロントエンドアーキテクチャを求めて

Transcript

1. 1
   ©AR Advanced Technology All Right Reserved.
   2023/9/27
   

   View Slide

2. 2
   ©AR Advanced Technology All Right Reserved.
   Masahiro Harada
   • ARI 12 Web
   • PHP + jQuery 6 Vue.js / React
   •
   2010 1
   463
   東京証券取引所 グロース市場
   AI DX
   

   View Slide

3. 3
   ©AR Advanced Technology All Right Reserved.
   •
   • LT
   •
   •
   •
   

   View Slide

4. 4
   ©AR Advanced Technology All Right Reserved.
   •
   •
   •
   •
   •
   

   View Slide

5. 5
   ©AR Advanced Technology All Right Reserved.
   JSX
   UI
   components
   pages
   page
   API
   

   View Slide

6. 6
   ©AR Advanced Technology All Right Reserved.
   1.
   API / BFF
   JSON
   import Entity from ’@/entities’;
   import { UserResponse } from ’@/api/responses’;
   class User extends Entity {
   get canVote(): boolean {
   return this.props.age >= 18;
   }
   }
   class Entity {
   constructor(public props: Props) {}
   }
   entities/Entity.ts
   entities/User.ts
   

   View Slide

7. 7
   ©AR Advanced Technology All Right Reserved.
   2.
   UI
   •
   • components pages views
   • views components
   • UI
   •
   

   View Slide

8. 8
   ©AR Advanced Technology All Right Reserved.
   ARI ARI Qiita
   

   View Slide

9. 9
   ©AR Advanced Technology All Right Reserved.
   ＡＲアドバンストテクノロジ株式会社【略称︓ＡＲＩ】
   〒150-0002 東京都渋⾕区渋⾕1-14-16 渋⾕野村證券ビル8F
   TEL : 03-6450-6080 FAX : 03-6450-6088
   URL : https://ari-jp.com
   

   View Slide