以前から存在は知っていたのですが、しっかりと学んだことがなかったので今回記事にまとめながら自分でも理解を深めるためにコンテナクエリについて調べてみました。

コンテナクエリは今までのメディアクエリとは異なり「画面サイズ」ではなく「親要素のサイズ」に基づいてスタイルを切り替える仕組みです。

現在主流のコンポーネントベースでの開発では、コンテナクエリをマスターすることでより楽に実装が可能になります。

コンテナクエリの使い方

まずは、簡単なデモを通してコンテナクエリについての理解をしていきます。

HTMLは下記のようにします。

<div class="container">
  <p class="child">The text color turns red when the width is 500px or more.</p>
</div>

.containerの要素の幅が500px以上のときに、p要素の文字の色を赤色に変化させます。

コンテナクエリを使うための手順はこちらです。

コンテナを決定する（container-type）

コンテナとなるクラスにcontainer-typeプロパティを指定します。必ず親である必要はなく祖先要素であればOKです。

.container {
　container-type: 〇〇;
}

コンテナの基準の方向を指定する（inline-size / size）

どの方向を基準にしてスタイルをあてるかを決めます。

• container-type: inline-size;
  • インライン方向のサイズに適用
• container-type: size;
  • インライン方向・ブロック方向のサイズに適用

インライン方向・・・横幅を指します
ブロック方向・・・縦幅（高さ）を指します

オカ

container-type: size;の使い所がわからない。
多くはcontainer-type: inline-size;で良さそう。

クエリを書く（@container）

下記のように@containerと書いてスタイルを定義します。

@container (min-width: 500px) {
  .child {
    background-color: red;
  }
}

まとめ

なんとなく使い方についてはわかったのであとは実際にプロジェクトで使ってみて便利な使い方などがわかってきたらブログを更新していければと思います！

入社前の私の状態

以前、ECの受託制作会社で働いておりました。ShopifyをメインにECサイト制作しておりました。

どんな会社だったか

皆さん心が穏やかで、とても働きやすい環境でした。

内定をもらった時にちょうど三男が生まれた頃だったのですが、当時のマネージャーに

「育休取らなくて大丈夫？」

といってもらったのですが衝撃でした。流石に育休は取らなかったのですが組織としてそういうのが当たり前に取れる環境なんだろうなと思いました。

退職時には、

「業務委託とかでは働きたいとかないですか？」

会社を辞める人間に対しても温かく声をかけてくれるところが嬉しかったです。

技術的にもレベルの高いメンバーが多く、働いていて学ぶことが多かったですね。

どんな業務をしていたか

勤めていた会社では、デザイナーとエンジニアという職種の2つを経験しました。

入社した当初はデザイナーとし働いていたのですが、基本的にはフロントエンドの業務を担当しておりました。

デザイナー期

PHPで作られたシステムだったのですが、かなり規模がちょっとCSSを変更するのも大変でした（何を言っているのかわからないと思いますが…）

大量のCSSが読み込まれていたりidにCSSが当たっていたり、同じクラスが存在したり。あとは、PCとSPでテンプレートファイルが分かれていたので倍開発する必要があるのも苦労ポイントでした。

技術的な大変さは正直そこまで多くなかったのですが、不具合が出ないようにかなり慎重に開発を進めないといけないのが大変でした。また、この頃にE2Eのプロジェクトにアサインしてもらい、Playwrightを導入しました。

Webサイト制作だとなかなか経験することがなかったのでいい経験になりました。

エンジニア期

2025年2月にJOBチェンをして正式にエンジニアとして開発チームにジョインしました。

大きく業務は変わらなかったのですが、フロントエンドの開発業務にプラスして、日々の監視や不具合が発生したときに開発チームでトリアージするなどそのあたりの業務が増えました。

また、バックエンドの開発も少し携わるようになりました。APIの改修なども行うことができました。

あとは、フロントをPHPからNext.jsに移管するプロジェクトが動いていたのでそのプロジェクトも進めました。

コンポーネント開発、Storybook、jestなどいわゆるモダンフロント開発を行うことができて楽しかったです。

これからについて

