<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>※ビルドツールに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>Reactにはパフォーマンスを最適化する為のAPIが用意されています。具体的には<code>React.memo</code>,<code>useCallback</code>,<code>useMemo</code>があります。<code>React.memo</code>ではコンポーネントをメモ化し、 <code>useCallBack</code>では関数(コールバック関数)をメモ化。<code>useMemo</code>は値(関数の結果)のメモ化といった役割があります。</p><h2 id="h8ac88859d1">用語解説</h2><blockquote>メモ化とは、計算結果を保持し、それを再利用する手法のことです。メモ化によって各コンポーネントで都度計算する必要がなくなるため、パフォーマンスの向上が期待できます。</blockquote><p><br></p><blockquote>コールバック関数とは、ある関数を呼び出すときに引数に指定する別の関数のこと。</blockquote><p><br></p><blockquote>Reactのレンダリングとは、コンポーネントの本体である関数を評価(実行)すること</blockquote><h3 id="hb46ee580da">Reactの再レンダリングの条件</h3><p>まず前提知識として、Reactの再レンダリングの条件を見ていきます。</p><ol><li>propsの変更</li><li>stateの変更</li><li>contextの変更</li><li>forceUpdate()を使用しての、強制的な再レンダリング</li><li> 親コンポーネントの再レンダリング</li></ol><p>などが挙げられます。</p><h2 id="h692f02ca4c">useMemo</h2><p><code>useMemo</code>は値(関数の結果)を保持するためのhooksです。<br>何回やっても結果が同じ場合の値などをメモリに保存(メモ化)して、初回レンダリング以外に行われる際の再レンダリングでは高価な計算を避けることができます。<br>このhooksを使う事により、不要な再計算をスキップすることができ、パフォーマンスの向上が期待出来ます。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>useMemo(() =&gt; { 重い処理 }, [依存配列]);</code></pre><p>依存配列に指定した変数に変更がない場合、重い処理が実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたら重い処理が実行される。<br>依存配列が空なら、何にも依存しないことから、初回1回のみ実行。つまり、依存関係が変わらない場合はキャッシュから値(関数の結果の値)を取ってきます。</p><h3 id="h512de7d259">使用例</h3><pre><code>import React, { useMemo } from "react";

const App = () =&gt; {
  // 再レンダリングされるたびに重い処理が実行される
　　const method = superHeavyProcess(a, b);

  //aまたはbが変化したときだけ重い処理が実行される
  const method = useMemo(() =&gt; {
    superHeavyProcess(a, b)
  }, [a, b]);

  return (
    ・・・
  )
};

export default App;</code></pre><p>このように<code>useMemo</code>を使う事により依存配列に指定しているaまたはbが変更されない限り、再レンダリングが行われてもsuperHevyProcess()が実行されなくなります。→ パフォーマンス向上が期待できる。<br>以下は<code>useMemo</code>のBad Caseです。</p><pre><code>import React, { useMemo } from "react";

const App = () =&gt; {
  // Bad Case①
  const hoge = useMemo(() =&gt; retern "hoge" , [])

  // Bad Case②
  const method = useMemo(() =&gt; {
    superLightProcess(a, b)
  }, [a, b]);

  return (
    ・・・
  )
};

export default App;</code></pre><h2 id="h4886ea6007">useCallback</h2><p><code>useCallBack</code>では関数(コールバック関数)をメモ化するhooksです。<br>このhooksを使う事により、関数の再生成を防ぐことができパフォーマンス向上が期待できます。<br><br>具体的には<strong>「親コンポーネントで作られた関数を子コンポーネント」</strong>に渡す際に使います。<br><em>子コンポーネントに渡さない関数は関数の再生成が行われない</em>ので<code>useCallback</code>を使う必要がありません。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>useCallback(() =&gt; { callbackFunction }, [依存配列]);</code></pre><p>依存配列に指定した変数に変更がない場合、callbackFunctionが実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたらcallbackFunctionが実行される。依存配列が変わらなければ、前回のcallbackFunctionを再利用する。<br>依存配列が空なら、コンポーネントがレンダリングされた時に関数が一度生成されますが、以降は同じ関数オブジェクトを再利用するため、再評価されることはありません。</p><h3 id="h512de7d259">使用例</h3><pre><code>import React, { useState, useCallback } from "react"

const App = () =&gt; {
  const [count, setCount] = useState&lt;number&gt;(0);

  const handleClick = useCallback(() =&gt; {
    setCount(prevState =&gt; prevState + 1);
  });

  return (
    &lt;p&gt;count:{ count }&lt;/p&gt;
    &lt;Button onClick={handleClick} /&gt;
  )
}

