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
Rails と人魚の話/rails-and-mermaid
Search
Masatoshi Moritsuka
April 04, 2024
Programming
470
0
Share
Rails と人魚の話/rails-and-mermaid
Masatoshi Moritsuka
April 04, 2024
More Decks by Masatoshi Moritsuka
See All by Masatoshi Moritsuka
拙者、『型は欲しいが型は書きたくない』者たちとの和睦を結び、るびぃにおける型の領地安堵を実現せんと欲す者也 #sekigahara01/sekigahara01
sanfrecce_osaka
4
1.9k
Rails の CLI ツールの書き方/writing-rails-cli-tool
sanfrecce_osaka
0
46
Time.zone.parse('dark')/time-zone-parse-dark
sanfrecce_osaka
0
110
外部APIが絡むテストをちょっといい感じに書く/a-little-nice-writing-external-api-testing
sanfrecce_osaka
0
33
gem_rbs_collection へのコントリビュートから始める Ruby の型の世界/contributing-gem-rbs-collection
sanfrecce_osaka
0
590
パターンマッチ使ってるかい?(kyobashi.rb)/use-ruby-s-pattern-matching-on-kyobashi-rb
sanfrecce_osaka
0
260
ApplicationController の継承を分割してエラーを減らした話/dividing-application-controller
sanfrecce_osaka
1
400
Input object ではじめる入力値検証/input-value-validation-using-input-object
sanfrecce_osaka
0
600
実例で学ぶRailsアプリケーションデバッグ入門 〜ログインできちゃってました編〜/rails-application-debug-introduction
sanfrecce_osaka
2
920
Other Decks in Programming
See All in Programming
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
280
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
1
1.4k
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
100
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
nrslib
6
760
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
250
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
410
技術記事、AIに書かせるか、自分で書くか? 〜それでも私が自分の手で書く理由〜 / #QiitaConference
jnchito
2
1.2k
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.4k
CSC307 Lecture 17
javiergs
PRO
0
310
Oxlintのカスタムルールの現況
syumai
5
930
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
1
570
Modding RubyKaigi for Myself
yui_knk
0
850
Featured
See All Featured
WENDY [Excerpt]
tessaabrams
11
38k
Code Review Best Practice
trishagee
74
20k
Designing for humans not robots
tammielis
254
26k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
310
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
エンジニアに許された特別な時間の終わり
watany
107
240k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.3k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
190
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
560
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
70
39k
Transcript
Rails と人魚の話 森塚 真年(@sanfrecce_osaka) 2024/04/04 Omotesando.rb#96 #omotesandorb
自己紹介 森塚 真年 @sanfrecce-osaka or @sanfrecce_osaka from: 大阪府枚方市 趣味: コミュニティ・勉強会
Machida.rb ・Hirakata.rb 株式会社エンペイ Ruby3.2/Rails7.0 Node.js v18/Vue.js 3.3/Vuetify 3.4 最近 Layout Cop を全部ドキュメント読んで設 定した
本編
ER 図
何使ってますか?
選択肢 gem gem 以外 DB クライアント(e.g. table plus) rails-erd erd
rails_erd_mermaid rails-mermaid_erd plant_erd
そもそもの要件 graphviz への依存がない エンジニア以外も触れるようにしたい エンペイではエンジニア以外も SQL を書いて いる
選ばれたのは
rails-mermaid_erd でした
rails-mermaid_erd 導入の手順 Gemfile に gem "rails-mermaid_erd", group: :development を追加 bin/rails
mermaid_erd Rails のER 図をMermaid で柔軟に生成できるGem を 作りました Repository Demo Page
できること ER 図の各種エクスポート・コピー Mermaid ・Markdown ・SVG ・PNG リレーションのプレビュー リレーションのコメントの表示 カラムの非表示
キーの表示 カラムコメントの表示 表示対象の絞り込み
できないこと テーブルのコメントの表示 mermaid のコメントとしてなら吐けるので PR 出す予定
裏側の仕組み 1. で model の 定義から Hash を組み立て 2. の
window.SCHEMA_DATA に 1 で組み立てた Hash を json に変換して bind 3. ファイルとして出力(JS 部分は cdn の Vue を使っ ているので html ファイル単体で動く) RailsMermaidErd::Builder.model_data templates/index.html.erb
ところで
そもそもの要件 graphviz への依存がない エンジニア以外も触れるようにしたい エンペイではエンジニア以外も SQL を書いて いる
🤔
そうだ!
migration に hook させて git で 管理しよう! %w(db:migrate db:schema:load).each do
|task| Rake::Task[task].enhance do Rake::Task['mermaid_erd'].invoke if Rails.env.development? end end
あとはこうして models/documentation.rb module Documentation; end
こうして ActiveAdmin.register Documentation do actions :index controller do def index
redirect_to admin_documentations_erd_path end end end
こうして config/routes.rb namespace :admin do namespace :documentations do resource :erd,
only: :show, format: 'html' end end
こうじゃ! config/mermaid_erd.yml result_path: app/views/admin/documentations/erds/show.html.erb
最後に rails-mermaid_erd べんり migration に hook させて更新して git 管理すれば view
として扱える activeadmin 等の管理画面の view ファイルとして 扱えば認証も解決 ( 今後は) 社内で ER 図 の勉強会 をやっていき!
ご清聴 ありがとうございました
None