2026年の2月からニュージーランドに移住します。移住といっても完全移住というわけではなく3~4年の期間での移住を考えています。

いつか家族で海外に住みたいなと思っていたのですが、なるべく子供が小さいうちに行きたかったのでこのタイミングで行くことに決めました。

完全移住の予定ではないですが、永住権を取ることができるルートを考えて大学院への進学を決めて貯金も頑張りました。かなーーーーーりお金を払うので正直痛いのですが、これは僕だけの教育コストではなく、家族全員が英語を学べるチャンスと考えたら安い！と思うようにしています。

ちなみに、大学院はニュージーランドのクライストチャーチの近くにあるLincolin Universityという大学です。
コースは、Master of Applied Computingとなります。
（コースのURL: https://www.lincoln.ac.nz/study/study-programmes/programme-search/master-of-applied-computing ）

学生の間もアルバイトが週25時間できるようなのでできれば現地でアルバイトの仕事ができればいいなと考えています。卒業後も現地の企業でエンジニアとして働くことを目標に頑張ります！

そのあたりについても発信できればと思っています。

とはいえ、日本からの仕事も受けようと思っていますのでお困りの方がみえたらぜひお声掛けください！

また簡単にこれからの予定について下記に示しておきます。

予定
・2026年2月　僕1人でニュージーランド / 事前英語コースに入る
・2026年6月　一時帰国
・2026年7月　家族で移住 / 大学院スタート
・2027年12月　大学院卒業
・2029年7月　帰国

はじめに

Shopifyの商品ページでは、特定のタグがついている商品に対してラベルを表示することができます。しかし、デフォルトの contains を使った判定では 大文字・小文字が区別される ため、意図した通りにラベルが表示されないことがあります。

今回は、ShopifyのLiquidテンプレートで タグの大文字・小文字を問わず判定する方法 を紹介します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

これまでのコードと問題点

従来のコードでは、商品タグに基づいて NEW や LIMITED などのラベルを表示していました。

{% if context_item.tags contains 'new' %}
  <span>NEW</span>
{% endif %}

{% if context_item.tags contains 'Limited' %}
  <span>LIMITED</span>
{% endif %}

{% if context_item.tags contains 'sale' %}
  <span>SALE</span>
{% endif %}

問題点

このコードでは contains を使ってタグを判定していますが、ShopifyのLiquidでは 大文字・小文字を区別して比較 します。そのため、

• NEW → OK（contains 'new' が true）
• New → NG（contains 'new' が false）
• sale → OK
• Sale → NG

といった問題が発生し、ラベルが正しく表示されないことがあります。

解決方法：タグを小文字に統一して判定する

この問題を解決するために、タグのリストを すべて小文字に変換 してから判定するように修正します。

修正後のコード

{% assign tags_downcase = context_item.tags | join: ',' | downcase | split: ',' %}

{% if tags_downcase contains 'new' %}
  <span>NEW</span>
{% endif %}

{% if tags_downcase contains 'limited' %}
  <span>LIMITED</span>
{% endif %}

{% if tags_downcase contains 'sale' %}
  <span>SALE</span>
{% endif %}

仕組みの解説

この修正では、タグのリストを以下の手順で変換しています。

1. context_item.tags | join: ',' → タグをカンマ区切りの文字列に変換
2. | downcase → すべて小文字に変換
3. | split: ',' → 再び配列に変換

この処理によって、タグが すべて小文字のリスト になるため、contains を使った比較時に 大文字・小文字を問わず判定 できるようになります。

動作確認

例えば、以下のようなタグが登録されている商品があったとします。

Tags: NEW, Sale, Limited

この修正後のコードでは、以下のように正しくラベルが表示されます。

NEW → NEW のラベルが表示される（大文字・小文字の違いを無視）
Sale → SALE のラベルが表示される
Limited → LIMITED のラベルが表示される

まとめ

今回の修正では、Liquid の contains が 大文字・小文字を区別する問題 を解決しました。

downcase を活用してタグリストを小文字に統一
split で配列の形を維持
contains で大文字・小文字を問わずタグを判定

これにより、Shopifyの商品タグの判定をより柔軟に行うことができます！

