【Shopify.dev和訳】Themes/Best practices/File tranformation
この記事について
この記事は、Themes/Best practices/File tranformationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify テーマのファイル変換のベストプラクティス
ファイル変換は、好みの戦略やビルドツールを使ってコードを書いたりメンテナンスしたり、ブラウザのランタイムに最適化されたコンパイル済みのコードを出荷したりすることで、開発者の体験を向上させます。
例えば、スタイルシートを複数のファイルに分割し、それぞれを特定の UI 要素に対応させることで、メンテナンスを容易にすることができます。しかし、多数の小さなスタイルシートを読み込むと、1 つまたは 2 つの大きなスタイルシートを読み込むよりも遅くなります。そこで、ファイル変換機能を使って、小さなスコープのスタイルシートを、より少ない数の大きなバンドルにまとめる作業を自動化することができます。
ビルドプロセスの一部としてファイルを変換し、コンパイルされたコードをテーマとしてアップロードすることで、Shopify の管理画面からアクセスできるようになります。
以下は、テーマ開発者が実行したいと思うファイル変換の例です。
| ファイル | 利点 |
|---|---|
| カスタムファイル構造 > Shopify テーマのファイル構造 | コードメンテナンスの柔軟性 |
| SCSS > CSS | SCSS で記述し、Shopify と互換性のある CSS を出力する |
| SVG > snippet | SVG を HTML にインラインで含める |
| PostCSSの変換（Autoprefixer、cssnano、tailwindcss など） | リンティング、変数、トランスパイル、ブラウザの互換性 |
| セクションフォルダ > セクションファイル | セクションを Liquid、JS、CSS、JSON の各ファイルに分けて構築 |
| 重要なスタイルの自動計算とインライン化 | ロードブロックとなる CSS リソースを避ける |
| 最適化された JavaScript バンドル | 読み込み時間の短縮、ファイルサイズの縮小 |
| JavaScript、CSS、HTML の最小化 | 読み込み時間の短縮、ファイルサイズの縮小 |
ファイルに変換を行いたいのであれば、ソースコードと変換された、あるいはコンパイルされたコードの両方をどのように管理したいかを決める必要があります。オプションについて、またどのオプションが Shopify ツールで使用できるかについては、Shopify テーマのバージョン管理のベストプラクティスを参照してください。
また、JIT（Just-in-Time）ファイル変換を使用して、コンパイルされたコードへの変更を追跡する必要性を減らすことも検討できます。JIT 変換は、最適化された依存関係とリソースを実行時に提供することができ、バックフィルの必要のない統一されたコードベースを実現します。
コンパイルされたコードとマーチャントやアプリのカスタマイズ
テーマが Shopify にアップロードされた後、マーチャントはテーマエディタやコードエディタを使ってテーマをカスタマイズすることができます。アプリは、Asset REST 管理 API リソースを通じてテーマコードを変更することもあります。この場合、コンパイルされたコードは変更されているが、ソースコードは更新されていないという状況になる可能性があります。
コンパイルされたコードへの変更を特定し、その変更をソースコードに手動で埋め戻して、次回コードがコンパイルされたときに変更が維持されるようにする必要があるかもしれません。これは、パートナーやマーチャントの開発者がマーチャントのテーマに対して継続的なカスタマイズを行う場合に特に危険です。ファイル変換およびバージョン管理戦略を計画する際には、マーチャントまたはアプリケーションのカスタマイズの影響を考慮する必要があります。
コンパイルされたコードの変更をバックフィルする
コンパイルされたファイルに変更が加えられ、テーマがGitHub に接続されると、その変更はテーマの GitHub repo にコミットとして追加されます。このコミットを使用して、マーチャントの変更を識別し、バックフィルすることができます。
以下は、Shopify GitHub インテグレーションを使用して、バージョンコントロールに接続されているテーマの変更を識別し、バックフィルする例です。
ステップ 1：開発者がソースコードを書き、それをコンパイルする
テーマに対して、以下のスコープ付き JavaScript リソースを作成します。
export console.log('ScopeA JS is running!');
export console.log('ScopeB JS is running!');
import './scopeA.js'
import './scopeB.js'
これら 3 つのファイルは、最適な配信のためにバンドルされ、次のようなファイルになります。
console.log('ScopeA JS is running!');
console.log('ScopeB JS is running!');
これらのファイルはすべて GitHub のリポジトリにコミットされ、index.bundle.jsはShopify の GitHub インテグレーションを使ってストアと同期されます。
index.bundle.jsは、Liquid テンプレートの中で呼び出されます。
<script src="{{ 'index.bundle.js' | asset_url }}"></script>
この店やテーマは、マーチャントに引き継がれます。
ステップ 2：マーチャントはコンパイルされたコードを編集する
マーチャントがテーマの使用を開始する際には、Shopify 管理画面のコードエディタを使って、コンパイルされた JS バンドルに変更を加える必要があります。
console.log('ScopeA JS is running!');
console.log('ScopeB JS is running!');
+ console.log('ScopeB is way cooler than ScopeA');
この変更は、テーマに関連する GitHub のリポジトリにコミットとして同期されます。
ステップ 3：開発者はコンパイルされたコードの変更点を確認し、バックフィルを行う
テーマに別の機能を追加したいとマーチャントから連絡があったときに、Shopify 管理者からのコミットをレポで確認することができます。
コンパイルされたindex.bundle.jsに変更が加えられたため、ソースファイルに対応する変更が加えられない限り、ファイルが再コンパイルされるとこの変更は消えてしまいます。
コンパイルされたコードに加えられた変更が、コードが再コンパイルされた後も持続するようにするには、変更をソースコードに手動でバックポートします。この場合、index.jsを修正します。
import './scopeA.js'
import './scopeB.js'
+ console.log('ScopeB is way cooler than ScopeA');
ジャストインタイムのファイル変換
多くの変換は一方通行で、ソースコードをコンパイルされたコードに変換することはできますが、コンパイルされたコードをソースコードに変換することはできません。
Shopify テーマのコード管理戦略のほとんどは、コンパイル済みコードの変更を追跡し、ソースコードを埋め戻すことです。これは、マーチャントが目にするコードはファイル変換の結果であることが多く、マーチャントはストア運営の一環としてコードを編集したり、コードを注入するアプリをインストールしたりする可能性があるためです。
一般的なファイル変換タスクの一部には、ジャストインタイム（JIT）ファイル変換を使用することができます。JIT 変換は、インストールされている開発者ツールの機能を、ソースコードから最適化されたランタイムファイルを生成できるオンデマンドサービスに移行するものです。
ある種のファイル変換の必要性がなくなれば、作成、追跡、管理する必要のあるコンパイル済みファイルの数をさらに減らすことができます。マーチャントは、コンパイルされたコードではなく、ソースコードを編集することで、バックフィルの必要がない統一されたコードベースを実現できます。
JIT 変換の一般的な用途としては、JavaScript の最小化、CSS の最適化と最小化、サードパーティの依存関係の管理などがあります。
メリット
- この方法は Shopify GitHub インテグレーションに対応しています。
- メンテナンスはサービスオーナーが行います。
- この方法は、Shopify がサポートしているテーマのファイル構造内で動作します。
- マーチャントはソースファイルで作業することができ、結果としてバックフィリングを減らすことができます。
Shopify の最小化
Shopify は、JavaScript と CSS を自動的にミニマイズします。例えば、CSS ファイルを asset フォルダにmain.cssのように入れておきます。実行時に Shopify はそのファイルをコンパイルして最小化したものを配信し、ソースファイルが変更されるまでキャッシュしておきます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion