<p>実務で作る機会があったので今回書いてみようと思い書いています。誰かの参考になれば幸いです。</p><h2 id="h4e42bd2021">星のレーティング評価とは</h2><p>聞き馴染みがそんなにないとは思いますが (少なくとも筆者は初耳)レビューなどで星で評価するやつです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/5333feb7cbec4aaab806f7bb71884dfc/%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%202024-04-13%2016.21.46.png" alt=""></p><h2 id="hed900658dc">環境</h2><ul><li>next.js : 14.1.4</li><li>react : ^18</li><li>TypeScript : ^5</li><li>TailwindCSS : ^3.3.0</li></ul><h2 id="ha31bd80de1">要件</h2><p>1~5までの数字(小数点含む)をコンポーネントに渡すと、星のレーティング評価を返すものを作る</p><h3 id="h78fd6f2c2c">第一段階・星の配列を表示する</h3><pre><code>const StarRating = () =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {

    // 星のスタイルと描画内容を定義します。
    const starContent = "★";
    let starClassName = "text-gray-400"; 

    // 星を表示します。
    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  // 星を表示します。
  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};</code></pre><h3 id="he8bc0ed745">第二段階・評価を受け取る</h3><pre><code>import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400";

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>Reactが少しわかる方ならわかるかもしれませんが1~5の評価をプロップスで受け取れるようにしただけです。</p><h3 id="h0e1e7d3646">第三段階・評価の数字分黄色に塗りつぶす</h3><p>ここが少し難しいところではありますがやっていきましょう。<br>まずは、「<strong>評価に基づく塗りつぶしの割合を計算</strong>」します。</p><pre><code> const fillRatio = Math.min(Math.max(rating - index, 0), 1);</code></pre><p>割合が分かったら、下記コードのように星が完全に塗りつぶされている星と一部しか塗りつぶされていない場合の場合分けを行っていきます。</p><pre><code>// 星が完全に塗りつぶされている場合
if (fillRatio === 1) {
  starClassName = "text-yellow-500"; 
}
// 星が半分または一部塗りつぶされている場合
else if (fillRatio &gt; 0) {
  return (
    &lt;span key={index} className="relative text-xl"&gt;
      {/* 塗りつぶされた部分 */}
      &lt;span
        className="absolute text-yellow-500"
        style={{
        width: `${fillRatio * 100}%`, // 塗りつぶしの割合
          overflow: "hidden",
        }}
      &gt;
        ★
      &lt;/span&gt;
      {/* 塗りつぶされていない星 */}
      &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
    &lt;/span&gt;
  );
}</code></pre><p>これで完成となります。<br><br>最後にコードの全体をご覧ください。</p><pre><code>// StarRanking.tsx
import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400"; 
    
    const fillRatio = Math.min(Math.max(rating - index, 0), 1);

    if (fillRatio === 1) {
      starClassName = "text-yellow-500"; 
    }
    else if (fillRatio &gt; 0) {
      return (
        &lt;span key={index} className="relative text-xl"&gt;
          &lt;span
            className="absolute text-yellow-500"
            style={{
              width: `${fillRatio * 100}%`, 
              overflow: "hidden",
            }}
          &gt;
            ★
          &lt;/span&gt;
          &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
        &lt;/span&gt;
      );
    }

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>あとは、このコンポーネントを親で呼んであげます</p><pre><code>&lt;StarRanking ranking={4} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/b07bf88201ff49938c7d0f32962fa31c/%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%202024-04-13%2017.14.33.png" alt=""><br>次にこのコンポーネントに「2.5」を渡すと下記のような表示になります。</p><pre><code>&lt;StarRanking ranking={2.5} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/8d7e158834dc44c796961ef9d983c0ac/%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%202024-04-13%2017.20.05.png" alt=""><br>うん。いい感じだと思います。<br>お疲れ様でした。<br><br><br><br><br></p>

Next.jsで星のレーティング評価を作ってみた