export default App;</code></pre><p><br></p><pre><code>import React, { FC } from "react"

type Props = {
  handleClick: (event: React.MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void;
}
const Button:  FC&lt;Props&gt; = ({ handleClick }) =&gt; {
  return (
    &lt;button onClick={handleClick}&gt;カウントアップ&lt;/button&gt;
  )
}

export default Button;</code></pre><p>このように親コンポーネント(App)で作った関数(handleClick)を子コンポーネント (Button)に渡すときに使います。</p><h2 id="h6ce25814b7">React.memo</h2><p><code>React.memo</code>はコンポーネントをメモ化したいときに使います。親コンポーネントから渡ってきたpropsが変更されていたら再レンダリングされ、変更がなければ再レンダリングしなくなります。<br><br>コンポーネント内で複雑な計算や大量のデータの処理を行っている場合や、プロパティが同一であるコンポーネントの再レンダリングを避けたい場合に使用されます。<br>また、前章で紹介させてもらった<code>useCallback</code>と一緒に使うことが推奨されています。<br>これらを一緒に使用することで、propsが変更された場合にのみ、新しい関数を生成して再レンダリングをトリガーすることができます。つまり、propsが変更されていない場合には、以前にキャッシュされた関数が使用され、不要な再レンダリングを回避できるということです。なので、必ずしも一緒に使わなければならないわけではありませんが、パフォーマンスの向上を目的とする場合は、一緒に使用することをおすすめします。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>const MemoChild = React.memo(親コンポーネントからpropsを受け取る子コンポーネント)</code></pre><h3 id="h512de7d259">使用例</h3><pre><code>import React, { FC } from "react"

type Props = {
  message: string
}
const MemoChild: FC&lt;Props&gt; = React.memo(({ message }) =&gt; {
  return &lt;div&gt;{message}&lt;/div&gt;;
});
export default MemoChild;</code></pre><p>このように<code>React.memo</code>を使うと、親コンポーネントから渡ってくるmessageに変化がなければ<em>MemoChildは再レンダリングしない</em>となります。</p><h3 id="h5afc6dbdcb">TIPS</h3><pre><code>Component definition is missing display name&nbsp; react/display-name</code></pre><p>上記のようなエラーが出る場合があります。<br>このエラーは、<code>React.memo</code>を使用している場合によく発生します。<br><code>React.memo</code>を使用しているときにこのようなエラーが発生する場合、コンポーネントに名前を付けることで解決できます。名前を付ける方法は、以下のように行うことができます<span style="color:#374151">。</span></p><pre><code>const MemoChild: FC&lt;Props&gt; = React.memo(({ message }) =&gt; {
  return &lt;div&gt;{message}&lt;/div&gt;;
});

MemoChild.displayName = 'MemoChild';</code></pre><p>ここで、displayNameプロパティを使用して、コンポーネントに表示名を指定しています。このようにすることで、React.memoでメモ化されたコンポーネントのエラーが解決されます。<br>また調べてみると他にも解決策があるそうだったのでこちらの記事を参考にしてみて下さい。<br><a href="https://qiita.com/tkmd35/items/fb20e1eb36f84dcbc4a1" target="_blank" rel="noopener noreferrer">https://qiita.com/tkmd35/items/fb20e1eb36f84dcbc4a1</a><br><br>また、Next.js では、<code>React.memo</code> が無効になることはありませんが、Next.js が提供する最適化技術の一部が、React.memo が提供する効果と重複していることがあります。そのため、<strong>「Next.js で React.memo を使用することがあまり意味がない」</strong>場合があります。<br><br>Next.jsが提供するSSRやSSGなどの機能により、コンポーネントの初回レンダリング時に必要なデータやプロパティがすでにサーバーサイドで取得され、生成されたHTMLに含まれているため、クライアントサイドでの再レンダリング時には不要なデータの再取得が必要なくなります。これにより、コンポーネントの再レンダリングが高速化され、<code>React.memo</code>によるパフォーマンスの向上効果が相対的に小さくなる可能性があります。また、Next.jsのプリフェッチング機能により、事前に必要なデータやリソースを取得し、コンポーネントが必要になったときにすぐに利用できるようになるため、<code>React.memo</code>による再レンダリングの最適化が不要になる場合もあります。<br>→元々、Next.jsはページプリレンダリングやコンポーネントレンダリングの最適化を提供しているため。<br><em>必ずしも</em><em><code>React.memo</code></em><em>を使用する必要がない場合があるということです。ただし、コンポーネントが多くのプロップスを持ち、再レンダリングのオーバーヘッドが高い場合には、</em><em><code>React.memo</code></em><em>を使用することが依然として効果的であることがあります。</em></p><h2 id="h878c02911b">まとめ </h2><p>これらを使うとパフォーマンスが最適化されますが逆に、<strong>「使いすぎたり適切に使わなかったりすればパフォーマンスが下がったりする」</strong>ので注意が必要です。<br>これらを使いこなしてReact初学者から中級者、上級者になりましょう。</p>

Reactのパフォーマンスチューニングについて勉強したところをまとめてみた

<p>今回はAstroというwebフレームワークを使って、自分のポートフォリオサイトを作り直した時の話をしたいと思います。<br><a href="https://watataku-portfolio.vercel.app/" target="_blank" rel="noopener noreferrer">https://watataku-portfolio.vercel.app/</a></p><h2 id="hd8fb52f923">Astro</h2><p>まず初めにAstroというフレームワークを知らない方のために軽く触れておきます。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/9275dd3674cb4b75a4935787a148595e/%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-03-24%2018.26.26.png" alt=""><br><a href="https://astro.build/" target="_blank" rel="noopener noreferrer">https://astro.build/</a></p><blockquote>Astroとは、<strong>ReactやVue.jsのようにコンポーネント指向で開発ができる</strong>UIフレームワークです。さらに、<strong>ウェブアプリ</strong>ではなく<strong>ウェブサイト</strong>を作るために用意されたWebフレームワークであったり、<strong>React、Preact、Svelte、Vue、Solidなど様々なUIフレームワーク</strong>を用いて開発できる特徴もあります。</blockquote><p><br>そしてAstroを語る上でもう一つ欠かせないのがAstro Islandsです。<br>これも公式のドキュメントで説明されています。<br><a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/en/concepts/islands/</a><br>簡単に解説すると、ページの各UIコンポーネントを別モノとして扱うことができます。<br>これによりコンポーネント間の優先度設定によるパフォーマンス調整やコンポーネント毎にUIフレームワークを変えられることがメリットとなっています。</p><h2 id="h8304d8c7ba">Astroを採用した理由</h2><ul><li>ウェブアプリではなくウェブサイトを作りたい</li><li>コンポーネント指向で開発したい</li><li>Typescriptで書きたい</li><li>勉強コストをできるだけ抑えたい</li><li>Jamstack！！</li></ul><p>などがありました。これらのことを考慮して今回マッチしたのが「Astro」でした。</p><h2 id="h51801b8ac5">プロジェクトのセットアップ</h2><p>Node.jsは<code>v16.12.0</code>またはそれ以上のバージョンをインストールされている前提で、以下のコマンドでプロジェクトを作成します。</p><pre><code>$ npm create astro@latest</code></pre><p>コマンド入力後、プロジェクト名やTypescriptを使用するかなどを聞かれますのでいい感じに答える。<br>聞かれることは以下の通りです。</p><ul><li>プロジェクト名を指定</li></ul><pre><code>Where would you like to create your new project? … ./watataku-portforio</code></pre><p>『watataku-portforio』という名前のプロジェクト名で作成したいので&nbsp;<code>./watataku-portforio</code>&nbsp;と入力して次に進みます。</p><ul><li>テンプレートの指定</li></ul><pre><code>? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯   Just the basics (recommended)
    Blog
    Portfolio
    Documentation Site
    Empty project</code></pre><p>一番最初の『Just the basics (recommended)』の『基本のみ（推奨）』を選択します。</p><ul><li>依存モジュールのインストール</li></ul><pre><code>? Would you like to install yarn dependencies? (recommended) › (Y/n)</code></pre><p>『Y』をしていして依存モジュールのインストールを開始させます。</p><ul><li>Git リポジトリの初期化を実行</li></ul><pre><code>? Would you like to initialize a new git repository? (optional) › (Y/n)</code></pre><p>Gitリポジトリの初期化をしたいので『Y』を入力して次に進みます。</p><ul><li>TypeScriptの設定</li></ul><pre><code>? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
❯   Relaxed
    Strict (recommended)
    Strictest
    I prefer not to use TypeScript</code></pre><p>推奨となっている『Strict (recommended)』を選択します。<br><br>回答後、以下のコマンドで開発サーバを立ち上げ、http://localhost:3000にアクセスします。</p><pre><code>$ cd ./watataku-portforio

$ npm run dev</code></pre><p><br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/bcbbb2a641ec421d905bf6e3c265b09e/astro-init-site.png" alt=""></p><h2 id="hc806dee726">Reactを追加する</h2><p>以下のコマンドを叩けばReactを追加(使えるように)できます。</p><pre><code>$ npx astro add react</code></pre><p><br></p><pre><code>&nbsp;Resolving packages...


&nbsp; Astro will run the following command:
&nbsp; If you skip this step, you can always run it yourself later


&nbsp;╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
&nbsp;│ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0&nbsp; │
&nbsp;╰─────────────────────────────────────────────────────
? Continue? › (Y/n)</code></pre><p>Y を指定します。</p><pre><code>✔ Resolving packages...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react()]                     │
 │ });                                           │
 ╰───────────────────
