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

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

での発表資料

# 技術

Vercel, React, Markdown

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 組織課題
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. README.mdの編集
   

   View Slide

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

   View Slide

10. もっと楽がしたい・・・
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. まとめ
    

    View Slide

15. やっぱりReact楽しい
    

    View Slide

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

    View Slide