ツリー状のテキストエディタを作成した話

ご挨拶

皆様ごきげんよう。エビサンドです。
先日AWS SAAの取得のために学習をしていたのですが、自分の勉強スタイルについて見直す思わぬ機会でもありました。
ノートを取るのは時間がかかるので非効率だなあ、しかしメモ帳は後から見直すにはスクロール量も多くて不便だなあと感じていました。
ということで自分が使いやすいと考えるテキストエディタを作ってみることにしました。

概要

画面右上のボタンからエディタとブラウザを切り替えることができます。
私の使い方では基本はブラウザを利用し、エディタでは複数行のコピペなどをしています。

ファイルを開くボタンからマークダウンやマインドマイスターのマインドマップを読み込むことができるようになっています。

新規ファイルの作成は緑のプラスボタンから行い、ファイル選択は左のドロップダウンから行います。

ブラウザ表示ではタブインデントで階層化されたテキストを折りたたむことができるようになっているのが最大のポイントで、AWS SAAの学習では
カテゴリ
　　└サービス名
　　　　├サービス概要
　　　　├他サービスとの比較
　　　　└試験ポイント
のようにまとめ、問題演習を行ってClaudeに質問したポイントなどを随時まとめたりしていました。

どのように作成したか

コードのほとんどはClaude Codeを利用して実装を行いました。
Next.jsで作成し、Vercelにデプロイしています。
細かいレイアウトは何度か試してうまく行かなかったので手作業で調整しました。

工夫した点

・上部に一括開閉ボタンを設けたことで、カテゴリ内のサービスの一覧だけを見たり、全ての詳細を見るのが少ない手間でできるようになったこと
・長時間見てもチカチカしないように暗い背景を採用したこと
・細かくキーボードショートカットを用意して極力マウス操作をなくしたこと

もし今後やるとしたら

・テーマの切り替え(現状ダークテーマのみ)
・キーボードだけで要素の並べ替えができるように(Shift+上下キーとか？)
・LocalStorageではなくユーザ登録をして複数デバイス間の同期