完成品: markdown-editor
リポジトリ: https://github.com/bellsanct/markdown-editor
背景
- 初級者向けにmarkdownを布教するにあたり、対象の環境に影響を与えずティーチングしたい
- web上でもエディタ・プレビュー同時に開けるツールはいくらでもあるけど自作してみたい
- こだわりすぎるとキリがないので超短期間で作る
-> 3日という具体的なタイムリミットを決めた - 最近はコードを書く機会がめっきり減ったのでリハビリがてら制作
導入方法
以下のどちらかでOK
- markdown-editorへアクセスする
- リポジトリから
git cloneしてローカル実行
使用技術
- React
- React Bootstrap(簡易的な装飾)
- Github Pages(デプロイ先)
ざっくりとした仕組み
- 画面全体を縦2つに割ってエディタ部とプレビュー部を用意
- useStateで入力監視からプレビューの再描画まで行う
- 読込・保存時の挙動を実装
使い方
- 手元のmarkdownを読み込みたい場合は「読込」ボタンから読み込む
- 画面左側のエディタ部にmarkdownテキストを記入
- リアルタイムで右側のプレビュー部にプレビューが表示されます
- 保存したいタイミングで「保存」ボタンを押す
-> 新規作成の場合、markdown-yyyymmdd.mdでファイル名が固定されます
これからやりたいこと
- 作成中の文面をlocalStorage等へ一時保存する機能の作成を行う
-> ブラウザ更新すると文面が飛ぶのは避けたい... - .mdだけでなく.markdownにも対応させる
- 全体的にマテリアルデザインへ変更を行う
- ファイル名を自由に変更することを可能にする
-> googleドキュメントライクだと理想 - プレビュー部を自由に展開・収納できるようにする
-> レスポンシブ対応の一環
まとめ
- 環境を汚さずとりあえずmarkdownに触れたい人におすすめ
- 久々にReactで簡易的なアプリを制作したけど楽しかった
-> ChatGPTにコードを部分的に書かせてかなりの時短ができた - 入門者用のトレーニング機能とか作っても良いかもしれない