世の中、SPAベースの開発が完全に主流になりつつあるように謳われているが、レガシーページの対応などで相当な数のページがVanilla JSをつかってゴリゴリDOM操作をしているのではと思っている。その際、どうやって描画処理を実行するかについてとても簡単ではあるが、コードの可読性をあげる個人的なTipsを紹介したいと思う。（←もっとベターな方法があれば知りたいです） 例えば、ポップアップを表示/非表示を切り替える処理を考えてみる（簡単のため <code>display</code> プロパティで制御）。 下記では <code>.popup-open-button</code> をクリックすると、ポップアップが開き、 <code>.popup-close-button</code> をクリックすると閉じる処理を想定している。<pre><code>const popup = querySelector('.popup')
const openButton = querySelector('.popup-open-button')
const closeButton = querySelector('.popup-close-button')

openButton.addEventListener('click', () =&gt; {
 popup.style.display = 'block'
})

closeButton.addEventListener('click', () =&gt; {
 popup.style.display = 'none'
})</code></pre> まあこんな感じでかける。シンプルな実装であればこんな感じでいいと思うが、実際は表示する条件が追加されることがほとんどだ。そのとき、イベントハンドラー内で <code>if</code> 文を追加してしまうと、あっというまに可読性・メンテナンス性が失われてしまう。<pre><code>openButton.addEventListener('click', () =&gt; {
 if (条件A) {
 popup.style.display = 'block'
 } else {
 popup.style.display = 'none'
 }
})</code></pre> そこで使える考え方が、処理の分解だ (「責務の分解」とか言われてますね。小難しく聞こえるので、個人的にはあまり好きではない)。つまり表示・非表示の状態は別のオブジェクトで管理し、画面描画についても別のメソッドに切り替えてあげることで、読みやすいコードにすることができる。 <pre><code>const state = {
 isOpen: false,
}

function render (state) {
 const { isOpen } = state;
 if (isOpen) {
 popup.style.display = 'block'
 } else {
 popup.style.display = 'none'
 }
}
 
openButton.addEventListener('click', () =&gt; {
 state.isOpen = true;
 render(state)
})</code></pre>もっとベターな方法があるかもしれないが、簡易的な実装であれば上記のような分解で、処理の管理もしやすくなる。

画面描画メソッドの実行について

ブラウザの戻るボタンを押した時に、ある処理を実装することがあった。そのときに立ちはだかるHistory APIなるもの。。 さくっとググってみた。 「ふむふむ、pushStateには引数を３つとるんだな。」 「引数にnullが２つ。第３引数にURLを設定？」となんとなく近寄り難い印象。 せっかくなので調べてやろうじゃないか。 <a href="https://developer.mozilla.org/ja/docs/Web/API/History_API" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/History_API</a> MDNによると、Windowオブジェクトは、ブラウザのセッション履歴を <code>history</code> を使って管理しているとのこと。 前ページや次のページ移動は、このような感じでかける。<pre><code>window.history.back() 

👇このようにも書ける
window.history.go(-1)</code></pre> <pre><code>window.history.forward()

👇このようにも書ける
window.history.go(1)</code></pre> 現在のページを再読み込みする、こんな感じ。<pre><code>window.history.go(0)

👇このようにも書ける
window.history.go()</code></pre> 「あれ、以外と直感的に書けるじゃないか。」と少し気が楽になってきた！ ちなみに、 <code>length</code> で履歴スタックの中のページ数を取得できる。<pre><code>window.history.length</code></pre> ここまでは順調！と思ったら、いきなり先ほどの <code>pushState</code> のサンプルコードが。。 そこで、<a href="https://developer.mozilla.org/ja/docs/Web/API/History" target="_blank" rel="noopener noreferrer">History インターフェースのページ</a>をみます。 <h2 id="h97ada4377e"><code>History</code> のプロパティ</h2><code>length</code> : integer 閲覧しているページを含むセッション履歴の数を <code>integer</code> で返す。新しくタブでページを読み込んだとき、 <code>length</code> の値は <code>1</code> となる。 <code>scrollRestoration</code> : 'auto' | 'manual' 戻る、進む操作のときスクロールの位置を復元するときの設定する。 	<code>auto</code> 	ユーザーがスクロールしたページ上のスクロールの位置が復元されます。 	<code>manual</code> 	ページ上のスクロール位置は復元されません。ユーザーが手動でその位置までスクロールする必要があります <code>state</code> : any 履歴スタックの最上位にあるものの状態を返す。履歴スタックの一番上の状態です。 この値は <code>pushState()</code> や <code>replaceState()</code> が使われない限り <code>null</code> です。 <h2 id="ha2907af1b5"><code>History</code> のメソッド</h2><code>back</code> ユーザーがブラウザーの戻るボタンをクリックしたときと同じく、セッション履歴の一つ前のページへ移動します。&nbsp;<code>history.go(-1)</code>&nbsp;と同等です。 <code>forward</code> ユーザーがブラウザーの次へボタンをクリックしたときと同じく、セッション履歴の一つ次のページへ移動します。これは&nbsp;<code>history.go(1)</code>&nbsp;と同等です。 <code>go</code> 現在のページからの相対位置で識別されるページを非同期に読み出します。たとえば、&nbsp;<code>-1</code>&nbsp;は前のページで&nbsp;<code>1</code>&nbsp;は次のページです。範囲外の値を指定した場合 (例えば、セッション履歴に以前訪問したページがないときに&nbsp;<code>-1</code>&nbsp;を指定した場合)、このメソッドは暗黙に何もしません。&nbsp;<code>go()</code>&nbsp;を引数なし、または&nbsp;<code>0</code>&nbsp;の値で呼び出すと、現在のページを再読み込みします。 <code>pushState</code> : (state, unused, url?) 指定したタイトルとURLをセッション履歴に追加する。 <code>state</code> <code>pushState()</code> によって作られる新しい履歴項目に関連したJavaScriptオブジェクト。ユーザーが新規のstateに移動した時はいつも、 <code>popstate</code> が発行され、イベントのstateプロパティは、履歴のstateオブジェクトのコピーを含む。 <code>url</code> 新しい履歴項目のURLは、この値で与えられる。 <code>replaceState</code> 履歴スタックの最新の項目が、指定したデータ、タイトル、指定されていれば URL になるよう更新します。

記憶に残ったことを忘れないために色々メモとしてのこしていきます