案件でNext.jsを触る機会がありました。 コンポーネント間で共通して使用できる値を作りたかったのですが、中々手こずったのでこちらの記事でご紹介します。 <h2 id="h58e7a7bcd9">やりたかったこと</h2>イメージは、以下の通りです。 ・コンポーネントAで、isActiveという変数を変更(例) false &lt;=&gt; true ・コンポーネントBは、値を変更しないでisActiveの真偽値によって表示・非表示 <h2 id="h4634c2a750">実装方法について</h2>ご紹介するのはミニマムな実装方法になります。 公開されているパッケージなどを使う方法もありますが、今回はuseContextを使うやり方にしています。 <h3 id="hc1b2d3474e">01.State専用ファイル作成</h3>まずは、State用のファイルを作成します。<pre><code>//app/_state/isActiveState.js

import React, { useState } from "react";
export const IsActiveContext = React.createContext({
 isActive: false,
 setIsActive: () =&gt; void false,
});

export const MainProvider = ({ children }) =&gt; {
 const [isActive, setIsActive] = useState(false);
 return &lt;IsActiveContext.Provider value={{ isActive, setIsActive }}&gt;{children}&lt;/IsActiveContext.Provider&gt;;
};


</code></pre> <h3 id="h0ae7fc17d8">02.ルートファイルに追記</h3>page.tsxにState専用ファイルをインポートして、その中のProviderで子コンポーネントを挟んであげないといけません。 これをしないと、グロールな値が更新できない(？)ようです。 ここに辿り着くまでに時間がかかりました、、 <pre><code>//app/about/page.tsx
"use client";
import { MainProvider } from "@/app/_state/IsActiveState";

import ComponentA from "@/app/_component/layout/componentA";
import ComponentB from "@/app/_component/layout/componentB";

export default function About() {

 return (
 &lt;MainProvider&gt;
 &lt;ComponentA /&gt;
 &lt;ComponentB /&gt;
 &lt;/MainProvider&gt;
 );
}</code></pre> <h3 id="h4b2d7f4413">03.コンポーネントAに追記</h3>このファイル内で、isActiveの真偽値を変更していきます。 useContextで、State専用ファイル内にあるIsActiveContextを使用します。 onClickイベントで、isActiveの値を変更しています。<pre><code>//app/_component/layout/componentA.tsx

"use client";
import React, { useContext, useState } from "react";
import Link from "next/link";
import { IsActiveContext } from "@/app/_state/IsActiveState";

import style from "@/app/_styles/layout/componentA.module.scss";

export default function ComponentA() {
 const { isActive, setIsActive } = useContext(IsActiveContext);
 const toggleActive = () =&gt; {
 setIsActive(!isActive);
 };

 return (
 &lt;header className={style.body}&gt;
 &lt;button className={`${style.button} ${isActive ? style["is-active"] : ""}`} onClick={toggleActive}&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;/button&gt;
 &lt;/header&gt;
 );
}</code></pre> <h3 id="h2f0360ad73">04.コンポーネントBに追記</h3>こちらのコンポーネントBでは、値の変更はしないのでisActiveのみを使用します。<pre><code>"use client";
import React, { useContext, useState } from "react";
import Link from "next/link";
import { IsActiveContext } from "@/app/_state/IsActiveState";
import style from "@/app/_styles/layout/componentB.module.scss";


export default function ComponentB() {
 const { isActive } = useContext(IsActiveContext);

 return (
 &lt;&gt;
 &lt;div className={`${style.body} ${isActive ? style["is-open"] : ""}`}&gt;

 &lt;/div&gt;
 &lt;/&gt;
 );
}</code></pre> 一旦グローバルステート設定が完了して、実際に動作が確認できました。 今回のポイントは、Providerをルートファイルに読み込み要素を挟んであげる事だったと思います。 <h2 id="ha214098e44">まとめ</h2>今回は、Next.jsを使ったコンポーネント間で使用できる値を作成・使用する方法についてでした。 グローバルな値は個人的に結構設定して使うことがあるので、非常に勉強になりました。 ぜひ参考にしてみてください。 最後までご閲覧いただき、ありがとうございました！

Next.jsにて、コンポーネント間で共通して使用できる値を作成する方法についてご紹介しています。

[Next.js]グローバルステートの設定方法[初心者向け]

今回は、ショップの1番上に表示されるヘッダーメニューの設定をご紹介します。 メニューはデフォルトで追加されているものがあるので、内容の追加と編集をしていきましょう。 ヘッダーメニューはどのページからも見られるメニューなので、ぜひ一緒に設定してみてください。 <h2 id="h42541e9035">ヘッダーメニューの設定</h2>ショップの管理画面を開き[オンラインストア]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/254872d71628434a9319e0ec5a648f78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.51.33.png" alt=""> 左側に表示されるオンラインメニュー内の[テーマ]をクリックし、テーマの[カスタマイズ]ボタンをクリックしてカスタマイズ画面に入ります。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/147060f3ca8542a09f30bfef78d0ab78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-30%2017.38.37.png" alt=""> テーマのカスタマイズ画面が開いたら、左メニュー内の[ヘッダー]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/0c2a911a5c8246b4b44b17c5825b97ae/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2011.11.43.png" alt=""> 以下の画像のように、すでにメインメニューというメニューが設定されています。 こちらが先述したデフォルトで設定されているメニューです。 今回はこのメインメニューに必要な項目を追加・編集していきたいと思います。 [メインメニュー]をクリックするとメインメニューの編集画面に遷移します。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/301a5fb28a43409ba8dd22204355bddf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2011.37.22.png" alt=""> なお、管理画面左メニューの[オンラインストア] -&gt; [メニュー]からもメニューの編集が可能です。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/3b5f0a5cd7ed4375ba13883fe36df196/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2011.39.35.png" alt=""> <h3 id="haab0bd7654">メニューの項目追加</h3>初期の状態では、<ul><li>ホーム</li><li>カタログ</li><li>お問い合わせ</li></ul>の3項目がメインメニューに登録されています。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/7da79d826af544269d4a7693d5abe218/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2011.42.39.png" alt=""> まずは、メニューの中に新しい項目を追加してみましょう。 今回は、【期間限定商品】というコレクションページへのリンクとなる項目を追加します。 [メニュー項目を追加する]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a1530fbc02b844fe965614ef006c5df7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2011.42.39.png" alt=""> 右側に項目の登録画面が出てくるので、[名前]にメニューで表示したい名前を入力します。 そして、[検索またはリンクを貼り付ける]をクリックするとプルダウンリストが表示されるので、追加したいものを選択します。 今回は[コレクション]を選択しました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/ce2f3a88a62445c68d5b26af34a87ecc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.03.42.png" alt=""> コレクションの一覧が表示されるので、表示したいコレクションを選択します。 今回は【期間限定商品】というコレクションを追加していきます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a1e28cbc1c604e0887c598bd34850d65/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.08.36.png" alt=""> 名前と追加したいコレクションの選択が完了したら、右下の[追加する]ボタンをクリックします。 メインメニューの中に[期間限定]が表示されていたら追加が完了です！ <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/03ab6f17d8744a16a4e16fe97e45c5e2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.12.34.png" alt=""> <h3 id="hc66514e4fa">メニューの項目編集</h3>次は[カタログ]という項目の編集をしていきます。 該当項目の右側の[編集]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/072d101fbd5940b881133e6013f0d76a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.12.34.png" alt=""> 項目追加の時と同様に、右側に編集画面が表示されます。 名前とリンク先を任意のものに変更します。 今回は、名前を【商品一覧】に、リンク先を【全商品】というコレクションページに変更しました。 変更が完了したら、忘れずに[変更を適用する]ボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/edc3b9618a4a4ff0a0a986c0168591d9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.18.15.png" alt=""> メインメニューの[カタログ]が[商品一覧]に変更されていたら完了です！ <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/7656b7ec851c493788757da7f7862da9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2014.37.32.png" alt=""> <h3 id="h0acbddf0c6">メインメニューの位置変更</h3>メインメニューは、こちらに表示された順番でヘッダーにも表示されます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/71d9241002084c088ef3d59715c97f69/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.24.30.png" alt=""> <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f63d9b599e4e4993823975333b4c915c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.25.43.png" alt=""> この順番を変更してみましょう。 先ほどのメインメニューの編集画面で動かしたい項目の左側にある6点ボタンをドラッグ(クリックしたまま)で希望の場所に動かします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a37032d8f1194b1cb5d9c778bf7ad4f4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.29.11.png" alt=""> このようにリストの項目の移動が完了したら、右下の[メニューを保存]ボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/d39db43dbcd543b0934f5e23f3cbb371/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.30.35.png" alt=""> ヘッダーを確認して、希望通りの順番になっていたら、項目の移動は完了です！ ※反映に少し時間がかかる場合があります。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/b83fa7910d2b443e96142d7fae8c34d5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-17%2012.32.23.png" alt=""> <h2 id="ha214098e44">まとめ</h2>今回は、ヘッダーのメニューの項目追加・編集の方法をご紹介しました。 メニューの項目には、コレクションページ以外にもブログや商品ページを追加することが可能です。 お客さまがショップを利用する際に便利になるような、そしてショップの魅力を最大限に伝えられるような項目をぜひメニューに追加してみてください！

今回は、ショップの1番上に表示されるヘッダーメニューの設定をご紹介します。
ヘッダーメニューはどのページからも見られるメニューなので、ぜひ一緒に設定してみてください。

【Shopify】ヘッダーメニューを設定する方法

今回は、Three.jsのShaderMaterialを使って2つの色をmixする方法についてご紹介します。 <h2 id="h8de6a2a24f">前提知識</h2>・Three.jsを使ってオブジェクトの描画方法を知っている ・基本的なJavaScriptの記述方法を知っている <h2 id="h83b41e361d">PlaneGeometryを設置する</h2>まずは通常のマテリアルを使って表示をしていきます。<pre><code> const size = {
 x: 1.3,
 y: 1.3,
 };

 this.geometry = new PlaneGeometry(size.x, size.y);
 this.material = new MeshNormalMaterial();
 this.mesh = new Mesh(this.geometry, this.material);
 this.stage.scene.add(this.mesh);</code></pre> MeshNormalMaterialにしているの以下のような見た目になっていると思います。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/9c04ac1e8fb548ada3e19083c16e0154/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%209.35.40.png" alt=""> ここからShaderMaterialに変更して2色をmixしていこうと思います。 <h2 id="h7988dde7b1">ShaderMaterialに変更</h2><pre><code>this.material = new MeshNormalMaterial();</code></pre>↓<pre><code> this.material = new ShaderMaterial({
 uniforms: {
 uTime: {
 value: 0.0,
 },
 },
 vertexShader: vertexShader,
 fragmentShader: fragmentShader,
 });</code></pre> 注意点としては、vertexShaderとfragmentShaderの記述は別ファイル管理にしている点です。<pre><code>import vertexShader from "../shader/vertex.glsl?raw";
import fragmentShader from "../shader/fragment.glsl?raw";</code></pre> 別ファイルに分ける方法がわからない方は以下のようにしてもOKです。<pre><code> this.material = new ShaderMaterial({
 uniforms: {
 uTime: {
 value: 0.0,
 },
 },
 vertexShader: `
 //ここに書く
 `,
 fragmentShader: `
 //ここに書く
 `,
 });</code></pre> <h2 id="h7a7deeb2f0">vertexShaderの設定</h2>今回は頂点をいじることはないので、スタンダードな記述のみになります。<pre><code>varying vec2 vUv;
void main() {
 vUv = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}</code></pre> <h2 id="h675b2d2f1a">fragmentShaderの設定</h2>本記事のメインとなる箇所です。<pre><code>precision mediump float;
uniform float uTime;
varying vec2 vUv;

void main() {
 vec2 p = vUv;
 float direction = 0.5;
 
 vec3 colorFirst = vec3(0.318, 0.973, 0.934);
 vec3 colorSecond = vec3(0.973, 0.973, 0.318);
 vec3 finalColor = mix(colorFirst,colorSecond,direction);

 gl_FragColor = vec4(finalColor, 1.0);
}</code></pre> colorFirstとcolorSecondをmix関数を使って、合わせています。 directionの値が0.0 = colorFirst、1.0 = colorSecondに変化します。 ※0.0の時 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/c33ef4fb5e0b488799ce40d6eac7bc9a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%209.49.21.png" alt=""> ※1.0の時 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/54d5d324bafa4f3daec9baa8e44e19ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%209.49.09.png" alt=""> 以上で2色のmixが完了しました。 次は少しアクセントを加えたものを見ていきましょう。 <h2 id="hd36cf16209">おまけ(step関数)</h2>step関数というものがあるので追加してみましょう。 <h3 id="hdbb9fb2a16">step関数</h3><blockquote>step(a, x)aはしきい値、xはチェックされる値。しきい値未満の場合は0.0を、それ以上の場合は1.0の二値化を行う関数</blockquote><a href="https://qiita.com/edo_m18/items/71f6064f3355be7e4f45" target="_blank" rel="noopener noreferrer">引用元</a> 以下のように追加してみましょう。<pre><code>float direction = 0.0;
direction = step(p.x,p.y);</code></pre> 成功していれば、添付のような表示になっていると思います。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/c4ba4b306afc4ef298db80444e64b815/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%209.56.46.png" alt=""> <h2 id="h598d2a1123">おまけ(ノイズ)</h2>ちょっとしたノイズを追加してみましょう。 いくつか追記がある為、それぞれ追加してください。 ◼︎fragmentShader<pre><code>precision mediump float;
uniform float uTime;
varying vec2 vUv;

float rand(vec2 n) { 
 return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

float noise(vec2 p){
 vec2 ip = floor(p);
 vec2 u = fract(p);
 u = u*u*(3.0-2.0*u);
 
 float res = mix(
 mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
 mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);
 return res*res;
}


void main() {
 vec2 p = vUv;
 float strength = 5.0;
 float direction = noise(p+uTime) * p.x;
 
 vec3 colorFirst = vec3(0.318, 0.973, 0.934);
 vec3 colorSecond = vec3(0.973, 0.973, 0.318);

 vec3 finalColor = mix(colorFirst,colorSecond,direction*strength);

 gl_FragColor = vec4(finalColor, 1.0);
}</code></pre> ◼︎JavaScript<pre><code> onUpdate() {
 this.material.uniforms.uTime.value += 0.01;
 }</code></pre> するとGif画像のような動きになっている事が確認できると思います。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/c312a67cd27a4f8d880f6fa10bb5a31f/video.gif" alt=""> ノイズを使った表現は数多くみられるので、この辺りはマスターしていきたい部分ですね。 <h2 id="h7e8b90ad32">本記事のまとめ</h2>今回は、Three.jsのShaderMaterialを使って2色をmixする方法と追加の加工方法についてご紹介しました。 昨今のWebサイトには3D系の表現も増えてきているので、身につけていきたいですね。 最後まで読んでいただき、ありがとうございました！

ShaderMaterialを使った色のMixについてご紹介しております。

[Three.js]ShaderMaterialを使った色のMixについて

閲覧いただきありがとうございます。 今回は、Web制作は独学でも行えるのか？ということをメインテーマに解説していきます。 解説を始める前に、筆者の経歴から知っていただいた方がより内容が入ってくると思うので紹介させてください。 <h2 id="hee50120e89">筆者について</h2><blockquote>1997年生まれの26歳(執筆当時)。 情報系の大学出身。大学の講義で、HTML/CSS/PHPについて軽く触れプログラミングを知る。 就職先の希望をIT企業として就活を開始。 しかし、上手くいかず最終的には新卒で電力関係の会社に就職。 プログラミングをやりたいという気持ちを捨てきれず半年ほどで新卒で入った会社を退職。 退職後は大学時代に習った事を思い出しながら、再度Youtube・Google検索を使い独学を開始。 実家を出ていたため、生活費を稼ぐために日雇いのアルバイトを入れながら勉強をする形を1年ほど継続。 SNSなどを通じて徐々に実案件に関わる機会が増えていき、現在(2023.11月時点)で非常に数多くの案件に関われるようになれている。</blockquote> 以上が私の簡単な経歴紹介です。 時間が経つのが早いもので、業界4年目を迎えることができました。 <h2 id="h3d2addd4e1">Web制作は独学で行えるのか？</h2>独学で行うことは可能です。 私が独学で実案件に多く関わることができているのが証拠です。 しかし正直な話、全員が可能かというとそれは難しいと考えています。 その理由について列挙していきます。 <h3 id="h704cb99230">モチベーション維持が難しい</h3>知らなければいけないことが山盛りです。 独学だと基本1人で勉強することが多いので、強い意志がないと怠けてしまったり継続できないです。 <h3 id="h2e0f3825ba">正解がわからない</h3>業界のルール・制作の流れや最適解のようなものは、業界の先輩から教わることが一般的です。 しかし、独学の場合はGoogle検索・SNSなどから様々な情報が閲覧できるので逆に何が正解かわからないです。 コーディング1つとっても一般的な書き方・考え方を知ることが難しいです。 色々なソースコードを見たり、検索したりして書き方や考え方を模索していくことが必要です。 <h3 id="h98bf57a9d3">成果が目に見えるまでに時間がかかる</h3>これはフリーランスとして活動することで気になってくる項目です。 独学で勉強し実際の案件に繋げていくことは非常に大変です。 単発案件は苦労しないかもしれませんが、継続案件をいただくとなるとレベルが一気に跳ね上がります。 一定のクオリティ担保できないと基本的に継続には繋がりません。 そこに加えて単価も最初の方はとにかく低いので、その点も難しいです。 私も最初の方は時給換算すると、日雇いアルバイトの方が全然高いなんてことはザラでした。 <h3 id="h7766ea7fa2">とにかく地道</h3>よく宣伝広告で見るような華やかな生活を送ることは基本難しいでしょう。 ひたすらに勉強して経験を積んでいくことの繰り返しになります。 最初にあげた「モチベーション維持が難しい」の中の1つにもなりますね。 <h2 id="h77e98cd177">独学でもやっていける人の特徴</h2>以下のような方は独学でも進めていけるのではないかと思います。 <blockquote>・自分から進んで学習ができる ・好奇心旺盛で調べることが苦じゃない ・地道な事が苦じゃない ・試行錯誤ができる</blockquote> <h2 id="h7e8b90ad32">本記事のまとめ</h2>今回の内容のまとめです。 Web制作は独学でも可能だと私は考えています。 しかし、独学が正義・スクールに通わない方がいいということではありません。 今回私が列挙した「独学でもやっていける人の特徴」に当てはまるような方は、試しに独学スタートをしてみて良いと考えています。 進めていく上で、誰かと一緒にできる環境が欲しかったり続かなそうだと感じれば、また別の方法を検討するのが良いでしょう。 各々に合った学習方法を見つけてみてください。 最後までご閲覧いただき、ありがとうございました。

Web制作は独学でも学習していけるのか？という点について業界歴4年目のクリエイター目線で解説しています。

Web制作は独学でも出来る？業界歴4年目のクリエイター目線で解説

当ブログは、2021年から更新を始め3年目を迎えています。 皆さまいつもありがとうございます。 ここ１年でアクセス数が大幅に増加したことに伴って、リニューアルを行いました。 今回は、リニューアルについてご紹介していきたいと思います。 <h2 id="h78fd359524">サイト名の変更</h2> <h3 id="ha162c632c5">変更前</h3>Next!!! <h3 id="h53f04a8d34">変更後</h3>Uncover サイト名の変更を行いました。 当初このブログは練習がてらに作ったものだったので、名前も何も考えずに設定していました。 Uncoverには明らかにする、発見する、掘り起こすなどの意味があります。 当ブログでは技術の様々な情報を発信・明らかにしていきたいという思いがありましたので、この名前にしました。 今後も有益になるような情報発信ができるように心がけていきます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f03c1714ca1b4c2ab5a4705d7947868e/Group%20126.png" alt=""> <h2 id="h35a74cde94">利用技術変更</h2> 当初は、Nuxt2系を利用して作成しました。 そしてしばらくして、Nuxt3が発表され移行しなければいけない状況になりました、、 ところが2系=&gt;3系に直接の移行ができないとのことで頭を悩ませていたところに、Astroの存在を知りました。 Astroはメディア・ブログとの相性が良いということがわかり、当ブログをAstroへと変更することにしました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/4e0af2699488483ea2f32ee41f9ee5a3/astro.png" alt=""> Astroについての詳細な説明は省きますが、簡単に言うと各JSフレームワークも使えてコンポーネント設計もしやすい技術です。 今の所、SPAを利用しない場合はダントツでAstroが良いのではないかと思えるほど万能な印象があります。 <h2 id="hb2906efb65">Astroの使い勝手について</h2> 結論から言うと、非常に使いやすいです。 JSフレームワークを使ったことある人ならすぐに使用できるのではないかと思います。 理由としては、以下のようにslotやpropsを使ってデータの受け渡しが可能になっていたりと通じる点が多いからです。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/e9b42a93338146b0af23c1af0a28c6e0/img.png" alt=""> コンポーネント設計ができることによって、メンテナンスする時もやりやすいです。 しかし、使用してみて気になる点がありました。 <h3 id="h9419d763a0">SCSSの@includeを使うと補完がされない</h3>vscodeを使っているのですが、おそらくAstroの開発更新が早すぎて周辺のプラグインが追いついていないのが原因だと考えます。 @mediaの方は、問題なく補完の機能が働くので今回は@includeを使わないで実装しました。 ◼︎@include <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/147441e331cb4836be132b199f1d3f63/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-03%2012.57.19.png" alt=""> ◼︎@media <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/86491cff5e0d40b38177e9c33dceefe3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-03%2012.57.58.png" alt=""> おそらく今後周辺プラグインがアップデートされてこの点は解決されると思います。 今は待つしかないですね。 <h3 id="h32fed503c7">ビルドに時間がかかる</h3>yarn buildを行なってみるとdoneされるまでに、54.49sかかりました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a6249a346cc64f73851a836e19232543/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-03%2013.21.30.png" alt=""> これから投稿が増えていくことを考えると、更に長くなることが予想されます。 ですが、この点はおそらく何かしら対策を行えば短縮できると思うので今後調べてみたいと思います。 気になる点もあげましたが、総じて考えると非常に良い開発体験ができたと感じています。 今回このブログに関しては、乗り換えて正解だと思いました。 <h2 id="h9006f5ed34">今後について</h2>更新の方向性としては、これからも変わらずに行なっていきたいと考えております。 そして、機能面についても追加ができたらと考えております。 ・検索機能 ・お気に入り機能 ...など こちらについては、ゆっくり進めていきますので機能が追加されていたら使ってみてやってください！ <h2 id="ha214098e44">まとめ</h2>今回はリニューアルについて記載させていただきました。 最後まで読んでいただきありがとうございました！ 今後とも当ブログをよろしくお願いいたします。

ブログリニューアルに伴う変更やNuxtからAstroに移行した件についての感想などを記述しています。

[Astro]ブログをリニューアルしました

今回は、Shopifyの基本的な初期設定についてご紹介します。 <h2 id="hec8e88fd9a">ストアの詳細設定方法</h2>では早速設定を進めていきましょう！ 管理画面に入り左下の[設定]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/27ec6140199e419d94b44d6bb6120568/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2016.26.12.png" alt=""> <h3 id="h140e7a4b43">プロフィール / 請求情報</h3>Shopify登録時の内容ですでに埋められている項目もありますが、各項目間違いがないか確認をします。 請求情報は、請求書に表示する情報です。 間違いがないか改めて確認をしておきましょう。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/73f8a563e5c44144b2f391328bda4874/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2016.45.25.png" alt=""> 編集が必要な場合は、各ブロック右上の[編集]ボタンを押すとテキストエリアが表示されるので、そちらで編集をしましょう。 ※編集が完了したら都度ページ右上の[保存]ボタンをクリックしてこまめに保存しておくのがおすすめです！自動保存はされないので、忘れずに保存ボタンを押しましょう！ <h3 id="hb3477bd701">ストア通貨</h3>ストアの言語設定によって自動的に設定されています。 日本で販売する場合は【円(JPY)】になっていればOKです。 そして、右側の[表示形式を変更する]ボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/9afb034155c449bea277e564527446d1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2017.52.47.png" alt=""> [通貨表示が含まれているHTML]と[通貨表示が含まれているメール]のテキストエリア内にJPYという表記があります。 こちらは入れたままだと金額表示の際に「¥ 400 JPY」と表示されてしまうので、必要がない場合は削除しておきましょう。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f255782d419c4f5f86548b875221d301/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2017.54.41.png" alt=""> <h2 id="hcf83e1357e"> </h2><h3 id="h29f57369d5">タイムゾーンと測定の単位</h3><img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f6256a04b0f34af18849ebae669163aa/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2017.59.47.png" alt=""> タイムゾーンは、基本的に日本時間を指定する[(GMT+09:00) 大阪、札幌、東京]に設定しておきます。 単位方式は、計量システムかインペリアルシステムから選択します。 計量システムを選択した場合→デフォルトの重量単位は[キログラム (kg)]と[グラム (g)]から選択。 インペリアルシステムを選択した場合→デフォルトの重量単位は[ポンド (lb)]と[オンス (oz)]から選択。 取り扱う商材に応じてそれぞれ選択してください。 <h3 id="h8f53c39135">注文IDの形式</h3><img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/3639a1fcb3e248ad9acc25eb45ca301f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-02%2018.09.23.png" alt=""> こちらは、こだわりがなければ特に編集する必要はありません。 プリフィックス [注文番号] サフィックスが注文IDとなります。 例) プリフィックス: apple	サフィックス: banana 	→ 注文ID: apple1003banana デフォルトではプリフィックスに#が入力されているので、#1003のように#[注文番号]が注文IDとなっています。 <h2 id="h7524c4bcd0">保存をクリック</h2>全ての入力や確認が完了したら、ページ右上の[保存]ボタンをクリックして設定内容を保存してください。 Shopifyは基本的に自動保存はされないので、どの作業をする場合でも忘れずに保存ボタンを押しましょう！ 以上で基本的な初期設定が完了です！ お疲れ様でした。