<p>今回はNext.jsでvcfファイルをダウンロードするボタンを作ってみたので、是非参考にしてみてください。</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hacdb522e87">vcfファイルとは</h2><blockquote>連絡先とその関連情報を保存する仮想連絡先ファイルです。 VCF ファイルは vCard ファイルとしても知られ、電話番号、住所、連絡先の写真、Web サイトのアドレス、電子メール ID などの連絡先情報を保存するための設計されたフィールドで構成されます。</blockquote><p><a href="https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/" target="_blank" rel="noopener noreferrer">https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/</a></p><h2 id="h51049a6b64">モジュールをインストールする</h2><p><a href="https://www.npmjs.com/package/vcards-js" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/vcards-js</a></p><pre><code>$ npm i vcards-js</code></pre><h2 id="h1fe54e2a6d">vcfファイルをダウンロードさせるボタンの作成</h2><p>まずは普通のボタンを作ります。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  return (
    &lt;button type="button"&gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>ここにダウンロードボタンを押したら、vcfファイルをダウンロードをさせる処理を書いていきます。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  const CreateVCard = (
    firstName = "",
    lastName = "",
    organization = "",
    postalCode = "",
    street = "",
    homePhone = "",
    homeFax = "",
    email?: string,
    url = "",
    note = ""
  ): string =&gt; {
    const vCardsJS = require("vcards-js");
    const vCard = vCardsJS();

    vCard.firstName = firstName;
    vCard.lastName = lastName;
    vCard.organization = organization;
    vCard.homeAddress.postalCode = postalCode;
    vCard.homeAddress.street = street;
    vCard.homePhone = homePhone;
    vCard.homeFax = homeFax;
    vCard.email = email;
    vCard.url = url;
    vCard.note = note;

    return vCard.getFormattedString();
  };

  const handleClick = (vcfText: string) =&gt; {
    const element = document.createElement("a");
    const file = new Blob([vcfText], { type: "text/vcard;charset=utf-8" });
    element.href = URL.createObjectURL(file);
    element.download = "myFile.vcf";
    document.body.appendChild(element);
    element.click();
  };
  return (
    &lt;button 
      type="button"
      onClick={() =&gt;
            handleClick(
              CreateVCard(
                "山田",
                "太郎",
                "WEBエンジニア",
                "999-9999",
                "バーリント西区公園通り128",
                "99-9999-9999",
                "00-0000-0000",
                "hoge@xxx.xx",
                "https://xxxxx.xxxxxx",
                "架空の人物です。"
              )
            )
          }
     &gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>以上で完成なのですがこのままだと下記エラーが出ます。</p><pre><code>Module not found: Can't resolve 'fs'</code></pre><p>対処法として、<code>next.config.js</code>に以下を追加してください。</p><pre><code>webpack: (config) =&gt; {
  config.resolve.fallback = { fs: false };
  return config;
},</code></pre><p>これでエラーが無くなり、無事vcfファイルがダウンロードされると思います。<br><br>詳しくはドキュメントをチェックしてください。<br><a href="https://github.com/enesser/vCards-JS" target="_blank" rel="noopener noreferrer">https://github.com/enesser/vCards-JS</a><br><br><br><br><br></p>

Next.jsでvcfファイルダウンロードボタンを作ってみた。(Safari対応)

<h2 id="h2295b759c0">対象者</h2><ul><li>Next.jsで構築したサイトにGoogleアナリティクスを導入したい方。</li><li>または、その方法がわからない方。</li></ul><h2 id="h23ef74d045">書かないこと</h2><p>トラッキングID・gtagの取得の仕方(取得した前提で話を進めます。)</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hadcb3d82a0">導入していく</h2><ul><li>トラッキングID・gtagを環境変数で持っておく</li></ul><pre><code>// .env.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-****************************"</code></pre><ul><li>ibs/gtag.tsを作成する</li></ul><pre><code>export const GA_TAG_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";

export const IS_GATAG = GA_TAG_ID !== "";

export const pageview = (path: string) =&gt; {
  window.gtag("config", GA_TAG_ID, {
    page_path: path,
  });
};</code></pre><p><br></p><pre><code>window.gtag("config", GA_TAG_ID, {
  page_path: path,
});</code></pre><p>上記の箇所に目見線が出ていると思うので下記コマンドで型をインストールします。</p><pre><code>$ npm i -D @types/gtag.js</code></pre><ul><li>GoogleAnalyticsコンポーネントの作成</li></ul><pre><code>// components/GoogleAnalytics.tsx 
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
import { IS_GATAG, GA_TAG_ID, pageview } from "@/libs/gtag";

const GoogleAnalytics = () =&gt; {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() =&gt; {
    if (!IS_GATAG) {
      return;
    }
    const url = pathname + searchParams.toString();
    pageview(url);
  }, [pathname, searchParams]);

  return (
    &lt;&gt;
      &lt;Script
        strategy="lazyOnload"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TAG_ID}`}
      /&gt;
      &lt;Script id="gtag-init" strategy="afterInteractive"&gt;
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TAG_ID}', {
            page_path: window.location.pathname,
          });
        `}
      &lt;/Script&gt;
    &lt;/&gt;
  );
};

export default GoogleAnalytics;</code></pre><ul><li>layout.tsxでGoogleAnalyticsコンポーネントを読み込む</li></ul><pre><code>// layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";
import GoogleAnalytics from "@/components/GoogleAnalytics";
import { Suspense } from "react";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="ja" className="scroll-smooth"&gt;
      &lt;head&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;GoogleAnalytics /&gt;
        &lt;/Suspense&gt;
      &lt;/head&gt;
      &lt;body className={inter.className}&gt;
        {children}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p>ここで少し注意が必要なんですけど、Next.jsでApp Routerを使用するときに<code>useSearchParams()</code>を使用すると、<code>Entire page deopted into client-side rendering</code>というエラーが出てしまいます。 <br><a href="https://nextjs.org/docs/messages/deopted-into-client-rendering" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/deopted-into-client-rendering</a><br><br>その対処方法として、<code>useSearchParams()</code>を使用しているコンポーネント(今回の場合、GoogleAnalytics.tsx)に<code>&lt;Suspence /&gt;</code>でラップしてやるとエラーが無くなります。<br><br>以上でGoogleアナリティクスを導入できました。</p>

