Shopify水素とShopify酸素の詳細

公開: 2022-04-22

Shopifyはビジネスからますます人気を得ています。カスタマイズが非常に簡単で多くのメリットがあるため、企業はこの市場に参入して機会と顧客体験を拡大したいと考えています。したがって、オンライン市場は非常に競争が激しくなります。次に、企業は、Shopifyのストアをより魅力的で便利にして、競合他社に勝つ方法を考える必要があります。幸い、ShopifyはShopifyHydrogenとShopifyOxygenをリリースし、プロセスをよりシンプルにしました。したがって、この記事では、ShopifyHydrogenとShopifyOxygenの詳細な紹介を行います。

Shopify水素とShopify酸素について知っておくべきいくつかのハイライト機能

Shopify-水素

Shopify水素の概要

Unite2021で発表されたShopifyHydrogenは、開発者が本当にユニークなShopifyショップを作成できる新しいReactフレームワークです。水素はReactおよびJavaScriptベースのプラットフォームであり、マーチャントに強力なツールとコンポーネントを提供します。この追加機能により、ゼロから始めて、パーソナライズされたユニークなストアを作成できます。

Shopify水素のしくみ

水素を使用して、特注の店先を作成します。フレームワークとユーザーインターフェイスコンポーネントが含まれています。

水素のフレームワーク：Shopify水素は、サーバー側レンダリング（SSR）、ハイドレーションミドルウェア、およびクライアントコンポーネントのコード変換を含むViteプラグインを提供します。

水素ユーザーインターフェイスのコンポーネント：水素は、Shopifyの機能と概念をサポートするコンポーネント、フック、およびユーティリティのセットです。

情報源： Hydrogenは、ShopifyのStorefrontAPIからのデータを処理するように設計されています。コンポーネント、フック、およびユーティリティに提供されるデータは、Storefront APIのGraphQLタイプに一致し、準拠する形状を持っています。

Shopify水素は、サードパーティソースのデータを支援することができます。サードパーティのデータソースでHydrogenコンポーネントを利用する場合は、最初にサードパーティのソースからのデータをHydrogenコンポーネント、フック、ユーティリティで期待されるタイプに変更してから、コンポーネントに渡す必要があります。フック、およびユーティリティ。

水素を設定するために従うべきいくつかのベストプラクティス

マーチャントストアを高速でアクセス可能で発見しやすい状態に保つには、次の要素を考慮する必要があります。

パフォーマンス
アクセシビリティ
テスト

Shopify水素開発の指針となる原則があります

水素開発の指導原則

では、Shopify Oxygenとは何ですか？

簡単に言うと、Oxygenは、Shopifyが提供するホスティングサービスであり、Hydrogenで作成したストアをホストできるようにします。

Oxygenは、店舗が大量のトラフィックを処理して効果的なフラッシュ販売やソーシャルプロモーションを実行するのに役立つ支援です。大企業のWebサイトでさえ、トラフィックが多いとクラッシュする可能性があります。したがって、Oxygenは、サイトの円滑な運営を支援するよう努めています。

ShopifyHydrogenを使用すると間違いなく得られるメリット

カスタムストアフロントの確立を検討している場合、ShopifyHydrogenには次の利点があります。

デモストアテンプレート

Hydrogenは、Shopifyカスタムストアフロントの作成を簡単にするデモストアテンプレートを提供します。ボイラープレートコードが付属しており、Shopifyサイトとシームレスに統合されます。それに加えて、箱から出してすぐに完全な購入体験を提供します。

TailwindCSSユーティリティパッケージとShopifyHydrogenフレームワークのおかげで、デモストアテンプレートのスタイルを設定できます。 Tailwindのライブラリを使用するか、独自のスタイルを作成することができます。

パフォーマンスの最適化

最適な速度を実現するために、Shopify水素のアーキテクチャでは、クライアント側とサーバー側の両方で静的データと動的データの両方をフェッチできます。最先端のWebテクノロジーとWeb開発へのアプローチにより、次の機能を提供します。

速度とパフォーマンスのために、動的な情報を処理し、API呼び出しを最小限に抑えるための組み込みのキャッシュコントロールがあります。
サーバー側には、初期の負担を軽減する責任があります。
React Server Componentsは、意見が分かれているReactプロジェクトのデータフェッチおよびレンダリングフローです。 Reactサーバーコンポーネントを使用した開発エクスペリエンスははるかに優れています。コンポーネントはすばやくレンダリングされるため、作成時に作業内容を確認できます。

迅速な開発

水素は、Shopifyの基本的な技術スタックとコマーススキルを使用して、開発プロセスをスピードアップします。 Storefront APIと連携して動作し、高速なデータ取得を提供します。