今回は、Shopifyの基本的な初期設定についてご紹介します。
画像付きで解説をしているので、ぜひ一緒に初期設定をしてみてください。

【Shopify】基本的な初期設定

今回は、ファビコンの設定方法についてご紹介します。 ファビコンとは、サイトを開いた際にタブのタイトル横に表示される画像のことです。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/0e67b5d1cc144ae183e6680c1bf47b94/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2017.04.48.png" alt=""> ショップのイメージにあった画像やロゴを設定するのがおすすめです。 では、さっそく登録していきましょう！ <h2 id="h79619d0a9e">Shopify管理画面でのファビコン設定方法</h2>Shopifyの対象ショップの管理画面を開き[オンラインストア]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/254872d71628434a9319e0ec5a648f78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.51.33.png" alt=""> 左側に表示されるオンラインメニュー内の[テーマ]をクリックし、テーマの[カスタマイズ]ボタンをクリックしてカスタマイズ画面に入ります。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/147060f3ca8542a09f30bfef78d0ab78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-30%2017.38.37.png" alt=""> カスタマイズ画面の左側の設定マークをクリックし、[ファビコン]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/b2e0245972fe4278aca016a4e82b352b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-30%2017.42.13.png" alt=""> <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/ae8bc114736d4e7a910397de788922d6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-30%2017.53.03.png" alt=""> [画像を選択]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f9b5ebc485cc4ef2bc2d1a1055f61e59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-30%2017.54.25.png" alt=""> ポップアップが表示されたら[画像を追加]をクリックするか、使用したいファビコン画像を点線内にドラッグ&amp;ドロップして管理画面にアップロードします。 アップロードが完了したら、該当画像にチェックを入れます。 画像にチェックが入ると、右下[完了]ボタンがアクティブになるので、クリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/d1b9ed5417784d72b94309212b94222a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2016.49.10.png" alt=""> 左側のファビコン部分に先ほど選択した画像が表示されていることを確認したら、右上の[保存する]ボタンをクリックして、ファビコンの設定は完了です。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/06e97bef906b4f858cd348d3bb0051e4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2016.59.53.png" alt=""> <h2 id="h8fe535304e">ファビコン画像の作り方</h2>まだお店のロゴが決まっていない場合は無料で利用できるロゴメーカー「<a style="color:#000000" href="https://www.shopify.com/jp/tools/logo-maker" target="_blank" rel="noopener noreferrer">Hatchful</a>」を使用してみるのもおすすめです。 HatchfulはShopifyが提供する無料のロゴメーカーで、いくつかの質問に答えるだけでロゴを自動提供してくれます。 急ぎで作りたい場合や、簡単に作りたいという方はぜひ利用してみてください。 ファビコンは表示される範囲がとても小さいものの、お店の雰囲気をお客様に伝えることができる重要な画像です。 ぜひ作成・登録してみてください！

今回はShopifyでのファビコンの設定方法をご紹介します。

【Shopify】faviconを追加する方法

タイトルとディスクリプションとは、Googleなどで検索をした際に結果として表示される以下の部分のことです。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/519b6c2bbefe4a7f8c330feaeb5521c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.33.44.png" alt=""> 重要な項目なので、ショップのオープン前に必ず設定しておくようにしましょう！ <h2 id="h8bb8734b16">設定方法</h2>Shopifyの対象ショップの管理画面を開き[オンラインストア]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/254872d71628434a9319e0ec5a648f78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.51.33.png" alt=""> [各種設定]をクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/9fe650c32cbc4e25a4ec1a20ddd2514c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.52.58.png" alt=""> [タイトルとメタディスクリプション]内のホームページタイトルにタイトルを、ホームページのメタディスクリプションにディスクリプションをそれぞれ入力します。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/d121a6bad5eb42418b534ef5bc68dcee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-27%2017.54.08.png" alt=""> ↑こちらは、私の練習用開発テーマのタイトルとディスクリプションです。 タイトルは70文字以内、ディスクリプションは320文字以内で入力します。 入力が完了したらページ右上の[保存]ボタンをクリックして完了です。 <h2 id="h7e9eb6732a">ディスクリプションについて</h2>ディスクリプションは先述した通り、320文字まで入力が可能です。 しかし、実際にGoogleで検索した際に表示されるのは100~120文字程度です。(スマホの場合は60~80文字程度) そのため、1番に伝えたいことなどは120文字以内におさめて入力するのがおすすめです。 ショップのオープンまでにお客様に伝えたい内容をまとめてぜひ設定してみてください！

Shopifyの管理画面からショップのタイトルとディスクリプションを登録する方法をご紹介します。

Shopifyのショップタイトルとディスクリプションの設定方法

Astroでもprettierを使ってコード整形をすることができます。 <h2 id="h555bffa6fb">📁モジュールのインストール</h2><pre><code>yarn add prettier-plugin-astro prettier</code></pre> <h2 id="h4ce0d069de">💭各種設定の追加</h2>プロジェクトのルートに .prettierrc.cjsを作成していください。 その中に以下の記述を追加します。<pre><code>module.exports = {
 plugins: [require.resolve("prettier-plugin-astro")],
 overrides: [
 {
 files: "*.astro",
 options: {
 parser: "astro",
 },
 },
 ],
};</code></pre> vscodeにもprettierを入れている方は、package.jsonに以下を追加 <pre><code> "prettier.documentSelectors": ["**/*.astro"],
 "[astro]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },</code></pre> 以上になります。 コード整形が上手くいかない時は、vscodeを再起動したりして確認してみてください。

Astroにてprettierを使ってコード整形をする方法についてご紹介しています。

[Astro]prettierでコード整形をする方法について

Astroが最近流行りつつありますね。 個人的にも非常に注目していまして、これから沢山使っていきたいと思っている技術です。 軽く触ってみた感じ、Vue・React経験がある方はスムーズに取得できるのではないかと思っています。 今回はコンポーネントに値を渡す方法についてご紹介します。 <h2 id="hfc92668cbe">🎴 Cardコンポーネントを作成(子)</h2>[ src/components/AppCard.astro ]を作成していください。 作成後、以下の記述追記。<pre><code>---
interface Props {
 id:string
 image:string
 title:string
 text:string
 alt:string
}


const { id,image,title,text,alt} = Astro.props;
---


&lt;article id={id} class="app-card"&gt;
 &lt;div class="app-card__image"&gt;
 &lt;img src={image} alt={alt}&gt;
 &lt;/div&gt;
 &lt;div class="app-card__inner"&gt;
 &lt;h2 class="app-card__title"&gt;{ title }&lt;/h2&gt;
 &lt;p class="app-card__text"&gt;{ text }&lt;/p&gt;
 &lt;/div&gt;
&lt;/article&gt;</code></pre> ※今回はスタイリング部分は省略します。 分割してみていきましょう。 まずは、型定義部分です。<pre><code>interface Props {
 id:string
 image:string
 title:string
 text:string
 alt:string
}</code></pre> 特に変わったところはありませんね。 そして、props部分です。<pre><code>const { id,image,title,text,alt} = Astro.props;</code></pre> 公式サイトで以下の様な説明があります。<blockquote>propsは、フロントマタースクリプトのグローバルな&nbsp;Astro.props&nbsp;で利用できます。</blockquote> propsを使いたい時はこの書き方で書けば問題なさそうですね。 公式曰く「分割代入になるから注意してくださいね」とのこと。 次に、マークアップ部分です。<pre><code>&lt;article id={id} class="app-card"&gt;
 &lt;div class="app-card__image"&gt;
 &lt;img src={image} alt={alt}&gt;
 &lt;/div&gt;
 &lt;div class="app-card__inner"&gt;
 &lt;h2 class="app-card__title"&gt;{ title }&lt;/h2&gt;
 &lt;p class="app-card__text"&gt;{ text }&lt;/p&gt;
 &lt;/div&gt;
&lt;/article&gt;

</code></pre> こちらも特に変わったところはありませんね。 propsで受け取った値を表示しています。 <h2 id="hb6b41ca9c6">🔖 index.astroについて(親)</h2>親コンポーネント側の記述についてです。 こちらでは、表示したいテキスト類を配列で定義してmapでループしています。<pre><code>---
import Layout from '../layouts/Layout.astro';
import AppCard from '../components/AppCard.astro';
import image01 from "@/assets/image01.jpg";
import image02 from "@/assets/image02.jpg";
import image03 from "@/assets/image03.jpg";


const cards = [
 {
 id:"01",
 image:image01,
 title:"タイトル01",
 text:"テキストテキストテキストテキスト",
 alt:"image01"
 },
 {
 id:"02",
 image:image02,
 title:"タイトル02",
 text:"テキストテキストテキストテキスト",
 alt:"image02"
 },
 {
 id:"03",
 image:image03,
 title:"タイトル03",
 text:"テキストテキストテキストテキスト",
 alt:"image03"
 },
]

---

&lt;Layout title="Astro Props"&gt;
 &lt;main id="main" class="l-main"&gt;
 &lt;div class="flex"&gt;
 {cards.map(card =&gt;(
 &lt;AppCard 
 id={card.id} 
 image={card.image}
 alt={card.alt} 
 title={card.title} 
 text={card.text}
 /&gt;
 ))}
 &lt;/div&gt;
 &lt;/main&gt;
&lt;/Layout&gt;

</code></pre> Cardコンポーネントをインポートして読み込み、配列で定義した値を渡しています。 今回は、3つオブジェクトを定義しているので以下のmapによって3回ループが行われます。<pre><code> {cards.map(card =&gt;(
 &lt;AppCard 
 id={card.id} 
 image={card.image}
 alt={card.alt} 
 title={card.title} 
 text={card.text}
 /&gt;
 ))}

</code></pre> 最終的にスタイリングも含めて行うと以下の様な表示になります。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/db996a56ca2143a896586f1332d1f5e5/img.png" alt=""> <h2 id="hb9c6635447">💭改行を入れたい場合</h2>set:html というものが用意されているようです。 vueでいうところの、v-htmlと同じ様な感じですね。<pre><code>&lt;p class="app-card__text" set:html={text}&gt;&lt;/p&gt;</code></pre> この様な形にすると、改行タグが反映されます。 <h2 id="h62962eee4e">(おまけ)パス変更</h2>相対パスではなく、@/形式で指定する方法は以下の通りです。<pre><code>import { defineConfig } from "astro/config";
import { fileURLToPath } from "url";
import path, { dirname } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);


// https://astro.build/config
export default defineConfig({
 vite: {
 resolve: {
 alias: {
 "@/": `${path.resolve(__dirname, "src")}/`,
 },
 },
 },
});

</code></pre> <a href="https://frontendclub.org/blog/how-to-write-project-root-based-component-path/" target="_blank" rel="noopener noreferrer">パス変更についての参考サイト</a>

Astroを使ってコンポーネントに値を渡す方法についてご紹介しています。

[Astro] コンポーネントに値を渡す方法(props)

あるページ内にSwiperを入れた所、ページ遷移で入ってきた時のみ自動再生が止まってしまう現象に遭遇しました。 <h2 id="ha674a2016e">状況</h2>・ページ遷移で入ってきた時に自動再生が動かなくなる ・その場でリロードすると正常に動く ・特にエラーが出ている様子なし <h2 id="hc4c05c18f9">解決策</h2>以下の記事にヒントがあったので試した結果、正常に動作するようになりました。 <a href="https://github.com/nolimits4web/swiper/issues/6144" target="_blank" rel="noopener noreferrer">参考サイト</a> refでSwiper表示のフラッグを作っておき、watchで入ってきたタイミングで表示させる処理を行うようです。 <pre><code>const showSwiper = ref&lt;boolean&gt;(false)

watch(
 () =&gt; router name,
 (newValue) =&gt; {
 if (newValue === 'router name') {
 showSwiper.value = true
 } else {
 showSwiper.value = false
 }
 },
 { immediate: true }
)


&lt;div v-if="showSwiper"&gt;...&lt;/div&gt;</code></pre> SPA周りはこのような小さなところで躓きがちなので、相変わらず難しいですね。 ちなみにapp.vue(グローバル)に配置されるSwiperの自動再生は特別な処理をしなくても動きます。

ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件についての改善策をご紹介

[nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について

※備忘録です <h2 id="h53f2a417dd">今回の問題</h2>Nuxt3でGSAPを使ったTransition実装しました。 以下のサイトを参考に、watchでTransitionを監視して完了した後にwatch内を動作させる処理までは問題なくいけました。 https://stackblitz.com/edit/nuxt-starter-bthjlg?file=pages%2Findex.vue しかし、ASScrollのスクロールしたtransform値が遷移後に0となってしまう現象に遭遇。 これが起きると遷移した後にページ先頭に戻るため、見栄えがよくないしカクッとしてしまう。 <h2 id="h1428b8c018">解決したいこと</h2>ページ遷移が始まると同時にtransform値を0にしたい(実質ページ先頭に戻す形にしたい) <h2 id="h94f6360897">解決した方法</h2>ASScrollの再設定タイミングを以下に設置すると理想の挙動になった。<pre><code>watch(
 () =&gt; transitionState.transitionComplete,
 (newValue) =&gt; {
 $asscroll.enable({ reset: true });
 if (newValue) {
 ctx.value = $gsap.context((self) =&gt; {
　　　　　　　　　//各種処理
 }, main.value); // &lt;- Scop
 }
 }
);</code></pre> ■注意点 このwatchをonMountedで囲むと思い通りの挙動にならない。

Transition遷移時、ASScrollのスクロール値を0にする方法についてご紹介しています。

[nuxt3]Transition遷移時、ASScrollのスクロール値を0にする

皆さんはGSAPのpinを使ったときに色々うまくいかなかった経験ありませんか？ 何かと問題が起きがちなpinについて1つ問題が起こり、一旦の解決できたのでその記録です。 <h2 id="h4251becf5b">問題となった事象</h2>PCでは問題なく動作していたのですが、SPのアドレスバーリサイズに引っかかってしまいサイト内がぎこちない挙動になってしまいました。 見た感じ、アドレスバーのリサイズ時にrefresh(再計算)が起こることによって高さが変わることが原因だと考えました。 <h2 id="hb54b9df6f4">対処方法</h2>正規の対応かわかりませんが以下で解決しました。 <h3 id="h8a2ec6effc">pinを設定している親要素の高さを固定値にする</h3>最初は高さを設定していなかったのですが、固定値を設定しました。 <h3 id="hd0941514ad">endの設定を変える</h3>挙動が不安定の時は以下のようにしていました。<pre><code>end:"+=270%"</code></pre> こちらを以下に変えます。<pre><code>end:`+=${2500 - window.innerHeight}px`</code></pre> 上記の2つの項目を行うことによって、アドレスバーでのリサイズ問題は解決しました。

gsapのpinで起きた問題についての解決をご紹介しています。

GSAPのpin設定について

慣性スクロールにASScrollを導入したのですが、ScrollTriggerのリサイズが上手く動作しませんでした。 その時の状況としては、それぞれGSAP・ASScrollは最新バージョンで運用していました。 <h2 id="hfb1a1a5463">リサイズが動作しなかった原因</h2>どうやらプラグイン同士のバージョン相性が原因だったようです。 GSAPのバージョンを 3.11.0まで落としたらScrollTriggerのリサイズが正常に動作するようになりました。 ASScrollバージョンアップがされていない？ので、最新バージョンのGSAPに対応していなかった感じでしょうか。 もしこの方法以外で解決の仕方がわかる方がいましたら、ご連絡ください、！ <a href="https://o-kraft.com/contact/" target="_blank" rel="noopener noreferrer">連絡先URL</a>

慣性スクロールにASScrollを導入した時にGSAPのScrollTriggerリサイズが正常に動作しなかった件についてご紹介しています。

GSAP × ASScrollについて

glslifyを使うのに地味に苦労したので、備忘録として残します。 <h2 id="h3532d5b1c9">glslifyをインストール</h2><pre><code>npm install -g glslify</code></pre> <h2 id="h2d91a70d0d">公開モジュールをインストール</h2>今回はcurlNoiseを使います。<pre><code>npm install glsl-curl-noise</code></pre> <h2 id="h9d9d12705f">glslファイルにインポート</h2><pre><code>#pragma glslify: curlNoise = require(glsl-curl-noise)</code></pre> <h2 id="h753ada0f86">インポートしたものをコンパイルする</h2><pre><code>glslify vertex.glsl -o index.glsl</code></pre> vertex.glslのあるディレクトリに移動して実行しましょう。 index.glslが出力されます。 <h3 id="hf796029b25">■出力内容</h3><pre><code>#define GLSLIFY 1
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// Lastmod : 20110822 (ijm)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
//


vec3 mod289(vec3 x) {
 return x - floor(x * (1.0 / 289.0)) * 289.0;
}


vec4 mod289(vec4 x) {
 return x - floor(x * (1.0 / 289.0)) * 289.0;
}


vec4 permute(vec4 x) {
 return mod289(((x*34.0)+1.0)*x);
}


vec4 taylorInvSqrt(vec4 r)
{
 return 1.79284291400159 - 0.85373472095314 * r;
}


float snoise(vec3 v)
 {
 const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
 const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);


// First corner
 vec3 i = floor(v + dot(v, C.yyy) );
 vec3 x0 = v - i + dot(i, C.xxx) ;


// Other corners
 vec3 g = step(x0.yzx, x0.xyz);
 vec3 l = 1.0 - g;
 vec3 i1 = min( g.xyz, l.zxy );
 vec3 i2 = max( g.xyz, l.zxy );


 // x0 = x0 - 0.0 + 0.0 * C.xxx;
 // x1 = x0 - i1 + 1.0 * C.xxx;
 // x2 = x0 - i2 + 2.0 * C.xxx;
 // x3 = x0 - 1.0 + 3.0 * C.xxx;
 vec3 x1 = x0 - i1 + C.xxx;
 vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
 vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y


// Permutations
 i = mod289(i);
 vec4 p = permute( permute( permute(
 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
 + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
 + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));


// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 float n_ = 0.142857142857; // 1.0/7.0
 vec3 ns = n_ * D.wyz - D.xzx;


 vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)


 vec4 x_ = floor(j * ns.z);
 vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)


 vec4 x = x_ *ns.x + ns.yyyy;
 vec4 y = y_ *ns.x + ns.yyyy;
 vec4 h = 1.0 - abs(x) - abs(y);


 vec4 b0 = vec4( x.xy, y.xy );
 vec4 b1 = vec4( x.zw, y.zw );


 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 vec4 s0 = floor(b0)*2.0 + 1.0;
 vec4 s1 = floor(b1)*2.0 + 1.0;
 vec4 sh = -step(h, vec4(0.0));


 vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
 vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;


 vec3 p0 = vec3(a0.xy,h.x);
 vec3 p1 = vec3(a0.zw,h.y);
 vec3 p2 = vec3(a1.xy,h.z);
 vec3 p3 = vec3(a1.zw,h.w);


//Normalise gradients
 vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
 p0 *= norm.x;
 p1 *= norm.y;
 p2 *= norm.z;
 p3 *= norm.w;


// Mix final noise value
 vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
 m = m * m;
 return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
 dot(p2,x2), dot(p3,x3) ) );
 }


vec3 snoiseVec3( vec3 x ){


 float s = snoise(vec3( x ));
 float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
 float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
 vec3 c = vec3( s , s1 , s2 );
 return c;


}


vec3 curlNoise( vec3 p ){
 
 const float e = .1;
 vec3 dx = vec3( e , 0.0 , 0.0 );
 vec3 dy = vec3( 0.0 , e , 0.0 );
 vec3 dz = vec3( 0.0 , 0.0 , e );


 vec3 p_x0 = snoiseVec3( p - dx );
 vec3 p_x1 = snoiseVec3( p + dx );
 vec3 p_y0 = snoiseVec3( p - dy );
 vec3 p_y1 = snoiseVec3( p + dy );
 vec3 p_z0 = snoiseVec3( p - dz );
 vec3 p_z1 = snoiseVec3( p + dz );


 float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
 float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
 float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;


 const float divisor = 1.0 / ( 2.0 * e );
 return normalize( vec3( x , y , z ) * divisor );</code></pre>

glslifyを利用する方法についてご紹介しています

glslifyを使って公開されているモジュールを使用する方法

こんにちは、Okadaです。 設定の仕方を度々忘れてしまってはググっているので備忘録として残します。 各種拡張機能がインストールしてある前提で記述しています。 <h2 id="h2625f069f9">Prettierをインストール</h2><pre><code>yarn add -D prettier eslint-config-prettier</code></pre> <h2 id="h1165208019">setting.jsonに記述</h2>.vscode/settings.json<pre><code>{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 }
}</code></pre> 細かな設定は各自で調節してください。 以上で動作します。

Prettierをvscodeで利用できるようにする設定についてご紹介しています。

[vscode]Prettierをvscodeで利用できるようにする設定

こんにちは、Okadaです。 案件でimgタグに読み込んでいるsvg画像の色を変えたい場面に遭遇しました。 インラインで読み込んでもよいのですが、色々と処理周りで見づらくなるので何か良い方法はないか調べていたら、以下のような方法がありました。 <h2 id="hbbac01a53c">filterプロパティで変更する</h2>filterを使えば簡単に変更できるようですね。 設定する際に以下のサイトで値を入れるとやりやすいです。 https://codepen.io/sosuke/pen/Pjoqqp Target colorに変更したい色のHexを入力 あとは出力された値を指定するだけです。 <h2 id="hf614f67286">備考</h2>これは私のやり方が悪かったのか不明ですが、希望通りの色にならない時もありました。 ですが、出力された値をいじって変更できるので少し地道ですが希望の色にならなかった場合は、同じように検証から調節してみてください。

CSSだけでsvg画像の色を変える方法についてご紹介しています。

imgタグに読み込んでいるsvg画像の色を変える方法

nuxt2では、以下のようにinjectを使用してpluginsに登録することができました。<pre><code>export default (context, inject) =&gt; {
 inject('fugal', fuga);
}</code></pre> ですが、nuxt3ではinjectではなくprovideを使用して登録することができます。 <h2 id="hd69117dfae">provideでの書き方</h2> <pre><code>export default defineNuxtPlugin((nuxtApp) =&gt; {
 return {
 provide: {
 fuga: fuga,
 },
 };
});</code></pre> <h2 id="ha0e95c0643">使用方法</h2>使いたい場所で以下のようにすると呼び出すことができます。<pre><code>&lt;script setup lang="ts"&gt;
const { $fuga } = useNuxtApp();
&lt;/script&gt;</code></pre>

nuxt3での自作クラス(コード)の登録方法についてご紹介しています。

[nuxt3]自作クラス(コード)を登録する方法

こんにちは、Okadaです。 nuxt3でsitemapを作成したいなーと思ったのですが、良さそうなモジュール等が見つからず悩んでいました。 ですが先日以下のgithubを見つけました。 <a href="https://github.com/benoitdemaegdt/nuxt3-sitemap" target="_blank" rel="noopener noreferrer">https://github.com/benoitdemaegdt/nuxt3-sitemap</a> 上記を使用して正常にsitemap.xmlを作成できましたので記録として残します！ <h2 id="hf2caaf8b9c">sitemap.tsを作成</h2>modules/sitemap.tsを作成して以下を追記してください。<pre><code>import { mkdirSync, writeFileSync, copyFile } from "fs";
import { Readable } from "stream";
import { dirname } from "path";
import { SitemapStream, streamToPromise } from "sitemap";
import { defineNuxtModule, createResolver } from "@nuxt/kit";