Next.js(App Router)×TypescriptでGoogleアナリティクスを導入する

<p>明けましておめでとうございます。今年もよろしくお願いします！！ってことで今年初めてのブログはChakra UIです。<br><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/</a><br><br>以下の環境でChakra UIを使用しています。</p><ul><li>Next.js : 14.0.3</li><li>React : 18.0.0</li></ul><h2 id="h2295b759c0">対象者</h2><ul><li>Chakra UIって何？美味しいの？って状態の方。</li><li>Chakra UIを使ったことがない方。</li><li>Chakra UIを使ってみたい方。</li></ul><h2 id="hd8d793506b">インストール</h2><p>Chakra UIを使うためのモジュール群をインストールします。</p><pre><code>$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion</code></pre><p>Chakra UIはemotionとframer-motionに依存しているっぽいのでこれらも併せてインストールします。</p><h2 id="h31d727ccda">準備</h2><p>Chakra UIを使うためには、最も階層が上位（この場合、<code>app/layout.tsx</code>）に<code>&lt;ChakraProvider /&gt;</code> を設置する必要があります。必ずChakra UIを利用する際にはこのProviderを設定するようにしてください。</p><pre><code>// app/layout.tsx
・・・
import { ChakraProvider } from "@chakra-ui/react"; // 追加
・・・

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="en"&gt;
      &lt;body className={inter.className}&gt;
        &lt;ChakraProvider&gt;{children}&lt;/ChakraProvider&gt; {/* &lt;ChakraProvider /&gt;でラップする。 */}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p><br>ここまでくると、Chakra UIが使えますので実際に使っていきたいと思います。</p><pre><code>// app/page.tsx
import { Heading } from "@chakra-ui/react";

export default function Home() {
  return (
    &lt;Heading color={"red"} fontSize={"64px"}&gt;
      Next.js × Chakra UI
    &lt;/Heading&gt;
  )
}</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/2c882a2e02ca4392bd26dc57dacc9528/%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-26%2013.02.34.png" alt=""><br>ちなみに、ブラウザ上では<u>&lt;h2&gt;</u>でレンダリングされます。</p><h2 id="hdae3825bce">基本となるスタイルの付け方</h2><p>Chakra UIでは、<a href="https://github.com/styled-system/styled-system" target="_blank" rel="noopener noreferrer">styled-system</a>を基礎としている部分があるという特徴があるので、<u>コンポーネントのpropsに直接style属性を記述することでスタイリング</u>します。</p><pre><code>&lt;Box
  width={"100px"}
  height={"100px"}
  backgroundColor={"blue"}
  borderRadius={"50%"}
  padding={"8px"}
  margin={"8px"}
&gt;&lt;/Box&gt;</code></pre><h3 id="h29c2b42b1d">スタイルのショートハンドラ</h3><p>styleの値にはさまざまなショートハンドラが用意されています。<code>padding</code> なら<code>p</code>、<code>margin</code> なら<code>m</code>です。</p><pre><code>&lt;Box
  w={"100px"}
  h={"100px"} 
  bgColor={"blue"}
  rounded={"50%"}
  p={"8px"} 
  m={"8px"}
&gt;&lt;/Box&gt;</code></pre><p>また、縦方向・横方向をまとめて指定する<code>py(padding-top/padding-bottom)・px(padding-left/padding-right)</code> 、<code>my(margin-top/margin-bottom)・mx(margin-left/margin-right)</code> ことができます。</p><pre><code>&lt;Box px={"10px"} my={"10px"}&gt;・・・&lt;/Box&gt;</code></pre><p>何だかこの辺りは<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">TailwindCSS</a>に近しい感じがしますね。</p><h2 id="h02e85881c2">Theme</h2><p>Chakra UIにも他のUIライブラリみたいにTheme機能があります。ここでは、デフォルトのTheme機能について解説します。<br><a href="https://chakra-ui.com/docs/styled-system/theme" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme</a></p><h3 id="h6ca073dc9d">色のThemeの使い方</h3><p>色のThemeに関しては<code>色.50、100~900</code> のような指定で、50と100〜900の100刻みで計10段階あり、<u>50が一番薄く900が一番濃い</u>と言う感じです。<a href="https://chakra-ui.com/docs/styled-system/theme#colors" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#colors</a></p><pre><code>&lt;Box backgroundColor={"red.50"} borderColor={"blue.200"} color={"yellow.800"}&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0111671636">サイズ関連の使い方</h3><ul><li>font-size、letter-spacingなどのフォント系</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#typography" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#typography</a></p><pre><code>// 7xl = 72px
&lt;Heading fontSize={"7xl"}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><ul><li>margin、padding</li></ul><p><a href="https://chakra-ui.com/docs/styled-system/theme#spacing" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#spacing</a></p><pre><code>// 2=0.5rem=8pxのpaddingが付く。
&lt;Box p={2}&gt;・・・&lt;/Box&gt;

