webアプリの
UIパターン管理
効率化ツール

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

am-mocktimes@1.0.19

を、小型案件で使ってみたお話

自己紹介

---

フリーランスエンジニア@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
Button
E E2

クライアント様の声
「D1に、条件によりボタンを表示し、
押すとE2を表示してほしい」

自分「なるほどです😲 やります。💪」

テスト中

A B
Setting A
C D1
hidden C hidden D
Setting B
E

QA/テスターさん
「既存仕様が反映されていないです。
Setting A / B が切り替わり、
hidden C / D が、条件により出現します」

＼(＾o＾)／

理想

どこを取っても壊れない

現実

どこかを取ると盛大に崩れる

もちろん気合で何とか乗り切りましたが、
今後どんどん機能追加されていくと・・

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

そこで作ったのが、今回紹介する
UIパターン管理ツールになります

am-mocktimes

元々は社内ツールの１つとして作っていたものを
オープンソース化したものです。

何ができるものか

  • パターンを作りながら開発できる
  • 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
パターンの作成には、 mockディレクトリにある
２つのファイルを編集していきます。

簡単なwebアプリ(ライツアウト)でご紹介

デモ / ソース

2画面構成

UIパターン一覧 webアプリのモック
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

コードの書き方を、５ページで、ざっくりと

UIパターン定義

mock/pattern.yml UIパターン一覧
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

UIパターン定義(switch)

mock/pattern.yml UIパターン一覧
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

UIパターン定義(action)

mock/pattern.yml mock/config.js
配列にaction名と引数を入れると、固有なURLを生成、
その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)
このツールは、ES2015/Proxyを利用したもので、
IE11は未対応ですが、楽に状態管理ができます。

要約すると

複雑なことはツールに任せて、
短いコードで、様々なパターンを作れます

本日最も伝えたいところ→

導入して、何が変わったか

  • 開発時の操作が、ほとんど不要になる💡
  • 仕様変更に強くなる💪
  • URLを貼るだけで簡単に共有できる😊

何を意識して作ったか

  • Riot.js以外の開発も行えること
  • 開発スピードを上げること🚄🚄🚄
  • 製品としての質を落とさないこと

am-mocktimes + Riot.jsでサクサク開発し、
プロダクトの規模が大きくなっていったものの

弱点

  • 一覧ページは、IE11非対応
  • OSS化したばかりで、使われていない😿😿

プロダクト規模の拡大に伴い

求められたもの

  • 組織横断性
    • riot? vue? react?
  • 設計書作成・レビュー
  • ユニットテスト
  • コードレビュー
  • e2eテスト

工数は３～５倍、堅牢性が上がり、柔軟性がダウン

中～大規模開発での利用ツール

am-mocktimes の今後

中～大規模開発にも耐えられるよう、
画面キャプチャ取得など、機能改善を進める

  • こういった機能があれば使ってみたい😺
  • こういった所が使いにくそう😟

などありましたら、github issueやtwitter等
連絡もらえれば、前向きに対応します！

「何を使ったかでは無く、何を作ったか」

を、自分は意識していたい

ご清聴ありがとうございました。

ツール・デモのURL一覧

Select a repo