ドラッグ&ドロップして編集できるREADME.md Makerを作ってみた

【3/24＠オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会
https://ateam.connpass.com/event/276968/

での発表資料

# 技術

Vercel, React, Markdown

Transcript

1. ドラッグ&ドロップして編集できる README.md Makerを作ってみた レバレジーズ株式会社　小林 京輔 2023/03/24
2. 目次 • 始めに • 組織課題 • README.mdの編集 • インタラクティブな編集ができるアプリ • まとめ
3. 作ったアプリ https://md-editor-xi.vercel.app/
4. 組織課題
5. 組織課題 チームのナレッジが分散し、検索しにくい状態 ・プロジェクト入場者が毎回同じような資料を作っている ・不文律になっている組織のルール ・誰かに聞いても、誰もよくわかってない状態 ・更新されていないいつかのドキュメント群
6. そもそもどうあるべきなんだっけ？ ASIS TOBE どこに何があるかわからない 一つの場所に情報をまとめる 普段見に行かないようなところに情報が転がっている 業務プロセスの中における導線に必要な情報を配置 する ほしい情報が見つからない 必要な情報にすぐさま辿り着けるような検索容易性を 担保する 書いてある内容が古くて使えない 頻繁に更新しやすいドキュメントにして、情報鮮度を高 く保つ
7. README.md にまとめれば良いのでは？
8. README.mdの編集
9. README.mdの編集 編集時の大変さ ・セクション単位で文章を移動したい時、範囲選択してコピペ ・分量が多くなるに従って認知的負荷が上がる ・上から開発プロセス順に編集したけど、抜け漏れがあってまたセクション単位で並び替えが発生
10. もっと楽がしたい・・・
11. インタラクティブな編集ができるアプリ
12. インタラクティブな編集ができるアプリ より直感的に ・.mdのインポート・エクスポート機能の実装 ・ドラッグ&ドロップでのセクション単位での移動 ・常時編集した.mdを表示
13. リポジトリ https://github.com/2814109/md-editor アプリ https://md-editor-xi.vercel.app/
14. まとめ
15. やっぱりReact楽しい
16. 作ったアプリ https://md-editor-xi.vercel.app/