// そのまま2pxのpaddingが付く。
&lt;Box p={"2px"}&gt;・・・&lt;/Box&gt;</code></pre><ul><li>width、height</li></ul><p><a href="unsafe:[object Object]">https://chakra-ui.com/docs/styled-system/theme#sizes</a></p><pre><code>&lt;Box 
  w={"full"} // full=100%
  h={100} // 1=1pxなので、100=100px
&gt;・・・&lt;/Box&gt;</code></pre><h3 id="h0201d4f644">レスポンシブ</h3><p>propsの値に配列またはオブジェクトを渡すだけでレスポンシブすることができます。<br><a href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax</a></p><pre><code>&lt;Box bg={["red.500", "yellow.500", "green.500", "blue.500"]} &gt;
  ・・・
&lt;/Box&gt;</code></pre><p>このように、配列を渡すことでレスポンシブを指定することができます。<br>配列を渡した場合、左に書いた値が<code>sm</code>その右の値が<code>md</code>、<code>lg</code>そして一番右の値が<code>xl</code>となっています。</p><pre><code>sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px</code></pre><p><a href="https://chakra-ui.com/docs/styled-system/theme#breakpoints" target="_blank" rel="noopener noreferrer">https://chakra-ui.com/docs/styled-system/theme#breakpoints</a><br><br>また、以下のようにオブジェクトを使って表現することもできます。</p><pre><code>&lt;Box bg={{ base: "red.500", sm: "yellow.500", md: "green.500", lg: "blue.500" }} &gt;
&nbsp; ・・・
&lt;/Box&gt;</code></pre><h2 id="h2d319ccfc7">疑似要素</h2><p>疑似要素を指定する場合、<code>_before</code> 、<code>_after</code> のように指定します。</p><pre><code>&lt;Box _before={{ content: "", ・・・ }}　_after={{ content: "", ・・・ }}&gt;・・・&lt;/Box&gt;</code></pre><p><br>hoverの時も同様に<code>_hover</code>と指定します。</p><pre><code>&lt;Heading color={"red"} fontSize={"7xl"} _hover={{ color: "blue" }}&gt;
  Next.js × Chakra UI
&lt;/Heading&gt;</code></pre><h2 id="h3bcda3e6b0">最後に</h2><p>今回はChakra UIの基本的な使い方についてご紹介しました。<br>大体この辺りを押さえておくといいかんじにChakraライフを過ごせるのではないかと思います。他に足りない部分であったり応用的な使い方などについてはタイミングが合えば、また書きたいと思います。<br><br><br><br><br><br></p>

Next.jsでChakra UIを使ってみる。

<p>今記事ではJavaScriptを使わずにアコーディオンの作り方を紹介します。<br>細かいアニメーションなどはまだまだJavaScriptのお力を借りなければなりませんが、HTMLだけでアコーディオンが作れるようになったのは驚きですねw<br></p><h2 id="h116fd24dee">とりあえず作ってみた。</h2><p><code>details</code>と<code>summary</code>といったタグを使うことにより簡単にアコーディオンを作ることができます。</p><pre><code>&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;フロントエンドエンジニア&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;
&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;バックエンドエンジニア&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;
&lt;details class="accordion"&gt;
  &lt;summary class="label"&gt;デザイナー&lt;/summary&gt;
  ダミーテキストダミーテキストダミーテキストダミーテキスト
&lt;/details&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/d6b83c8a3bf04fabaff687c5a456848e/%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%2017.18.56.png" alt=""></p><h2 id="h8ba5c4e0d9">応用編</h2><p>では、応用編です。今回は<a href="https://code-jump.com/" target="_blank" rel="noopener noreferrer">CodeJump</a>さんの<a href="https://code-jump.com/extra2-menu/" target="_blank" rel="noopener noreferrer">「【jQuery コーディング練習】番外編：アコーディオンメニューの練習」</a>を参考にデザインを作っています。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fembed%2Fpreview%2FJjxyezr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DJjxyezr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fpen%2FJjxyezr&image=https%3A%2F%2Fshots.codepen.io%2Fusername%2Fpen%2FJjxyezr-512.jpg%3Fversion%3D1699953628&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe><p><br></p><pre><code>&lt;div class="wrapper"&gt;
&nbsp; &lt;h1 class="title"&gt;募集職種&lt;/h1&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;1. フロントエンドエンジニア&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;2. バックエンドエンジニア&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&nbsp; &lt;details class="accordion"&gt;
&nbsp; &nbsp; &lt;summary class="label"&gt;3. デザイナー&lt;/summary&gt;
&nbsp; &nbsp; &lt;dl class="detail"&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;仕事内容&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;応募資格&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;必須スキル&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;テキストテキストテキストテキスト&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;給与&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;XXX万～XXX万 (スキル・経験・実績により優遇)&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;休日・休暇&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
&nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;雇用形態&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;正社員（試用期間3ヶ月）&lt;br /&gt;業務委託&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務時間&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;フレックスタイム&lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &lt;dt&gt;勤務地&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &lt;dd&gt;東京&lt;/dd&gt;
&nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &lt;/details&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>* {
&nbsp; margin: 0;
&nbsp; padding: 0;
&nbsp; box-sizing: border-box;
}

