Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueによる自作簡易DSL / Simple DSL with Vue
Search
tunemage
August 20, 2023
Programming
1
180
Vueによる自作簡易DSL / Simple DSL with Vue
2023/8/19、ITたこ焼きの会(第2回)にてLTさせていただきました。
https://it-takoyaki.connpass.com/event/291090/
tunemage
August 20, 2023
Tweet
Share
More Decks by tunemage
See All by tunemage
自社サービス開発企業のサポート業務改善 / Support department improvements for SaaS company
tunemage
1
78
IPO準備プロジェクトにエンジニアとして参加した話 / IPO preparation project
tunemage
1
150
『データモデリングでドメインを駆動する』で繋がる体験 / Drive domain with data modeling
tunemage
0
170
手離れの良いExcel VBA / non-personalized-excel-vba
tunemage
1
120
本を年100冊読むためにしている事 / my-way-to-read-100-books-a-year
tunemage
1
780
システム監査についての学びと今後の課題 / learning-about-system-auditing
tunemage
1
1.6k
システム内製の原則 / principles-of-in-house-system-development
tunemage
3
2.2k
業務システムの概要とその選択肢_公開用_.pdf/Overview of business system
tunemage
2
1.4k
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
610
5つのアンチパターンから学ぶLT設計
narihara
1
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
490
20250613-SSKMvol.15
diostray
0
100
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
950
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
WindowInsetsだってテストしたい
ryunen344
1
200
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Site-Speed That Sticks
csswizardry
10
670
How to Ace a Technical Interview
jacobian
277
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Into the Great Unknown - MozCon
thekraken
39
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Done Done
chrislema
184
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Transcript
Vueによる自作簡易DSL @tunemage
自己紹介 • つねまげ(@tunemage) • 現職、管理会計SaaSベンダー勤務(SRE ->ユーザーサポー ト) • ユーザーサポート・SRE担当として社内システム改修を兼務 •
(一応)現役プログラマー • 前職、製造業企業に勤務( 研究開発->情報システム) • Kotlin/SpringBoot+VueJS/TypeScriptで社内システムを新規開発 • 同僚の休職により「ひとり情シス」も経験 • それ以前(SES/自社開発/フリーランス等) • ERP開発・教育システム開発・スマホアプリetc
最近の社外Output紹介 • コーポレートエンジニア関西交流会vol.2(6/28)にてLT登壇 • https://www.youtube.com/watch?v=IPjd8D4LBXw • 『スクラムの拡張による組織づくり』(著:粕谷大輔、技術評論 社)のレビューに参加 • 謝辞に名前(tunemage)を入れていただき感激
• https://gihyo.jp/book/2023/978-4-297-13661-1/content/preface
本日は • 簡易DSLを設計&開発した話 • 動機や背景を含めてお話します
まずDSL(ドメイン特化言語)とは • DSLは特定のドメイン(分野)に特化した言語 • 例: HCL・jQuery 、 Excel VBA、pom.xml等 •
対義語は汎用言語 • 例: Java 、 Ruby 、 XML等
要件 • 案件管理システム • 受注案件の見積書作成から請求処理、会計システム連携までのステー タスを管理する • 上長承認機能の追加案件 • 見積や請求業務は担当者がデータ作成後、上長が内容を承認をしない
と次の業務に進めない • 事業部によって承認が不要な場合もある事も考慮する • 開発/保守要員1名、希望工期1ヶ月半(つらい)
画面イメージ 承認申請 見積画面 Contents 編集 承認 Contents 編集 次へ Contents
Excel出力 承認申請 上長承認 見積画面 見積画面 ステータス:未申請 ステータス:申請中 ステータス:承認済
設計&実装イメージ 1. 表示管理テーブルを作成 2. Vueのカスタムディレクティブ(属性)を作成 機能 アクション ステータス 部署 ユーザ権限
表示 見積 承認申請 未申請 A部 参照 無効 見積 承認申請 未申請 A部 作成 有効 見積 承認申請 未申請 A部 承認 有効 見積 承認申請 見積承認依頼中 A部 参照 非表示 見積 承認申請 見積承認依頼中 A部 作成 非表示 見積 承認申請 見積承認依頼中 A部 承認 非表示 見積 承認申請 見積承認済 A部 参照 非表示 見積 承認申請 見積承認済 A部 作成 非表示 見積 承認申請 見積承認済 A部 承認 非表示 見積 承認 見積作成済 A部 参照 非表示 見積 承認 見積作成済 A部 作成 非表示 見積 承認 見積作成済 A部 承認 非表示 見積 承認 見積承認依頼中 A部 参照 無効 見積 承認 見積承認依頼中 A部 作成 無効 見積 承認 見積承認依頼中 A部 承認 有効 見積 承認 見積承認済 A部 参照 非表示 ︙ ︙ ︙ ︙ ︙ ︙ ※実際のテーブルは正規化してますが説明の都合上省略しています ※CSVやYAMLでも本質は同じです ※Vue2時代の実装例です。
カスタムディレクティブ(独自属性)の 内部実装 1. 表示管理テーブルの中身とログインユーザーの情報(所属部 署、権限)を取得 2. 属性値と突合して、表示属性を特定 3. 表示属性に応じたCSSに対応するclassを動的に追加(CSSが 対応)
この設計のメリット • コードが宣言的に記述できる(v-ifの嵐を回避) • 要件変更に柔軟に対応できる(テーブルの設定変更のみで対応 可能な場合も多い) • 条件分岐がコンポーネント内に共通化される事でテストケース が削減される •
ボタン以外のコンポーネントにも同じ仕組みが適用できる • 設定と制御機構を疎結合にできる(機構と方針の分離)
まとめ • 本件は「今の要件を何も考えずにゴリゴリ実装すると大変にな りそうだな。何かもっと上手い方法はないかな。」という悩み から始まりました。 • テーブル駆動の設定とVueのカスタム属性機能を組み合わせて 簡易DSLを実現するアイディアが浮かび、かたちになりました (もちろん、この設計が唯一の正解ではないと思います) •
小さな例ではありますが、設計って奥深くて楽しいなと再認識 できた案件でした。
【おまけ】参考書籍 • ジェネレーティブプログラミング(Krzysztof Czarnecki/Ulrich W. Eisenecker ) 分厚いし難しいけど示唆に富む一冊です。 • 生産管理・原価管理システムのためのデータモデリング(渡辺
幸三 ) テーブル駆動設計を学べる良書です。ただし絶版。 同じ著者の「システム開発・刷新のためのデータモデル大全」が比較的新しく、 入手しやすいので良いかもしれません(私は未読ですが)