Shopify テーマに外部JSライブラリを追加する
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は、Shopify テーマにサードパーティ製の外部JSライブラリを追加する機会があったため、その方法と注意点をまとめたいと思います。
Shopify についてはこちらの記事で紹介しましたのであわせて読んでいただけたらと思います。
外部JSライブラリを追加する方法
前提として、Shopify Theme Kit で Shopify デフォルトの Debut テーマを編集する時のやり方です。Shopify Theme Kit についてはこちらの記事もご覧ください。
Shopify で外部JSライブラリを追加するには、まず追加したいJSファイルをテーマファイル内の assets/ ディレクトリに追加します。
この時、 assets/ ディレクトリにサブディレクトリは追加できないため、ディレクトリ直下に配置する必要があるところが注意点です。
例えば assets/scripts/vendor.js のようにJSファイルを配置した場合、theme deploy を実行すると以下のようなエラーが出ます。
17:35:23 [development] processing assets/scripts/vendor.js
[development] (assets/scripts/vendor.js) Theme files may not be stored in subfoldersassets/ 直下に置いたJSファイルは layout/theme.liquid で読み込みます。
テーマファイルでのJSの読み込み方法については「外部JSを使用する各ファイル内で読み込む」「全ページに適用されるように layout/theme.liquid 内で読み込む」という2つの方法が考えられますが、
- 後述する Debut テーマデフォルトの読み込み方法に合わせる
- 外部JSファイルを全ページで読み込みキャッシュすることによりページ読み込みのパフォーマンス向上を向上させる
この2点を考慮し、後者の方法でJSを読み込む方針としました。
layout/theme.liquid でのJSの読み込みは Debut テーマのデフォルトで以下のようになっています。
<head>
...
<link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">
<link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
...
</head>
...
<body>
...
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
...
</body>
<head>内で<link rel="preload" as="script">によりスクリプトを先読みをする<body>内で<script defer="defer"></script>もしくは<script async="async"></script>により読み込むJSの特性に合わせ非同期もしくは遅延実行させる
これにより、
- ページ読み込みのパフォーマンス向上、Core Web Vitals の改善
- JS読み込みタイミングのコントロール
の2つを可能にしています。
この Debut デフォルトのコードにならい、後から追加するスクリプトも同様に追加するようにしました。
<head>
...
<link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">
<link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
<link rel="preload" href="{{ 'vendor.js' | asset_url }}" as="script">
...
</head>
...
<body>
...
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
...
</body>
今後 Shopify のテーマに外部JSライブラリを追加することがある場合は、この方針で進めるようにしました。
まとめ
今回は、Shopify テーマにサードパーティ製の外部JSライブラリを追加する方法とその注意点についてまとめました。
Shopify のテーマファイルを運用している方の参考にしていただけたら幸いです。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