body {
&nbsp; background-color: #addff2;
&nbsp; color: #000;
}

.wrapper {
&nbsp; max-width: 960px;
&nbsp; padding: 0 20px;
&nbsp; margin: 40px auto;
}

.title {
&nbsp; font-size: 2rem;
&nbsp; font-weight: normal;
&nbsp; margin-bottom: 30px;
}

.accordion {
&nbsp; border-top: solid 1px #000;
}

.accordion:last-child {
&nbsp; border-bottom: solid 1px #000;
}

.accordion[open] {
&nbsp; background-color: #5bbee5;
}

.accordion .label {
&nbsp; list-style: none;
&nbsp; cursor: pointer;
&nbsp; font-size: 1.125rem;
&nbsp; font-weight: bold;
&nbsp; padding: 40px 30px;
&nbsp; position: relative;
&nbsp; transition: 0.5s;
}

.accordion .label::-webkit-details-marker&nbsp;{
  display: none;
}

.accordion .label:hover {
&nbsp; background-color: #5bbee5;
}

.accordion .label::before,
.accordion .label::after {
&nbsp; content: "";
&nbsp; width: 20px;
&nbsp; height: 1px;
&nbsp; background: #000;
&nbsp; position: absolute;
&nbsp; top: 50%;
&nbsp; right: 5%;
&nbsp; transform: translateY(-50%);
}

.accordion .label::after {
&nbsp; transform: translateY(-50%) rotate(90deg);
&nbsp; transition: 0.5s;
}

.accordion[open] .label::after {
&nbsp; transform: rotate(180deg);
}

.accordion .detail {
&nbsp; border-top: solid 1px #ccc;
&nbsp; padding: 32px 24px;
&nbsp; display: flex;
&nbsp; flex-wrap: wrap;
&nbsp; background-color: #addff2;
}

.accordion .detail dt {
&nbsp; padding-bottom: 32px;
&nbsp; font-weight: bold;
&nbsp; width: 20%;
}

.accordion .detail dd {
&nbsp; padding-bottom: 32px;
&nbsp; width: 80%;
}</code></pre><h3 id="hc499e4ad38">解説</h3><p>HTMLの方は最初の方に解説したので省略しますね。<br></p><h4 id="h2a6e107b90">デフォルトの三角形を消す</h4><p>デフォルトで左についてある開閉式ができるやつです。<br>作成するデザインによってはそれが不要になる場合があります。</p><pre><code>.accordion .label {
&nbsp; list-style: none;
}</code></pre><p><br>通常は上記の指定で消えてくれますが、Safariだけ<code>-webkit-details-marker&nbsp;</code>というCSSの擬似要素で三角形を表示しています。以下のように別途指定して三角形を消してやる必要があります。</p><pre><code>.accordion .label::-webkit-details-marker&nbsp;{
  display: none;
}</code></pre><p>ちなみにデフォルトでは<code>display: list-item;</code>が指定されています。</p><h4 id="h7c6f0987d7">開閉状態のスタイルの切り替え</h4><p>アコーディオンには開いている時、閉じている時があります。<br>開いている時のスタイルは「こう！」閉じている時のスタイルは「こう！」のように開閉状態を調べてスタイルを切り替える方法をここでは紹介します。</p><pre><code>.accordion {
  /* アコーディオンが閉じている時 */
}

.accordion[open] {
  /* アコーディオンが開いている時 */
}</code></pre><p>アコーディオンが開いているときは<code>open</code>属性が付与され、閉じている時には付与されない為、上記のような指定の仕方になるわけです。</p><h2 id="h44e51f96ce">参考資料</h2><ul><li><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/details" target="_blank" rel="noopener noreferrer">&lt;details&gt;:詳細折りたたみ要素 - MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary" target="_blank" rel="noopener noreferrer">&lt;summary&gt;:概要明示要素 - MDN</a></li><li><a href="https://ics.media/entry/220901/" target="_blank" rel="noopener noreferrer">detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法</a></li></ul><p><br><br><br><br><br></p>

[JavaScript不要]　アコーディオンの作り方

