jQueryでCSSのスタイル操作をする際に注意すべき実行タイミング

jQuery実装の際、中身は合っているはずなのに思い通りに動かず困った経験はありませんか？

ちなみに私はあります。（記述が間違っていることがほとんどですが…）

そんな問題を解決できるかもしれない、jQueryの実行タイミングの話をします。

今回の記事で登場する専門用語の解説をしておきます。

DOMとは「Document Object Model」の略です。
DOMとは「HTML や XML 文書を操作するための、たくさんの機能や規則のこと。」と言えます。
出典　Watablog

HTMLパースとは、HTML文法規則にのっとった文字列を、その文法に基づいて字句解析し、意味や構造を解釈することをいい、HTMLパースを行うプログラムのことをHTMLパーサといいます。
出典　SEO検索エンジン最適化

失敗例

HTMLでヘッダーの下に表示されるメガメニューを作り、jQueryの中にCSSを記述しました。

<head>
　<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
　<script src="js/megaMenu.js"></script>
</body>

/* メガメニュー */
$(window).on("load scroll resize", function () {
　//　jQueryでCSSを操作
});

上記のように作ったWebサイトのチェックを行なっていたところ、一部ブラウザで、jQueryで書いたCSSが反映されず、表示が崩れることがありました。

表示が崩れた理由

先にDOMが構成され、その後にjQueryが実行されていたため表示が崩れてしまったようです。

つまり、jQueryを実行するタイミングを早めてあげれば解決です。

今回行った対応策について解説していきます。

<script>タグのasync、defer属性

この属性を付けることで、scriptの読み込み方を変えることができます。

default（指定なし）
HTMLパースを中断してscriptをダウンロード・実行する（同期的処理）
async、defer
HTMLパースと同時進行でscriptをダウンロードする（非同期処理）

「async」や「defer」属性は、HTMLパースと同時進行（非同期）でscriptのダウンロードまでやってくれるので、

デフォルトに比べると、全体的に読み込み速度が早くなります！

※JavaScriptでdocument.write()メソッドを使用している場合は使用することはできません。

デフォルトでは、DOMに影響を与えるdocument.write()メソッドの記述があるかを調べるために、HTMLパースを中断しています。

async、defer属性はdocument.write()メソッドを無視する代わりに、HTMLパースを継続することができるためです。

そうすると次は、

asyncとdeferは何が違うの？

結局どっちが早いの？

などといった疑問が出てくるかと思うのですが、scriptの内容によって使い分ける必要があります。

async

scriptのダウンロードが終わり次第、記述順関係なく実行します。

jQueryなどの依存するライブラリを使用していない場合に使います。

<head>
　<!-- 使用例 -->
　<script src="js/scroll.js" async></script>
　<script src="js/pagetop.js" async></script>
</head>

defer

scriptを上から記述順に読み込んで実行します。

外部のライブラリを使用している場合や、依存するscriptファイルを上から順に記述している場合に使います。

<head>
　<!-- 使用例 -->
　<script src="https://code.jquery.com/jquery-3.3.1.js" defer></script>
　<script src="js/modal.js" defer></script>
</head>

修正点

<script>タグにdefer属性を指定し、<head>内に移動

<head>
　<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
　<script src="js/megaMenu.js" defer></script>
</head>

先ほど説明したように、scriptタグにdefer属性を追加します。

今回はmegaMenu.jsの中身をjQueryで記述していたため、deferを指定しました。

終わりに

実行タイミングについて見直すことで、jQueryの挙動を安定させることができました。

jQueryやJavaScriptのブラウザ動作で困った方は、一度見直してみてはいかがでしょうか？

技術と同じく日々進化し続けているロジカルスタジオに興味のある方はコチラから↓

フロントエンドエンジニア

即戦力募集！最新技術を追い求めるフロントエンドエンジニアをWanted!

ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー＆カール」によるTwitterなど、情報発信も強化しています。可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。私たちと一緒に、このビジョンを実現しませんか。

株式会社ロジカルスタジオ

Invitation from 株式会社ロジカルスタジオ

If this story triggered your interest, have a chat with the team?

株式会社ロジカルスタジオ's job postings

jQueryでCSSのスタイル操作をする際に注意すべき実行タイミング

Kanae Ozawa

株式会社ロジカルスタジオ / フロントエンドエンジニア

JavaScript jQuery 開発プログラミングフロントエンドエンジニア

20 Likes

jQueryでCSSのスタイル操作をする際に注意すべき実行タイミング

失敗例

表示が崩れた理由

<script>タグのasync、defer属性

async

defer

修正点

<script>タグにdefer属性を指定し、<head>内に移動

終わりに

株式会社ロジカルスタジオ

開発

Weekly ranking