// https://github.com/benoitdemaegdt/nuxt3-sitemap
export default defineNuxtModule({
 meta: {
 name: "sitemap",
 version: "0.0.1",
 configKey: "sitemap",
 compatibility: { nuxt: "^3.0.0-rc.12" },
 },
 defaults: {
 hostname: "https://xxxx.com",
 },
 async setup(options, nuxt) {
 async function generateSitemap(routes) {
 const sitemapRoutes = routes.map((route) =&gt; route.path);


 // https://github.com/ekalinin/sitemap.js#generate-a-one-time-sitemap-from-a-list-of-urls
 const stream = new SitemapStream({ hostname: options.hostname });
 return streamToPromise(Readable.from(sitemapRoutes).pipe(stream)).then((data) =&gt; data.toString());
 }


 function createSitemapFile(sitemap, filepath) {
 const dirPath = dirname(filepath);
 mkdirSync(dirPath, { recursive: true });
 writeFileSync(filepath, sitemap);
 }


 const resolver = createResolver(import.meta.url);
 const filePath = resolver.resolve(nuxt.options.srcDir, "node_modules/.cache/.sitemap/sitemap.xml");


 nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || [];
 nuxt.options.nitro.publicAssets.push({
 baseURL: "/",
 dir: dirname(filePath),
 });


 nuxt.hook("nitro:build:before", (nitro) =&gt; {
 const paths = [];
 const EXCLUDED_KEYWORDS = ["/api/_content", "_payload.js", "200.html"];
 nitro.hooks.hook("prerender:route", (route) =&gt; {
 const shouldBeAddedToSitemap = EXCLUDED_KEYWORDS.every((excludedKeyword) =&gt; !route.route.includes(excludedKeyword));
 if (shouldBeAddedToSitemap) {
 paths.push({ path: route.route });
 }
 });
 nitro.hooks.hook("close", async () =&gt; {
 const sitemap = await generateSitemap(paths);
 createSitemapFile(sitemap, filePath);


 const outptFilepath = resolver.resolve(nuxt.options.srcDir, ".output/public/sitemap.xml");


 copyFile(filePath, outptFilepath, (err) =&gt; {
 if (err) {
 console.log("sitemap.xml No created");
 console.log(err);
 } else {
 console.log("sitemap.xml created");
 }
 });
 });
 });
 },
});</code></pre> <h2 id="h65384d0d30">モジュールをインストール</h2><pre><code>yarn add sitemap</code></pre> <h2 id="h9fdeaa0972">nuxt.config.tsに追記</h2><pre><code>export default defineNuxtConfig({
 // some configs
 modules: ['~/modules/sitemap'],
 sitemap: {
 hostname: 'https://&lt;YOUR_DOMAIN&gt;',
 },
 // more configs
})</code></pre> 最後にyarn generateなどを行うと正常に生成されました。

nuxt3でサイトマップを生成する方法についてご紹介しています。

[nuxt3]サイトマップの作成

nuxt3で構造化データを入れる作業が発生したので、やり方を記載します、！ <h2 id="h1cdc7cbf20">モジュールを取得する</h2>nuxt-jsonldを使うと簡単にできるようなのでyarnを使ってもってきます。<pre><code>yarn add nuxt-jsonld</code></pre> <h2 id="h9213b096ca">nuxt.config.tsに追記する</h2><pre><code>export default defineNuxtConfig({
 modules: ['nuxt-jsonld'],
});</code></pre> <h2 id="h4b8a45f5b3">scriptの中に追記</h2><pre><code>&lt;script lang="ts" setup&gt;
useJsonld({
 '@context': 'https://schema.org',
 '@type': 'Thing',
 name: 'static json',
});
&lt;/script&gt;</code></pre> 基本的にはこれで完了のようです！ 構造化データはSEO対策において重要なので、しっかりと設定していきたいですね。

nuxt3で構造化データを入れる方法について

[nuxt3]構造化データの登録方法について

こんにちは。okadaです。 ローディング画面やオープニングアニメーションで初回表示のみで2回目以降は非表示にする対応があると思います。 初回のみ表示の処理は比較的に簡単なのですが、2回目以降の非表示の際にページ遷移の時、若干のちらつきがでてしまうので こちらをなんとか解決したいなと思いました。 割と強引な手段な気がするので最適解ではないです。 一応備忘録として残します。 <h2 id="h431eeaa8b1">初回のみ表示処理</h2>sessionStorageを使って実装します。<pre><code> const sessionKey = "key";
 const sessionValue = true;
 if (!sessionStorage.getItem(sessionKey)) {
 sessionStorage.setItem(sessionKey, sessionValue);
 }</code></pre> <h2 id="hc5db4dbb35">ページ遷移時のちらつきを防止</h2>sessionStorageのif文で2回目以降の時には対象の要素に非表示のスタイルを適用させればよいのですが、 こちらで行うと読み込みの関係で若干ちらついてしまいます。 なので、2回目以降はheadタグ内に非表示用の新たなスタイルシートを追加する方法にしました。<pre><code> &lt;script&gt;
 const sessionKey = "accesed";
 const sessionValue = true;

 if (!sessionStorage.getItem(sessionKey)) {
 sessionStorage.setItem(sessionKey, sessionValue);
 } else {
 const link = document.createElement('link')
 const head = document.querySelector('head')
 link.setAttribute('rel', 'stylesheet')
 link.setAttribute('href', '&lt;?php echo esc_url(get_template_directory_uri()); ?&gt;/dist/css/animation-hide.css')
 head.append(link)
 }
 &lt;/script&gt;</code></pre> 上記をheadタグ内に入れる感じですね。 一応こちらで2回目以降のページ遷移時に非表示にしたい要素のちらつきはなくなりました。 ご参考までに試してみてください、！

ローディング画面やオープニングアニメーションで初回表示のみで2回目以降は非表示にする対応について紹介しています。

初回限定表示のローディングのちらつきについて

こんにちは。okadaです。 毎回nuxtでanalyticsを設定する方法を忘れてはググっているので、nuxt3での設定方法を備忘録として載せておきます、！ <h2 id="h48c8001da3">モジュールのインストール</h2>以下のモジュールがnuxt3に対応しているようですので、こちらを使っていきます。<pre><code>yarn add vue-gtag-next</code></pre> <h2 id="hd86fb42240">pluginsに追加</h2>analytics.jsを作成します。<pre><code>import VueGtag from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) =&gt; {
 nuxtApp.vueApp.use(VueGtag, {
 property: {
 id: 'G-xxxxxxxxx'
 }
 })
})</code></pre> 基本設定は以上です。 自分はこれで使えるようになったので、いけると思い...ます！！

GoogleAnalyticsをnuxt3で設定方法をご紹介しています。

[nuxt3]GoogleAnalytics設定について

こんにちは、Okadaです。 Firebaseを触るきっかけがありましたので、連携の方法などを紹介したいと思います！ ※firebaseのプロジェクト作成などは完了している前提で記述しています。 <h2 id="h418951f7b5">Firebaseをインストール</h2><pre><code>yarn add firebase</code></pre> <h2 id="hb298d1b53d">Firebaseコマンドを使用できるようにする</h2>コマンドを使えるように以下を叩く<pre><code>npm install -g firebase-tools</code></pre> 次に以下を叩いてバージョンが出れば完了です！<pre><code>firebase --version</code></pre> <h2 id="hab11b346bb">Firebaseにログイン</h2>紐付けを行う為にはログインを行う必要があります。<pre><code>firebase login</code></pre> ブラウザ側で諸々指示が出てくるのでその通りに進めてください。 ログインに成功するとターミナル内で完了メッセージが表示されます。 以上で紐付けは完了しました！ <h2 id="h9425b85f70">プロジェクトに関数をあげる前に</h2>以下コマンドであげたいプロジェクトを登録します。<pre><code>firebase use --add</code></pre>

Firebaseの導入や連携について紹介しています。

[Firebase]vscodeと連携させる手順

こんにちは、Okadaです。 nuxt3で環境変数を設定する時に詰まってしまったポイントについて紹介していきます。 <h2 id="h771b7595b5">nuxt.config.ts</h2>nuxt2時と同じように下記の形式で記述をしました。<pre><code>publicRuntimeConfig: {
 baseUrl: BASE_URL,
 apiKey: API_KEY,
 },</code></pre> その結果エラーがでてしまいました。 調べてみるとnuxt3では記述方法が変わっていたようです。 ■正しい記述<pre><code> runtimeConfig: {
 public: {
 baseUrl: BASE_URL,
 apiKey: API_KEY,
 },
 },</code></pre> publicRuntimeConfigではなく、runtimeConfigにして設定するのが正しいようです。 <h2 id="ha75c470ff4">呼び出し方</h2>呼び出し方は、 useRuntimeConfigを使用して行います。<pre><code>const $config = useRuntimeConfig();
const { data } = await useFetch("/blog", {
 baseURL: $config.baseUrl,
 headers: {
 "X-MICROCMS-API-KEY": $config.apiKey,
 },
});</code></pre>

nuxt3で環境変数を設定する時に詰まってしまったポイントについて紹介していきます。

[nuxt3]環境変数を設定する時に詰まったポイント

こんにちは、Okadaです。 nuxt3がベータ版から正式版になったということで最近より一層nuxtについて勉強をしています。 今回は、SCSSの変数などをグローバルに使用する方法をご紹介していきます。 <h2 id="h771b7595b5">nuxt.config.ts</h2>nuxt3からviteが採用されているので、基本的にはvite設定に沿って行っていきます。 nuxt.config.tsに以下のような形で記述をします。<pre><code> vite: {
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: '@import "@/assets/css/setting.scss";',
 },
 },
 },
 },</code></pre> 基本的にはこちらでグローバルで変数が使用可能になります。 今回は、コンポーネントにmixinを使用しました。 <h2 id="h567cdb750a">component.vue</h2>■style<pre><code>.ly-header__inner {
 padding: 2.4rem 2rem;
 @include mq(md) {
 padding: 2rem 1.6rem;
 }
}</code></pre> <h2 id="h8802a9b1d7">オススメNuxt記事</h2><a href="https://next-blog.site/media/nuxt3-props-ref" target="_blank" rel="noopener noreferrer">propsで真偽値を渡して、分岐させる方法[nuxt3]</a> <a href="https://next-blog.site/media/nuxt3-microcms" target="_blank" rel="noopener noreferrer">microcmsを導入する[nuxt3]</a> <a href="https://next-blog.site/media/nuxt3-navigation-guards" target="_blank" rel="noopener noreferrer">ナビゲーションガードについて[nuxt3]</a>

nuxt3でSCSSの変数などをグローバルに使用する方法をご紹介していきます。

[nuxt3]SCSSの変数をグローバルで使えるようにする方法

propsを使って受け取った真偽値を元に、v-ifを使って出し分けをする方法についてです。 <h2 id="h4318257281">コンポーネント側</h2><pre><code>&lt;script setup lang="ts"&gt;
interface Props {
 className: string;
 arrowColor: boolean;
}

const Props = withDefaults(defineProps&lt;Props&gt;(), {
 className: "",
 arrowColor: true,
});

let colorFlag = ref&lt;boolean&gt;(Props.arrowColor);
&lt;/script&gt;

&lt;template&gt;
 &lt;span :class="className"&gt;
 &lt;img src="@/assets/images/btn-arrow.svg" alt="" v-if="colorFlag" /&gt;
 &lt;img src="@/assets/images/btn-arrow-black.svg" alt="" v-else /&gt;
 &lt;/span&gt;
&lt;/template&gt;</code></pre> <h2 id="h1c688d2170">呼び出す側</h2><pre><code>&lt;CommonLinkButton className="_button-blue" :arrowColor="true" /&gt;</code></pre>

nuxt3にてpropsを使用し、受け取った真偽値によって条件分岐をする方法についてご紹介しています。

[nuxt3]propsで真偽値を渡して、分岐させる方法

今回は、IntersectionObserverを使用して簡単な動きを付ける方法をご紹介します。 完全備忘録なので、もし不備等ございましたら優しくご指摘いただけると嬉しいです笑 <h2 id="hff4d84aba8">IntersectionObserverを呼び出す</h2>CDNなどを読み込む必要はないので、早速呼び出す方法をコードでご紹介します。 <pre><code>//ターゲット(監視対象)の要素を変数itemに格納
const item = document.querySelector(".item");　
const callback = function() {　
 console.log('監視しています！');
}

//new演算子を使用して初期化
const io = new IntersectionObserver(callback);　
//item要素の監視を開始
io.observe(item);　</code></pre> 上記がIntersectionObserverを使用するための基本的なコードです。 画面内にitem要素が《入った時》と《出た時》両方のタイミングでコンソールに「監視しています!」という文言が表示されます。 <h2 id="ha2652c5e65">画面内に入った時と出た時で挙動を変える</h2>ある要素が画面内に入った時に、特定の要素を表示させてみます。<pre><code>//ターゲット(監視対象)の要素を変数wrapperに格納
const wrapper = document.querySelector(".wrapper");
//アニメーションさせたい要素を変数itemに格納
const item = document.querySelector(".item");

//entriesをループさせて、if文で挙動を分岐
function callback(entries) {
 entries.forEach(entry =&gt; {
 if(entry.isIntersecting) {
 item.style.opacity = 1;
 } else {
 item.style.opacity = 0;
 }
 });
 }

const observer = new IntersectionObserver(callback);
observer.observe(wrapper);</code></pre>ある要素(wrapper)が画面内に入って来たら、itemのopacityは1に、wrapperが画面から出たらopacityは0になります。 isIntersectingというメソッドを使用して、画面に入っている時はtrue、画面から出た時にfalseを返しています。 例えば、opacityだけではなくclassListを使用してクラスを付与することで様々なアニメーションを加えることも可能です。 <h2 id="h2583fe8db4">指定できるオプション</h2>IntersectionObserverでは、3つのオプションを指定することができます。 <h3 id="h1907563bc5">root</h3>rootでは、ターゲットの監視を行う範囲の指定ができます。 指定しない場合のデフォルトは、ビューポート（表示されている画面の範囲）となります。<pre><code>const options = {
 //wrapper クラスを指定
 root: document.querySelector('.wrapper'),
}</code></pre>こちらのコードでは、wrapperクラスを持つ要素がターゲットの監視対象範囲となります。 <h3 id="h0e63ef043f">rootMargin</h3>監視対象範囲からのmarginを指定することができます。 例えば、10pxを指定した場合rootの範囲の上下左右10px内側が交差位置になります。 指定方法はmarginとほぼ同じですが、値はpxと%のみ使用可能です。 また、0を指定する場合でもpxや%を記述しないとエラーになります。 デフォルト値は0です。 <pre><code>const options = {
 rootMargin: '10px 0px'
}</code></pre>こちらのコードでは、rootの監視対象範囲から上下10pxのrootMarginを取ります。 <h3 id="hf6a8a7bf34">threshold</h3>ターゲットが監視対象範囲にどれくらい入ったらコールバック関数を呼び出すかを指定します。 値は0~1で指定可能です。 0は、ターゲットの要素が1pxでも監視対象範囲に入ればコールバック関数を呼び出します。 0.5は、ターゲットの要素の半分が監視対象範囲に入った段階でコールバック関数を呼び出します。 1は、ターゲットの要素全体が監視対象範囲に入った段階でコールバック関数を呼び出します。 また、配列での指定も可能で[0, 0.5, 1]と指定した場合は、ターゲットが監視対象範囲に入った時、半分入った時、要素全体が入った時にコールバック関数を呼び出します。 デフォルト値は0です。 <pre><code>const options = {
 threshold: 1
};</code></pre> <h2 id="h3aed2cbf8d">オプションを設定した場合の呼び出し方</h2>IntersectionObserverにオプションを設定した場合は以下のように呼び出しをします。 <pre><code>//ターゲット(監視対象)の要素を変数itemに格納
const item = document.querySelector(".item");　

//オプションを設定
const options = {
 rootMargin: '10px',
 threshold: 1
};

const callback = function() {　
 console.log('監視しています！');
}

//new演算子を使用して初期化
const io = new IntersectionObserver(callback, options);　
//item要素の監視を開始
io.observe(item);　</code></pre>まず、optionsという定数に指定したいオプションを記述します。 そして、IntersectionObserverを初期化するコードの第二引数に先ほどオプションを設定した定数名を記述します。 これで、IntersectionObserverでオプションを使用することができます。 <h2 id="ha214098e44">まとめ</h2>IntersectionObserverは読み込みなどが必要ないので、とても手軽に使えるなと感じました。 GSAPのScrollTriggerを使用してスクロールのアニメーションをつけることが多かったのですが、シンプルな動きを実装したい時にはIntersectionObserverを積極的に使っていきたいです。 これから色々と試してみて、また気づいたことがあれば記事にします！

今回は、IntersectionObserverを使用した簡単なアニメーションをご紹介します。
IntersectionObserverは読み込みなどが必要ないので、とても手軽にスクロールに応じた動きをつけることが出来て便利です。

IntersectionObserverを使用して簡単な動きを実装する

今回は、Liquidを使用した配列の作り方をご紹介します。 <h2 id="h54d7a5b282">splitフィルターを使用して配列を作成</h2>Liquidで、配列を作る時はsplitというフィルターを使用します。 <pre><code>{% assign sweets = 'cake, icecream, crepe, applepie' | split: ', ' %}</code></pre>これで、sweetsという配列が完成しました。 配列は以下のように作成されます。 ①sweetsという変数に文字列としていくつか項目を追加する。 ②splitフィルターを使用して文字列の', 'で分割する。 <h3 id="h108e23fd8e">splitはどんな文字列でも分割可能</h3>今回は', 'で分割しましたが、例えば以下のように分割して配列を作成することも可能です。<pre><code>//' | 'で分割
{% assign sweets = 'cake | icecream | crepe | applepie' | split: ' | ' %}

//$で分割
{% assign sweets = 'cake$icecream$crepe$applepie' | split: '$' %}

//ひらがな'あ'で分割
{% assign sweets = 'cakeあicecreamあcrepeあapplepie' | split: 'あ' %}</code></pre>一応ご紹介をしましたが、', 'での分割が見やすくて一般的かと思うので他の記号での分割はあまりおすすめしません。笑 <h3 id="h6f62823970">スペースなどに気を付ける</h3>一番最初に作成した', 'で分割した配列ですが、スペースを入れない場合うまく配列が生成されない可能性があります。 splitする文字列(記号)を指定する際は、スペースの有無など細かい部分についても確認しましょう。 <h2 id="hda269dcd6b">配列に要素を追加する</h2><pre><code>//変数を作る
{% assign sweets = 'cake, icecream, crepe, applepie' %}

//文字列tartを追加する
{% assign sweets = sweets | append: ', ' | append: 'tart' %}
{% assign sweets_array = sweets | split: ', ' %}</code></pre>要素を追加していく場合はappendを使用して文字列を繋げていき、最後にsplitで配列を作成します。 <h2 id="hada0eb3aa9">配列の中身を使用する方法</h2>Liquidで作成した配列の中身を、取り出して表示してみましょう。 <h3 id="h1e162e192d">インデックス番号で特定の要素を取得する</h3><pre><code>//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//インデックス番号で特定の要素を取得する
&lt;p&gt;{{ sweets[0] }}&lt;/p&gt; // 表示結果：cake</code></pre>配列のインデックス番号は0から始まり、前から順番に割り当てられます。 今回は、0: cake, 1: icecream, 2: crape, 3: applepie, 4: tartと割り当てられているため、0番目のcakeが表示されました。 このように、{{ 配列名[インデックス番号] }}と記述することで、中身を1つだけ取り出すことが出来ます。 <h3 id="h34b13a4e91">for文を使用して順番に要素を取得する</h3><pre><code>//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//for文で配列の要素を順番に表示する
{% for item in sweets %}
 &lt;p&gt;I like {{ item }}! &lt;/p&gt;&lt;br&gt;
{% endfor %}</code></pre>こちらの表示結果は、 I like cake! I like icecream! I like crape! I like applepie! I like tart! となります。 <h3 id="h101f76f167">for文とif文を併用して特定の要素を取得する</h3><pre><code>//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//for文とif文を使用してsweetsの中で'c'を含む要素のみ取得する
{% for item in sweets %}
 {% if item contains 'c' %}
 &lt;p&gt;I like {{ item }}! &lt;/p&gt;&lt;br&gt;
 {% endif %}
{% endfor %}</code></pre>こちらの表示結果は、 I like cake! I like icecream! I like crape! となります。 cが含まれていないapplepieとtartは表示されませんでした。 このように、配列とその他の処理を組み合わせることで、様々な処理ができるようになります。 <h2 id="ha214098e44">まとめ</h2>Liquidを使用した配列の作り方をご紹介しました。 他のプログラミング言語を学習された方は、少し煩わしく感じるかもしれません。 配列は、Shopify構築で度々登場するので覚えておくと便利です。 Liquidには配列のフィルターもいくつかあるので、いつかそれも記事にしたいと思います。

今回は、Liquidを使用した配列の作り方をご紹介します。
他のプログラミング言語を学習された方は、少し煩わしく感じるかもしれませんが、Shopify構築では度々登場するので覚えておくととても便利です。

【Shopify】Liquidを使用した配列の作り方

今回は、Liquidで変数を宣言する方法をご紹介します。 Liquidには2種類の宣言方法があるので、使用する場所によって使い分けができるといいかと思います。 <h2 id="h93542c4dc7">変数宣言 assignの使い方</h2>変数宣言は、Liquidの{%%}タグの中で行います。<pre><code>{% assign favorite_sweets = 'チョコレートケーキ' %}

&lt;p&gt;{{ favorite_sweets }}&lt;/p&gt; //表示結果：チョコレートケーキ</code></pre> 今回は、favorite_sweetsという変数に「チョコレートケーキ」という文字列を代入しています。 基本的な書き方としては、assignに続いて変数名を記述し、イコールで繋いで初期値を代入します。 値には、様々なデータ型の挿入が可能です。 また、{{}}で変数を囲むことで画面上に表示することができます。 <h3 id="ha140fa9b02">assignでの変数宣言の例</h3><pre><code>{% assign sweets = 'チョコレートケーキ' %}
{% assign number = 5 %}
{% assign boolean = true %}</code></pre> <h3 id="h1e06f5bdc6">assignの内容を変更したい時</h3>変数に代入した値を変更したい場合も、改めてassignで記述する必要があります。<pre><code>{% assign favorite_sweets = 'チョコレートケーキ' %}
{{ favorite_sweets }} //表示結果：チョコレートケーキ

//favorite_sweetsの値を変更
{% assign favorite_sweets = 'モンブラン' %}
{{ favorite_sweets }} //表示結果：モンブラン</code></pre>上記のように同じ変数名を定義しても、エラーは表示されません。 今回は意図的に変数の上書きを行なっているので問題ありませんが、変数名の意図しない重複には注意が必要です。 <h2 id="hc2dd097b4d">変数宣言 captureの使い方</h2>こちらも、assign同様{%%}の中で変数宣言を行います。 assignと異なるのは、captureには閉じタグが必要という点です。<pre><code>{% capture limited %}
 このチョコレートは期間限定商品です。
{% endcapture %}

&lt;p&gt;{{ limited }}&lt;/p&gt; //表示結果：このチョコレートは期間限定商品です。</code></pre>今回は、limitedという変数に「このチョコレートは期間限定商品です。」という文字列を代入しています。 基本的な書き方は、{% capture 変数名 %}の記述の後ろに任意の記述を行い、最後に{% endcapture %}で閉じます。 <h2 id="hbb0e8a26ea">assignとcaptureの違い</h2>ここまでの例では、同じように文字列を代入しただけなので、違いが分かりづらかったかもしれません。 assignとcaptureの大きな違いは、captureではHTMLやLiquidのコードなども変数に代入できるという点です。 assignはシンプルに文字列や数値などを代入するのに対して、captureでは以下のような変数を作成することもできます。<pre><code>{% capture shipping %}
 {% for tag in product.tags %}
 {% if tag == 'icecream' %}
 &lt;p&gt;こちらの商品はクール便でお届けいたします。&lt;/p&gt;
 {% else %}
 &lt;p&gt;こちらの商品は通常配送です。&lt;/p&gt;
 {% endif %}
 {% endfor %}
{% endcapture %}</code></pre>shippingという変数にif文で条件分岐をした内容を代入しました。 こちらを商品ページに表示してみます。<pre><code>{{ shipping }}</code></pre>たったこれだけのコードで、タグにicecreamがついている商品の商品ページで「こちらの商品はクール便でお届けいたします。」と表示され、その他の商品のページでは「こちらの商品は通常配送です。」と表示されます。 また、assignとcaptureを組み合わせて使用することも可能です。<pre><code>{% assign open = 7 %}
{% assign close = 23 %}