<p>※ビルドツールにViteを使っています。<br>※Swiperのバージョンは<code>11.0.3</code>を使用しています。( お使いのバージョンによってモジュールの読み込み先など若干違うことがあるため注意してください。)<br><br><a href="https://swiperjs.com/react" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react</a><br></p><h2 id="hd8d793506b">インストール</h2><pre><code>$ npm install swiper</code></pre><h2 id="h88dac47172">雛形を作ってみる</h2><p>とりあえず雛形を作ってみます。</p><pre><code>import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function App() {
  return (
    &lt;&gt;
      &lt;Swiper&gt;
        &lt;SwiperSlide&gt;
          &lt;img src="./img/mainvisual1.jpg" alt="" /&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;img src="./img/mainvisual2.jpg" alt="" /&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;img src="./img/mainvisual3.jpg" alt="" /&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;img src="./img/mainvisual4.jpg" alt="" /&gt;
        &lt;/SwiperSlide&gt;
      &lt;/Swiper&gt;
    &lt;/&gt;
  );
}

export default App;</code></pre><p>簡単ですね。上記のように記述するとシンプルなスライダーができたと思います。でも今のままで使っていく場合はほぼないと思いますので次の章からナビゲーションやページネーションのつけ方や自動再生の設定の仕方などのオプションの設定方法についてみていきます。</p><h2 id="h32a67f9128">オプション</h2><p>オプションは基本的に<code>&lt;Swiper /&gt;</code>に「props」で渡す形になります。<br>オプションにはそのまま使えるものや別途モジュールから読み込んできて使う2種類があることを覚えておいてください。<br></p><h3 id="hdd867680d8">ナビゲーション</h3><p>ナビーゲーションをつける方法をご紹介します。<br>これは、別途モジュールを読み込んで使うパターンのオプションです。</p><pre><code>import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules"; // 追加
import "swiper/css";
import "swiper/css/navigation"; // 追加

function App() {
  return (
    &lt;&gt;
      &lt;Swiper
        modules={[Navigation]}  {/* 追加 */}
        navigation {/* 追加 */}
      &gt;
        ・・・
      &lt;/Swiper&gt;
    &lt;/&gt;
  );
}

export default App;</code></pre><h3 id="h43a144f4e4">ページネーション</h3><p>ページネーションのつけ方について解説します。<br>こちらも別途モジュールを読み込んで使う方法です。</p><pre><code>import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination"; // 追加

function App() {
  return (
    &lt;&gt;
      &lt;Swiper
        modules={[Navigation,Pagination]} {/* 修正 */}
        navigation
        pagination={{
          clickable: true {/* 追加({{ clickable: true }} ← クリック操作を可能にする) */}
        }}
      &gt;
        ・・・
      &lt;/Swiper&gt;
    &lt;/&gt;
  );
}

export default App;</code></pre><h3 id="hd264691107">自動再生</h3><p>自動再生もよく使うオプションなのですが、これも別途モジュールを読み込んでします。<br>今回は2秒ごとに自動再生するように設定しています。</p><pre><code>import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function App() {
  return (
    &lt;&gt;
      &lt;Swiper
        modules={[Navigation,Pagination,Autoplay]} {/* 修正 */}
        navigation
        pagination={{ clickable: true }}
        autoplay={{
            delay: 2000　{/* 追加（{{ delay: 5000 }} ← デフォルト） */}
        }}
      &gt;
        ・・・
      &lt;/Swiper&gt;
    &lt;/&gt;
  );
}

