自己紹介
---
フリーランスエンジニア@3年目 / 独学@6年
---
twitter / @am_nimitz3
github / @ampcpmgp
facebook / akira.hayatake
取り掛かった案件
- 小型案件をこなしていました
- jQuery -> Riot.js
- 中～大規模開発の一員としても
- React
開発体制
- サーバーエンジニア (1人～複数人)
- フロントエンドエンジニア (1人)
- デザイナー(1人)
- Dir(1人～複数人)
- QA・テスターさん（1人～複数人）
UIパターン管理ツール
導入前の開発フロー
デザインリニューアル案件
ミッション
- スマフォでの見栄えを良くする
- アプリっぽくする
- サーバーサイド処理をjsにうつす
デザインが上がってきたとき
A
B
C
D
E
デザイナ「よろしくねー」
自分「きれいなデザインですね! 👍」要件定義を見ると
A
B
C
D1
D2
E
Dir「D1とD2は切り替わるので、お願いね」
自分「承知しました。問題ないです。 🙂」クライアント要望
A
B
C
D1
E
E2
Button
クライアント様の声
「D1に、条件によりボタンを表示し、
押すとE2を表示してほしい」
テスト中
A
B
Setting A
C
D1
hidden C
hidden D
Setting B
E
QA/テスターさん
「既存仕様が反映されていないです。
Setting A / B が切り替わり、
hidden C / D が、条件により出現します」
＼(＾o＾)／
理想
どこを取っても壊れない
現実
どこかを取ると盛大に崩れる
もちろん気合で何とか乗り切りましたが、
今後どんどん機能追加されていくと・・
何ができるものか
- パターンを作りながら開発できる
- e2e的に開発が進められる
導入
npm i am-mocktimes parcel-bundler -D
npx am-mocktimes generate-template # テンプレートファイル生成
npx am-mocktimes watch
推奨環境はこちら
ファイル構造
.am-mocktimes/ # 出力ファイル (.gitignore推奨)
mock/ # モック
pattern.yml
config.js
src/ # アプリケーション本体
index.html
app.js
２つのファイルを編集していきます。
2画面構成
| UIパターン一覧 | webアプリのモック |
|---|---|
 |
 |
コードの書き方を、５ページで、ざっくりと
UIパターン定義
| mock/pattern.yml | UIパターン一覧 |
|---|---|
 |
 |
UIパターン定義(switch)
| mock/pattern.yml | UIパターン一覧 |
|---|---|
 |
 |
UIパターン定義(action)
| mock/pattern.yml | mock/config.js |
|---|---|
 |
 |
そのURL内容を、config.jsが見ていて、実行されます。
親の設定から順に、呼び出されます。
mock/config.js の特徴
- webアプリの状態を変えるもの
- webアプリ本体のjsと、同じmoduleを共有
- async関数が使え、後続処理を待たせられる
詳しくはドキュメントにて
↓に、サンプル有り
riotxでのサンプル
直接actionを呼び出すことができます
import mock from 'am-mocktimes'
import riotx from 'riotx'
mock({
action (storeName, actionName) {
riotx.get(storeName).action(actionName)
}
})
jQueryでのサンプル
本体と同じjQueryを読み込んでいるため、
clickイベント等、triggerさせることができます
import mock from 'am-mocktimes'
import $ from 'jquery'
mock({
click (selector) {
$(selector).click()
}
})
（参考までに）dobjsのご紹介
am-mocktimesでは、状態管理ツールに、
dobjsを採用しています。
import mock from 'am-mocktimes'
import actions from '../src/actions' // dob actions
mock(actions)
IE11は未対応ですが、楽に状態管理ができます。
要約すると
複雑なことはツールに任せて、
短いコードで、様々なパターンを作れます
本日最も伝えたいところ→
導入して、何が変わったか
- 開発時の操作が、ほとんど不要になる💡
- 仕様変更に強くなる💪
- URLを貼るだけで簡単に共有できる😊
何を意識して作ったか
- Riot.js以外の開発も行えること
- 開発スピードを上げること🚄🚄🚄
- 製品としての質を落とさないこと
am-mocktimes + Riot.jsでサクサク開発し、
プロダクトの規模が大きくなっていったものの
弱点
- 一覧ページは、IE11非対応
- OSS化したばかりで、使われていない😿😿
プロダクト規模の拡大に伴い
求められたもの
- 組織横断性
- riot? vue? react?
- 設計書作成・レビュー
- ユニットテスト
- コードレビュー
- e2eテスト
工数は３～５倍、堅牢性が上がり、柔軟性がダウン
中～大規模開発での利用ツール
- 設計書作成
- パーツ作成
- (React) storybook / スタイルガイド
- ユニットテスト
- コードレビュー
- E2E
am-mocktimes の今後
中～大規模開発にも耐えられるよう、
画面キャプチャ取得など、機能改善を進める
- こういった機能があれば使ってみたい😺
- こういった所が使いにくそう😟
などありましたら、github issueやtwitter等
連絡もらえれば、前向きに対応します！
「何を使ったかでは無く、何を作ったか」
を、自分は意識していたい
ご清聴ありがとうございました。
ツール・デモのURL一覧
webアプリの UIパターン管理 効率化ツール am-mocktimes@1.0.19 を、小型案件で使ってみたお話
{"metaMigratedAt":"2023-06-14T15:53:30.835Z","metaMigratedFrom":"YAML","title":"webアプリの<br><span style=\"color: rgb(0, 255, 0); font-size: 0.8em\">UIパターン管理</span><br>効率化ツール","breaks":true,"slideOptions":"{\"transition\":\"convex\"}","contributors":"[]"}