Tabキーでアンインデントを操作するときの期待的イメージ

https://scrapbox.io/files/635b7f8c2dca0a001fc28cb2.png

たとえば、こういうアウトラインでカーソルがch3のときにshift + tab でアンインデントするとする。そのとき、ユーザーが想像する結果は二種類ある。

その１：この項目単体を自身の親項目の兄弟項目に位置づける

https://scrapbox.io/files/635b7fc14bea99001d7d5541.png

WorkFlowyなどのアウトライナーでは一般的な挙動

その２：その項目をそのまま上位に持っていき、子要素を連れていく

あまり見かけない処理

この挙動だと、もう一度Tabを押したときに、元の状態に戻ってくれる

大抵のアウトライナーはその１の挙動なのでそれが当たり前になっているが、「見た目で直感的」な挙動はその２だろう。

どちらが良い、という話ではない。

で、こうした機能を実装するとき、HTMLのUlを使うとする。

code:index.html

<li>parent<ul>

<li>ch01</l1>

<li>ch02</l1>

<li>ch03</l1>

<li>ch04</l1>

<li>ch05</l1>

</ul></li>

「その１」の挙動であれば、対象のli要素を、その親要素の親要素であるUlにappendする、というだけで事足りる。

一方で「その２」の挙動であれば、まず、対象のliを自分の親要素・親要素にappendした上で、もともと自分よりも下に位置していた子要素（元自分の兄弟要素）すべてを自分にappendすることになる（順番は逆でもいい。自分に自分より後の兄弟を自分のappendしてから、自分を自分の親親にappendする）。

明らかに「その１」の方が処理が単純である。

単純な方が、混乱したエラーも出にくい

よほど「その２」の挙動の方が使い勝手があがるのではない限り、その１として実装される場合が多いだろう。