世の中、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>もっとベターな方法があるかもしれないが、簡易的な実装であれば上記のような分解で、処理の管理もしやすくなる。

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

ポップアップ系のUIをコーディングするとき、画面の中央に表示するためにCSSを触ったことのある方は多いと思う。 <code>position: fixed;</code> を使うケースが多いが、そのときは昔から次のようなコードを書いて対応してきた。<pre><code>.popup {
 position: fixed;
 margin: auto; 
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
}</code></pre> 冗長な書き方だけど、これを使ったことのある方は多いだろう。この配置を短く書く方法が <code>inset</code> である。iOS: 14.1以降の対応であるため、レガシーデバイスの対応には時期尚早だったりもするが、とりあえず下記のように書くことができるようになった。<pre><code>.popup{
&nbsp;&nbsp;position: fixed;
&nbsp;&nbsp;inset: 0;
&nbsp;&nbsp;margin: auto;
}</code></pre> 注意点としては、上２つの書き方は、ポップアップのサイズが指定されていないときは画面全体にポップアップが広がってしまうことだ。そのため、我々はまだ次の書き方を続ける必要がありそうだなと思った次第です。 <pre><code>.popup{
&nbsp;&nbsp;position: fixed;
&nbsp;&nbsp;left: 50%;
&nbsp;&nbsp;top: 50%;
&nbsp;&nbsp;transform: translateX(-50%)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; translateY(-50%);
}</code></pre>

position: fixed;を使ったときの上下左右の中央配置について

CSS Animation関連で <code>will-change</code> について２つのドキュメントを読んでみたので、その概要と一部和訳をしてみた。 <h2 id="h9a69984c5a">mdn</h2><h3 id="h9707d3a59a">概要</h3><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/will-change</a> まず一文目で本質的な説明がされている。<blockquote>The&nbsp;<code>will-change</code>&nbsp;<a style="background-color:#ffffff" href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank" rel="noopener noreferrer">CSS</a>&nbsp;property hints to browsers how an element is expected to change.&nbsp;Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.</blockquote><code>will-change</code>を使うことで、ある要素がどのように変化するのか、をブラウザにヒントとして渡すことができるようだ。それによって、その要素が変わる前に、ブラウザが最適なパフォーマンスをだすために準備ができ、最終的にUXの向上につながる、とのこと。これらのことから <code>will-change</code> について、以下の2つが推測される。<ul><li>UIの表層に出てくるプロパティではないこと (例外として、「使い方の注意ポイント」の最後の要素を参照)</li><li>ブラウザのパフォーマンスに関与する</li></ul> <h3 id="h9a4a7d4adc">使い方の注意ポイント</h3><blockquote>Proper usage of this property can be a bit tricky:</blockquote><code>will-change</code> の使い方は「つまづきやすい (= tricky)」と表現しており、以下に具体的な留意点がリストアップされている。<ul><li><code>will-change</code> を多くの要素に使わないこと。ブラウザはすでにさまざまな最適化を自動的に行なっているが、 <code>will-change</code> のような「強い最適化」が多発するとブラウザのリソースを消費し、ブラウジング体験に悪い影響を与えてしまう。</li><li><code>will-change</code> が不要になったら、削除すること。ブラウザが自動でおこなっている最適化は、対応が不要になれば最適化に関連する処理を削除するが、 <code>will-change</code> は明示的にエンジニア側で指定するものなので、利用する時だけ「生かす」ようにすること。</li><li>ある程度パフォーマンスの良いページには<code>will-change</code> を使って速度改善をしようとしないこと。つまり、他にもボトルネックとなっている改善点があるのであれば、そちらを優先的に対応すべきである。<code>will-change</code> は「last resort」とはこのことを言っている。</li><li>対象の要素が変化する前に<code>will-change</code> を付与すること。このプロパティが適用されると、ブラウザ側で最適化処理が走るため、変化の発生する要素にあらかじめ適用しておくこと。</li><li><code>will-change</code> はビジュアルの点でもページに影響することがある。付与された要素は stacking-context が生成されるが、あらかじめ別のプロパティが付与されて stacking-context が生成されている場合は変化なし。(*stacking contextについては<a href="https://ics.media/entry/200609/" target="_blank" rel="noopener noreferrer">こちらのページ</a>が非常にわかりやすくまとめられておりました)</li></ul> <h3 id="h512de7d259">使用例</h3>JS経由で <code>will-change</code> のプロパティを設定しており、アニメーションが完了したら <code>auto</code> を指定することで、メモリを解放している。<pre><code>var el = document.getElementById('element');

// 要素がホバーされたとき、will-change を設定する
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
 // アニメーションのキーフレームブロックで
 // 変更されるであろう最適化可能なプロパティ
 this.style.willChange = 'transform, opacity';
}