export default App;</code></pre><p>このほかにもモジュールを読み込んで使っていくオプションはありますが数が膨大にあるため、個人的によく使うものを中心に書いてみました。その他のオプションに関してはご自分で調べてみてください。<a href="https://swiperjs.com/swiper-api#modules" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#modules</a><br><br>ここからはモジュールの読み込みが必要なく使えるオプションで個人的によく使いそうなやつを紹介していきます。</p><h3 id="h0ab02f34d7">ループ</h3><p>スライドをループさせます。</p><pre><code>return (
  &lt;Swiper 
    loop={true}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><h3 id="hf7ee70b482">スピード</h3><p>スライドスピードを変更したいときに使うオプションです。<u>デフォルトの値は300</u></p><pre><code>return (
  &lt;Swiper 
    speed={500}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><h3 id="hf1186109fd">画面に表示させる枚数の指定</h3><pre><code>return (
  &lt;Swiper 
    slidesPerView={3}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><p>また、<code>slidesPerView</code>には少数点数を指定でき、横にずれるスライドも実装できる。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0ccc323f3d1942cba88a9e778f05bd8a/%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-05%2011.11.40.png" alt=""></p><pre><code>return (
  &lt;Swiper 
    slidesPerView={1.5}
    centeredSlides={true}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><p>また、<code>slidesPerView</code>には「"auto"」も指定でき<u>CSSでサイズを調整したい</u>ときに使用します。</p><h3 id="h6c4d03bd93">間隔を開ける</h3><pre><code>return (
  &lt;Swiper 
    spaceBetween={50}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><p>CSSの<code>margin</code>で間隔を開けるより、こちらが推奨されています。</p><h3 id="h9179513367">ブレークポイント</h3><p>デバイスの大きさによって<code>slidesPerView</code>の値を変更したい時などに使います。</p><pre><code>return (
  &lt;Swiper 
     breakpoints={{
        {/* ウィンドウの幅が480px以上の場合 */}
        480: { slidesPerView: 2 },
        {/* ウィンドウの幅が1056px以上の場合 */}
        1056: { slidesPerView: 3 },
        ・・・
     }}
  &gt;
   ・・・
  &lt;/Swiper&gt;
)</code></pre><p>以上が私が個人的によく使うオプションです。<br>何度も言うかもですがSwiperのオプションの数は膨大です。なので、今回はこの程度で止めておきたいと思います。もし、ほかにも気になる方は<a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">こちら</a>をご覧ください。</p><h2 id="ha214098e44">まとめ</h2><p>今回はReactでのSwiperの使い方についてのお話でしたが、Vueなどの各種フレームワーク用のコンポーネントも用意されています。<br>また機会があれば本ブログでもご紹介できればと思っています。<br>もちろんフレームワークではなくVanillaJSでも使えるので、是非スライダーを実装する際にはSwiperを使用してみてください。<br><br><a href="https://watataku-blog.vercel.app/blog/9t4yqq-zq" target="_blank" rel="noopener noreferrer">https://watataku-blog.vercel.app/blog/9t4yqq-zq</a> ← VanillaJSでの使い方を紹介した記事<br><br><br><br><br></p>

SwiperをReactで使う方法

<p>こんにちは。<br>久しぶりの更新になってしまいました。<br>今回のお話はSwiperを使って「前へ、次へ」の矢印のデザインなどを自身でカスタマイズする方法を紹介していきます。<br></p><h2 id="h2295b759c0">対象者</h2><ul><li>Swiperのデザインをカスタマイズしたい方。</li><li>Swiperの基礎がある程度わかっている方。</li></ul><h2 id="h07e283c641">「前へ、次へ」の矢印のデザインとページネーションのデザインを変更する方法</h2><p>デフォルトで設定した「前へ、次へ」の矢印はしたの画像のような青色の矢印であったりページネーションです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/f79c08e9649441129b0650d43852d5ca/%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-01%2012.09.05.png" alt=""><br>それを今回はしたの画像のようにCSSで変更してみたいと思います。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/d5cb0b9e947a48a4b2b0d3b903b0519f/%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-01%2012.14.39.png" alt=""><br>まずは「前へ、次へ」の矢印のデザインから変えていきます。</p><pre><code>.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}</code></pre><p>上記のセレクタを弄るのですが、デフォルトでは<code>.swiper-button-prev::after</code>に<code>content: "prev";</code> 、<code>.swiper-button-next::after</code>に<code>content: "next";</code> が設定されていて、各青い矢印が表示されています。これを<code>content: "";</code> で打ち消してやります。<br>打ち消した後に、各セレクタに矢印とかをCSSで記述していきます。</p><pre><code>.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  left: 0;
}

.swiper-button-prev::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(23%) rotate(-135deg);
}

.swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  right: 0;
}

.swiper-button-next::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-20%) rotate(-315deg);
}</code></pre><p>次にページネーションのデザインを変更していきます。<br>ページネーションのデザインを変更する場合は<code>.swiper-pagination-bullet</code>を触ります。</p><pre><code>.swiper-pagination-bullet {
  background-color: #111;
  height: 6px;
  width: 6px;
  margin: 0 16px !important;
}</code></pre><h2 id="hf730a4b43c">左右にはみ出すスライド</h2><p>自分自身も執筆していて表現が正しいのか微妙なかんじですが下記の画像のようなデザインです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/ac4b7e2db6824b01b4afec846885aef6/%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-01%2016.12.48.png" alt=""></p><pre><code>new Swiper(".swiper", {
  loop: true,
  speed: 500,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  centeredSlides: true,
  slidesPerView: 1,
  breakpoints: {
    600: {
      slidesPerView: 1.6, 
      spaceBetween: 40,
    },
  },
});</code></pre><p><br>左右にはみ出すスライドを実装するために重要になってくるプロパティは<code>slidesPerView</code>です。<br>このプロパティは画面に何枚のスライドを表示させるかを指定するものでデフォルトの値は「1」です。<br>これを「1.6」などのように小数にすることで、<u>複数スライドを表示かつスライドをはみ出させる</u>ことができます。<br><br>もう一つ、重要なプロパティがあります。それが<code>centeredSlides</code>です。<br>このプロパティの値を「true」にすることで<u>スライドが中央寄せで表示</u>されるようになります。<br><br>あとは<code>spaceBetween</code>でスライド間の余白を調整すれば完成です。<br><span style="color:#d75969">※CSSのmarginプロパティでスライド間を開けるより、こちらを使う方が推奨されています。</span><br></p><h2 id="h73d3c0432b">「前へ、次へ」の矢印、ページネーションを外に出す</h2><p>「前へ、次へ」の矢印、ページネーションを外に出す場合まずはHTML構造を変更する必要があります。<br>通常のHTML構造では下記の通りです。</p><pre><code>&lt;div class="swiper"&gt;
  &lt;div class="swiper-wrapper"&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="swiper-slide"&gt;
      &lt;img src="img/・・・" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre><p>これを以下のように作り替えます。</p><pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="swiper"&gt;
    &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img src="img/・・・" alt="" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre><p><code>.swiper</code>をさらに<code>div要素</code>で囲み<code>.swiper-pagination</code>、<code>.swiper-button-prev</code>、<code>.swiper-button-next</code>を<code>.swiper</code>と同じ階層に配置します。<br><code>.swiper</code>には「overflow:hidden」がついており、これはswiperスライダにおいて外せないものなので、「前へ、次へ」の矢印、ページネーションのパーツを外に移動させたいからです。<br><br>HTML構造を書き換えたらCSSで位置を調整します。<br>ここで注意が必要なのですが必ず一番外側の<code>div要素</code>に「position: relative」を指定してください。</p><pre><code>.wrapper {
  position: relative;
}</code></pre><p>ここまで来たら後は各々適当に各々調整してください。</p><pre><code>.swiper-button-prev {
  left: -10px;
}