? Continue? › (Y/n)</code></pre><p>Y を指定します。<br><span style="color:#d75969">※今回はReactを追加しますがVue.jsやSvelteなども追加できます。詳しくはドキュメントをご覧ください。</span><br><a href="https://docs.astro.build/ja/guides/integrations-guide/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/ja/guides/integrations-guide/</a></p><h2 id="h81f6f126c0">microCMSの準備</h2><p>今回のサイトでのコンテンツ管理には「microCMS」と言うHedress CMSを使っています。<br><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">https://microcms.io/</a><br>microCMSのアクセス方法や設定方法などは今回説明しないので自身でドキュメント等などでご覧ください。<br><br>この辺りを参考にしてみると良いかもです。<br><a href="https://blog.microcms.io/astro-microcms-introduction" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/astro-microcms-introduction</a></p><h2 id="h222fd0f152">ポートフォリオに取り入れた機能</h2><ul><li>慣性スクロール</li></ul><p><a href="https://www.weblio.jp/content/慣性スクロール" target="_blank" rel="noopener noreferrer">https://www.weblio.jp/content/慣性スクロール</a><br>ぬるっと動く気持ちのいいスクロールですねw個人的にこのスクロール方式が好きなので、実装してみたいと思い実装しました。<br><br>今回は「ASScroll」と言うライブラリのお力をお借りして実装しました。<br><a href="https://github.com/ashthornton/asscroll" target="_blank" rel="noopener noreferrer">https://github.com/ashthornton/asscroll</a><br>導入方法は簡単です。<br>まず最初にライブラリをインストールします。</p><pre><code>$ npm install --save @ashthornton/asscroll</code></pre><p>次に下記Javascriptのコードを書いてあげます。</p><pre><code>import ASScroll from "@ashthornton/asscroll";

