Shopifyアプリ開発

Remixでデモアプリを作成（パンくずリスト編）

森本竜治

Remixフレームワークを使ったパンクズリストの作り方をご紹介しました。 Remixでパンくずリストの実装方法を徹底解説 パンくずリスト(breadcrumb)とは、Webサイトの階層構造を表すリストのことです。 設置することで、ユーザーがWebサイトのどの位置にいるのかを把握するのに役立ちます。 パンくずナビゲーション – CSS: カスケーディングスタイルシート | MDN  今回は、Remixでパンくずリストを作る方法について解説し... techgeek-school.com   今回は、実際にパンクズリストを実装したアプリを開発してみたいと思います。 目次 ページの追加 定数handleの実装 useMatchesの使用 パンくずリスト用コンポーネントの追加 まとめ ページの追加 今回作成するアプリの完成形は以下の通りです。 ページの構成としては親ページがあり、その下に子供一覧ページがあり、さらにその下に子供の詳細ページがあるという作りにしています。 当記事はパンくずリストの実現方法を学ぶことが目的なので、必要なページの追加などはパッと終わらせてしまいましょう。 まずは任意のディレクトリで、remixのプロジェクトを立ち上げます。 npx create-remix@latest breadclumnb-test ? What...

Remixでデモアプリを作成（パンくずリスト編）

森本竜治

Remixフレームワークを使ったパンクズリストの作り方をご紹介しました。 Remixでパンくずリストの実装方法を徹底解説 パンくずリスト(breadcrumb)とは、Webサイトの階層構造を表すリストのことです。 設置することで、ユーザーがWebサイトのどの位置にいるのかを把握するのに役立ちます。 パンくずナビゲーション – CSS: カスケーディングスタイルシート | MDN  今回は、Remixでパンくずリストを作る方法について解説し... techgeek-school.com   今回は、実際にパンクズリストを実装したアプリを開発してみたいと思います。 目次 ページの追加 定数handleの実装 useMatchesの使用 パンくずリスト用コンポーネントの追加 まとめ ページの追加 今回作成するアプリの完成形は以下の通りです。 ページの構成としては親ページがあり、その下に子供一覧ページがあり、さらにその下に子供の詳細ページがあるという作りにしています。 当記事はパンくずリストの実現方法を学ぶことが目的なので、必要なページの追加などはパッと終わらせてしまいましょう。 まずは任意のディレクトリで、remixのプロジェクトを立ち上げます。 npx create-remix@latest breadclumnb-test ? What...

Remixでパンくずリストの実装方法を徹底解説

森本竜治

パンくずリスト(breadcrumb)とは、Webサイトの階層構造を表すリストのことです。 設置することで、ユーザーがWebサイトのどの位置にいるのかを把握するのに役立ちます。 パンくずナビゲーション – CSS: カスケーディングスタイルシート | MDN  今回は、Remixでパンくずリストを作る方法について解説します。 実装方法 Remixでは useMatches 、 定数handle および Linkコンポーネント を組み合わせて使用することで、ネストしたルーティングに対してパンくずリストを作ることができます。 具体的な手順は以下の通りです。 1. パンくずリストを追加したいページに「 Linkコンポーネント を返す 定数handle 」を定義する 例えば app/routes/parent.tsx と app/routes/parent.children.tsx が存在するルーティングの場合、以下のような形でエクスポートします。 例: app/routes/parent.tsx import { Link, Outlet } from "@remix-run/react"; // ... export const handle =...

Remixでパンくずリストの実装方法を徹底解説

森本竜治

パンくずリスト(breadcrumb)とは、Webサイトの階層構造を表すリストのことです。 設置することで、ユーザーがWebサイトのどの位置にいるのかを把握するのに役立ちます。 パンくずナビゲーション – CSS: カスケーディングスタイルシート | MDN  今回は、Remixでパンくずリストを作る方法について解説します。 実装方法 Remixでは useMatches 、 定数handle および Linkコンポーネント を組み合わせて使用することで、ネストしたルーティングに対してパンくずリストを作ることができます。 具体的な手順は以下の通りです。 1. パンくずリストを追加したいページに「 Linkコンポーネント を返す 定数handle 」を定義する 例えば app/routes/parent.tsx と app/routes/parent.children.tsx が存在するルーティングの場合、以下のような形でエクスポートします。 例: app/routes/parent.tsx import { Link, Outlet } from "@remix-run/react"; // ... export const handle =...

