Notionのスラッシュメニューを70行のJavaScriptで再構築した
Notionはまるで魔法のようです。スラッシュを入力するとメニューが表示され、オプションを選択するとテキストが変化します。
私はこの機能を、わずか70行のバニラJavaScriptで再構築しました。その魔法の正体は、シンプルなロジックです。
私のDesignFromZeroシリーズの9日目は、有名なUIに焦点を当てています。それらのツールをゼロから作り直すことで、その仕組みを理解しようとしています。
ロジックは3つの部分に基づいています：
- データモデル：ドキュメントはブロックのリストです。各ブロックは1つのデータを保持しており、それがそのタイプとなります。
- トリガー：入力のたびに、コードがテキストをチェックします。テキストがスラッシュで始まっていれば、メニューが開きます。
- フィルター：メニューはキーワードを使用してコマンドを探します。例えば「Heading 1」というコマンドには、「h1」や「title」といったキーワードが設定されています。これにより、検索がスマートに感じられます。
コードはナビゲーションにシンプルなトリックを使用しています。剰余演算子（modulo operator）を使うことで、矢印キーを使ってリスト内を移動できます。選択範囲が一番下まで行くと、一番上に戻るようになっています。
Enterキーを押すと、コードは2つのタスクを実行します：
- データのブロックタイプを更新します。その後、CSSが視覚的な変化を処理します。
- スラッシュとコマンドのテキストを消去します。
複雑な機能も、その基礎はシンプルなことが多いものです。スラッシュメニューは、単なるデータに接頭辞のチェックとタイプの切り替えを加えたものに過ぎません。
ライブデモはこちらから試せます: https://dev48v.infy.uk/design/day9-notion-slash.html
詳細な解説はこちらから読めます: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i