Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

での発表資料

# 技術

Vercel, React, Markdown

More Decks by レバレジーズTechアカウント

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 組織課題

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. README.mdの編集

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. やっぱりReact楽しい

    View full-size slide

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

    View full-size slide