[2024年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！

[2024年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！

uwixpdpy

最新版Shopifyアプリ開発チュートリアルはこちらから👇 参考記事 Shopifyアプリ開発 / 2026年対応 【2026年最新版】Shopifyアプリ開発チュートリアル｜公式テンプレート×React Routerで作り方を徹底解説 2026年度React Router版フレームワークでアプリを組み立てる流れを解説したチュートリアル記事 techgeek-school.com 記事を開く → 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になっています。 2022年11月にRemixとShopifyが提携し、実質Shopify開発専用のフレームワークとなりつつあるRemix。 今後、Shopifyアプリ開発エンジニアも、ShopifyカスタムストアフロントエンジニアもRemixで開発せざるを得ない状況になるかもしれません。 そこで、今回はRemixフレームワークでのShopify公式ドキュメントを解説していきたいと思います。 💡 推定完了時間 3時間 学べること このチュートリアルでは、次のことを学べます。 Shopify CLI を使用するRemixアプリの構築方法 テストストアにアプリをインストールする方法...

[2024年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！

uwixpdpy

最新版Shopifyアプリ開発チュートリアルはこちらから👇 参考記事 Shopifyアプリ開発 / 2026年対応 【2026年最新版】Shopifyアプリ開発チュートリアル｜公式テンプレート×React Routerで作り方を徹底解説 2026年度React Router版フレームワークでアプリを組み立てる流れを解説したチュートリアル記事 techgeek-school.com 記事を開く → 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になっています。 2022年11月にRemixとShopifyが提携し、実質Shopify開発専用のフレームワークとなりつつあるRemix。 今後、Shopifyアプリ開発エンジニアも、ShopifyカスタムストアフロントエンジニアもRemixで開発せざるを得ない状況になるかもしれません。 そこで、今回はRemixフレームワークでのShopify公式ドキュメントを解説していきたいと思います。 💡 推定完了時間 3時間 学べること このチュートリアルでは、次のことを学べます。 Shopify CLI を使用するRemixアプリの構築方法 テストストアにアプリをインストールする方法...

【徹底解説】Remixのチュートリアル（short編）

【徹底解説】Remixのチュートリアル（short編）

森本竜治

RemixのチュートリアルはTypeScriptを使用して実装を進める形になっていますが、もちろんTypeScriptを使用せずJavaScriptのみで進めることも可能です。 自分はTypeScriptにそこまで慣れていないので、今回はJavaScriptを使用してチュートリアルを進めてみることにしました。   Blog Tutorial (short)   当記事はチュートリアルの翻訳記事ではないので、自分なりの解釈で進め、随時解説を加えております。原文が気になる方はぜひ原文も読んでみてください。 前提条件 チュートリアル内にはGitpodの紹介もありますが、今回は自身のローカル環境にてチュートリアルを進めていくことにします。 ブログ執筆時点での使用端末は MacBook Pro で、OS は Monterey 12.5 になります。 また、RemixはReact.jsをベースにしたフルスタックのフレームワークなので、 JavaScriptの基本知識 React.jsの基本知識 がある方が対象となっております。 その他、Remix公式が定める前提条件が以下の通りです。 Node.js がインストールされていること(バージョン: 14.x.x または16.0.0以上) npm（バージョン: 7以上） コードエディタ (VSCode など)...

【徹底解説】Remixのチュートリアル（short編）

森本竜治

RemixのチュートリアルはTypeScriptを使用して実装を進める形になっていますが、もちろんTypeScriptを使用せずJavaScriptのみで進めることも可能です。 自分はTypeScriptにそこまで慣れていないので、今回はJavaScriptを使用してチュートリアルを進めてみることにしました。   Blog Tutorial (short)   当記事はチュートリアルの翻訳記事ではないので、自分なりの解釈で進め、随時解説を加えております。原文が気になる方はぜひ原文も読んでみてください。 前提条件 チュートリアル内にはGitpodの紹介もありますが、今回は自身のローカル環境にてチュートリアルを進めていくことにします。 ブログ執筆時点での使用端末は MacBook Pro で、OS は Monterey 12.5 になります。 また、RemixはReact.jsをベースにしたフルスタックのフレームワークなので、 JavaScriptの基本知識 React.jsの基本知識 がある方が対象となっております。 その他、Remix公式が定める前提条件が以下の通りです。 Node.js がインストールされていること(バージョン: 14.x.x または16.0.0以上) npm（バージョン: 7以上） コードエディタ (VSCode など)...