const asscroll = new ASScroll();
window.addEventListener("load", () =&gt; {
  	asscroll.enable();
});</code></pre><p>あとは慣性スクロールしたいところに<code>&lt;div asscroll-container&gt;</code>で囲むだけ。</p><pre><code>&lt;div asscroll-container&gt;
	 &lt;main&gt;
	       &lt;!-- The Y translation will be applied to this element --&gt;
     &lt;/main&gt;
&lt;/div&gt;</code></pre><ul><li>ダークモード</li></ul><p>こちらで詳しく記載しております。<br><a href="https://watataku-blog.vercel.app/blog/tb7epr3_-z" target="_blank" rel="noopener noreferrer">https://watataku-blog.vercel.app/blog/tb7epr3_-z</a><br>ちなみにダークモードで見た際のサイト(ライトモードはサムネイル)<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/806a1c38d1254371bee941836ff15dd6/%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-03-14%2018.30.12.png" alt=""></p><ul><li>ページング</li></ul><p>Astroではページング機能を簡単に実装できる関数があるので、それを今回使用させていただきました。<br>その関数が<code>paginate()</code>です。早速ページングの実装方法を見ていきましょう。<br><br><code>./page/[...page].astro</code>を作成し下記のように<code>pagenate()</code>を使用します。</p><pre><code>// ---　
import type { Page, GetStaticPathsOptions } from "astro";

type Props = {
  page: Page&lt;Contents&gt;;
};

type Work = {
  contents: Contents[];
}

type Contents = {
  // 以下略
};

const { page } = Astro.props;  

export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
  　　const myMicroCMSApiUrlWork = `https://${
	    import.meta.env.MICROCMS_SERVICE_DOMAIN_PORTFOLIO
    }.microcms.io/api/v1/works?orders=-publishedAt?limit=999`;
	
	const response = await fetch(myMicroCMSApiUrlWork, {
	    headers: {
	      "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_API_KEY_PORTFOLIO,
	    },
	});
	const getFetchDataWork: Work = await response.json();
	return paginate(getFetchDataWork.contents, { pageSize: 6 });
}
// ---</code></pre><p><code>getStaticPaths()</code> 関数の戻り値で<code>paginate()</code>を返すだけです。<br>※コメントにしている「<strong>---</strong>」はハイラウトの都合上、わざと付けています。Astroを書く際は「<strong style="background-color:#ffffff">---</strong>」をお忘れなくお願いします。<br><br>中身を見てみると、表示したいコンテンツを第 1 引数に、ページ内に表示したいコンテンツの数を第 2 引数に設定しておきます。<br>これでページングの設定が完了しましたのでテンプレートで使っていきましょう。</p><pre><code>&lt;div&gt;
  {
    page.data.map((work: Contents) =&gt;
      &lt;!-- 以下略 --&gt;
    ))
  }
