<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.6;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h2 {
padding: 0 1.5vw;
margin: 0.0vw 0 2.0vw -2.0vw;
border-left: solid 1.2vw #2980b9;
border-bottom: solid 0.8vw #d7d7d7;
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
#### 朝活mokumoku
# ベーカリーポータルサイト開発(vue+amplify）
<br>
<br>
#### 2021.04.03
### matcha
---
## 自己紹介
### まっちゃ
- 好きなもの：音楽、ベース、水泳、サイクリング、料理
- 主なスキル：typescript、java、vue、AWS、Linuxなど
- https://twitter.com/dom12000931
---
## 今回作ったもの
### ベーカリーポータルサイト
### 作った理由
いろんな新作パンを食べたい・・
でもベーカリーってHP・Twitterがないことが多い
じゃあベーカリーが新作パンをアピール場を作ろう
### 主な機能
- パン登録
- メッセージ投稿
- チャット
- リアクション機能
- 通知機能
- 友達機能
---
## アーキテクチャ
<img src=https://i.imgur.com/MkEbeRd.jpg width=70%/>
- バックエンド： amplifyにお任せ(DB、API、ユーザ認証、ストレージ)
- フロントエンド： vue+typescript(コンポーネント化し再利用)
---
# 工夫したところ
メンテ、再利用しやすいを意識して開発
- モジュール責務範囲の定義
- コンポーネントの汎用化
- インタフェース分離
----
### モジュール責務範囲の定義
処理特性に合わせてnamespace(ディレクトリ)を分ける
```
component ： vueコンポーネント
service ： １エンティティ１サービスを作成。CRUD操作を担当。
util ： サービスに依存しないモジュール。APIのラッパーなど。
helper : APIラッパーをさらにサービス依存ある状態でアプリ用にラッピング
provider : enum関連のデータ参照を実装。だが、サービス依存が多くなってしまった(要再設計)
```
- **utilは、完全にアプリ非依存。他アプリでもすぐ使える**
- **CRUDはserviceに集約、メンテ性をあげる**
----
### コンポーネントの汎用化（１）
画面の種類は、一覧・詳細・編集のパターンになってる
基本レイアウト/処理は汎用化できる
- 一覧
- カードを並べる
- 検索バーを出す
- 詳細
- 編集/削除メニューを出す
- 編集
- 新規・更新で同じ画面使う
- バリデーションつける
- OK/CANCELボタンがある
- **vueのslotを活用し枠と共通処理を実装する**
----
### コンポーネントの汎用化（2）
チャット、通知機能、リアクション機能は依存性を持たせない。
他アプリでもすぐ流用できるようにする
- 通知
- 通知専用の抽象クラスを実装すれば通知機能を利用可能にする
- リアクション
- 好きなエンティティにイイネできる
- **他データに依存しない設計で開発**
----
### インタフェース分離
特性に合わせて各インタフェースレイヤを設計
Ex.サービスクラス
```=java
ProductService ： ユースケースの実装
abstract GqlWithSrcService ： image取得／設定処理の実装
abstract GqlGenService ： CRUD処理の実装
BaseService : GraphqlAPIのラッパー
```
エンティティを増やすたびにCRUDを実装する必要がない！
GqlGenServiceを継承すればOK
---
## まとめ
今回はメンテ性や汎用性を意識して開発しました。
開発スピードが少し犠牲になりますが、
あとでアプリ機能拡張するときや、他アプリを１から作るときに負担が減るかと思いました
<br/>
---
{"metaMigratedAt":"2023-06-15T22:11:51.196Z","metaMigratedFrom":"YAML","title":"HackMD presentation Sample2","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"slide\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"4a44801f-e5d5-4d3b-9c41-541cd6940bdb\",\"add\":9411,\"del\":4829}]"}