.swiper-button-next {
  right: -10px;
}

.swiper-pagination {
  bottom: -30px !important;
}</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/2a1d3142679945cd8afa3739e0890007/%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%2018.36.29.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>今回はSwiperのデザインを変更する方法をご紹介しました。<br>デフォルトの青のままのデザインだけでもいいのですが、Web制作の場面でほぼデフォルトの青のままのデザインで終わる場面はほぼないと思います。そんな場面でも自分でデザインをカスタマイズできるようになればSwiperがもっと使いやすくなるはずです。<br><br>この記事を読んで少しでも参考になれば幸いです。<br><br><br><br></p>

Swiperのデザインをいい感じにカスタマイズする方法

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。<br>v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。<br>その中でも今回はstorageをやっていきます。<br>storageはcloud storageと呼ばれ、Firebaseが提供している機能の一つで、写真や動画など、ユーザーが作成したコンテンツを保管、提供する必要のあるアプリ デベロッパー向けに構築されています。<br><br>以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。<br><a href="https://qiita.com/watataku8911/items/7292a04590aad5b4dd19" target="_blank" rel="noopener noreferrer">https://qiita.com/watataku8911/items/7292a04590aad5b4dd19</a><br></p><h2 id="h3ed8c36a02">画像をアップロードする</h2><pre><code>import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes  } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

// ファイルへの参照を作る。
const　imageRef = ref(storage, 'hogehoge.jpg');

// 'file' は Blob または File API から取得される。
uploadBytes(storageRef, file).then((snapshot) =&gt; {
  console.log('アップロードができました');
}).catch(() =&gt; {
  console.log('アップロードができませんでした');
});</code></pre><p>「ファイルへの参照を作る」に関しては下記のように記述するとフォルダとファイルを作れるようになります。</p><pre><code>const　imageRef = ref(storage, 'bowbow/hogehoge.jpg');</code></pre><h2 id="h99197c576f">保存した画像の保存先URLを取得する</h2><p>保存した画像の保存先URLを取得するメソッドは<code>getDownloadURL()</code>を使用します。 </p><pre><code>import { initializeApp } from "firebase/app";
import { getStorage, ref, getDownloadURL } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

const　imageRef = ref(storage, 'hogehoge.jpg');
getDownloadURL(imageRef).then((downloadURL) =&gt; {
  console.log(downloadURL);
}).catch(() =&gt; {
  console.log("ダウンロードURLが取得せきませんでした");
});</code></pre><p>この取得した、downloadURLを<strong>firestore</strong>などに保存してやってください。<br><br><a href="https://firebase.google.com/docs/storage/web/start?hl=ja" target="_blank" rel="noopener noreferrer">https://firebase.google.com/docs/storage/web/start?hl=ja</a><br><br><br></p>

T.W

Next.jsで星のレーティング評価を作ってみた

Next.jsでvcfファイルダウンロードボタンを作ってみた。(Safari対応)

Next.js(App Router)×TypescriptでGoogleアナリティクスを導入する

Next.jsでChakra UIを使ってみる。

[JavaScript不要]　アコーディオンの作り方

SwiperをReactで使う方法

Swiperのデザインをいい感じにカスタマイズする方法

注意！！firebaseの仕様が変わってました(storage編)

注意！！firebaseの仕様が変わってました。(firestore編)

Next.jsで星のレーティング評価を作ってみた

Next.jsでvcfファイルダウンロードボタンを作ってみた。(Safari対応)

Next.js(App Router)×TypescriptでGoogleアナリティクスを導入する

Next.jsでChakra UIを使ってみる。

[JavaScript不要] アコーディオンの作り方

SwiperをReactで使う方法

Swiperのデザインをいい感じにカスタマイズする方法

注意！！firebaseの仕様が変わってました(storage編)

注意！！firebaseの仕様が変わってました。(firestore編)

[JavaScript不要]　アコーディオンの作り方