今後もLiquidの活用方法を学びながら、より便利なストアカスタマイズをしていきましょう！

useStateの公式ドキュメントを読み、自分なりにまとめておきます。
また、実際にサイト構築する際にも使用したのでその時のコードを例に理解を深めたいと思います。

useStateとは

useStateとは、コンポーネントにstate変数を追加するためのReactフックになります。
状態管理を行うことができ、非常に使用頻度の高いフックになります。

基本の形

const [state, setState] = useState(initialState)

stateが状態変数で、setStateが更新関数になります。

• 状態変数
  • 現在の値を保持する
• 更新関数
  • インタラクション(inputのチェンジイベントetc)に応じて、新しい値を受け取り現在の値を更新する

実際に使ってみた

実際にサイト構築を「Next.js×WordPress」で行った時に、useStateを使う場面がありました。

シンプルなトグルですね。今回は下記のように実装しました。

import { useState } from 'react';

export default function ToggleMenuExample() {
  // useStateを使用して、showMenu状態（boolean）を管理します。
  const [showMenu, setShowMenu] = useState(false)

  return (
    <div className='menu-container'>
      <button onClick={() => setShowMenu(!showMenu)}>
        <Image src='icon.svg' />
      </button>
      {showMenu && <Menu />}
    </div>
  );
}

useState(false)によってshowMenuが初期値falseで設定されています。setShowMenuはこの状態を更新する関数です。ボタンがクリックされると、setShowMenu関数が呼ばれ、showMenuの値がトグルされます（true⇔false）。この状態によって、メニューが表示されるか隠されるかが決まります。

まとめ

過去にこんな記事も書いておりました。
ここではもう少し複雑な実装で説明をしていたのでよければどうぞ。

Reactで使用されるカスタムフックについて学んだものをまとめます。

公式ドキュメント

カスタムフックとは？

Reactでは、多くのHooks（関数）が提供されています。
さらに、開発者が独自でHooksを作ることができます。そのHooksのことをカスタムフックと呼んでいます。

考える人

わざわざカスタムフックを使う理由ってなに？？

また、カスタムフックを使用する際には、ルールがあるので気をつけておきましょう。

1. ファイル名・関数名をuseから始める（慣習）
2. 関数は基本的に、useCallbackでメモ化する
3. 基本的に、変数や関数を複数返却するので、配列やオブジェクトでまとめて返却する

ということで、実際にカスタムフックを使ってみようと思います。

実装例

今回は、モーダルの実装をカスタムフックを使って行ってみます。実際に動くコードも最後に貼り付けておきます。カスタムフックを使わない例を記述した後に、カスタムフックにしていこうと思います。

まずは、カスタムフックを使わないときの最終的なファイル構成は、以下の通りになります。

 components
┗┗modal
　┗Modal.jsx
App.jsx

まずは、App.jsxに下記の通り記述します。ボタンを押した時に、toggle関数が実行されて、isShowの状態を切り替えております。

そのstateをModalコンポーネントに渡しています。

import "./styles.css";
import { useState } from "react";
import { Modal } from "./components/modals/Modal";

export default function App() {
  const [isShow, isSetShow] = useState(false);
  const toggle = () => {
    isSetShow(!isShow);
  };
  return (
    <div className="App">
      <h1>モーダルを開く</h1>
      <button onClick={toggle}>ボタン</button>
      <Modal isShow={isShow} />
    </div>
  );
}

そして、isShowのStateを受け取るModalコンポーネントの記述です。
3項演算子でtrueのときに表示、falseのときにはnullを返すように記述しています。

export const Modal = (props) => {
  const { isShow } = props;
  return (
    <>
      {isShow ? (
        <div className="modal__content">
          <img src="https://source.unsplash.com/random/" alt="" />
        </div>
      ) : null}
    </>
  );
};

いったんこれで、先程のモーダルの表示・非表示をボタンを押すことで制御ができるようになりました。

では、ここからカスタムフックにしていこうと思います。

下記が最終的なカスタムフック化したときのファイル構成になります。

▼カスタムフック
 components
　┗ modals
　　┗Modal.jsx
　┗ hooks
　　┗useModal.jsx
App.jsx