{% capture business_hours %}
&lt;p&gt;営業時間は{{ open }}時から{{ close }}時です。&lt;/p&gt;
{% endcapture %}

{{ business_hours }} //表示結果：営業時間は7時から23時です。</code></pre> <h2 id="h48095de183">オブジェクトも代入できます</h2>captureはもちろん、assignにもオブジェクトが代入できます。<pre><code>{% assign title = product.title %}</code></pre> 例えば、管理画面で動的にコレクションが選択できるコレクションリストセクションを作成した際には、以下のようにcollectionタグに代入しておくと便利です。<pre><code>{% assign collection = section.settings.collection %}</code></pre> コレクション名とコレクションに登録されている商品数を表示してみましょう。<pre><code>//変数に代入しない場合
{{ section.settings.collection.title }}
{{ section.settings.collection.products_count }}

//変数に代入した場合
{{ collection.title }}
{{ collection.products_count }}</code></pre>上記のように変数に代入した場合の方がコードがスッキリとしていて分かりやすくなります。 これだけでは分かりづらいかと思いますが、実際にセクションをカスタマイズする際にはもっと記述が増えて便利さを実感できるかと思います。 <h2 id="ha214098e44">まとめ</h2>変数に代入することで、コードの見通しも良くなる上に再利用もしやすいので是非利用してみてください。

今回は、Liquidで変数を宣言する方法をご紹介します。

Liquidには2種類の宣言方法があるので、使用する場所によって使い分けができるといいかと思います。

【Shopify】Liquidで変数の宣言をする方法

今回は、コレクションに登録されている商品の情報を取得する方法をご紹介します。 コレクションページとその他のページで取得方法が異なるので、ぜひ参考にしてみてください。 <h2 id="h51277b18fe">コレクションページで商品情報を取得する</h2>コレクションページでは、シンプルなコードで商品情報の取得ができます。 ※コレクションページとは、URLが《 /collections/コレクションハンドル》となっているページです。<pre><code>{% for product in collection.products %}
&nbsp; &nbsp; &lt;p&gt;{{product.title}}&lt;/p&gt;
&nbsp; &nbsp; &lt;p&gt;{{product.price}}&lt;/p&gt;
{% endfor %}</code></pre>その他にも、productオブジェクトを使って商品のURLや商品画像などの情報を表示することができます。 使用できるproductオブジェクトについては<a href="https://shopify.dev/api/liquid/objects" target="_blank" rel="noopener noreferrer">公式リファレンス</a>をご確認ください。 <h2 id="h7b1257f18d">コレクションページ以外でコレクションの商品情報を取得する</h2>コレクションページ以外のページで先ほどのコードを記述した場合、どのコレクションの商品情報を取得したいのかが分からないため、エラーとなってしまいます。 今回は、'chocolate'というコレクションハンドルをもつチョコレートコレクションの情報を取得してみます。<pre><code>{% for product in collections["chocolate"].products %}
&nbsp; &nbsp; &lt;p&gt;{{ product.title }}&lt;/p&gt;
&nbsp; &nbsp; &lt;p&gt;{{product.price}}&lt;/p&gt;
{% endfor %}</code></pre>先ほどのcollectionsの記述の後に['コレクションハンドル']という記述を追加しました。 これで、チョコレートコレクションの商品を取得してねというコードになります。 先ほどと同様に、productオブジェクトを使用することで様々な商品情報を取得することができます。 <h2 id="h6e9eef9a14">管理画面から動的にコレクション商品を表示する</h2>管理画面から、表示させるコレクションを動的に変更できるととても便利です。 schemaタグを使用して管理画面からコレクションの選択ができるセクションを作成してみましょう。<pre><code>{% assign collection = section.settings.collection %}

&lt;ul&gt;
 {% for product in collection.products %}
 &lt;li&gt;
 &lt;a href="{{ product.url }}"&gt;
 {{ product.title }}
 &lt;/a&gt;
 &lt;/li&gt;
 {% endfor %}
&lt;/ul&gt;


{% schema %}
{
 "name": "コレクションリスト",
 "settings": [
 {
 "type": "collection",
 "id": "collection",
 "label": "コレクションを選択"
 }
 ],
 "presets": [
 {
 "name": "コレクションリスト"
 }
 ]
}
{% endschema %}</code></pre>これで、管理画面からセクションを追加した際に任意のコレクションを選択できるようになります。 例えば、春・夏・秋・冬のコレクションを作成して、季節ごとに表示するコレクションを変えていきたいという場合でもコードの修正をすることなく簡単に変更が可能です。 <h2 id="had910e0fa9">for文のループ数制限に注意！</h2>Liquidのfor文を使用したループはデフォルトで50回の制限がかかっています。 今回のコレクションから商品情報を取得する場合も例外ではありません。 これは、コレクションページでもその他のページでも同じです。 もし、50商品以上の情報を取得したい場合はpaginateタグを使用する必要があります。 paginateタグの使用方法については以下の記事にまとめていますので、ご参考になりましたら幸いです。 <a href="https://next-blog.site/media/shopify-liquid-for-paginate" target="_blank" rel="noopener noreferrer">【Shopify】Liquidのfor文は50回しかループできない問題について</a> <h3 id="h2473ffae67">paginateタグが必要な例</h3><ul><li>コレクションの商品から、特定のタグが付いた商品のみを表示する。</li><li>コレクションの商品から、〇〇円以下の商品のみを表示する。　など…</li></ul> コレクションの登録アイテム数が50商品以下の場合は問題なく表示されますが、今後商品が増えていくことを考えて最初からpagineteを使用しておくことがおすすめです。 <h3 id="hca8b351a2c">paginateタグが不要な例</h3><ul><li>固定ページにコレクションの全商品を表示させる。　など…</li></ul> コレクションの登録アイテム数が50商品以上の場合でも、ページネーションを追加することで50アイテムごとに1ページ目、2ページ目と表示させることが可能です。 <h2 id="ha214098e44">まとめ</h2>今回ご紹介した内容は、コレクションリストを作成したり、イベント用の固定ページに対象のコレクションを表示させるなど様々な場面で使用できるかと思います。 ぜひお試しください！ ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

今回は、Shopifyのショップで作成した商品コレクションに登録されている商品情報を取得する方法をご紹介します。
コレクションページとその他のページで取得方法が異なるので、ぜひ参考にしてみてください。

【Shopify】コレクションの商品情報を取得する方法

今回は、ShopifyにGSAPを使用したアニメーションを追加する方法をご紹介します。 <h2 id="h8ca67af30e">themeファイルにGSAPを読み込み</h2>Shopifyのテーマファイル（今回はDawnを使用）のlayout / theme.liquid内、bodyタグ最下部に以下のCDNコードを追加します。<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"&gt;&lt;/script&gt;</code></pre>これでGSAPを使う準備が整ったので、アニメーションの実装方法を簡単にご紹介していきます。 <h2 id="h116ca80a0e">アニメーションを追加する</h2>GSAPでは様々なアニメーションをつけることができます。 <h3 id="hb8e374d42d">テキストをフェードインさせる</h3>「タイトルです」というテキストを下からフェードインで表示するアニメーションです。 HTML<pre><code>&lt;h3 class="title"&gt;タイトルです&lt;/h3&gt;</code></pre> CSS<pre><code>.title {
 font-size: 24px;
 color: #333;
 opacity: 0; //アニメーション前は非表示
 transform: translateY(-10px); //アニメーション前は下に10px
}</code></pre> JavaScript<pre><code>gsap.to(".title", {opacity: 1, y: 0, duration: 0.3});</code></pre> 上記のコードでは、「タイトルです」というテキストを0.3秒かけて下からフェードインするアニメーションを実装しています。 <h3 id="h074714dd7c">Timelineを使用して連続したアニメーションを実装する</h3>画像をフェードインで表示させてから、テキストを画像の上に表示していきます。 HTML<pre><code>&lt;div class="container"&gt;
 &lt;img src="{{ 'sample.png' | asset_img_url: '400x' }}" alt="サンプル画像" class="image"&gt;
 &lt;p class="text"&gt;テキストです&lt;/p&gt;
&lt;/div&gt;</code></pre> CSS<pre><code>.container {
 position: relative;
 max-width: 400px;
 height: 400px;
}
.image {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0;
}
.text {
 display: inline-block;
 position: absolute;
 bottom: 10px;
 right: 10px;
 font-size: 24px;
 color: #333;
 background-color: #fff;
 padding: 10px;
 opacity: 0;
 transform: translateY(10px);
 z-index: 1;
}</code></pre> JavaScript<pre><code>const tl = gsap.timeline();
tl.to(".image", {
&nbsp;&nbsp;opacity: 1,
&nbsp;&nbsp;duration: 0.3
}).to(".text", {
&nbsp;&nbsp;opacity: 1,
&nbsp;&nbsp;y: 0,
&nbsp;&nbsp;duration: 0.3
});</code></pre> 上記のコードでは、 ①画像を0.3秒かけてフェードイン ②画像を表示するアニメーションが終わり次第、テキストを0.3秒かけて上からフェードイン というアニメーションを実装しています。 通常連続したアニメーションは、delayというプロパティを使用する必要がありますが、GSAPのTimelineを使用することで簡単に実装ができます。 「前のアニメーションが終わってから何秒後にアニメーションを開始する」というように秒数を指定することも可能です。 <h2 id="ha214098e44">まとめ</h2>Shopifyのテーマテンプレートには既にきれいなアニメーションが実装されたセクションなどが多くあるため、あまり使用する機会はないかもしれません。 しかし、GSAPは本当にたくさんのアニメーションが実装できるのでセクションのカスタマイズ時などに使用してみるのもおすすめです。 導入自体はとても簡単なので、ぜひ一度お試しください。 ※その他のアニメーションの詳しい実装方法は、<a href="https://greensock.com/" target="_blank" rel="noopener noreferrer">公式サイト</a>をご確認ください。

今回は、ShopifyにGSAPを使用したアニメーションを追加する方法をご紹介します。
GSAPは本当にたくさんのアニメーションが実装できるのでセクションのカスタマイズ時などにぜひ使用してみてください。

【Shopify】GSAPでアニメーションをつける方法

メタフィールドを使用することで、商品やコレクション、顧客情報に様々な情報を追加することができます。 今回は、現状(2022年10月現在)使用できるメタフィールドのコンテンツタイプをまとめました。 <h2 id="hb50f7fb9fa">メタフィールドのコンテンツタイプ</h2>メタフィールドは、設定する際に指定したコンテンツタイプがサポートしている値のみ情報として追加することができます。 コンテンツタイプはいくつか種類があるので、以下にまとめます。 <h3 id="ha01219b02a">色</h3>使用例：商品の色を設定し、テキストの色などに使用する。 API名：color 説明：#RRGGBB形式のRGB値で設定。 値の設定例：#fff123 <h3 id="h9687f4f30c">日付</h3>使用例：賞味期限や、配達日を商品ページに追加。 API名：date 説明：タイムゾーンなしの、ISO 8601形式の日付値で設定。 値の設定例：2022-02-02 カレンダーから日付を選択して値を設定します。 また、メタフィールドの設定画面で最小日付と最大日付の設定も可能です。（任意） <h3 id="h5e19258703">日付と時刻</h3>使用例：イベントの開始日時や、商品の発売日などを追加。 API名：date_time 説明：ISO 8601形式の日付値と、UTC時間の時間値で設定。 値の設定例：2022-01-01T12:30:00 カレンダーで日付、セレクトボックスから時間を設定します。 また、メタフィールドの設定画面で最小の日付と時刻、最大の日付と時刻の設定も可能です。（任意） <h3 id="h5e5243f246">寸法</h3>使用例：商品のサイズ（縦幅、横幅、高さ）を追加。 API名：dimension 説明：整数と小数の両方をサポート。値はmm, cm, m, in, フィート, ヤードの設定が可能。 値の設定例：{ "value": 25.0, "unit": "cm" } 最小寸法と最大寸法の設定が可能です。 <h3 id="h31e534d085">重量</h3>使用例：商品の重量や原材料などの重量を追加 API名：weight 説明：整数と小数の両方をサポート。値はキログラム, グラム, ポンド, オンスの設定が可能。 値の設定例：{ "value": 2.5, "unit": "kg" } 最小重量と最大重量の設定が可能です。 <h3 id="h461ce8836c">量</h3>使用例：飲料の容積や、水筒の容積容量を追加 API名：volume 説明：整数と小数の両方をサポート。値はml, cl, 長さ, ㎥, 液量オンス, パイント, クォート, ガロンの設定が可能。 値の設定例：{ "value": 20.0, "unit": "ml" } 最小数量と最大数量の設定が可能です。 <h3 id="h8317999bfc">整数</h3>使用例：書籍のページ数を追加 API名：number_integer 説明：整数値で設定。-4,611,686,018,427,387,904から4,611,686,018,427,387,903の範囲内を入力できます。 値の設定例：10 最小値と最大値の設定が可能です。 <h3 id="hed40f651d0">小数</h3>使用例：宝石のカラット重量を追加 API名：number_decimal 説明：小数値で設定。+/-9999999999999.999999999の範囲内とし、整数は最大13桁まで、小数は最大9桁まで入力できます。 値の設定例：10.4 最小値と最大値、最高精度の設定が可能です。 最高精度とは、最大小数点以下何位まで追加できるようにするかを設定する項目です。（最大9桁） <h3 id="h5d5fbcd19a">評価</h3>使用例：商品の評価を追加 API名：rating 説明：定義の設定方法に応じて、指定された記数法に沿って追加。 値の設定例：{ "value": "3.5", "scalemin": "1.0", "scalemax": "5.0" } 設定画面で最小評価指標と最大評価指標を設定して、その範囲内で数値を入力します。 なお、最小評価指標と最大評価指標は必ず設定が必要です。 <h3 id="hbbca03a8c7">商品の参照</h3>使用例：該当商品の関連商品を追加 API名：product_reference 説明：単一または複数の商品へのリンク 値の設定例：gid://shopify/Product/1 商品リストから任意の商品をクリックして設定します。 <h3 id="h9975ab3fb5">商品バリエーションの参照</h3>使用例：商品ページで同じ色の商品を表示 API名：variation_reference 説明：単一の商品バリエーションへのリンク 値の設定例：gid://shopify/ProductVariant/1 商品バリエーションリストから任意の商品バリエーションをクリックして設定します。 <h3 id="hdcb96a5ded">ファイル参照</h3>使用例：商品取扱説明書のPDFを追加 API名：file_reference 説明：特定の種類のファイルを受け入れる(画像、ビデオ)、すべてのファイルタイプを受け入れるから選択 →画像：20MB以内のPEG、PNG、WEBP、HEIC、GIF →ビデオ：長さが10分未満かつ1GB未満のMOVもしくはMP4 →すべてのファイルタイプ：20MB未満 値の設定例：gid://shopify/MediaImage/123 <h3 id="h30318634dd">ページ参照</h3>使用例：オンラインストアの商品に関するポリシーページなどのリンクを追加 API名：page_reference 説明：既存のページ（固定ページ）にリンク 値の設定例：gid://shopify/OnlineStorePage/1 <h3 id="h3eba676299">コレクション参照</h3>使用例：商品の属するブランドコレクションのリンクを追加 API名：collection_reference 説明：既存のコレクションにリンク 値の設定例：gid://shopify/Collection/1 <h3 id="h5e00d77a30">URL</h3>使用例：特定のウェブサイトでホストされている書籍レビューまたは商品ビデオへのリンクを追加 API名：url 説明：HTTP、HTTPS、mailto:のURL。URLを特定のドメインのものに制限することも可能。 値の設定例：https://www.shopify.com <h3 id="h617af252f8">単一行のテキスト</h3>使用例：配送メモ、告知などを追加 API名：single_line_text_field 説明：単一行のプレーンテキスト。定義作成時に、指定するプリセットの選択肢に限定することも可能。 値の設定例：この商品は配送に少々お時間をいただきます。 <h3 id="h6cebb7c24d">複数行のテキスト</h3>使用例：配送メモ、告知などを追加 API名：multi_line_text_field 説明：複数行のプレーンテキスト。改行を含めることが可能。 値の設定例： 10月の配送予定日は以下の通りです。 10月7日 10月14日 10月21日 10月28日 <h3 id="h5c54a2c0b8">trueまたはfalse</h3>使用例：アイテムに刻印できるかどうかなど、オプションの利用可否を追加 API名：boolean 説明：条件がtrueまたはfalseかを選択するチェックボックスを作成。 値の設定例：true <h3 id="h2b3411b8b9">JSON</h3>使用例：原材料の表など、それぞれの列で異なる商品を扱う仕様表を追加 API名：json 説明：構造化データソースが必要な高度なユースケースで未処理のJSONデータをサポート。 値の設定例：{ "ingredient": "flour", "amount": 0.3 } <h3 id="hf4c389931d">Money</h3>使用例：仕入れ費用や倉庫への配送費用など、商品にかかる費用の詳細 API名：money 説明：整数と小数の両方をサポート。通貨コードはストア通貨と一致しているもののみ利用可能。 値の設定例：{ "amount": "5.99", "currency_code": "CAD" } <h2 id="h73aa03bab9">メタフィールドリスト</h2>メタフィールドリストでは、1つのメタフィールドに複数の値や情報を追加することができます。 例えば、ブログのメタフィールドに商品の参照リストを作成して関連商品として表示することもできるようになります。 使用できるコンテンツタイプは以下の通りです。 <h3 id="h791c12b3c3">コンテンツタイプ</h3><ul><li>テキストフィールド</li><li>番号</li><li>色</li><li>URL</li><li>重量</li><li>量</li><li>寸法</li><li>rating</li><li>date</li><li>日時</li><li>商品の参照</li><li>商品バリエーションの参照</li><li>ファイル参照</li><li>ページ参照</li><li>コレクション参照</li></ul> ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

メタフィールドを使用することで、商品やコレクション、顧客情報に様々な情報を追加することができます。

今回は、現状(2022年10月現在)使用できるメタフィールドのコンテンツタイプをまとめました。

【Shopify】メタフィールドのコンテンツタイプまとめ

