Slide 1

Slide 1 text

ドラッグ&ドロップして編集できる README.md Makerを作ってみた レバレジーズ株式会社 小林 京輔 2023/03/24

Slide 2

Slide 2 text

目次 ● 始めに ● 組織課題 ● README.mdの編集 ● インタラクティブな編集ができるアプリ ● まとめ

Slide 3

Slide 3 text

作ったアプリ https://md-editor-xi.vercel.app/

Slide 4

Slide 4 text

組織課題

Slide 5

Slide 5 text

組織課題 チームのナレッジが分散し、検索しにくい状態 ・プロジェクト入場者が毎回同じような資料を作っている ・不文律になっている組織のルール ・誰かに聞いても、誰もよくわかってない状態 ・更新されていないいつかのドキュメント群

Slide 6

Slide 6 text

そもそもどうあるべきなんだっけ? ASIS TOBE どこに何があるかわからない 一つの場所に情報をまとめる 普段見に行かないようなところに情報が転がっている 業務プロセスの中における導線に必要な情報を配置 する ほしい情報が見つからない 必要な情報にすぐさま辿り着けるような検索容易性を 担保する 書いてある内容が古くて使えない 頻繁に更新しやすいドキュメントにして、情報鮮度を高 く保つ

Slide 7

Slide 7 text

README.md にまとめれば良いのでは?

Slide 8

Slide 8 text

README.mdの編集

Slide 9

Slide 9 text

README.mdの編集 編集時の大変さ ・セクション単位で文章を移動したい時、範囲選択してコピペ ・分量が多くなるに従って認知的負荷が上がる ・上から開発プロセス順に編集したけど、抜け漏れがあってまたセクション単位で並び替えが発生

Slide 10

Slide 10 text

もっと楽がしたい・・・

Slide 11

Slide 11 text

インタラクティブな編集ができるアプリ

Slide 12

Slide 12 text

インタラクティブな編集ができるアプリ より直感的に ・.mdのインポート・エクスポート機能の実装 ・ドラッグ&ドロップでのセクション単位での移動 ・常時編集した.mdを表示

Slide 13

Slide 13 text

リポジトリ https://github.com/2814109/md-editor アプリ https://md-editor-xi.vercel.app/

Slide 14

Slide 14 text

まとめ

Slide 15

Slide 15 text

やっぱりReact楽しい

Slide 16

Slide 16 text

作ったアプリ https://md-editor-xi.vercel.app/