実はあまりやることはないのですが、App.jsxに記述しているモーダルを開く・閉じるの処理の部分をuseModal.jsxに書き写します。

import { useState } from "react";

export const useModal = () => {
  const [isShow, isSetShow] = useState(false);
  const toggle = () => {
    isSetShow(!isShow);
  };
  return { isShow, toggle };
};

そして、App.jsxでカスタムフックをインポートします。

import "./styles.css";
import { useModal } from "./hooks/useModal";
import { Modal } from "./components/modals/Modal";
export default function App() {
  const { isShow, toggle } = useModal();
  return (
    <div className="App">
      <h1>モーダルを開く</h1>
      <button onClick={toggle}>ボタン</button>
      <Modal isShow={isShow} />
    </div>
  );
}

これでカスタムフック化は完了になります。

const { isShow, toggle } = useModal();でuseModal()でreturnされてきているものを受け取って、ボタンとモーダル部分に渡しているのが分かると思います。

これで、App.jsxでは画面の表示だけを行うためのコンポーネントになり、ロジック部分をuseModal.jsxに閉じ込めることができました。

まとめ

JavaScriptやjQueryで実装されているサイトで同じような処理が複数あって困った経験があります。
Reactではカスタムフックを活用することで似たような処理を適切に切り出すことで、便利になるのかなと思いました。

Next.jsとWordPressを使って、サイト構築を行なっています。
プラグインの「WPGraphQL」を使って、データ取得を行なっている中で投稿ページにページネーションを作る際に手こずったので、実装方法をまとめておきます。

ページネーションの実装にはいくつかのアプローチがあります。この記事では、カスタムフィールドを追加することで効率的なページネーションを実現する方法について解説します。

全件取得によるページネーション

通常のWPGraphQLのフィールドでは、こちらの実装方法しかできません。

最もシンプルなページネーションのアプローチは、全ての投稿やページを一度に取得し、クライアントサイドでこれをページ分割する方法です。このアプローチのメリットは、実装の簡単さにあります。しかし、データ量が多い場合にはパフォーマンスの問題を引き起こす可能性があります。

オカ

記事全件を取得してくる必要があるので流石にこれは…と思いました。
なので別のアプローチを取ることを考えました。

カスタムフィールドを使用した効率的なページネーション

より効率的なページネーションを実現するには、WPGraphQLでカスタムフィールドを追加し、次の投稿や前の投稿を直接クエリできるようにする方法があります。これにより、必要なデータのみを正確に取得し、パフォーマンスを向上させることができます。

実装ステップ

WordPressのfunctions.phpファイルに、カスタムフィールドを追加するコードを追加します。
下記のコードを追加することで1件の投稿を取得するクエリに対して「次の記事」「前の記事」を取得するフィールドを追加することができます。

add_action('graphql_register_types', function () {
    register_graphql_field('Post', 'nextPost', [
        'type' => 'Post',
        'description' => '次の投稿を取得します。',
        'resolve' => function($root, $args, $context, $info) {
            $next_post = get_adjacent_post(false, '', false);
            if ($next_post) {
                return \WPGraphQL\Data\DataSource::resolve_post_object($next_post->ID, $context);
            }
            return null;
        }
    ]);

    register_graphql_field('Post', 'previousPost', [
        'type' => 'Post',
        'description' => '前の投稿を取得します。',
        'resolve' => function($root, $args, $context, $info) {
            $prev_post = get_adjacent_post(false, '', true);
            if ($prev_post) {
                return \WPGraphQL\Data\DataSource::resolve_post_object($prev_post->ID, $context);
            }
            return null;
        }
    ]);
});

そして、追加したカスタムフィールドを利用するGraphQLクエリを作成します。
nextPostとpreviousPostの部分が今回追加したものになります。

 query{
      post(id: "記事のslugが入ります", idType: SLUG) {
        databaseId
        date
        modified
        nextPost {
          title
          slug
          uri
        }
        previousPost {
          title
          slug
          uri
        }
        content(format: RENDERED)
        title(format: RENDERED)
        featuredImage {
          node {
            altText
            sourceUrl
            mediaDetails {
                height
                width
            }
          }
        }
        tags {
          nodes {
            databaseId
            name
          }
        }
        categories {
          nodes {
            databaseId
            name
          }
        }
      }
    }