今回は、Liquidで使用できる演算子をまとめてご紹介します。 <h2 id="h069b8272fe">基本演算子</h2>if文やfor文、その他の構文など様々な場面で使用頻度が高い演算子をまとめました。 <h3 id="hea090dbaba">== ( 等しい )</h3><pre><code>{% if product.title == 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートです。&lt;/p&gt;
{% endif %}</code></pre> <h3 id="h02a7e24cdf">!= ( 等しくない )</h3><pre><code>{% if product.title != 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートではありません。&lt;/p&gt;
{% endif %}</code></pre>!=を使用したif文では、unlessと同じ結果になります。 <h3 id="hb6189367a0">&gt; ( より大きい )</h3><pre><code>{% assign number = 7 %} //変数numberに7を代入
{% if number &gt; 7 %}
 &lt;p&gt;numberは7より大きいです。&lt;/p&gt;
{% else %}
 &lt;p&gt;numberは7か、7より小さいです。&lt;/p&gt;
{% endif %}

//結果：numberは7か、7より小さいです。</code></pre> <h3 id="ha8d84d12d6">&lt; ( 未満 )</h3><pre><code>{% assign number = 7 %} //変数numberに7を代入
{% if number &lt; 7 %}
 &lt;p&gt;numberは7より小さいです。&lt;/p&gt;
{% else %}
 &lt;p&gt;numberは7か、7より大きいです。&lt;/p&gt;
{% endif %}

//結果：numberは7か、7より大きいです。</code></pre> <h3 id="h03f80e4327">&gt;= ( 以上 )</h3><pre><code>{% assign number = 7 %} //変数numberに7を代入
{% if number &gt;= 7 %}
 &lt;p&gt;numberは7以上です。&lt;/p&gt;
{% else %}
 &lt;p&gt;numberは7より小さいです。&lt;/p&gt;
{% endif %}

//結果：numberは7以上です。</code></pre> <h3 id="h72bef87a83">&lt;= ( 以下 )</h3><pre><code>{% assign number = 7 %} //変数numberに7を代入
{% if number &lt;= 7 %}
 &lt;p&gt;numberは7以下です。&lt;/p&gt;
{% else %}
 &lt;p&gt;numberは7より大きいです。&lt;/p&gt;
{% endif %}

//結果：numberは7以下です。</code></pre> <h3 id="h18f7d48438">contains ( 含む )</h3><pre><code>{% if product.title contains 'チョコレート' %}
 &lt;p&gt;この商品はチョコレート製品です。&lt;/p&gt;
{% endif %}</code></pre>containsは、条件に指定ワードが含まれているかどうかを判断します。 上記コードでご説明すると、商品名( product.title )に'チョコレート'という文字列が含まれているかどうかをチェックします。 <h3 id="h725cf93034">or ( または )</h3><pre><code>{% if product.title == 'チョコレート' or 'マシュマロ' %}
 &lt;p&gt;この商品はチョコレートか、マシュマロです。&lt;/p&gt;
{% endif %}</code></pre>orは、条件式のどちらかひとつでも当てはまっている時trueになります。 両方当てはまっている場合もtrueとなります。 <h3 id="hdc7521d85c">and ( かつ )</h3><pre><code>{% if product.title contains 'チョコレート' and 'アイス'%}
 &lt;p&gt;この商品はチョコレートアイスです。&lt;/p&gt;
{% endif%}</code></pre>andは条件式のどちらも当てはまっている時trueになります。 ひとつでも当てはまっていない場合はfalseになります。 ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

今回は、if文やfor文、その他の構文など様々な場面で使用頻度が高い演算子をまとめました。

【Shopify】Liquidの演算子

今回は、Liquidでのif文やその他の条件分岐式の書き方についてご紹介します。 <h2 id="h122e623036">基本のif文</h2>まずは、基本のif文からご紹介していきます。 <pre><code>{% if product.title == 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートです。&lt;/p&gt;
{% endif %}</code></pre>上記のコードは、以下のように構成されています。 ①商品名がチョコレートかどうかの条件分岐 　→商品名がチョコレートの場合はtrueが返されて「この商品はチョコレートです。」という文言が表示。 　→当てはまらなかった商品は、falseが返されて何も表示されない。 サンプルコードでは、<code>{% if 〇〇　== △△ %}</code>のように、イコールを繋げた完全一致の条件分岐をしています。 その他にも様々な演算子が使用できるので、気になる方は以下の記事も併せてご覧ください。 <a href="https://next-blog.site/media/shopify-liquid-operator" target="_blank" rel="noopener noreferrer">【Shopify】Liquidの演算子</a> <h2 id="haea0d4b293">その他の条件分岐式</h2>条件分岐にはif文以外にも様々な種類があり、用途に合わせて使い分けるととても便利です。 <h3 id="hd89f2b8a67">unless</h3>unlessは「〇〇が△△じゃなかったら〜」という条件分岐です。<pre><code>{% unless product.title == 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートではありません。&lt;/p&gt;
{% endunless %}</code></pre>上記のコードは、以下のように構成されています。 ①商品名がチョコレートじゃないかどうかの条件分岐 　→商品名がチョコレートの場合は、falseが返されて何も表示されない。 　→当てはまらなかった商品はtrueが返されて「この商品はチョコレートではありません。」という文言が表示。 少しややこしいですが、条件式に当てはまらなかった場合にtrueが返されます。 <h3 id="hb71231aa03">else / elsif</h3>条件分岐に当てはまらなかった場合に、別の条件を指定することもできます。 まずはelseのサンプルコードを確認してみましょう。<pre><code>{% if product.title == 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートです。&lt;/p&gt;
{% else %}
 &lt;p&gt;この商品はチョコレートではありません。&lt;/p&gt;
{% endif %}</code></pre>上記のコードは、以下のように構成されています。 ①商品名がチョコレートかどうかの条件分岐 　→商品名がチョコレートの場合はtrueが返されて「この商品はチョコレートです。」という文言が表示。 ②当てはまらなかった商品 　→falseが返されてelseの中の「この商品はチョコレートではありません。」という文言が表示。 elseを使用することで、条件に当てはまらなかった場合の処理を追加することができます。 elsifでは、さらに別の条件を追加することができます。 こちらもサンプルコードで確認してみましょう。<pre><code>{% if product.title == 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートです。&lt;/p&gt;
{% elsif product.title == 'マシュマロ' %}
 &lt;p&gt;この商品はマシュマロです。&lt;/p&gt;
{% else %}
 &lt;p&gt;この商品はチョコレートでもマシュマロでもありません。&lt;/p&gt;
{% endif %}</code></pre>上記のコードは、以下のように構成されています。 ①商品名がチョコレートかどうかの条件分岐 　→商品名がチョコレートならtrueが返され「この商品はチョコレートです。」という文言を表示 ②商品名がマシュマロかどうかの条件分岐 　→商品名がマシュマロならtrueが返され「この商品はマシュマロです。」という文言を表示 ③どちらにも当てはまらなかった商品 　→falseが返されてelseの中の「この商品はチョコレートでもマシュマロでもありません。」という文言を表示 他のプログラミング言語を習得されている方は、elseifではないので注意しましょう。 また、elsifはいくつでも繋げて条件を追加していくことができます。 しかし、複雑なものになってくるとコードが冗長になってしまうため、その場合は以下のcase / whenを使用した条件分岐がおすすめです。 <h3 id="h55933226e4">case / when</h3>elsif同様、条件の追加ができます。<pre><code>{% case product.title %}
 {% when 'チョコレート' %}
 &lt;p&gt;この商品はチョコレートです。&lt;/p&gt;
 {% when 'マシュマロ' %}
 &lt;p&gt;この商品はマシュマロです。&lt;/p&gt;
 {% when 'クッキー' %}
 &lt;p&gt;この商品はクッキーです。&lt;/p&gt;
 {% else %}
 &lt;p&gt;この商品はその他の商品です。&lt;/p&gt;
{% endcase %}</code></pre>上記のコードは、以下のように構成されています。 ①caseで条件分岐の対象を設定(今回は商品名を返すproduct.titleオブジェクト) ②whenで条件を追加 　→trueならwhen内に記述された処理を実行、falseなら次の条件へ。 ③どの条件にも当てはまらない場合 　→else内の処理を実行 elsifとほぼ同じような動きをしますが、case / whenでは条件式を複数追加してもこのようにシンプルに記述することができます。 <h2 id="heebefdd41a">Liquidの論理演算子「and」と「or」</h2>条件を複数指定することもできます。 <h3 id="hec681f37b0">and</h3><pre><code>{% if product.title contains 'チョコレート' and 'アイス' %}
 &lt;p&gt;この商品はチョコレートアイスです。&lt;/p&gt;
{% endif %}</code></pre>上記のコードは、if文のcontainsを使用して、商品名に該当のワードが含まれていればtrueを返します。 結果は以下のようになります。 条件分岐：商品名に「チョコレート」と「アイス」の両方のワードが入っているかどうか ①両方入っている → true ②チョコレートのみが入っている → false ③アイスのみが入っている → false ④どちらも入っていない → false trueの場合に「この商品はチョコレートアイスです。」という文言が表示され、falseの場合には何も表示されません。 <h3 id="h0a932b080f">or</h3><pre><code>{% if product.title contains 'チョコレート' or 'チョコクッキー' %}
 &lt;p&gt;この商品はチョコレート製品です。&lt;/p&gt;
{% endif %}</code></pre>上記のコードも、if文のcontainsを使用して、商品名に該当のワードが含まれていればtrueを返します。 結果は以下のようになります。 条件分岐：商品名に「チョコレート」か「チョコクッキー」のどちらかのワードが入っているかどうか ①両方入っている → true ②チョコレートのみが入っている → true ③チョコクッキーのみが入っている → true ④どちらも入っていない → false trueの場合に「この商品はチョコレート製品です。」という文言が表示され、falseの場合には何も表示されません。 <h2 id="ha214098e44">まとめ</h2>ここまでご紹介してきたように条件分岐は色々な種類があるため、用途に合った使い分けをすることが大切です。 公開されているテーマテンプレートにもたくさん使用されているので、そのコードを見てみるだけでも使い方の勉強になるかと思います。 私自身まだ使いこなせていないので、色々と勉強しながら最適なコードで書けるようにしていきたいです。 ------------ ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

今回は、Liquidでのif文やその他の条件分岐式の書き方についてご紹介します。
条件分岐は色々な種類があるため、用途に合った使い分けをできるようにしておくのがおすすめです。

【Shopify】Liquidを使用した条件分岐式の書き方

今回は、条件分岐をして特定のページだけにコンテンツを表示させたり、CSSなどのファイルを読み込む方法をご紹介します。 <h2 id="h2784487ef0">ページを指定する条件分岐の書き方</h2>Shopifyの構築をしていると、「トップページだけに、このコンテンツを表示させたいな！」「このページでは、このコンテンツを非表示にしたいな！」とお客様からご依頼をいただくことが多々あります。 Liquidのif文を使用することで、様々な指定方法が可能です。 if文の基本的な使用方法については以下にまとめているので、併せてこちらもご覧ください。 <a href="https://next-blog.site/media/shopify-liquid-if" target="_blank" rel="noopener noreferrer">【Shopify】Liquidを使用した条件分岐式の書き方</a> <h3 id="h35aab42501">TOPページだけにコンテンツを表示させる</h3>TOPページだけに表示させる場合は以下のようにコードを記述します。<pre><code>{% if template == 'index' %} 
 &lt;p&gt;これはトップページです。&lt;/p&gt;
{% endif %}</code></pre>上記のように記述することで、TOPページだけに「これはトップページです」という文言が表示され、他のページには表示されません。 その他にも以下のような条件分岐が可能です。 <h4 id="hfd58075106">トップページとそれ以外のページで文言を出し分ける</h4><pre><code>{% if template == 'index' %} //トップページなら以下の文言を表示
 &lt;p&gt;これはトップページです。&lt;/p&gt;
{% else %} //トップページ以外のページには以下の文言を表示
 &lt;p&gt;これはトップページではありません。&lt;/p&gt;
{% endif %}</code></pre> <h4 id="h32ff52cf3f">トップページ以外のページに文言を表示させる</h4><pre><code>{% if template != 'index' %} 
 &lt;p&gt;これはトップページではありません。&lt;/p&gt;
{% endif %}</code></pre> <h3 id="had15c48dfc">読み込むファイルをページの条件分岐で指定する</h3>コンテンツの表示非表示のみならず、特定のページだけに特定のファイルを読み込ませることもできます。 以下のコードでは、TOPページだけにindex.cssファイルの読み込み、その他のページにはpage.cssファイルの読み込みをします。<pre><code>{% if template == 'index' %}
 &lt;link rel="stylesheet" href="{{ 'index.css' | asset_url }}"&gt;
{% else %}
 &lt;link rel="stylesheet" href="{{ 'page.css' | asset_url }}"&gt;
{% endif %}</code></pre> <h2 id="h995c80aeaf">その他のページで条件分岐する方法</h2>ページの条件分岐は、ページテンプレートで出し分けを指定しています。 先ほどのコードを例にご説明すると、<code>{% if template == 'index' %}</code>というコードは、Shopifyのファイル構造のtemplateファイル内のindex.jsonで条件分岐を行なっています。 つまり、開いているページのテンプレートがindex.jsonならtrue、その他のページならfalseとなり表示非表示の出し分けを行なっているのです。 そのため、TOPページ以外のページでも条件分岐を行うことが可能です。 <h3 id="hb98f3ecbf6">コレクションページでの条件分岐</h3><pre><code>{% if template == 'collection' %}
 &lt;p&gt;コレクションページです。&lt;/p&gt;
{% endif %}</code></pre> <h3 id="hc2c7ca584e">ブログページでの条件分岐</h3><pre><code>{% if template == 'blog' %}
 &lt;p&gt;ブログページです。&lt;/p&gt;
{% endif %}</code></pre> <h3 id="h718c09f65d">固定ページ(ページ)での条件分岐</h3><pre><code>{% if template == 'page' %}
 &lt;p&gt;固定ページです。&lt;/p&gt;
{% endif %}</code></pre> その他にも、templateファイルに入っている〇〇.jsonの〇〇の部分を指定することで、デフォルトテンプレート以外に独自追加したテンプレートの指定も可能です。 <h2 id="h3822a0ad44">様々な条件分岐指定</h2><code>{% if template == '〇〇' %}</code>という指定方法以外にも、if文の応用を利用した条件分岐の指定方法があるので、1つずつご紹介していきます。 <h3 id="h0557908cc0">特定のワードが入ったページテンプレートで条件分岐</h3>先ほどからご紹介している<code>{% if template == '〇〇' %}</code>というコードは、完全一致の条件分岐です。 例えば、デフォルトの'collection.json'の他に、独自で追加した'collection.new-arrival.json'や'collection.sale.json'などのファイルが存在した場合<code>{% if template == 'collection' %}</code>を実行しても、'collection.new-arrival.json'や'collection.sale.json'にはコンテンツが表示されません。 elseを使用して全てに表示させることも可能ですが、コードが冗長になってしまうためif文のcontainsの使用がおすすめです。 以下は、collectionというワードが入ったテンプレート全てにコンテンツを表示させるコードです。<pre><code>{% if template contains 'collection' %}
 &lt;p&gt;collectionのワードが入ったテンプレートページです。&lt;/p&gt;
{% endif %}</code></pre>上記のコードを記述することで、デフォルトの'collection.json'、追加したcollection.new-arrival.json'、'collection.sale.json'の全てに「collectionのワードが入ったテンプレートページです。」という文言が表示されます。 <h3 id="h423d7cca8c">ページのパスで条件分岐</h3>ページのパスを使用した条件分岐も可能です。 if文の書き方はこれまで出てきたものと同じですが、<code>request.path</code>というオブジェクトを使用して条件分岐を行います。 <code>request.path</code>は現在のページへのパスを返してくれるオブジェクトです。 以下のコードでは、'/404'というパスのページだけに「ページが存在していません。」という文言を表示します。<pre><code>{% if request.path == '/404' %}
 &lt;p&gt;ページが存在していません。&lt;/p&gt;
{% endif %}</code></pre> 先ほどご紹介したcontainsを併せて使用することもできます。 以下のコードでは、パスに'/policies'というワードを含むページだけに「ポリシーページです。」という文言を表示します。<pre><code>{% if request.path contains '/policies' %}
 &lt;p&gt;ポリシーページです。&lt;/p&gt;
{% endif %}</code></pre> <h2 id="ha214098e44">まとめ</h2>ページテンプレートに条件分岐を使用して、表示内容を切り替えるというのは実務でもよく使うので、この記事が少しでもお役に立てていたら嬉しいです。 その他にも、<code>{% if △△ == '〇〇' %}</code>の△△の部分に'collection.handle'や'product.handle'などのオブジェクトを利用することで様々なページの条件分岐ができますので、ぜひお試しください！

今回は、条件分岐をして特定のページだけにコンテンツを表示させたり、CSSなどのファイルを読み込む方法をご紹介します。

【Shopify】Liquidで特定のページだけにコンテンツを表示する方法

今回はShopifyのfor文のデフォルトループ制限について記事を書きたいと思います。 <h2 id="h296cfb5a5a">Liquidのfor文のデフォルトは50ループまで</h2>商品数が多いショップ様の構築をしているとぶち当たる問題がここです。 たとえば、'new-arrival'というコレクションに150商品が登録されていたとします。 以下のコードは、'new-arrival'のコレクション内の商品名を順番に表示させるコードです。<pre><code>{% for product in collections['new-arrival'].products %}
 &lt;p&gt;{{ product.title }}&lt;/p&gt;
{% endfor %}</code></pre>上記のコードを実行した場合、新規登録順で50商品までしか表示されません。 これは、Liquidのfor文がデフォルトで持っている「for文のループは50回まで」という制限によるものです。 公式ドキュメントにも以下のように記載されています。<blockquote>You can do a maximum of 50 iterations with a&nbsp;<code>for</code>&nbsp;loop. If you need to iterate over more than 50 items, then use the&nbsp;paginate tag&nbsp;to split the items over multiple pages.</blockquote>簡単に訳すと、「for ループでは最大 50 回のループを実行できます。 ループが50を超える場合は、paginate タグを使用して結果を複数のページに分割します。」という内容です。 つまり、paginateタグを使用することで50回以上のループを行うことが可能ということになります。 <h2 id="h37c2102fe7">paginateタグを使用して50回以上のループを実行</h2>では、実際にpaginateタグを使用してみましょう。 公式ドキュメントは<a href="https://shopify.dev/api/liquid/tags#paginate" target="_blank" rel="noopener noreferrer">こちら</a>からご確認ください。 先ほどと同じように150商品登録されている'new-arrival'というコレクションの商品名を表示していきます。 以下のコードで実装が可能です。<pre><code>{% paginate collections['new-arrival'].products by 1000 %}
 {% for product in collections['new-arrival'].products %}
 &lt;p&gt;{{ product.title }}&lt;/p&gt;
 {% endfor %}
{% endpaginate%}</code></pre>上記コードでは1000商品までループで表示させることができます。 注意点としては、1000商品以上はサポートされておらず表示することができません。(※2022年10月1日現在) <h2 id="hd91a9f875c">ブログなどの表示数にも影響します</h2>50回のループ制限はLiquidのfor文のデフォルトの設定なので、商品数だけではなくブログ記事などループで表示するもの全てに影響してきます。 実際に、お客様のショップを構築している際にこの問題に直面しました。 ブログを表示する際にもpaginateを使用してループするようにしましょう。 以下のコードは、'blog'というブログカテゴリーの記事タイトルを出力します。<pre><code>{% paginate blogs['blog'].articles by 1000 %}
 {% for article in blogs['blog'].articles %}
 &lt;p&gt;{{ article.title }}&lt;/p&gt;
 {% endfor %}
{% endpaginate%}</code></pre><h2 id="h185801ae2c">タグで出し分けをする際には注意が必要</h2>先ほどのコードでは、カテゴリー内のブログや商品を全て表示しているので問題は特に起こらないのですが、タグを使用して出し分けをする際に少し注意が必要です。 先述したように、for文では最大1000回までしかループができません。 例えば先ほどの'blog'の中の'sample'というタグがついた記事のみを表示させてみます。<pre><code>{% paginate blogs['blog'].articles by 1000 %}
 {% for article in blogs['blog'].articles %}
 {% for tag in article.tags %}
 {% if tag == 'sample' %}
 &lt;p&gt;{{ article.title }}&lt;/p&gt;
 {% endif %}
 {% endfor %}
 {% endfor %}
{% endpaginate%}</code></pre>'sample'というタグがついた記事をコンスタントに更新する場合は上記のコードで表示が可能です。 しかし、'sample'のタグをつけた記事を更新してから別のタグをつけた記事を1000記事以上投稿した場合、上記コードを実行してもタイトルは1つも表示されません。 1記事目　タグ：'news' 2記事目　タグ：'new-arrival' 3記事目　タグ：'news' ~ 中略 ~ 1000記事目　タグ：'new-arrival' ➖➖➖➖ ↑ｺｺﾏﾃﾞﾋｮｳｼﾞ↑ ➖➖➖➖ ➖➖➖➖ ↓ｺｺｶﾗﾋｮｳｼﾞｻﾚﾅｲ↓ ➖➖➖➖ 1001記事目　タグ：'sample' 1002記事目　タグ：'sample' ブログや商品のタグ出し分けはもちろん、販売元(vendor)などの出し分けをする場合にも注意が必要です。 <h2 id="ha214098e44">まとめ</h2>今回の内容はループ制限を知らないと躓きやすい部分かと思います。(私も原因が分からず結構な時間を費やしました。) 特に中小のショップ様の構築ではテスト環境でブログや商品数を多く入れることはなかなかないかと思うので、構築時に気付きにくいという点が厄介です。 私自身も気を付けて実装していきたいと思います。 この記事が、私と同じ所で困っている方の助けになれていたら嬉しいです。

Liquidのfor文のデフォルトでは新規登録順で50回までしかループが行われません。
今回はループ数制限とその回避方法について記事を書きたいと思います。

【Shopify】Liquidのfor文は50回しかループできない問題について

今回はShopifyで特定のカテゴリーやタグをもったブログ記事のみを表示する方法を紹介します。 <h2 id="h9df934f456">特定のカテゴリーをもったブログ記事を表示する方法</h2>'news'というブログカテゴリーの記事のみを表示していきます。<pre><code>&lt;ul&gt;
 //newsカテゴリーのブログをループで4記事取得
 {% for article in blogs['news'].articles limit: 4 %}
 &lt;li&gt;
 &lt;a href="{{ article.url }}"&gt;
 {% if article.image != blank %}
 //サムネイル画像が登録されていたらサムネイルを表示
 &lt;img src="{{ article.image.src | image_url: width: 600 }}" alt=""&gt;
 {% else %}
 //サムネイル画像が登録されていなかったらasset内に格納した'default.jpg'を表示
 &lt;img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt=""&gt;
 {% endif %}
 &lt;p class="title"&gt;
 //ブログのタイトルを表示
 {{ article.title }}
 &lt;/p&gt;
 &lt;span class="date"&gt;
 //ブログの更新日を表示
 {{ article.updated_at | date: '%Y.%m.%d' }}
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 {% endfor %} 
&lt;/ul&gt;</code></pre> <h3 id="hf5ed4dbaed">セクションでブログのカテゴリーを選択できるようにする</h3>表示するブログのカテゴリーを、コード内ではなく管理画面から動的に変更できるようにするには、以下のコードを追加・修正します。<pre><code>&lt;ul&gt;
//以下for文を修正(管理画面で選択したカテゴリーのブログをループで4記事取得)
{% for article in section.settings.blog.articles limit: 4 %}
 ~　中略 ~
&lt;/ul&gt;

//以下schemaを追加
{% schema %}
{
 "name": "ブログリスト",
 "settings": [
 {
 "type": "blog",
 "id": "blog",
 "label": "ブログのカテゴリーを選択"
 }
 ],
 "presets": [
 {
 "name": "ブログリスト"
 }
 ]
}
{% endschema %}</code></pre> <h2 id="h1617573f44">特定のタグをもったブログ記事を表示する方法</h2>先ほどブログリストとして表示した記事を、さらに特定のタグで絞り込みしてみます。 今回は'news'カテゴリーの'sample'というタグをもった記事のみを表示します。<pre><code>&lt;ul&gt;
 {% for article in blogs['news'].articles %}
 {% for tag in article.tags %}
 //タグが'sample'の記事のみ取得する
 {% if tag == 'sample' %}
 &lt;li&gt;
 &lt;a href="{{ article.url }}"&gt;
 {% if article.image != blank %}
 &lt;img src="{{ article.image.src | image_url: width: 600 }}" alt=""&gt;
 {% else %}
 &lt;img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt=""&gt;
 {% endif %}
 &lt;p class="title"&gt;
 {{ article.title }}
 &lt;/p&gt;
 &lt;span class="date"&gt;
 {{ article.updated_at | date: '%Y.%m.%d' }}
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 {% endif %}
 {% endfor %}
 {% endfor %} 
&lt;/ul&gt;


{% schema %}
{
 "name": "ブログリスト",
 "settings": [
 {
 "type": "blog",
 "id": "blog",
 "label": "ブログのカテゴリーを選択"
 }
 ],
 "presets": [
 {
 "name": "ブログリスト"
 }
 ]
}
{% endschema %}</code></pre> <h3 id="ha4c22d3284">特定のタグをもった記事を表示する際の注意点</h3>先述したコードでは、'sample'のタグがついたブログ記事を全て表示してしまいます。 タグの絞り込みがない場合は、for文内にlimitを指定して表示数の制限が出来ますが、先ほどのコードにlimitをつけても思うように表示がされません。 なぜかというと、例えば'news'カテゴリーの記事のタグが 1番目に新しい記事：タグなし 2番目に新しい記事：sample 3番目に新しい記事：タグなし 4番目に新しい記事：タグなし 5番目に新しい記事：タグなし 6番目に新しい記事：sample という構成だったとします。 この内容で以下のコードを実行すると、どのような結果になるでしょうか。<pre><code>&lt;ul&gt;
 {% for article in blogs['news'].articles limit: 4 %}
 {% for tag in article.tags %}
 {% if tag == 'sample' %}
 ~ 中略 ~
 {% endif %}
 {% endfor %}
 {% endfor %} 
&lt;/ul&gt;

~ 以下略 ~</code></pre> 取得できる記事は2番目の1記事のみです。 for文でループを回してからif文でタグがついているかどうかの条件分岐をしているため、for文にlimitをつけてしまうと、「全体の◯記事目までをループする」という意味になってしまいます。 1番目に新しい記事：タグなし 2番目に新しい記事：sample 3番目に新しい記事：タグなし 4番目に新しい記事：タグなし ➖➖➖➖ ﾙｰﾌﾟｺｺﾏﾃﾞ ➖➖➖➖ 5番目に新しい記事：タグなし 6番目に新しい記事：sample <h3 id="h36f68e989d">特定のタグをもった記事を指定した数表示する方法</h3>少し煩雑ではありますが、以下のコードで特定のタグをもった記事を指定した数のみ表示することが可能です。<pre><code>&lt;ul&gt;
 //表示する記事数を変数limitに指定
 {% assign limit = 4 %}
 //変数countを定義
 {% assign count = 0%}
 {% for article in blogs['news'].articles %}
 {% for tag in article.tags %}
 //タグが'sample'の記事のみ取得する
 {% if tag == 'sample' %}
 //'sample'のタグがついた記事が取得されるごとにcountの数字を1ずつ足していく
 {% assign count = count | plus: 1 %}
 &lt;li&gt;
 &lt;a href="{{ article.url }}"&gt;
 {% if article.image != blank %}
 &lt;img src="{{ article.image.src | image_url: width: 600 }}" alt=""&gt;
 {% else %}
 &lt;img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt=""&gt;
 {% endif %}
 &lt;p class="title"&gt;
 {{ article.title }}
 &lt;/p&gt;
 &lt;span class="date"&gt;
 {{ article.updated_at | date: '%Y.%m.%d' }}
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 {% endif %}
 {% endfor %}
 //countの数字がlimit以上になった場合ループを停止
 {% if count &gt;= limit %}
 {% break %}
 {% endif %}
 {% endfor %} 
&lt;/ul&gt;</code></pre> なお、for文のループ回数には制限がありデフォルトの状態ではそれ以上の表示ができません。 回避方法等を以下の記事にまとめているので、併せてご覧ください。 <a href="https://next-blog.site/media/shopify-liquid-for-paginate" target="_blank" rel="noopener noreferrer">【Shopify】Liquidのfor文は50回しかループできない問題について</a> <h2 id="ha214098e44">まとめ</h2>タグの絞り込みを追加すると途端に煩雑になりますが、構築の際にはよく依頼されるセクションです。 表示記事数を、管理画面から動的に変えられるようにするのもいいかもしれません。 ぜひお試しください。

今回はShopifyで特定のカテゴリーやタグをもったブログ記事のみを表示する方法を紹介します。

【Shopify】特定のカテゴリーやタグをもったブログ記事を表示させる方法

composition apiでは、ナビゲーションガードの記述も少し変わっているようです。 <h2 id="he1e4adf98b">今までの書き方</h2> <pre><code> beforeRouteLeave(to, from, next) {

 }</code></pre> <h2 id="hdce835d4a5">CompositionAPI</h2> ■ 公式ドキュメント <a href="https://router.vuejs.org/guide/advanced/composition-api.html#navigation-guards" target="_blank" rel="noopener noreferrer">https://router.vuejs.org/guide/advanced/composition-api.html#navigation-guards</a> <pre><code>import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

export default {
 setup() {
 // same as beforeRouteLeave option with no access to `this`
 onBeforeRouteLeave((to, from) =&gt; {
 const answer = window.confirm(
 'Do you really want to leave? you have unsaved changes!'
 )
 // cancel the navigation and stay on the same page
 if (!answer) return false
 })

 const userData = ref()

 // same as beforeRouteUpdate option with no access to `this`
 onBeforeRouteUpdate(async (to, from) =&gt; {
 // only fetch the user if the id changed as maybe only the query or the hash changed
 if (to.params.id !== from.params.id) {
 userData.value = await fetchUser(to.params.id)
 }
 })
 },
}</code></pre> 若干書き方が変わったり、インポートしたりする点が違いますね。

composition apiでは、ナビゲーションガードの記述について

[nuxt3] ナビゲーションガードについて - NuxtJs

Nuxt3で、microCMSを使って記事一覧を表示する手順についてご紹介します。 <h2 id="h8d1ae7bde6">page/index.vue</h2>取得部分は、公式ドキュメントにある通りに行っています。<pre><code>&lt;script setup lang="ts"&gt;
import { ref } from "vue";
const { data } = await useFetch("&lt;END_POINT/&gt;", {
 baseURL: "https://xxx.microcms.io/api/v1/",
 headers: {
 "X-MICROCMS-API-KEY": "&lt;API_KEY/&gt;",
 },
});
const item = data._rawValue.contents;

&lt;/script&gt;

&lt;template&gt;
 &lt;IndexMainSection :items="item" /&gt;
&lt;/template&gt;</code></pre> <h2 id="ha482276507">components/index/MainSection.vue</h2><pre><code>&lt;script setup lang="ts"&gt;
type Props = {
 items: Array&lt;string&gt;;
};
const Props = withDefaults(defineProps&lt;Props&gt;(), {
 items: () =&gt; [],
});
&lt;/script&gt;

&lt;template&gt;
 &lt;div class="folio-index"&gt;
 &lt;div v-for="(item, index) in items" :key="index"&gt;
 &lt;img :src="item.img.url" alt="" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/template&gt;</code></pre> setup記法により違いとTSの有無の差がある程度で、nuxt2でのmicrocms取得と大きな違いはない印象でした。

Nuxt3で、microCMSを使って記事一覧を表示する手順についてご紹介します。

nuxt3でmicroCMSを導入する - NuxtJs

Nuxt3を導入する手順についてご紹介していきます。 ※node.jsなどをインストールしてある前提になります。 <h2 id="hd8d793506b">インストール</h2> <pre><code>npx nuxi init nuxt3-test</code></pre> <h2 id="h8722dfc57f">Nuxt3を起動</h2><pre><code>cd nuxt3-test
yarn
yarn dev</code></pre> <a style="color:#0f83fd;background-color:#ffffff" href="http://localhost:3000/" target="_blank" rel="noopener noreferrer">http://localhost:3000/</a>で確認してみましょう！ <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/33b4b00d30964a54859c0024e7035468/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-09%2010.58.36.png" alt="">

Nuxt3を導入する手順についてご紹介していきます。

nuxt3 環境導入 - NuxtJs

Nuxt2系の環境下にTypeScriptを導入する方法についてのご紹介です。 最初のプロジェクト作成の際に、TSを選択せずに後から導入したくなったパターンになります。 <h2 id="hef7634fef5">必要なパッケージをインストール</h2><pre><code>$　yarn add @nuxt/typescript-build @nuxt/types</code></pre> <h2 id="h0d8e7fa389">nuxt.config.jsに追記</h2><pre><code>export default {
//省略
 buildModules: ['@nuxt/typescript-build']
}</code></pre> <h2 id="h987581cef9">tsconfig.json</h2><pre><code>{
 "compilerOptions": {
 "target": "ES2018",
 "module": "ESNext",
 "moduleResolution": "Node",
 "lib": [
 "ESNext",
 "ESNext.AsyncIterable",
 "DOM"
 ],
 "esModuleInterop": true,
 "allowJs": true,
 "sourceMap": true,
 "strict": true,
 "noEmit": true,
 "experimentalDecorators": true,
 "baseUrl": ".",
 "paths": {
 "@/*": [
 "./app/*"
 ],
 "~/*": [
 "./*"
 ]
 },
 "types": [
 "@types/node",
 "@nuxt/types",
 "@nuxtjs/firebase",
 "@nuxtjs/dayjs",
 "nuxt-i18n"
 ]
 },
 "exclude": [
 "node_modules",
 ".nuxt",
 "dist"
 ]
}</code></pre> <h2 id="h3c7222fefe">動作確認</h2><pre><code>&lt;script lang="ts"&gt;
import Vue from 'vue'
export default Vue.extend({
 mounted() {
 const str: string = 'Hello World'
 console.log(str)
 },
})
&lt;/script&gt;</code></pre>

Nuxt2系の環境下にTypeScriptを導入する方法についてのご紹介です。

TypeScriptを導入 - NuxtJs

TypeScriptの学習開始にあたって型定義について記録します。 <h2 id="h8f442b8850">プリミティブ型</h2><pre><code>const t: undefined = undefined;
const u: null= null;
const v: bigint= 100n;
const w: symbol = Symbol();
const x: number = 100;
const y: string = y;
const z: boolean = true;

</code></pre> <h2 id="h24960929a6">オブジェクト型</h2>■ interface<pre><code>interface object {
 fuga: string;
 bar: number;
}</code></pre> ■ type<pre><code>type object = {
 fuga: string;
 bar: number;
}</code></pre> <h2 id="hd17df70c1a">querySelectorメソッドへの型引数</h2><pre><code>const fuga = document.querySelector&lt;HTMLElement&gt;('.fuga');</code></pre> <h2 id="hdddd72fdf4">関数式</h2><pre><code>const fuga = function (hoge: string): string {
 return;
};</code></pre> <h2 id="h9c50768150">戻り値がない関数の戻り値を型注釈</h2><pre><code>function logTxt(comment: string): void {
 console.log(comment);
}</code></pre>

TypeScriptの学習開始にあたって型定義について記録します。

型定義について - TypeScript

本サイトのトップページに合計の記事数を表示するUIを実装しました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/2c825dbf071b40b29682d18fa106af95/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-31%2015.18.38.png" alt=""> 割とサクッとできるかなーと思ったのですが、意外と苦戦したポイントがあったのでご紹介します。 <h2 id="hac102e1ca6">microCMSから記事を取得</h2>microCMSのNuxt.js用モジュールは、未使用での記述になっています。<pre><code> async asyncData() { 
 const url = 'xxxxx-xxxxx-xxxxx';
 const allItem = await axios.get(`${url}?limit=10000`, {
 headers: { "X-MICROCMS-API-KEY": process.env.API_KEY }
 });

 return {
 total: allItem.data.contents
 };
},</code></pre> <h2 id="hdd458ede34">記事の数を取得</h2>記事の取得はできたので、あとは記事数(length)を取得すれば問題なくいけるのかなーと思っていました。<pre><code> mounted() {
 this.all = this.total.length
 }</code></pre> ■ HTML側<pre><code>&lt;p class="total"&gt;&lt;span&gt;総合記事数 : &lt;/span&gt;{{ this.all }}件&lt;/p&gt;</code></pre> 予想通り記事数を表示することができました。 <h2 id="h8a245d74ab">起きた問題</h2>無事に表示できたーと思った矢先、ページ遷移してトップに戻ると先ほどまで表示されていた総合記事数が表示されていません。 <h2 id="hc4c05c18f9">解決策</h2>ページ遷移した際に、データ保持ができていないのが問題だと予想し取得した段階でstoreに保存することにしました。 綺麗な記述とは言えませんが、下記のようにストアに保存してから加工し、使用しています。 ■ index.vue<pre><code> mounted() {
 this.$store.dispatch("post/getList", { all: this.total }); // allItemで取得したデータをstoreに保存
 this.all = this.$store.state.post.total.all.length; // トータル記事数
 }</code></pre> ■ store/post.js<pre><code>export const state = () =&gt; ({
 total: []
});

export const mutations = {
 add(state, data) {
 state.total = data; //actionsで受け取ったデータをstateのtotalに渡す
 }
};

export const actions = {
 getList({ commit }, all) {
 commit("add", all); //mutation内 関数addにcommit
 }
};

</code></pre> 最初と同じように表示され、ページ遷移しても件数が表示されないという現象はなくなり解決しました。

microCMSにあるトータルの記事数を取得する方法とポイントについてご紹介しています。

microCMSにあるトータルの記事数を取得する - NuxtJs

nuxt3でデータの書き換えを行う際に若干2系と違ったのでご紹介します。 <h2 id="h8de6a2a24f">前提知識</h2> nuxt2では、下記のようにscript内に記述します。 <pre><code>&lt;script&gt;
export default {
 data() {
 return {
 count: 0
 }
 },
 methods: {
 increment(){
 this.count++
 }
 }
}
&lt;/script&gt;</code></pre> 上記をnuxt3のsetupに変換すると以下のようになります。<pre><code>&lt;script setup&gt;
 const count = ref(0)
 const increment = () =&gt; count.value++
&lt;/script&gt;</code></pre> 非常にスッキリしていますね。 <h2 id="h95f5349126">今回の躓きポイント</h2>要素をクリックした時に、@clickにてイベントを発火させて真偽の切り替えをする処理を書きました。 最初にダメだった例をご紹介します。 【NG】<pre><code>&lt;script setup lang="ts"&gt;
let dropActive = false;
const isActive = (): boolean =&gt; {
　　　dropActive = !dropActive;
 retrun dropActive;
}
&lt;/script&gt;</code></pre> 上記では、動作しませんでした。 nuxt2では、以下のような記述で動作したと思ったので同じような感覚で書いたのですが上手くいかないようです。<pre><code>&lt;script&gt;
export default {
 data(){
 return {
 dropActive : false
 }
 },
 methods:{
 isActive() {
 this.dropActive = !this.dropActive
 }
 }
}
&lt;/script&gt;</code></pre> <h2 id="he0cc75e3f2">動作した例</h2>ポイントとしては、refをインポートして使うということのようです。<pre><code>&lt;script setup lang="ts"&gt;
import { ref } from "vue";

let dropActive = ref(false); 　// default
const isActive = (): boolean =&gt; {
 dropActive.value = !dropActive.value;
 return dropActive.value;
};
&lt;/script&gt;</code></pre> この書き方が正当なのかは定かではないですが、エラーなく期待通りの挙動になりました。

nuxt3にてclickイベント時、データの真偽を入れ替える方法についてご紹介しています。

[nuxt3] clickイベント時、データの真偽を入れ替える - NuxtJs

※ NuxtJs3系についてのケースになります。 2系での構築の際は、nuxt-linkに対してクリックイベントを持たせる場合は.native修飾子をつけることが一般とされています。 しかし、3系で同じ記述をしたところ下記画像のように波線が引かれていることに気づきました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a1507fa4aeca4e80a355e2d3bbe6da59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-31%2010.29.58.png" alt=""> <h2 id="hcb9dacb773">結論</h2>@clickに対して修飾子をつけなくても特にエラーなく動作しました。<pre><code>&lt;nuxt-link :to="list.link" @click="$emit('event02')"&gt;{{ list.name }}&lt;/nuxt-link&gt;</code></pre> 3系については最近になって学習を始めたので詳しいことはわかりませんが、拡張元のrouter-linkでv-on:clickをサポートするようになったのでしょうか。

NuxtJs3系でnuxt-link内に@clickイベントを指定する際、.nativeがなくても動作した件について

[nuxt3] nuxt-linkに@clickを指定する際、.native無しで動作した件 - NuxtJs

NuxtJsをSSR/SSGにしている時、window関係はエラーになってしまいます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/ae7236adae6445daa612cc993732e1b7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-28%2014.03.17.png" alt=""> 公式では以下のようにするのが推奨されています。<pre><code>if (process.client) {
 
}</code></pre> 今回は、postscribeという外部プラグインを使った時のものを例として改善策をご紹介します。 <h2 id="hf2c93071b7">プラグインをインポート</h2>下記の方法だとエラーになってしまいます。<pre><code>import postscribe from 'postscribe'</code></pre> なので下記のようにして読み込むとエラーが出ずに読み込むことができます。<pre><code>if (process.client) {
 var postscribe = require("postscribe");
}</code></pre> ちなみに、varをlet constに変更するとうまく表示されなかったので注意です。

SSR時に外部プラグインを読み込んでwindow is not definedになります。エラーを出さずに改善する方法をご紹介しています。

SSR時に外部プラグインを読み込んでwindow is not definedになる - NuxtJs

今回は、Liquidで定義した変数をJavaScriptで使用する方法をご紹介します。 後半ではスライダーのJSプラグイン『Swiper』にLiquidで取得した値を設定する方法もご紹介しておりますので、ご興味がある方はぜひご覧ください。 <h2 id="h9a9d5d371c">Liquidで変数を定義する</h2>Liquidで変数を定義するにはassignを使用します。<pre><code>{% assign weather = 'sunny' %}</code></pre>上記のコードでは、'sunny'という値を持ったweatherという変数を定義しています。 この内容を表示する際には、以下のように記述します。<pre><code>&lt;p&gt;{{ weather }}&lt;/p&gt; //結果：sunny</code></pre> <h2 id="h6f975a65b3">Liquid変数の値をJavaScriptの変数に渡す</h2>先ほど作成したweatherという変数の値をJavaScriptのjsWeatherという変数に格納します。<pre><code>&lt;script&gt;
 let jsWeather = {{ weather }}
&lt;/script&gt;</code></pre>記述はこれだけです。 jsWeatherの値に、先ほどご紹介したLiquid変数の値の表示方法と同じようにコードを記述します。 <h2 id="h112098830a">JavaScriptで変数を使用する</h2>jsWeatherにはすでにLiquid変数wetherの値が格納されているので、JavaScriptのコード内で使用することができます。 例) jsWeatherの値をconsoleに表示する<pre><code>&lt;script&gt;
 //Liquid変数weatherの値をjsWeatherに格納
 let jsWeather = {{ weather }}
 //jsWeatherの値をconsoleに表示
 console.log("It's" + jsWeather + "today!") //結果　： It's sunny today!
&lt;/script&gt;</code></pre> <h2 id="hda4a1fc789">Liquidの変数をJavaScriptで活用する方法</h2>ここまでの例では、イマイチ使用メリットが感じられないかと思いますが、JavaScriptにLiquid変数の値が渡せるのはとても便利です。 例えば、JSプラグインを使用する際にもカスタマイズ画面から動的に値を変更することが可能になります。 以下はLiquid変数を使用してスライダーのJSプラグイン「Swiper」に自動スライドを設定する例です。<pre><code>//スライダーオートプレイ(自動スライド)のチェックボックス判定
{% if section.settings.slider_autoplay %}
 {% comment %}チェックがついていたらautoplayの値はtrue{% endcomment %}
 {% assign autoplay = true %}
{% else %}
 {% comment %}チェックがついていなかったらautoplayの値はfalse{% endcomment %}
 {% assign autoplay = false %}
{% endif %}

&lt;script&gt;
 // JSのautoPlay変数にLiquid変数autoplayを格納
 let autoPlay = {{ autoplay }}
 let autoPlaySlide;
 //autoPlayのチェックボックス条件分岐
 if (autoPlay) {
 //autoPlayがtrueならautoPlaySlideにオブジェクトでSwiper autoplayのパラメーターを格納
 autoPlaySlide = {
 delay: 2000,
 }
 } else {
 //autoPlayがfalseならautoPlaySlideにfalseを格納
 autoPlaySlide = false
 }

 const swiper = new Swiper('.swiper', {
　　　//中略
 //swiperのautoplayにautoPlaySlideの値を設定
 autoplay: autoPlaySlide
 });
&lt;/script&gt;

{% schema %}
 {
 "name": "slideshow",
 "settings": [
 {
 "id": "slider_autoplay",
 "type": "checkbox",
 "label": "自動スライド",
 "default": true
 }
 ],
 "presets": [
 {
 "name": "slideshow"
 }
 ]
 }
{% endschema %}</code></pre> ①schemaでセクション内に自動スライドのチェックボックスを設置。 ②チェックボックスの値をLiquid変数に格納。　→　JavaScript変数にLiquid変数の値を格納。 ③if文を使用して、変数autoPlayの真偽値を判定。 ④trueならSwiper autoplayのパラメーターを、falseならfalseを変数autoPlaySlideに格納。 ⑤Swiperのautoplayの値にautoPlaySlideを指定。 少しややこしいですが、このようにShopifyのカスタマイズ画面で設定した値を動的に活用することができます。 スライダーでは、スライダースピードやその他エフェクトもカスタマイズ画面から動的に変更する実装が可能です。 また、商品情報やブログ記事情報、タグなどもLiquid変数からJavaScript変数に渡すことができるので様々な面で便利に利用できるのではないでしょうか。 ぜひ使ってみてください！ ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

Liquidで定義した変数をJavaScriptで使用する方法をご紹介します。
後半ではスライダーのJSプラグイン『Swiper』にLiquidで取得した値を設定する方法もご紹介しております。

【Shopify】Liquidの変数をJavaScriptで使用する方法

NuxtJs(Vue)でオープニングアニメーションを実装したい時に以下のようなケースに遭遇すると思います。 1.オープニングアニメーション発火 2.オープニングアニメーションが終わったらメインビジュアルなどのアニメーション発火 上記のような形を実装するのは簡単なのですが、2回目以降オープニングアニメーション(以降OPと書きます)を表示させない場合は、OPの時間分遅延してしまい空白時間が生まれてしまいます。 今回はその空白時間をなくすための1つの方法を紹介します。 <h2 id="hda73f82e52">store/index.js</h2>まずは状態管理フラッグをstoreにて記述していきます。 <pre><code>export const state = () =&gt; ({
 flag: false,
})
export const mutations = {
 increment(state) {
 state.flag = true
 },
}</code></pre> 簡単に説明すると、flagが以下の場合処理を変えます。 false = OP分の時差のある処理 true = OP分の時差なしの処理 <h2 id="hac0e20a1b2">fuga.vue</h2>オープニングアニメーション用のコンポーネントにて以下のように記述 アニメーションには、GSAPを使用しています。<pre><code>export default {
 methods: {
 onStore() {
 this.$store.commit('increment')
 console.log(this.$store.state.flag)
 },
 opening() {
 const animeTl = this.$gsap.timeline({ onComplete: this.onStore() })
　　　　　　animeTl.to('.hoge',{ opacity:0 ,duration:2})
 　},
 },
 mounted() {
 this.opening()
 },
}</code></pre> onCompleteにて、onStore関数を呼び出してstore内のflagをfalse → trueに変更します。 <h2 id="ha1b8a6148d">Kv.vue</h2>管理したいアニメーション箇所のmounted内でstoreの値で分岐する処理を追加します。 今回は、遅延処理をsetTimeoutにて行っています。 <pre><code>export default { 
 methods: {
 KvAnimation() {
 //kvアニメーション処理
 }
 },
 mounted() {
 //storeの値で分岐
 if (this.$store.state.flag === true) {
 this.KvAnimation()
 } else {
 setTimeout(() =&gt; {
 this.KvAnimation()
 }, 2100)
 }
 }
 },</code></pre> 以上、状態管理を用いたOP後の発火タイミング処理についてでした！ 最後までご閲覧いただきありがとうございました。

状態管理を用いたオープニングアニメーション後の発火タイミング処理について紹介しています。

オープニングアニメーション後の発火タイミング - NuxtJs

最近TypeScriptを触りながらnuxt3にも挑戦しています。 色々と書き方が違う部分があるので備忘録としていきます。 <h2 id="h4318257281">コンポーネント側</h2><pre><code>&lt;script setup lang="ts"&gt;
interface Props {
 enTitle: string;
 jpTitle: string;
 indexClass: string;
}


const Props = withDefaults(defineProps&lt;Props&gt;(), {
 enTitle: "",
 jpTitle: "",
 indexClass: "",
});
&lt;/script&gt;


&lt;template&gt;
 &lt;div class="common-page-cover" :class="indexClass"&gt;
 &lt;h2 class="common-page-title"&gt;
 &lt;span class="_en"&gt;{{ enTitle }}&lt;/span&gt;
 &lt;span class="_jp"&gt;{{ jpTitle }}&lt;/span&gt;
 &lt;/h2&gt;
 &lt;/div&gt;
&lt;/template&gt;</code></pre> props は&nbsp;defineProps()&nbsp;で定義され、デフォルト値を定義する場合には、&nbsp;withDefaults&nbsp;を使用するようです。 <h2 id="h29456262ca">呼び出し側</h2>呼び出し方は2系と特に変わりはないようです。<pre><code> &lt;PartsCommonTitle enTitle="hoge" jpTitle="fuga" indexClass="index" /&gt;</code></pre> ■パートナー募集について 運営元であるkraftでは一緒に活動するパートナーを募集しています。 個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。 ご興味のある方は、<a href="https://o-kraft.com/contact" target="_blank" rel="noopener noreferrer">こちら</a>よりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます) 具体的な内容については以下URLをご確認ください。 <a href="https://o-kraft.com/partner" target="_blank" rel="noopener noreferrer">パートナー募集の詳細について</a>

nuxt3でのprops記述について

<a href="https://o-kraft.com/" target="_blank" rel="noopener noreferrer">事業サイト</a>にて各ページにパンくずリストを表示させる処理を追加した時に動的パスに対しての指定する部分で少しだけ躓いたので記録しておきます。 <h2 id="h135d1b9b8a">Breadcrumb.vue</h2>一旦完成形としたコードは以下の通りです。 &lt;template&gt;内記述<pre><code>&lt;template&gt;
 &lt;div class="cBreadcrumb__wrap"&gt;
 &lt;ul class="cBreadcrumb"&gt;
 &lt;li&gt;&lt;nuxt-link to="/"&gt;Top&lt;/nuxt-link&gt;&lt;/li&gt;
 &lt;li v-if="servicePath"&gt;
 &lt;nuxt-link to="/service"&gt;Service&lt;/nuxt-link&gt;
 &lt;/li&gt;
 &lt;li v-else-if="newsPath"&gt;
 &lt;nuxt-link to="/news"&gt;News&lt;/nuxt-link&gt;
 &lt;/li&gt;
 &lt;li v-else-if="mediaPath"&gt;
 &lt;nuxt-link to="/media"&gt;Media&lt;/nuxt-link&gt;
 &lt;/li&gt;
 &lt;li v-else-if="casePath"&gt;
 &lt;nuxt-link to="/case"&gt;Case&lt;/nuxt-link&gt;
 &lt;/li&gt;
 &lt;li&gt;{{ title }}&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/template&gt;</code></pre> script内記述<pre><code>&lt;script&gt;
export default {
 props: {
 title: {
 type: String,
 default: '',
 },
 },
 data() {
 return {
 servicePath: false,
 newsPath: false,
 mediaPath: false,
 casePath: false,
 router: '',
 }
 },
 watch: {
 '$route.path': {
 handler(_new, _old) {
 switch (_new) {
 case '/service/flow':
 this.servicePath = true
 break
 case '/service/faq':
 this.servicePath = true
 break
 case `/news/${this.$route.params.slug}`:
 this.newsPath = true
 break
 case `/media/${this.$route.params.slug}`:
 this.mediaPath = true
 break
 case `/case/${this.$route.params.slug}`:
 this.casePath = true
 break
 }
 },
 deep: true,
 immediate: true,
 },
 },
 mounted() {},
}
&lt;/script&gt;</code></pre> <h2 id="h4570a7e6fb">コンポーネントの使い方</h2>呼び出したい箇所で以下のようにして呼び出します。<pre><code>&lt;Breadcrumb title="hoge" /&gt;</code></pre> <h2 id="h598587f39e">ポイント</h2>動的ルーティング箇所での分岐の仕方に辿り着くまでに少しだけ時間がかかりましたが、以下の記述で動的ページのスラッグが取れるようです。<pre><code>this.$route.params.slug</code></pre>

VueNuxtのwatchを使った表示しているページの監視時の動的ページ分岐の仕方

watchを使った表示ページの監視と分岐 - NuxtJs

事業用サイトのメディアに目次機能を追加しようと思い、cheerioをインストールしたのですが以下エラーが出てしまいました。<pre><code>ERROR in ./node_modules/htmlparser2/lib/esm/index.js 59:9
Module parse failed: Unexpected token (59:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return getFeed(parseDOM(feed, options));
| }
&gt; export * as DomUtils from "domutils";
| // Old name for DomHandler
| export { DomHandler as DefaultHandler };
 @ ./node_modules/cheerio/lib/esm/index.js 11:0-68
 @ ./node_modules/enzyme/build/ReactWrapper.js
 @ ./node_modules/enzyme/build/index.js
 @ ./test.entry.js</code></pre> <h2 id="h9c1f22bd6d">原因</h2>エラー内容はローダーがないというエラー内容で、webpackに認識させるためのローダーを追加してくださいというものでした。 ですが現在はそれに対応しているローダーがない(?)らしいです。 <h2 id="hc4c05c18f9">解決策</h2>下記をpackage.jsonに追加して、yarnで再度パッケージインストールを行なったらエラーがなくなりました。<pre><code> "cheerio": "1.0.0-rc.10",
 "parse5-htmlparser2-tree-adapter": "^6.0.0"</code></pre>

cheerioをインストールした際にでたエラーについての解決した方法をご紹介します。

cheerioでのエラーについて

下記内容は、とらゼミさんのYouTube動画を個人学習用としてテキストにまとめたものになります。(<a href="https://www.youtube.com/watch?v=gLbTluYSb_U" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=gLbTluYSb_U</a>) より詳しく知りたい方は動画をご参照ください。 <h2 id="hc99747fbaf">JSXとは？</h2>JavaScriptの拡張言語。 HTMLとJavaScriptを掛け合わせて使えるようにしたものと考えるとイメージがしやすいです。 <pre><code>const Button =()=&gt; {
 retrun (
 &lt;button className={'button'}&gt;
 buttonです！
 &lt;/button&gt;
 )
}</code></pre> <h2 id="h027d8f25a0">JSXを使う理由</h2>Reactを使う場合、HTMLを出力する際は以下のような記述が必要になります。 <pre><code>React.createElement(
 'button',
 {className:'button'},
 'buttonだよ！'
)</code></pre> 少ないHTMLの記述なら問題はないが、実際に多くのHTMLの記述をすると考えた時にこの書き方では少々大変になります。 そこでJSXを使って記述すると同じ結果かつスッキリとした記述にすることができます。 <pre><code>&lt;button className={'button'}&gt;
 buttonです！
&lt;/button&gt;</code></pre> <h2 id="hd5393c0cf8">JSXは何をしているのか</h2>JSXで記述したものをコンパイラを通してコンパイルを行うと、React.createElementの式に変換を行ってくれます。 React.createElementを直接使用したものは、見た目的にもわかりづらく直感的ではないのでJSXを使用してより分かりやすく記述することができます。 <h2 id="hffd40018ff">JSXの基礎文法01</h2> <pre><code>import React from 'react';
const Button =()=&gt; {
 retrun (
 &lt;button className={'button'}&gt;
 buttonです！
 &lt;/button&gt;
 )
}
export default Button;</code></pre> <h2 id="ha7a191d98e">JSXの基礎文法02</h2>Vueを行ったことがある方はイメージがしやすい印象です。<pre><code>import React from 'react';
 const images = () =&gt; {
 const alt = 'イメージ画像';
 const path = '../img/xxx.png';
 
 return (
 &lt;div&gt;
 &lt;p&gt;{alt}&lt;/p&gt;
 &lt;img src={path} alt={'alt'} /&gt;
 &lt;/div&gt;
 )
}
export default images;</code></pre> <h2 id="hb33bb7d60f">特殊な構文</h2>JSXは必ず階層構造で、最上位のコンポーネントは並列にできません。 Vueの&lt;template&gt;内のイメージに近い感じがしています。 ■ Error<pre><code>return (
 &lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;
)</code></pre> ■ NoError<pre><code>return (
&lt;React.Fragment&gt;
 &lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;
&lt;/React.Fragment&gt;
)</code></pre> ■ NoError<pre><code>return (
&lt;&gt;
 &lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;
&lt;/&gt;
)</code></pre>

JSXについての基本的な考え方と基本文法のまとめ

JSXとは

for文とは、ループ処理のことで同じ処理を繰り返す際に使用する構文です。 今回はLiquidでのfor文の書き方についてご紹介します。 ※以下コード例の出力結果は見やすいように半角スペースを空けていますが、基本は詰めた状態で表示されます。 <h2 id="ha19a7b3c6b">for文の基本使用例</h2>コレクション内の商品タイトルを一覧で表示する際には以下のようにfor文を書きます。 《 products：トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》<pre><code>{% for product in collection.products -%}
&nbsp; {{ product.title }}
{%- endfor %}

//【出力結果】
//トマト とうもろこし ブロッコリー じゃがいも にんじん</code></pre> <h2 id="hc3240a0736">Liquidのfor文で使用できるパラメータ</h2>Liquidのfor文にはいくつかのパラメータが用意されています。 <h3 id="h4cd61f9fa1">limit</h3>ループ回数(出力する値)を制限することができます。 《 products：トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》<pre><code>{% for product in collection.products limit: 2 -%}
&nbsp; {{ product.title }}
{%- endfor %}

//【出力結果】
//トマト とうもろこし</code></pre> <h3 id="h41838110ca">offset</h3>ループ開始位置を指定することができます。 《 products：トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》<pre><code>{% for product in collection.products offset: 2 -%}
&nbsp; {{ product.title }}&lt;br&gt;
{%- endfor %}

//【出力結果】
//ブロッコリー じゃがいも にんじん</code></pre>offsetで指定した数までの値が削除されるので、3つ目のブロッコリーから表示されています。 <h3 id="hb991ca5817">range</h3>ループ回数(出力する値)の範囲を指定することができます。<pre><code>{% for i in (1..3) -%}
&nbsp; {{ i }}
{%- endfor %}

//【出力結果】
//1 2 3</code></pre> また、変数を使用した範囲の指定も可能です。<pre><code>{%- assign start = 2 -%}
{%- assign limit = 4 -%}

{% for i in (start..limit) -%}
&nbsp; {{ i }}
{%- endfor %}

//【出力結果】
//2 3 4</code></pre> <h3 id="h3d67dd9e21">reversed</h3>逆からループして順番に出力することができます。 《 products：トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》<pre><code>{% for product in collection.products reversed -%}
&nbsp; {{ product.title }}
{%- endfor %}

//【出力結果】
//にんじん じゃがいも ブロッコリー とうもろこし トマト</code></pre> <h2 id="h7079ec5e42">Liquidのfor文で使用できるタグ</h2>Liquidのfor文では、基本の記述に追加して使用することができるタグが用意されています。 今回は、else、break、continueの3つをご紹介します。 <h3 id="hf6e73efe7a">else</h3>コレクション内に商品が存在しない場合の処理を記述することができます。<pre><code>{% for product in collection.products %}
 {{ product.title }}
{% else %}
 &lt;p&gt;このコレクションには商品がありません&lt;/p&gt;
{% endfor %}</code></pre> <h3 id="h1e83b35155">break</h3>指定した数値でループを止めることができます。 今回はif文を使用して4回目でループを中断する処理をしています。<pre><code>{% for i in (1..5) -%}
&nbsp; {%- if i == 4 -%}
&nbsp; &nbsp; {% break %}
&nbsp; {%- else -%}
&nbsp; &nbsp; {{ i }}
&nbsp; {%- endif -%}
{%- endfor %}

//【出力結果】
//1 2 3 </code></pre>ループが4回目の時にbreakが当たってループが中断されるので、3まで出力されています。 <h3 id="hefdb42abf3">continue</h3>指定した数値をループからスキップすることができます。 今回はif分を使用して4回目のループをスキップする処理をしています。<pre><code>{% for i in (1..5) -%}
&nbsp; {%- if i == 4 -%}
&nbsp; &nbsp; {% continue %}
&nbsp; {%- else -%}
&nbsp; &nbsp; {{ i }}
&nbsp; {%- endif -%}
{%- endfor %}

//【出力結果】
//1 2 3 5</code></pre> <h2 id="ha214098e44">まとめ</h2>Liquidのfor文は、コレクション内の商品を出力する時だけではなく、ブログの記事やタグリストなどの表示にも使用できます。 様々なパラメータも用意されているので、ぜひ試してみてください。

for文とは、ループ処理のことで同じ処理を繰り返す際に使用する構文です。
今回はLiquidでのfor文の書き方についてご紹介します。

【Shopify】Liquidを使用したfor文の書き方

webpackを使っていてエントリーポイントを複数指定したい時があると思います。 そのやり方について備忘録として残しておきます。 <h2 id="h6a512e4d5b">webpack.config.jsに設定</h2>entryに対して、[name]+パスを指定します。<pre><code>module.exports = {
 mode: 'production',
 entry: {
 front: './src/index.js',
 page: './src/page-index.js',
 },
 output: {
 filename: '[name].bundle.js',
 path: path.join(__dirname, 'js'),
 },
};</code></pre> この状態でコマンドを実行すると、outputで指定した場所とファイル名で出力がされます。 <pre><code>front.bundle.js
page.bundle.js</code></pre>

webpackを使っていてエントリーポイントを複数指定したい時があると思います。
そのやり方について備忘録として残しておきます。

webpackで複数エントリーポイントを指定する

microCMSのNuxtJS用モジュールを初めて使ってみたのでそれをご紹介していこうと思います。 基本的には公式が出している通りに進めれば良いと思います。 <h2 id="h8c1ae5f1d0">パッケージをインストール</h2><pre><code>$ yarn add nuxt-microcms-module</code></pre> <h2 id="h0d8e7fa389">nuxt.config.jsに追記</h2><pre><code>export default {
 buildModules: ['nuxt-microcms-module'],
 microcms: {
 options: {
 serviceDomain: process.env.SERVICE_DOMAIN,
 apiKey: process.env.API_KEY,
 },
 mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
 },
};</code></pre> <h2 id="h691ea5799a">.envを作成</h2><pre><code>API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx</code></pre> SERVICE_DOMAINは、xxxxx.microcms.ioのxxxxx部分を入れる形で大丈夫です。 <h2 id="h3c5762cce4">実際に使う</h2><pre><code>&lt;template&gt;
 &lt;div class="pTop"&gt;
 &lt;Card :lists="lists" /&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 data() {
 return {
 lists: '',
 }
 },
 async asyncData({ $microcms }) {
 const data = await $microcms.get({
 endpoint: 'blog',
 })
 return {
 lists: data.contents,
 }
 },
}
&lt;/script&gt;</code></pre> 子コンポーネントからpropsで渡している想定での記述になりますが最低限これで表示されます。 <h2 id="ha214098e44">まとめ</h2>初めてmicrocmsのモジュールを使って取得してみましたが非常に簡単で使い勝手がいいと感じました。 ホスティングサービスを使う場合は、NODE_ENVを含む環境変数を設定するとしっかりと動作します！

microCMSのNuxtJS用モジュールを初めて使ってみたのでそれをご紹介していこうと思います。

microCMSのNuxtJS用モジュールを使ってみた

ハンバーガーメニューのJS処理を案件毎に色々書き換えるのは面倒だなと最近思ったので、試しにclass構文を使って少ない記述で各案件に対応できそう(できるとは言っていない)な形にしてみました。 とはいえまだ、試作段階ですので大目に見てやってください。 また、webpackでバンドルをする想定になっています。 <h2 id="he77b777aca">モジュールの記述</h2>src/modules/hamburger.js<pre><code>export default class hamburger {
 constructor(btn, menu) {
 this.btn = btn;
 this.menu = menu;
 }
 switch() {
 const btn = document.getElementById(this.btn);
 const menu = document.getElementById(this.menu);

 btn.addEventListener("click", function () {
 btn.classList.toggle("_active");
 menu.classList.toggle("_active");
 });
 }
}</code></pre> <h2 id="ha6e9940099">エントリーポイントの記述</h2>src/index.js<pre><code>import hamburger from "./modules/hamburger";

/*------------------------------
 TemplateMenu
---------------------------------*/
const templateMenu = new hamburger("Btn", "Menu");
templateMenu.switch();</code></pre> 下記のBtn Menuのところに任意のidを入れると動作する様になっています。<pre><code>const templateMenu = new hamburger("Btn", "Menu");</code></pre> <h2 id="ha214098e44">まとめ</h2>class構文を使って何かをしてみたかったので正直この形でメニューを作る必要はないとは思います。 ただ、割とコードの見通しは良くなっていじり易さはあるかもしれないと言った感じには思います。 参考になれば嬉しいです！

ハンバーガーメニューのJS処理を案件毎に色々書き換えるのは面倒だなと最近思ったので、試しにclass構文を使って少ない記述で各案件に対応できそう(できるとは言っていない)な形にしてみました。

class構文を使ってハンバーガーメニューの処理を書いてみた

VueやNuxtで表示非表示を操作する場合は、v-if v-else ・ v-showが挙げられます。 今回は、特定のページではAを表示し他のページではBを表示する方法をご紹介します。 <h2 id="h5e3b8aa917">表示を切り替える方法</h2>前述した通りVueやNuxtでの表示切り替えは、 <ul><li>v-if、v-else</li><li>v-show</li></ul> これらを使うことが多いかと思います。 今回はv-if v-elseを使用して切り替えてみようと思います。 <h2 id="h09d4176012">実装したい内容イメージ</h2>全ページ共通ヘッダーが用意されています。 しかし下記のような仕様となっています。 ・/hoge では、色違いのロゴ画像が使われている ・その他のページは共通のロゴ画像 要するに/hogeだけロゴ画像の色違いが使われているといった感じです。 <h2 id="h8051257985">マークアップ</h2><pre><code>&lt;template&gt;
 &lt;header class="lHeader"&gt;
 &lt;img src="@/assets/img/logo-black.svg" alt="logo"&gt;
 &lt;/header&gt;
&lt;/template&gt;</code></pre> 記述を見やすくする為、必要な部分だけ載せていきます。 上記の様にヘッダー内にロゴを画像として読み込んでいます。 <h2 id="h42218c1bd0">条件分岐の記述を足す</h2><pre><code>&lt;template&gt;
 &lt;header class="lHeader"&gt;
 &lt;img src="@/assets/img/logo-black.svg" alt="logo"&gt;
 &lt;/header&gt;
&lt;/template&gt;</code></pre> このままだと、全てのページで黒色のロゴが読み込まれてしまいます。 なので、条件を指定して画像を出し分ける記述を足していきましょう。 (hoge = 白ロゴ. それ以外 = 黒ロゴ) <pre><code>&lt;template&gt;
 &lt;header class="lHeader"&gt;
 &lt;img v-if="this.$router.name === 'hoge' " src="@/assets/img/logo-white.svg" alt="logo"&gt;
 &lt;img v-else src="@/assets/img/logo-black.svg" alt="logo"&gt;
 &lt;/header&gt;
&lt;/template&gt;</code></pre> 現在表示しているページ名をこちらで取得しています。<pre><code>this.$router.name</code></pre> 現在表示しているページ名が、hogeだった場合 true<pre><code>v-if="this.$router.name === 'hoge' "</code></pre> そうでなかった場合は、falseになるので v-elseの方を表示する形になります。 <h2 id="ha214098e44">まとめ</h2>layoutまるごと別で作ってしまい、読み込ませるのもいいのかもしれませんがこれくらいの違いであればv-if v-elseを使ってしまった方がミニマムで済むので良いですね。 使えそうな場面はそこそこ多そうなのでしっかりと覚えていきたいと思います。

VueやNuxtで表示非表示を操作する場合は、v-if v-else ・ v-showが挙げられます。今回は、特定のページではAを表示し他のページではBを表示する方法をご紹介します。

Nuxt.jsでページ毎に表示を切り替える

ランディングページ等によくあるメニューをクリックしたら任意の場所まで移動するスムーススクロールを導入する手順をご紹介します。 <h2 id="h2c3c3e573c">vue-scrolltoをインストール</h2>まずは、インストールから行います。<pre><code>yarn add vue-scrollto</code></pre> <h2 id="heb4cab3f54">pluginsにファイルを新規作成</h2>plugins/vue-scrollto.jsを作成します。 作成したら下記の様に記述を追加します。<pre><code>import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
 duration: 300,
 easing: [0, 0, 0.2, 1],
 offset: -150,
})</code></pre> Vue.use内を説明すると、 duration = 移動時間 easing = 緩急 offset = 移動後の位置調節 <h2 id="h39eff45da6">nuxt.config.jsに記述を追加</h2>プラグインを登録します。<pre><code>plugins: [
 '~plugins/vue-scrollto'
],</code></pre> 導入は以上で終了になります。 <h2 id="h4d849f4362">使い方</h2>下記の様に少し見慣れない書き方ですが、このように記述します。 &lt;nuxt-link v-scroll-to="" to&gt; <pre><code>&lt;template&gt;
&lt;ul class="ulBody"&gt;
 &lt;li v-for="(list,index) in lists" :key="list.id"&gt;
 &lt;nuxt-link v-scroll-to="`#${list.link}`" to&gt;{{ list.name }}&lt;/nuxt-link&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 data() {
 return {
 lists: [
 {
 id:'01',
 name: 'hoge01',
 link: 'hoge01',
 },
 {
 id:'02',
 name: 'hoge02',
 link: 'hoge02',
 },
 {
 id:'03',
 name: 'hoge03',
 link: 'hoge03',
 },
 ],
 }
 },
}
&lt;/script&gt;</code></pre> 飛び先はいつも通りidを指定すれば完了です。<pre><code>&lt;template&gt;
 &lt;section&gt;
 &lt;div id="hoge01"&gt;&lt;/div&gt;
 &lt;div id="hoge02"&gt;&lt;/div&gt;
 &lt;div id="hoge03"&gt;&lt;/div&gt;