function removeHint() {
 this.style.willChange = 'auto';
}</code></pre> <h1 id="h44184115e8">Everything You Need to Know About the CSS&nbsp;<code>will-change</code>&nbsp;Property</h1><a href="https://dev.opera.com/articles/css-will-change-property/" target="_blank" rel="noopener noreferrer">https://dev.opera.com/articles/css-will-change-property/</a>の和訳をしてみようと思う。2014年に書かれた記事だが、非常に濃い内容だった。 <blockquote>In a nutshell,&nbsp;Hardware Acceleration&nbsp;means that the&nbsp;Graphics Processing Unit&nbsp;(GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the&nbsp;Central Processing Unit&nbsp;(CPU) to do. When a CSS operation is hardware-accelerated, it usually gets a speed boost as the page rendering gets faster.</blockquote>（"In a nutshell ..." と結論から完結に書いていて素晴らしい） CSS transformsを使うと利用される "Hardware Acceleration"について言及されており、”Hardware Acceleration" を使うと重たい描画処理をGPUが行ってくれるので、処理が早くなる、と書かれているが、まあこの辺りは皆さんの記憶のどこかにあると思う。 <blockquote>Hardware acceleration (a.k.a. GPU acceleration) relies on a&nbsp;layering model&nbsp;used by the browser as it renders a page. When certain operations (such as 3D transforms) are performed on an element on a page, that element is moved to its own “layer”, where it can render independently from the rest of the page and be&nbsp;composited in&nbsp;(drawn onto the screen) later. This isolates the rendering of the content so that the rest of the page doesn’t have to be rerendered if the element’s transform is the only thing that changes between frames, and often provides significant speed benefits. It is worth mentioning here that only 3D transforms qualify for their own layer; 2D transforms don’t.</blockquote>GPU acceleration (= 以降、GPU)は、レイヤーモデルを利用している。3D transformのような特定の処理が、ページ内の要素に対して行われる時、その要素は自分自身の「レイヤー」に移動する。そうすると、ページ内の他の要素とは独立して描画されることが可能になる。独立されるということは、この要素に変化が発生してもページ内の他の要素のレイアウトには影響せず、ムダな再描画を防ぐことができることを意味している。注意すべき点は、この仕様は3D transformationのみに適用され、2D transformationには適用されない。。昔、<code>transform: translate3d(0, 0, 0);</code> のようなおまじない的なものがあったが、それはこの理由に関連していたみたいだ。つまり強制的にGPUに処理をさせるためのハックですね。とはいえ注意する点として、GPUの処理はメモリを多く消費してしまう、特にモバイル端末 (追記: この記事が書かれたのが2014年なので、現在は定かではないが非力デバイスでの利用には要注意といったところかな)。 <blockquote>In order to avoid layer-creation hacks, a new CSS property has been introduced, that allows us to inform the browser ahead of time of what kinds of changes we are likely to make to an element, thus allowing it to optimize how it handles the element ahead of time, performing potentially-expensive work preparing for an operation such as an animation, for example, before the animation actually begins. This property is the new&nbsp;<code>will-change</code>&nbsp;property.</blockquote>こうしたハックを防ぐために、 <code>will-change</code> が生まれた。 <blockquote>In order to avoid this delay, you can inform the browser about the changes some time&nbsp;before&nbsp;they actually happen. That way, it will have some time to prepare for these changes, so that when these changes occur, the element’s layer will be ready and the transform animation can be performed and then the element can be rendered and the page updated in quickly.</blockquote>これから発生する「変化」についてブラウザに知らせておくことで、ブラウザ側は事前に準備をしてアニメーションのような処理もスムーズに行うことができる。 <blockquote>will-change: transform, opacity;</blockquote>例えば、上記の記述によって、 <code>transform</code> と <code>opacity</code> のアニメーションの最適化をおこなってくれる。 <h4 id="h86c1eb6dfa">注意点</h4>1. 特定の要素のみに適用すべきなので、下記のような記述はNG<pre><code>*,
*::before,
*::after {
	will-change: all;
}</code></pre> 2. 準備する時間をブラウザに与えましょう <code>will-change</code> の仕様についてもう一度確認をしましょう。<blockquote>The&nbsp;<code>will-change</code>&nbsp;property is named like that for an obvious reason: informing the browser about changes that&nbsp;will&nbsp;occur, not changes that&nbsp;are&nbsp;occuring.</blockquote>ウィル (will) という点がポイント。are ではなく will。つまり <code>will-change</code> を使うことで、我々が与えようとしている「変化」を最適なパフォーマンスで実行してください、とブラウザに指示をしている。さらに、 <code>will-change</code> という指示による最適なパフォーマンスをするためにはブラウザにとって、少し時間が要る点も忘れてはいけない。つまり変化が起こる直前に <code>will-change</code> を渡しても、効果はないどころか悪い影響をあたえてしまうこともある（不要なレイヤーを作成してしまう）。 <pre><code>.element:hover {
	will-change: transform;
	transition: transform 2s;
	transform: rotate(30deg) scale(1.5);
}</code></pre>上記はブラウザに対して、このような指示をしていることと同じだ。「今起こっている変化に対して、あらかじめメモリを確保して準備をしてくれ」変な日本語になってしまったが、 <code>will-change</code> の本来の用途は「これから起こる変化に対して、あらかじめメモリを確保して準備をしてくれ」なのだ。つまり、上のコードの例はナンセンスということになる。正しく使うためには、先に <code>will-change</code> を指定しておき、その後変化を与える必要がある。 例えば、要素がクリックされたときに rotate させたい場合、CSS的には <code>:hover</code> のあとに <code>:active</code> が適用されるとすると下記のようなコードが正しい <code>will-change</code> の使い方になる。hover時に <code>will-change</code> を適用させることで、その次のインタラクション (= <code>:active</code>) 実行までに <code>transform</code> の準備を指示することができる。<pre><code>.element {
	/* style rules */
	transition: transform 1s ease-out;
}
.element:hover {
	will-change: transform;
}
.element:active {
	transform: rotateY(180deg);
}</code></pre> <h4 id="h8c8727fac3">Change が完了したら <code>will-change</code> は削除しよう</h4>すでに述べたことだが、 <code>will-change</code> は、描画処理をスムーズに行うために明示的にメモリを確保しておく仕様なので、使い終わったあとは削除することで、いわゆるメモリを解放してあげる必要がある。スタイルシートに直書きしてしまうと、当然ながら削除することはできないためJSを使う必要がある。例外としてスタイルシートに書いても良いケースとしては、ユーザーが何度も操作する可能性のあるUI（メニューなど）でかつ要素数が少ないものが挙げられる。そもそも <code>will-change</code> を削除する必要はないため。

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