まとめ

フィールドを追加することができることを学びました。
パフォーマンスも考慮した実装を気をつけたいですね。

悩んでいる人

Next.jsのプロジェクトでfont-awesomeを使いたいけど、どうすればいいの？

本記事では上記の悩みを解決します。

Next.jsでサイト構築をしている時に、font-awesomeを使いたい場面がありどうやるんだっけとなったので調べて実装した内容をまとめておきます。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

手順

パッケージの追加

npmでパッケージを追加します。

$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

@fortawesome/free-solid-svg-icons
このパッケージには、Font Awesomeの無料の固定（ソリッド）スタイルSVGアイコンが含まれています。ソリッドスタイルは、アイコンが塗りつぶされたデザインを指し、最も一般的に使用されるスタイルの一つです。このパッケージをインストールすることで、数千に及ぶソリッドスタイルのアイコンにアクセスし、それらをReactコンポーネントとしてプロジェクト内で直接使用することができます。

@fortawesome/react-fontawesome
このパッケージは、Reactプロジェクト内でFont Awesomeアイコンを簡単に使用できるようにするためのコンポーネントを提供します。これにより、Reactコンポーネントとしてアイコンを直接インポートして使用でき、アイコンのサイズ、色、回転などのプロパティを簡単にカスタマイズできます。@fortawesome/react-fontawesomeパッケージは、Font Awesomeアイコン（固定、正規、軽量、ブランドなど）をReactで使うためのインターフェースを提供し、これらのアイコンをReactの構文に沿って簡単に統合できるようにします。

アイコンの選択

fontswesomeの公式サイトに行き、使用したいアイコンを検索して選びます。

例えばこちらのアイコンを使用するとします。

ここにあるコードの部分をReactに変更して、Individual Importを選択してコードをコピーします。

コードを追加

このコードを自身のプロジェクトの追加したい箇所に追加します。

import { faCameraRetro } from '@fortawesome/free-solid-svg-icons'

// 省略

<FontAwesomeIcon icon={faCameraRetro} />

これで表示がされるようになります。

まとめ

比較的簡単にfontawesomeを使用できるようになりました。
ローカルにおいておくでもいい気もしますが、プロジェクトの性質によっては使ってもいいかもしれないですね。

最近、下記のような構成でサイト作成をする機会がありました。

コーポレートサイト
レンタルサーバー（シン・レンタルサーバー）でWordPressで運用する。
ドメインはシン・レンタルサーバーで取得している。

Next.jsで作成されたページ
ホスティングはNetlify。
コーポレートサイトで取得したドメインのサブドメインを使用する。

レンタルサーバーで契約したドメインのサブドメインをNetlifyに設定する方法について、自分の経験をシェアしたいと思います。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

作業の概要

最初に、Netlifyでサイトをホスティングし、そのサイトにカスタムサブドメインを設定するというタスクに挑みました。この過程では、以下の主要なステップを踏みました。

1. Netlifyでサイトを設定: まず、Netlifyにログインし、「New site from Git」を選択してサイトを作成しました。
2. カスタムドメインの追加: サイトの設定に移動し、「Domain management」で「Add custom domain」を選択し、サブドメインを入力しました。
3. レンタルサーバーのDNS設定変更: レンタルサーバーの管理画面からDNS設定を開き、サブドメインのCNAMEレコードをNetlifyが指示する値に設定しました。

具体的には、次のような設定を行いました。

XXXXXXXX.netlify.appにはNetlifyの初期ドメインになります。

注意点

このプロセスを通じて、特に以下の点に注意する必要があることがわかりました。

• DNS設定の変更は即時には反映されない: DNSの変更が全世界に伝播するのには時間がかかります。このため、設定後すぐに新しい設定が反映されない場合があります。変更が全てのユーザーに反映されるまで、数時間から最大48時間かかることがあります。
• キャッシュのクリアが必要な場合がある: ブラウザのキャッシュによって、古い情報が表示される場合があります。この問題を解決するには、シークレットモードでサイトにアクセスするか、ブラウザのキャッシュをクリアしてから再度アクセスすると良いでしょう。