&lt;/section&gt;
&lt;/template&gt;</code></pre>

ランディングページ等によくあるメニューをクリックしたら任意の場所まで移動するスムーススクロールを導入する手順をご紹介します。

Nuxt.jsにスムーススクロールを導入

Shopifyでの消費税の設定方法についてまとめました。 軽減税率の設定方法などもご紹介していきます。 <h2 id="h6261f64689">Shopifyの消費税表示について</h2>現在、Shopifyのデフォルトの消費税率設定は10%となっています。 金額を表示する際には、税込・税抜どちらでも設定が可能です。 しかし、2021年4月以降商品価格の総額表示が義務化されたため、税込での表示が必須となります。 ショップが公開されてから変更をするとユーザーが混乱してしまうこともあるので、公開前に消費税の設定・確認をしておきましょう。 <h3 id="h67778c0bc5">軽減税率について</h3>2019年10月の消費税率10%への引き上げに伴い、軽減税率（税率8%）制度が実施されています。 対象商品は「酒類・外食を除く飲食料品」と「週2回以上発行される新聞」です。 対象の商品を販売する際には、別途軽減税率の設定が必要となるため、そちらの設定方法も後ほどご紹介していきます。 <h2 id="h80f4ebca49">基本的な消費税の設定方法</h2>今回は総額表示義務化に伴い、商品ページなどに《税込価格》を表示する方法をご紹介していきます。 Shopifyの管理画面の[設定]-&gt;[関税と税金]を開きます。 「税の計算」ブロック内の<ul><li>すべての価格を税込価格で表示する</li><li>お客様の国に基づいて税金を含める、または除外する</li><li>配送料に課税する</li></ul>の3つにチェックを入れます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/dc21a62f8fa9456ea383334d0507ad71/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2018.31.23.png" alt=""> 「お客様の国に基づいて税金を含める、または除外する」の項目については、《マーケットの各種設定に移動》をクリックして、遷移先でチェックをつけてください。 なお、「配送料に課税する」にチェックを入れているので、配送料設定を行う際には税込価格を登録するようにしましょう。 チェックをつけたら右上の[保存]をクリックして完了です。 商品登録の際には《商品価格に税を適用する》に忘れずにチェックをいれます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/184dca8769a040e99c915b2011256e6f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2018.37.46.png" alt=""> 価格については配送料と同様に、税込価格を登録します。 基本的な消費税設定は以上です。 チェックアウト画面で内税を確認することができます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/4ee0a76762324137ba03d0d5c8b6827a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2018.44.36.png" alt=""> <h2 id="h4cde4e2f4a">軽減税率の設定方法</h2>軽減税率の対象となる商品をコレクションにまとめて、別途税率の設定を行います。 <h3 id="hb32f5f8db3">手動コレクションで対象商品をまとめる</h3>まずは、管理画面メニューの[商品管理]-&gt;[コレクション]の《コレクションを作成する》ボタンをクリックして新しいコレクションを作っていきます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/e63707b0d366440ca8ef5d104bc834ff/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2018.58.13.png" alt=""> タイトルには任意のテキストを入力してください。 今回は「軽減税率対象商品」というコレクションを作成しました。 そして、コレクションの種類は《手動》を選択します。 ※自動コレクションは税率設定を適用できないため、必ず手動を選択してください。 一度保存をクリックすると商品管理が設定できるようになるので、軽減税率の対象となる商品をコレクションに追加して保存します。 これで軽減税率の対象商品をコレクションにまとめることができたので、次はコレクション内の商品に軽減税率を設定していきます。 <h3 id="h0591dc84d4">軽減税率を設定する</h3>１．Shopify管理画面から[設定]-&gt;[関税と税金]をクリックします。 ２．国/地域の《日本》をクリックします。 ３．税の優先適用の《税の優先適用を追加》ボタンをクリックします。 		<img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/35be081d83aa43e09999c4e2db089bb5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2020.33.11.png" alt=""> ４．以下の内容で登録します。 		・税の優先適用を以下に対して追加する	→	商品管理 		・税の優先適用を当てはめるコレクションを選択します。	→	軽減税率対象商品（先ほど新しく作成したコレクションを選択） 		・ロケーション	→	日本 		・税率		→	8 		<img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/86b7faf668ac42e0987fe8637be2cf66/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2020.34.57.png" alt=""> ５．《優先適用を追加》ボタンをクリックで、軽減税率の設定は完了です。 <h3 id="h669d2bda2b">軽減税率が適用されているかテスト購入で確認</h3>軽減税率の設定が完了したら、テスト購入のチェックアウト画面で確認をしましょう。 以下のように8%の金額が内税として表示されていたら、設定は無事完了です。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/44828b5fe6b7487e8f89d993d58abc9c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-19%2020.59.33.png" alt=""> もし、金額が10%のまま変わらない場合は対象商品の商品登録画面で保存ボタンを押してみてください。 また、お客様にとって分かりやすいように軽減税率の対象商品にラベルなどをつけておくのもいいかもしれません。