&lt;/div&gt;
{
　　page.total &gt;= 6 &amp;&amp; (
	&lt;nav&gt;
	    {/* page.currentPageで現在ページ、page.lastPageで総ページ数を表示 */}
	     &lt;p&gt;
	        page {page.currentPage}/{page.lastPage}
	     &lt;/p&gt;
	     &lt;ul&gt;
	       　{/* page.url.prevがある場合は前ページへのリンクを表示 */}
	        {page.url.prev &amp;&amp; (
	         　　&lt;li&gt;
	              &lt;a href={page.url.prev}&gt;PREV&lt;/a&gt;
	            &lt;/li&gt;
	         )}
	          {/* page.url.nextがある場合は次ページへのリンクを表示 */}
	          {page.url.next &amp;&amp; (
	             &lt;li&gt;
	                &lt;a href={page.url.next}&gt;NEXT&lt;/a&gt;
	             &lt;/li&gt;
	           )}
	       &lt;/ul&gt;
　　　　&lt;/nav&gt;
　　)　
}</code></pre><h2 id="h3bcda3e6b0">最後に</h2><p>以上がAstroでポートフォリオサイトを作り直したと言うお話でした。<br>個人的にAstroとても書きやすくサクッと使える印象を受けました。また、他のUIフレームワークとも組み合わせて開発できるのも私としては嬉しいポイントでした。<br><br>みなさんもよければAstro使ってみてください</p>

Astroでポートフォリオサイトを作った

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>突然ですが、<code>$ npx creat-react-app</code> ができなくなりました。</p><pre><code>$ npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/</code></pre><p><br>は？<br></p><h2 id="h5d27caa348">とりあえず、指示通りやる</h2><pre><code>$ npm uninstall -g create-react-app

up to date, audited 1 package in 237ms

found 0 vulnerabilities</code></pre><p><br>無理。。。<br></p><h2 id="h7e60ca8c44">ちょっと待て・・・！！</h2><pre><code>Need to install the following packages:
  create-react-app</code></pre><p><br>あっ・・・<br>ちゃんとエラー見よな。。。<br></p><h2 id="h141087ae17">解決法</h2><p>キャッシュクリアする。</p><pre><code>$ npx clear-npx-cache</code></pre><p><br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://qiita.com/kurab/items/6c6056d06d053631b596" target="_blank" rel="noopener noreferrer">npx create-react-app できない時</a><br></p>

$ npx create-react-appができなくなってしまった。。。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuと申します。技術ブログを作りました。よろしくお願いします。<br><br>今流行りのJamstackという手法で開発しています。<br>ホスティングはVercelを使用しています。<br><br>初回の今回はこのブログのことを書いていきます。<br><a href="https://github.com/watataku8911/watataku-blog" target="_blank" rel="noopener noreferrer">ソースコード</a></p><h2 id="hed900658dc">環境</h2><ul><li>React:17.0.2</li><li>Next.js:v.12.0.7 (7/11日現在 : v.13.4.3)</li><li>typescript:v4.5.4</li></ul><h2 id="h49af616052">このブログで書いていくこと</h2><p>フロントエンドのことを中心にWeb（Jamatack）について書いていきます。</p><h2 id="hbd7b1c9fdb">このブログを作成した目的</h2><p>単純にブログを作りたかったからw<br>以上。<br><br>・・・ではなく、真面目に回答していくと上記の動機もありますが他に下記に記載の理由があります。</p><ul><li>将来の自分の為の知識の貯蔵</li><li>自分と同じ問題にぶち当たっている人に対して、解決策を紹介したい</li><li>文章力向上の為</li></ul><p><br>投稿頻度はさほど多くはないとは思いますがよろしくお願いします。<br></p>

T.W

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

SwiperをReactで使う方法

Reactのパフォーマンスチューニングについて勉強したところをまとめてみた

Astroでポートフォリオサイトを作った

$ npx create-react-appができなくなってしまった。。。

技術ブログを作ったよ。