まとめ

レンタルサーバーのサブドメインをNetlifyに接続するプロセスは、一見複雑に思えるかもしれませんが、手順に沿って慎重に作業を進めれば問題なく完了することができます。特にDNSの伝播には時間がかかるため、変更後は少し待つ必要があります。また、設定の変更が反映されているかを確認する際には、キャッシュの影響を受けないようにシークレットモードでの確認をお勧めします。

悩んでいる人

ターミナル…黒い画面が怖い

本記事では上記のような悩みを持っている方に向けた記事になります。
＊Mac限定になります。

Fig.ioとは

Figはターミナルからコマンドを入力するのを補完してくれるアプリケーションになります。

cdしたときやnpmコマンドを入力し始めると自動で補完してくれる便利なアプリケーションになります。

Fig.ioの使い方

公式サイトのダウンロードボタンでアプリケーションをダウンロードします。
ダウンロードできたら、Figを有効にするためにアクセシビリティの設定からFigへのアクセスを有効にします。

セットアップはこれで完了になります。

ターミナルを立ち上げて適当にコマンドを入力してみると…

このように予測を出してくれるようになりました！

まとめ

ちょっとしたことですが見た目が良くなるのはいいですね！

悩んでいる人

VSCodeには色々な拡張機能があるけど何を入れればいいのかわからない

本記事では、Web制作やShopify制作、フロントエンド開発を現役で行なっている僕が実際に入れているVSCodeの拡張機能について紹介していきます。

最近、PCが不具合で修理をした際に初期化されていたのでVSCodeの拡張機能を入れ直しました。
その際に、一旦これだけはという拡張機能を入れていきました。

何かの参考になれば嬉しいです！

これは入れたい拡張機能

とりあえず入れておきたい拡張機能です。

Material Icon Theme

見た目から入りましょう！味気ないVSCodeがカラフルになり視認性が高まります！

indent rainbow

インデントに色をつけてみやすくしてくれます。

zenkaku

全角スペースあると黄色にハイライトしてくれます。
エラーの原因になりやすく、気付きにくいので入れておきましょう。

上の写真の黄色の枠になっているところが全角スペースになります。

Auto Rename Tag

開始タグを変更した時に、閉じタグも自動で変更をしてくれる拡張機能になります。

Gitを使う人にオススメ

GitLens

チーム開発で便利です。
誰がどのコードを書いたのかがわかります。

オカ

誰だのこの保守性の低いコード書いたの…！

あっ僕だ…となることもあります笑

Web制作・フロントエンド寄り

Markuplint

HTMLのリンターになります。Markuplintは、HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。

imgタグにはwidthとheightが必要だとMarkuplintがエラーを出していますね。

オカ

普通に勉強にもなるし、コード品質も高められるのでオススメです。

Live Server

HTMLファイルを触るときに、便利です。
保存と同時に自動で変更をブラウザに反映してくれます。

Live Sass Compiler

SCSSファイルをちょっと触るときに便利です。個人でちょとっとSCSSを使いたいときに便利です。
実際に実務だと、nodeを入れてコンパイルできる環境を作ることが一般的ですが個人で触るときにはちょっと大袈裟なのであると便利。

AIがコードを書くのをサポートしてくれる！

もうAIなしではコーディングできない体になってしまいました。

Github Copilot

有料ですが、めちゃくちゃオススメです。
指示を出してコードを生成させることもできますし、プロジェクト内のコードを読み取ってコードの提案をしてくれます。

Chat GPTも便利なのですが、ことプログラミングに関してはやはりプロジェクト内のコードを読み取ってくれるという利点が大きくChat GPTより便利に感じます。

Github Copilot Chat

Copilotでチャット機能を使うことができるようになります。
最近利用し始めたので、まだそこまで本格的には使えていませんが少し使った感想としてはさらに開発スピードを上げてくれそうだなと感じました。

まとめ

なんか色々と抜けていそうな気もしますが、現状僕の開発環境に入れた拡張機能は以上になります。

また、何か追加をした際に記事に追加できればと思います！^^