Shopifyでの消費税の設定方法についてまとめました。
軽減税率の設定方法などもご紹介していきます。

【Shopify】消費税の設定方法（総額表示・軽減税率設定）

Shopifyでは商品にタグを付けて管理することができます。 今回は、商品一覧ページなどで対象の商品に「新商品」や「送料無料」などのラベルを付ける方法をご紹介します。 <h2 id="hda77c5e9ad">商品にタグを付ける</h2>まずは、商品登録画面から必要なタグを付けていきます。 商品登録画面の右側にある「タグ」にテキストを入力してEnterを押すとこのようにタグが設定されます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/e5fdd16d398b4bfaba79a3de4e73dd38/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-12%2017.08.51.png" alt=""> 今回は新商品のラベルを付けたいので《new》というタグを設定しました。 <h2 id="h524c3afff8">特定のタグが付いた商品にラベルを付ける</h2>今回は、商品一覧ページで《new》タグが付いた商品に「新商品」ラベルをつけていきます。 ラベルを挿入したいLiquidファイル内の該当箇所に以下のコードを記述します。<pre><code>{% for tag in product.tags %}
 {% if tag contains 'new' %}
 &lt;p&gt;新商品&lt;/p&gt;
 {% endif %}
{% endfor %}</code></pre> for文で商品タグをループさせて、if文で《new》のタグが付いていた場合「新商品」ラベルが表示されるという条件を指定しています。 あとは、CSSでラベルをお好みのスタイルに整えてください。 <h2 id="he33476848d">splitを使用して様々なラベルを表示する</h2>「送料無料」や「ギフト」など他のタグを同じように追加することもできるのですが、if文の記述が長くなってしまいます。 その場合はsplitを使用してラベルの文言を変更することが可能です。 今回は、《送料無料_label》や《新商品_label》、《ギフト_label》のように、全て共通で "_label" というタグを付けていきます。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a1b410dcc05144549fae7eb0844afba8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-12%2017.24.21.png" alt=""> ラベルを挿入したいLiquidファイル内の該当箇所に以下のコードを記述します。<pre><code>{% for tag in product.tags %}
 {% if tag contains '_label' %}
 &lt;p&gt;{{ tag | split: '_' | first }}&lt;/p&gt;
 {% endif %}
{% endfor %}</code></pre> for文で商品のタグをループさせるところまでは先ほどと同じです。 if文では、タグに "_label" が入っている商品のみ、ラベルを表示させるという条件を指定しています。 ラベルにするタグを表示する際には{{ tag }}という記述で出力が可能です。 しかし、「新商品_label」というタグがそのまま出力されてしまうので、splitを使用してタグを分割しています。 例えば《新商品_label》の場合 "_" で分割されるので《新商品》と《label》となります。 そして、firstフィルターを使用することで分割された1つ目の「新商品」のみが出力されます。 《送料無料_label》や《ギフト_label》のようにタグを設定することで「送料無料」や「ギフト」のラベルも同様に表示することが可能です。 <h2 id="hefa83dbeed">Liquidで使用する商品タグは英語で付けるのがおすすめ！</h2>商品のタグは英語でも日本語でも追加することができます。 基本的にはどちらで付けても問題はありません。 しかし、今回のようにLiquidファイル内で使用するタグについてはエラーの原因になる可能性があるので英語で付けたものを使用するのがおすすめです。

Shopifyでは商品にタグを付けて管理することができます。
今回は、商品一覧ページなどで対象の商品に「新商品」や「送料無料」などのラベルを付ける方法をご紹介します。

【Shopify】特定のタグがついた商品にラベルを表示する方法

以前、下記の記事で環境変数の登録の仕方をご紹介しました。 <a href="https://next-blog.site/media/nuxt-env" target="_blank" rel="noopener noreferrer">https://next-blog.site/media/nuxt-env</a> 登録した環境変数を使う際に少し躓いたので備忘録として記載していきます。 <h2 id="hbb049579c6">.envの準備</h2>環境変数を.envに設定している前提で話を進めます。<pre><code>API_KEY = xxxxxxxxxxxxxxxxxxxx</code></pre> まだ設定ができていない方は、<a href="https://next-blog.site/media/nuxt-env" target="_blank" rel="noopener noreferrer">こちら</a>をみて行ってください。 <h2 id="he2c343581f">環境変数の呼び出し</h2>pages/index.vueにて<pre><code> async asyncData({ $config }) {
 const url = 'https://xxx.microcms.io/api/v1/xxxx'
 const limit = 10
 const hoge = await axios.get(`${url}?limit=${limit}`, {
 headers: { 'X-MICROCMS-API-KEY': $config.API_KEY },
 })
 return {
 lists: hoge.data.contents,
 }
 },</code></pre> asyncDataを使って$config経由で環境変数を取得することができました。 色々な記事を見てみるとこれが一般的な取得方法になるようです。 しかし、components内のコンポーネントにて$configを使ったところうまく取得することができませんでした。 おそらく私の知識不足でうまく定義ができていないのだと思います。 とりあえず下記のような方法でコンポーネントでも環境変数を使えるようにしました。 store/api/index.jsにて<pre><code>export const state = () =&gt; ({
 api: process.env.API_KEY,
})