水素には、Shopify固有のコンポーネント、フック、およびコマースツールが含まれています。それらは簡単にアクセスでき、高速で、すぐに使用できます。また、カスタムストアフロントを作成するために必要な初期の複雑さと定型文を減らすのにも役立ちます。

React.js

Shopifyは、動的で迅速なパーソナライズされたコマースの未来としてReact.jsを承認しました。そして、Reactに投資するというShopifyの決定は、業界にとって重要な声明であることは間違いありません。これにより、React.jsは、商取引の未来や物事の方向性としてさらに信頼できるものになります。

以下のアイテムを含むビギニングキットを受け取ります

水素の早期採用者は、サイトを稼働させるための基本的なテンプレートを受け取ります。これが最初のパッケージに含まれているもののリストです（ボタン、トグル、ナビゲーションを考えてください）。ほぼ確実に、アーリーアダプターとして自分でピースを構築する必要がありますが、開始するために使用できるビルド済みのコンポーネントがあります。

あなたのチームは水素の構築を助けることができます

Shopifyはecomm開発コミュニティからの助けを求めています。強力な社内開発チームがあれば、Shopifyの助けを借りて、最初から製品ビジョンを設計することができます。

作成したコンポーネントは再利用できます

スターターキットを使い始めると、最終的なサイト全体で必要に応じて再利用できる初期のパーツを設計できるようになります。

ただし、Shopify水素のいくつかの潜在的な欠点に直面する必要があります

Shopify水素の欠点

ゼロから作成した開発者が多いワークフロー

Shopifyフレームワークにはヘッドレスになるという利点がありますが、すべてを開発者がHydrogenで作成する必要があります。残念ながら、これは、技術者以外のチームメンバーがサイトのフロントエンドレイヤーに変更を加えることができないことを意味します。 12月のShopifyタウンホールイベントの時点で、2022年の計画には短期または長期のドラッグアンドドロップツールはありません。結局、この戦略は、すでにスタッフに多数の開発リソースを持っているeコマースチームに適している可能性があります。

現在、利用可能なストアプレビューはありません

独自のプレビュー環境を作成したい場合を除いて、現在作成している水素を動力源とするストアのリアルタイムプレビューを表示することはできません。これにより、eコマースチームの技術者以外のメンバーの実装が困難になる可能性があります。

Reactサーバーコンポーネントを使用します

水素の出力は、Reactサーバーコンポーネント（PWA）を使用しているため、静的なプログレッシブWebアプリにはなりません。プログラマーはShopifyサーバーのコードを作成する必要があります。補足として、ReactServerコンポーネントは非常にホットで新しいものです。あなたはそれを「ベータ」バージョンと呼ぶかもしれません。それは素晴らしいアイデアですが、開発者の大部分はまだ実際にはそれを受け入れていません。

独自のコンテンツ管理システム（CMS）をリンクする必要があります

現在、ShopifyとSanityは協力して、Hydrogenショップにコンテンツ管理システム（CMS）機能を提供しています。 Sanityは開発者向けのサードパーティCMSであり、チームがローコードコンテンツ管理用のコンテンツデータスキーマ（画像、テキスト、ビデオ）を構築できるようにします。

今日のアプリのサポートは最小限です

Shopifyは潜在的なアプリサポートの理想的なシナリオを定義していますが、サードパーティのアプリエコシステムは現在初期段階にあります。当面、APIがすべてに利用できるわけではありません。また、作成したものは、Shopifyアプリストアとすぐには互換性がありません。使用するShopifyアプリごとに、独自のミドルウェアを設計する必要があります。

水素は液体の代替品になるまでには長い道のりです

最近、多くの商人がShopifyのテーマに投資しています。次に、Shopifyは、ShopifyLiquidテーマとこれらのテーマが現在提供している非技術的な対象者から焦点を移します。 ‍可能なヘッドレスオプションとして水素を検討している場合は、このフレームワークがLiquidに追いつくまでに時間がかかる場合があることに注意してください。

結論

Shopify水素とShopify酸素の基本的な知識があることを願ってこの記事を順を追って説明します。素晴らしい機能がたくさんあるので、オンラインストアの効果を高めるために飛び込む価値は間違いありません。したがって、あなたのビジネスは顧客の需要を満たすことができ、インターネット環境で発展するためのより多くの機会をもたらします。ただし、このテクノロジーについてまだ混乱している場合は、Magesolutionがビジネスを支援するパートナーになることをいとわないでしょう。この分野での多くの経験により、Shopifyソリューションという最高のサービスを提供できると確信しています。したがって、ご不明な点がございましたら、お問い合わせください。