export const getters = {
 getApiData(state) {
 return {
 api: state.api,
 }
 },
}</code></pre> store経由で取得してみようという感じですね。 components/hoge.vue<pre><code> data() {
 return {
 api: '',
 }
 }, 
created() {
 const getApiData = this.$store.getters['api/getApiData']
 this.api = getApiData.api
 },</code></pre> created時にstoreから情報を取得してdataのapiに情報を渡しています。 以上でしっかりと環境変数を使うことができるようになりました。 <pre><code> mounted() {
 this.hoge()
 },
methods: {
 hoge() {
 console.log(this.api)
 }
}</code></pre> コンソールに出力されていれば成功です。 間違いなくもっとスマートなやり方があります。 1つのやり方としてご紹介させていただきました。

登録した環境変数を使う際に少し躓いたので備忘録として記載していきます。

Nuxt.js 環境変数を使用する

ご閲覧くださりありがとうございます。 私は2020年9月くらいから独学でWeb制作の学習をしてきました。 その過程を振り返りつつ今感じている事をつらつらと語っていきます。 (急に振り返りたくなる時ってありません？) 当記事に記述されている意見や考え方は、私個人的なものになります。 「それは違くない？」という意見が出てきても不思議な事ではありません。 こうゆう考え方をしているんだなという視点で読んでいただけると幸いです。 <h2 id="hee50120e89">筆者について</h2>QualityWebStudioという屋号名でWeb構築やデザインを担当させていただいています。 メインとしているのが、WordPress構築とデザインになるのですが静的なサイト(LP)の構築も数多く行っています。 最近ではJSフレームワーク(Vue.Nuxt)やHeadlessCMSを活用した制作も担当しています。 当サイトもNuxt.jsとmicroCMSで作られています。 アニメーション等の表現部分に関しては、非常に興味を持っており得意としている分野でもあります。 Web制作〜開発よりな事にも少し足を突っ込んでいるかな？くらいな人だと思ってもらえればいいかなと感じています。 <h2 id="hb6f6b9a702">私がWeb制作を始めたきっかけなど</h2>見出しとしては結構すごそうな事を語りそうな感じに見えますが、実際にはそうではありません。 <ul><li>デザインやコーディングをやってみたかった</li><li>色々なサイトを見るのが好きだったので、そういったものを作れるようになりたかった</li><li>情報関係の事を仕事にしたかった</li></ul> ざっくりとこんな感じです。 非常に単純な理由ですね。 大学が情報系だったので、JavaやC言語・PHPなどは講義で一応受けていました。 そこでコードの楽しさを覚えて就職活動の際は、IT企業を第一志望として活動していました。 しかし、上手くいかなかったんですね〜 最終的には全く関係のない業種の企業さんから内定をいただきました。 自分の中では不完全燃焼感がすごかったので、気持ち的には諦め切れていなかったんですね。 そこの会社も半年で退職し、独学で勉強していこうと思い今の活動が始まった形です。 <h2 id="h67f160d3b7">ひたすらに勉強していた日々</h2>意気込んでやっていこうと思っていましたが、何をしたらいいかさっぱりでした。 とりあえず有名な書籍を１冊こなして後はひたすらに自分でデザインを考えてコーディングして...の繰り返しをしていました。 1日の平均的な勉強時間は11時間くらいだったと思います。 寝る時とご飯を食べる時以外は殆ど学習に費やしていました。 お風呂入る時は、YouTubeを見ながら入っていましたし外出する時はラジオのように音声だけで学習をしていました。 狂っていると言われても否定できないレベルだったと思います... そんな日々を送っていたので、オリジナルサイトはどんどん増えていきました。 作る度にTwitterへ載せていたのを覚えています。 ※学習２ヶ月くらいの時に作ったサイトのツイート <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/af8a3a3422d2499d93bae4392a21ea2d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-10%2016.33.05.png" alt=""> 今見返すとレスポンシブなんて全然できていないし、本当に形にしただけって感じで恥ずかしいです、、笑 ただ一つ言えるのがトライアンドエラーを繰り返していた日々があったからこそ、色々と吸収していけたのだと思っています。 <h2 id="h94c2f088b9">勘違いしやすいこと</h2>HTMLとCSSをやってjQを覚えたらOK！のようなツイートや記事が溢れています。 確かにそれらを覚えれば一応サイトは作れるので、間違いではないと感じています。 ですが、お仕事としてやっていく上ではそれだけでは不十分すぎます。 サーバー周りの知識やセキュリティ面、仕様に併せた設計構築など挙げたらキリがないくらい覚える事が多いです。 私もそれなりに日々学習と仕事をしています。 ですが、知識アップデートの日々です。 ましてや私より何倍も業界歴が長い方ですら難しい大変といっているわけです。 この意味を理解できれば、様々な言葉には惑わされなくなるのではないでしょうか。 <h2 id="h7cbe0290c5">学習を進めていく上で大切な事</h2> 結論、「焦らない事」です。 それぞれおかれている状況が違うので、一概にはこれが全ての人に当てはまるかはわかりませんが、 色々な方から話を聞いたり見たり・自分の経験を含むと多くの方に当てはまるのではないかと思っています。 すぐに結果を求め過ぎているんですね。 デザインもコーディングも専門スキルにあたると思います。 専門スキルが数ヶ月で完璧に身につくと思いますか？ 身につきませんよね。 躓いてしまう事は当たり前です。むしろ躓かずにいける人の方が稀有な存在です。 純粋に自分が取り組んでいる事を着実に進めていければそれでいいと思います。 長期的に考えてやっていきましょう。 頭で考えることも必要ですが、ひたすらに手を動かしましょう。 小手先のテクニックよりまずは手に馴染ませる事を優先させた方が断然によいと自信を持って言えます。 <h2 id="he799682cfe">自分にあった学習方法を見つける</h2> これ大事です。 動画系のものがいいのか？ 記事などのテキストベースのものがいいのか？ 実践メインの方がわかりやすいのか？ これは人それぞれ違います。 今や多くの情報がインターネット上から得る事ができます。 しかし、溢れかえり過ぎて取捨選択をしていかなければいけないという事も繋がります。 全てをやるには限度があるので、自分がやりやすい学習方法を見つけてそれを継続していく事が必要になります。 <h2 id="hb99b630a24">今だったらどうに学習する？</h2> では、私は今初学者のことに戻ったらどんな事をするか考えてみました。 結論から言うと学習方法はおそらく変えずにやると思います。 何故かと言うと今までやってきた方法が自分に合っていると思っているからです。 ですが、学習内容は若干変える気がします。 最初にやっていた順番としては、<ul><li>HTML、CSS学習(基礎のみ)</li><li>WordPress(基礎のみ)</li><li>jQuery</li></ul> ざっくばらんに書いていますが、おおよそ基礎ができたら次というような内容で行っていたと思います。 今考えると、<ul><li>HTML(基礎)</li><li>〃(クラス命名)</li><li>〃(フォルダ設計)</li><li>CSS(基礎)</li><li>〃(デザインに沿った記述の練習)</li><li>〃(scssの導入)</li><li>〃(フォルダ設計)</li><li>HTML、CSSでの実践繰り返し</li><li>jQuery(基礎)</li><li>jQuery(頻出内容の練習)</li><li>WordPress(基礎)</li><li>WordPress(カスタマイズ応用など)</li></ul> イメージとしては、とにかく1つに対して深くやっていく事を意識していくかなと思います。 正直初学者の頃は、フォルダ設計やクラス命名など知らない状況だと思うので本当に今考えると感が強いです。笑 <h2 id="h3bcda3e6b0">最後に</h2>色々語ってきましたが、私から言えるのは「とにかく継続していくことが必要」と言う事になります。 それぞれが今やっている勉強方法は決して間違っていないと思いますし、それで自分が続けていけると感じているのであれば頑張って継続して行ってもらえたらと思います！ 実際に手を動かして頑張った事は必ず活きてきます。どこかで役に立つ場面があります。 信じてやっていきましょう。 当サイトでも技術系の記事をこれかも更新していきますので、何かの一助となれば幸いです。 長々と私の考えを語る記事になってしまいました。 最後まで読んでいただきありがとうごさいました！

私は2020年10月くらいから独学でWeb制作の学習をしてきました。その過程を振り返りつつ今感じている事をつらつらと語っていきます。

Web制作を独学をしてきて感じたことなど

案件でmiddlewareを触る機会があったので、調べたりしたことなどをまとめています。 <h2 id="h6626e14729">middlewareとは？</h2>ページをレンダリングする前に実行する関数を指定していきます。 ログインチェック等やその他ページ制限をかけてリダイレクトさせるような処理に使われる場合が多いようです。 記述の仕方が３パターンほどあります。 <h2 id="h2c71e26321">プロジェクト全体に指定する</h2>nuxt.config.jsに下記のように指定する事でプロジェクト全体に適用させることができます。<pre><code>export default {
 router: {
 middleware: 'check'
 }
}</code></pre> <h2 id="hf442b719aa">特定のページで指定する</h2>page/index.vue内のscriptタグ内に記載しているイメージです。 これで記述したページのみに適用させることができます。<pre><code>&lt;script&gt;
 export default {
 middleware: 'check'
 }
&lt;/script&gt;</code></pre> <h2 id="h76739f85c2">特定のページで関数を実行する</h2>小規模なものや使い回しをしないものであれば、直接記述する形でも問題がないようです。<pre><code>&lt;script&gt;
 export default {
 middleware({ store, redirect }) {
 if (!store.state.check) {
 return redirect('/')
 }
 }
 }
&lt;/script&gt;</code></pre> <h2 id="ha214098e44">まとめ</h2>実際に使うのは初めてだったのですが、特定の条件下で閲覧させたくないページ等がある場合は非常に便利だなと感じました。 大規模になれば複雑になることは間違い無いですが様々な要件に対応できるようになると思うので、よく覚えていきたいです。

ページをレンダリングする前に実行する関数を指定していきます。
ログインチェック等やその他ページ制限をかけてリダイレクトさせるような処理に使われる場合が多いようです。

Nuxt.jsのmiddlewareについて

Liquidでは、JavaScriptなどで使用される足し算(+)、引き算(-)、掛け算(*)、割り算(/)、割り算の余り(%)などの記号を使用した計算はできません。 今回は、Liquidで計算ができるMath Filterをご紹介します。 <h2 id="hbb8f7b3bfa">Math filterの基本的な使い方</h2>数値から直接計算することができないので、まずは変数に数値を格納してからフィルターを記述します。<pre><code>{% assign 変数名　= 値 | Math filter:値　%}</code></pre> Math filterのそれぞれの使い方を解説していきます。 <h2 id="hbd8fb82ea5">加算（足し算）</h2>足し算はplusというフィルターを使用します。<pre><code>{% assign sample = 700 | plus : 500 %}
{{ sample }}円</code></pre> 表示結果：1,200円 <h2 id="h8ed286b93a">減算（引き算）</h2>引き算はminusというフィルターを使用します。<pre><code>{% assign sample = 1,500 | minus : 500 %}
{{ sample }}円</code></pre> 表示結果：1,000円 <h2 id="h6c2949dacd">乗算（掛け算）</h2>掛け算はtimesというフィルターを使用します。<pre><code>{% assign sample = 1, 200 | times : 3 %}
{{ sample }}円</code></pre> 表示結果：3,600円 <h2 id="h701cef905b">除算（割り算）</h2>割り算はdevided_byというフィルターを使用します。 ※Liquidの割り算では小数点以下は切り捨てとなります。<pre><code>{% assign sample = 7,200 | divided_by : 8 %}
{{ sample }}円</code></pre> 表示結果：900円 <h2 id="h22e257e021">余剰（割り算の余り）</h2>割り算の余りはmoduloというフィルターを使用します。<pre><code>{% assign sample = 12 | modulo : 5 %}
{{ sample }}</code></pre> 表示結果：2 <h2 id="heb55b9a64c">Liquidを使用して割引率を計算する方法</h2>例）2,400円の商品が1,800円の割引価格で販売されていた場合の割引率計算<pre><code>{% assign discount = product.compare_at_price_max | minus: product.price | times : 100 | divided_by : product.compare_at_price_max %}
{{ discount }}%OFF</code></pre> 表示結果：25%OFF 《product.price：商品の販売価格》 《product.compare_at_price_max：値引き前価格》 計算式：discount = (2,400円 - 1,800円) × 100 ÷ 2,400円 = 25% このように、product.priceなどのオブジェクトを使用して数値を設定することも可能です。 <h2 id="hca184877a8">小数点以下の表示について</h2>Liquidの計算では基本的に小数点以下が切り捨てとなりますが、フィルターを使用することで四捨五入や切り上げも可能です。 いくつか種類があるのでご紹介します。 <h3 id="h25805bee02">小数点以下切り上げ</h3>ceilというフィルターを使用して小数点以下の値を切り上げます。<pre><code>{{ 2.6 | ceil }} //3
{{ 3.2 | ceil }} //4</code></pre> <h3 id="h5be995306d">小数点以下切り捨て</h3>floorというフィルターを使用して小数点以下の値を切り捨てます。<pre><code>{{ 2.6 | floor }} //2
{{ 3.2 | floor }} //3</code></pre> <h3 id="hb533d4602b">四捨五入</h3>roundというフィルターを使用して四捨五入します。 roundに値を入力することで小数点以下の桁数を決めることも可能です。<pre><code>{{ 2.6 | round }} //3
{{ 3.2 | round }} //3
{{ 4.56782 | round: 2 }} //4.57</code></pre> Liquidでの計算はさまざまな部分で出てくるので参考になれば嬉しいです。

Liquidでは、JavaScriptなどで使用される足し算(+)、引き算(-)、掛け算(*)、割り算(/)、割り算の余り(%)などの記号を使用した計算はできません。今回は、Liquidで計算ができるMath Filterをご紹介します。

【Shopify】Liquidを使用した計算方法

Shopifyでは、管理画面から独自ドメインを取得（購入）することが可能です。 今回は、Shopifyでの独自ドメイン取得・設定の方法をご紹介します。 <h2 id="hbe7a1339b3">独自ドメインでショップを開くメリット</h2>Shopifyでは、ショップをオープンした段階で「https://ショップ名.myshopify.com」というストアドメインが付与されます。 この初期ドメインのままショップをオープンすることももちろん可能です。 しかし、ブランド名やショップ名の独自ドメインを取得して「〇〇.com」のようにすることで、お客様にブランドやショップを認知してもらいやすくなります。 また、独自ドメインは別のサービスを利用することになった場合やサービスが終了してしまった場合でもそのまま使用することが可能です。 SEOの評価を下げることなくそのまま引き継ぐことが出来るという点でも大きなメリットとなります。 <h2 id="h7f7e75f6b0">独自ドメインの取得方法</h2>【１】管理画面の左下の「設定」→「ドメイン」→「新しいドメインを購入する」をクリック <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/14ecfb396c6b4ccc9507def2a8835163/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-03%2017.45.52.png" alt=""> 【２】取得したいドメインを検索する テキストボックスに、取得したいドメインを入力します。 既に使用されているドメインについては「ご利用できません」と表示されるため、購入ボタンが表示されているドメインを探します。 購入するドメインが決まったら、右側の《購入》ボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/0c2e745dfcac447699e255670cb7cae0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-03%2017.55.53.png" alt=""> 【３】決済方法を登録する 請求情報画面に移行するので、「デフォルトの決済方法」内の「決済方法を追加する」をクリックします。 クレジットカード情報を入力後《クレジットカードを追加》ボタンをクリックします。 決済が完了したらドメイン取得は完了です。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/82000a04142f44138efe59405e45fdfa/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-03%2018.14.24.png" alt=""> 取得が完了すると、Shopifyから確認メールが届き自動で独自ドメインを反映してくれます。 反映されるまでは、最大で48時間かかることがあるのですぐに反映されなくても問題ありません。 ※それ以上に時間が経っても反映されない場合はShopifyのサポートに問い合わせをしてください。 <h2 id="h7f1c2d1961">独自ドメインをメールアドレスとして使用する</h2>取得した独自ドメインをメールアドレスとしても使用することも可能です。 基本的には、独自ドメインに届いたメールを既存のGmailなどに転送する形になります。 設定の手順は以下の通りです。<ol><li>管理画面の左下「設定」→「ドメイン」をクリック</li><li>取得した独自ドメインの「管理」をクリック</li><li>「メール」ブロック内「転送メールアドレスを追加」をクリック</li><li>「ストアのメールアドレス」のテキストボックスに独自ドメイン用に作成するメールアドレスを入力する。</li><li>「転送メールアドレス」のテキストボックスに宛先となる転送先メールアドレスを入力します。</li><li>保存をクリックして完了です。</li></ol> 例えば、《sample-domain.com》という独自ドメインを取得して、《info@sample-domain.com》というアドレスを取得したい場合、手順4のテキストボックスには「info」と入力します。@以降の入力は必要ありません。 手順5では転送先のメールアドレスとして既存のものを省略することなく入力しましょう。 <h3 id="h0475d2306a">独自ドメインをメールアドレスで使用する際の注意点</h3>独自ドメインのメールアドレスが使用できるのは受信のみとなります。 届いたメールに返信した際には受信側に転送先のアドレスが表示されてしまうので注意が必要です。 例） 独自ドメインのメールアドレスが《info@sample-domain.com》 転送先のアドレスが《sample@gmail.com》の場合 →お客様が送信するアドレス：info@sample-domain.com →そのメールに返信した時、お客様側に表示される送信元アドレス：sample@gmail.com もし、送信元のメールアドレスも独自ドメインのものにしたい場合は外部のメールホスティングサービスを利用する必要があります。 <a href="https://www.zoho.com/mail/" target="_blank" rel="noopener noreferrer">Zoho Mail</a>や<a href="https://workspace.google.com/intl/en_ca/products/gmail/" target="_blank" rel="noopener noreferrer">Google Workspace</a>というメールホスティングサービスでは、送信元のアドレスも独自ドメインのものに出来るのでおすすめです。

Shopifyでは、管理画面から独自ドメインを取得することが可能です。
今回は、Shopifyからドメインの取得（購入）・設定する方法をご紹介します。

【Shopify】独自ドメインをShopifyで取得する方法

当サイトを作るときは、@nuxt/dotenvをインストールして環境変数を管理する方法にしていました。 改めて調べてみるとv2.13 以降からはNuxt標準の機能で環境変数の設定できる事がわかったのでそれをまとめていきます。 <h2 id="hfa74aa3bf2">読者の想定と前提</h2><ul><li>プロジェクトを作成している</li><li>nuxtについての知識が少しでもある</li></ul> <h2 id="h90b69cb24d">.envの作成</h2>こちらは今まで通り.envファイルを作成します。<pre><code>BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
API_KEY=xxxx-xxxx-xxxx</code></pre> <h2 id="hc044987313">nuxt.config.jsに記述</h2><pre><code>export default { 
 // 公開されていいもの
 publicRuntimeConfig: {
 apiURL: process.env.API_URL || 'http://localhost:8888',
 },
// 公開したくないもの
 privateRuntimeConfig: {
 apiKEY: process.env.API_KEY,
 },
}</code></pre> 基本的には以上になります。 また、定義した変数は以下で呼び出す事ができます。<ul><li>pages</li><li>store</li><li>components</li><li>plugins</li></ul>

Nuxt.js v2.13 以降の環境変数の設定についてご紹介しています。

Nuxt.js v2.13以降 環境変数の設定について

標準機能に加えて様々な機能をショップに追加することができるShopifyアプリのインストール方法をご紹介します。 <h2 id="hcb779ed4e2">アプリのインストール方法</h2>Shopifyアプリストアには現在、無料・有料合わせて6,600を超えるアプリが公開されています。 まずは、Shopifyアプリストアの中からショップに追加したいアプリを探してみましょう。 【1】Shopify管理画面の《アプリ管理》→《ストアカスタマイズ》をクリック <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/f2ffe58c95ce417c9b4c1ffe39867759/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-30%2018.10.20-min.png" alt=""> 【2】Shopifyアプリストアが開くので、追加したいアプリや機能を検索 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/39badd5519bf4eee89558595acc8238b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-30%2018.10.54-min.png" alt=""> 日本語での検索も可能ですが、日本語対応したいないアプリも多くヒット数が少なくなってしまうので英語での検索がおすすめです。 今回は、お客様からのレビューを表示するアプリを追加するために「reviews」と入力して検索してみます。 レビューアプリだけでも様々な種類がありますが、今回はShopify公式が公開している「Product Reviews」というアプリを導入してみましょう。 【3】インストールしたいアプリを選択 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/d7a3ee6fee764d2481b61596dd96b5e5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-01%2016.57.25-min.png" alt=""> アプリを選択すると、アプリ情報の詳細を確認することができます。 有料アプリの場合、プランや無料期間などを確認しておきましょう。 【4】《アプリを追加》ボタンをクリック <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/a020be683af2499ebeace68190c52fba/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-01%2017.59.00-min.png" alt=""> 《アプリ追加》ボタンをクリックすると、管理画面に遷移します。 【5】ストアにアプリをインストールする <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/49c88d8f019e4b4cabf88381829d6c33/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-01%2018.07.28-min.png" alt=""> 内容を確認して、《アプリをインストール》をクリックします。 【6】インストールされているかアプリ管理画面で確認 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/535bc6eea20943eca54872a78c4ce664/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-01%2018.10.35-min.png" alt=""> アプリ管理画面にアプリが表示されていたらインストール完了です。 アプリを選択すると、それぞれの設定をすることができます。 <h2 id="ha214098e44">まとめ</h2>Shopifyアプリはメルマガ配信や、定期購入、越境ECなどの機能が追加できたり、業務の効率化を図ることができたりと、とにかく種類が豊富です。 有料アプリには無料期間が用意されているものも多くあるので、気になる有料アプリがある場合は無料期間中に色々と試してみるのもいいかもしれません。

標準機能に加えて様々な機能をショップに追加することができるShopifyアプリのインストール方法をご紹介します。

【Shopify】アプリをアプリストアからインストールする方法

Nuxt.jsでSCSSを使いたい時には新たにライブラリ等をインストール必要があります。 環境下で使える様にするまでの流れをご紹介します。 <h2 id="hfa74aa3bf2">読者の想定と前提</h2><ul><li>nuxt.jsのプロジェクトを作成している</li><li>パッケージマネージャが使える</li><li>scssについて理解している</li></ul> <h2 id="hc3cf2129da">ライブラリをインストール</h2>yarnで進めていきます。<pre><code>yarn add sass sass-loader@10</code></pre> <h2 id="hebe88863df">SCSSの記述をする</h2>scssを適用させるには、style属性にlang='scss'を追記します。<pre><code>&lt;style lang="scss"&gt;
.p-contents {
 &amp;__title {
 color: red;
 }
}
&lt;/style&gt;</code></pre> scssの記述方法は今回説明しません。 普段通りの書き方で問題ありません。 デフォルトのタイトル部分を赤色に変えました。 <img src="https://images.microcms-assets.io/assets/995703ae113b4701999bfedeac608bc0/498961e5c8a54ae488f4e51ac62d71bc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-31%2020.35.12.png" alt="">

Nuxt.jsでSCSSを使いたい時には新たにライブラリ等をインストール必要があります。環境下で使える様にするまでの流れをご紹介します。

works

BeingBaSE株式会社様公式サイト

船着税理士事務所様公式サイト

ペイフォワード株式会社様 Carnet(カルネ)

Auto Race Player Award 2021

きゃんノート

瑶埜山光願寺様公式サイト

skills

latest article

【Shopify】ヘッダーメニューを設定する方法

【Shopify】基本的な初期設定

【Shopify】faviconを追加する方法

contact

works

BeingBaSE株式会社様公式サイト

船着税理士事務所様 公式サイト

ペイフォワード株式会社様 Carnet(カルネ)

Auto Race Player Award 2021

きゃんノート

瑶埜山 光願寺様公式サイト

skills

latest article

【Shopify】ヘッダーメニューを設定する方法

【Shopify】基本的な初期設定

【Shopify】faviconを追加する方法

contact

船着税理士事務所様公式サイト

瑶埜山光願寺様公式サイト