<h2 id="h8d027c8ed3">はじめに</h2>おはようございます。こんにちは。こんばんは。 Watatakuです。 突然ですが、<code>$ npx creat-react-app</code> ができなくなりました。<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> は？ <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> 無理。。。 <h2 id="h7e60ca8c44">ちょっと待て・・・！！</h2><pre><code>Need to install the following packages:
 create-react-app</code></pre> あっ・・・ ちゃんとエラー見よな。。。 <h2 id="h141087ae17">解決法</h2>キャッシュクリアする。<pre><code>$ npx clear-npx-cache</code></pre> <h2 id="h3de35099b3">参考</h2><a href="https://qiita.com/kurab/items/6c6056d06d053631b596" target="_blank" rel="noopener noreferrer">npx create-react-app できない時</a>

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

こんにちは。 久しぶりの更新になってしまいました。 今回のお話はSwiperを使って「前へ、次へ」の矢印のデザインなどを自身でカスタマイズする方法を紹介していきます。 <h2 id="h2295b759c0">対象者</h2><ul><li>Swiperのデザインをカスタマイズしたい方。</li><li>Swiperの基礎がある程度わかっている方。</li></ul><h2 id="h07e283c641">「前へ、次へ」の矢印のデザインとページネーションのデザインを変更する方法</h2>デフォルトで設定した「前へ、次へ」の矢印はしたの画像のような青色の矢印であったりページネーションです。 <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=""> それを今回はしたの画像のようにCSSで変更してみたいと思います。 <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=""> まずは「前へ、次へ」の矢印のデザインから変えていきます。<pre><code>.swiper-button-prev::after,
.swiper-button-next::after {
 content: "";
}</code></pre>上記のセレクタを弄るのですが、デフォルトでは<code>.swiper-button-prev::after</code>に<code>content: "prev";</code> 、<code>.swiper-button-next::after</code>に<code>content: "next";</code> が設定されていて、各青い矢印が表示されています。これを<code>content: "";</code> で打ち消してやります。 打ち消した後に、各セレクタに矢印とかをCSSで記述していきます。<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>次にページネーションのデザインを変更していきます。 ページネーションのデザインを変更する場合は<code>.swiper-pagination-bullet</code>を触ります。<pre><code>.swiper-pagination-bullet {
 background-color: #111;
 height: 6px;
 width: 6px;
 margin: 0 16px !important;
}</code></pre><h2 id="hf730a4b43c">左右にはみ出すスライド</h2>自分自身も執筆していて表現が正しいのか微妙なかんじですが下記の画像のようなデザインです。 <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=""><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> 左右にはみ出すスライドを実装するために重要になってくるプロパティは<code>slidesPerView</code>です。 このプロパティは画面に何枚のスライドを表示させるかを指定するものでデフォルトの値は「1」です。 これを「1.6」などのように小数にすることで、複数スライドを表示かつスライドをはみ出させることができます。 もう一つ、重要なプロパティがあります。それが<code>centeredSlides</code>です。 このプロパティの値を「true」にすることでスライドが中央寄せで表示されるようになります。 あとは<code>spaceBetween</code>でスライド間の余白を調整すれば完成です。 ※CSSのmarginプロパティでスライド間を開けるより、こちらを使う方が推奨されています。 <h2 id="h73d3c0432b">「前へ、次へ」の矢印、ページネーションを外に出す</h2>「前へ、次へ」の矢印、ページネーションを外に出す場合まずはHTML構造を変更する必要があります。 通常のHTML構造では下記の通りです。<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>これを以下のように作り替えます。<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><code>.swiper</code>をさらに<code>div要素</code>で囲み<code>.swiper-pagination</code>、<code>.swiper-button-prev</code>、<code>.swiper-button-next</code>を<code>.swiper</code>と同じ階層に配置します。 <code>.swiper</code>には「overflow:hidden」がついており、これはswiperスライダにおいて外せないものなので、「前へ、次へ」の矢印、ページネーションのパーツを外に移動させたいからです。 HTML構造を書き換えたらCSSで位置を調整します。 ここで注意が必要なのですが必ず一番外側の<code>div要素</code>に「position: relative」を指定してください。<pre><code>.wrapper {
 position: relative;
}</code></pre>ここまで来たら後は各々適当に各々調整してください。<pre><code>.swiper-button-prev {
 left: -10px;
}

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

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

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

<a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a><h2 id="hd8d793506b">インストール</h2>インストール方法は3種類あります。<ul><li>CDN</li></ul><pre><code>&lt;link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;</code></pre><ul><li>NPMでインストール</li></ul><pre><code>$ npm install swiper</code></pre>また、typescriptをお使いの方は以下のコマンドも叩いてください。<pre><code>$ npm install --save-dev @types/swiper</code></pre> もう一つ、ファイルをダウンロードして使用する方法もあるのですが今回は割愛とします。興味のある方はご自身でお調べになってください。<h2 id="h81a5ad2f19">Swiperを扱う</h2>では、インストールが完了できたと思うので早速Swiperを使ったスライダーを作っていきましょう。 まずはHTMLです。<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&nbsp;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;
&lt;title&gt;Swiper&lt;/title&gt;

&lt;!-- CDNを使う場合のみ記述 --&gt;
&lt;link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;/head&gt;
&nbsp;
&lt;body&gt;
 &lt;div class="swiper"&gt;
&nbsp; &lt;div class="swiper-wrapper"&gt;
 &lt;div class="swiper-slide"&gt;
 &lt;img
&nbsp; &nbsp; &nbsp; &nbsp; src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp; alt=""
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp; &lt;img
&nbsp; &nbsp; &nbsp; &nbsp; src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp; alt=""
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp; &lt;img
&nbsp; &nbsp; &nbsp; &nbsp; src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp; alt=""
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &lt;/div&gt;
 &lt;/div&gt;
 &lt;!-- CDNを使う場合のみ記述 --&gt;
　　&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>こちらが基本の作りです。 <code>.swiper</code> <code>.swiper-wrapper</code>&nbsp;<code>.swiper-slide</code>&nbsp;の3つは必須です。 <code>.swiper-wrapper</code>&nbsp;と&nbsp;<code>.swiper-slide</code>&nbsp;の間に「他の要素を割り込ませたりするとうまく動かなくなる」のでご注意ください。 次にJavaScriptの記述です。<pre><code>// npmでインストールした場合のみ記述
import Swiper　from "swiper";
import "swiper/swiper-bundle.css";
// -----------------------------------------

const mySwiper = new Swiper('.swiper', {
&nbsp;&nbsp;// この中にオプションを書いていく。
});</code></pre>ここまで行うとスライダーが動き出します！<h3 id="h32a67f9128">オプション</h3>ここからオプションについて記述していくのですが数が膨大のため私がよく使うオプションだけを抜粋して書きます。 <h4 id="hd76776d2c4">ページング</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
 &lt;!-- 省略 --&gt; 
&nbsp;&lt;/div&gt;
 &lt;div class="swiper-pagination"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre> <pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import Swiper, { Pagination } from "swiper";
Swiper.use([Pagination]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
 pagination: {
 el: ".swiper-pagination",
 clickable: true, // クリックを可能にする
 },
});</code></pre><h4 id="he3e924b320">前後の矢印</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
 &lt;!-- 省略 --&gt; 
&nbsp;&lt;/div&gt;
　　&lt;div class="swiper-button-prev"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
 &lt;div class="swiper-button-next"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre> <pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
 navigation: {
 nextEl: ".swiper-button-next",
 prevEl: ".swiper-button-prev",
 },
});</code></pre><h4 id="hf7ee70b482">スピード</h4>スライドのスピードを設定できます。デフォルトでは300です。<pre><code>const mySwiper = new Swiper('.swiper', {
 speed: 500
});</code></pre><h4 id="hcbe3576d32">ループさせる</h4>簡単です。下記コードをつけるだけです。<pre><code>const mySwiper = new Swiper('.swiper', {
 loop: true
});</code></pre><h4 id="hd264691107">自動再生</h4>デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。<pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
 autoplay: true,
});</code></pre>パラメータを追記して細かい設定をすることも可能です。<pre><code>const mySwiper = new Swiper('.swiper', {
 autoplay: {
 delay: 1500, // (デフォルトは3000)1.5秒後に次のスライド
&nbsp; &nbsp; disableOnInteraction: false, // 矢印またはページネーションをクリックしても自動再生を止めない
&nbsp; }
});</code></pre><h4 id="h11244fc379">表示させるスライドの枚数を指定する</h4>指定した枚数分がコンテナ内に収まるように調整される。<pre><code>const mySwiper = new Swiper('.swiper', {
 slidesPerView: 3 // デフォルトでは1
});</code></pre>小数点以下の値も指定可能(2.8などの小数を指定すると左右にはみ出たスライダが実装できる)。 CSSでサイズ調整したい場合は<code>‘auto’</code>&nbsp;を指定。<h4 id="h627921dd59">アクティブなスライドが中央に来るようにする</h4>主に、<code>slidesPreView</code>の値が小数を指定したときに使用します。<pre><code>const mySwiper = new Swiper('.swiper', {
 centeredSlides: true,
 slidesPerView: 1.4
});</code></pre><h4 id="h0201d4f644">レスポンシブ</h4>デバイスのサイズによって<code>slidesPreView</code>の数を変えたいときなどに使います。<pre><code>const mySwiper = new Swiper('.swiper', {
 breakpoints: {
 // デバイスが320px以上の時
 320: {
 slidesPerView: 1.4
 },
 // デバイスが640px以上の時
 640: {
 slidesPerView: 2.8
 }
 },
 slidesPerView: 1,
 centeredSlides: true
});</code></pre><h4 id="hb3954a0c7e">スライド感の余白を指定する</h4>CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。<pre><code>const mySwiper = new Swiper('.swiper', {
 spaceBetween: 40 // px
});</code></pre> 先ほども記載しましたが、ここに記載したオプションは本の一部で、僕自身がよく使うものだけ取り上げさせていただきました。なので、ご興味がある方は各自で調べてみてください。また、Jqueryに依存せず使えることやオプションが多くカスタマイズ性が豊かなポイントもグッドです。 皆さんもよければSwiperを使ってみてくださいね。

Swiperを使ってサクッとスライドを作ってみた。

<h2 id="hd28e9553ca">ダークモード</h2>一昨年あたりからwebデザインにおいてもトレンドになったダークモード。 「目に優しい」などのさまざまな効果がありますが今回はデモのようなダークモードとライトモードを切り替えるスイッチャーを作りたいと思います。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fembed%2Fpreview%2FNWzzPPG%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DNWzzPPG&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG&image=https%3A%2F%2Fshots.codepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG-512.jpg%3Fversion%3D1671265134&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="hedbfa7dcce">スイッチを作る。</h2>では、早速ダークモードとライトモードを切り替えるスイッチを作っていきます。 スイッチを作るためにはHTMLでチェックボックスを用意する必要があります。<pre><code>&lt;form action="#"&gt;
 &lt;label class="switch"&gt;
 &lt;input type="checkbox" class="checkbox"/&gt;
 &lt;span class="slider"&gt;&lt;/span&gt;
 &lt;/label&gt;
&lt;/form&gt;</code></pre>これだけでは普通のチェックボックスがひとつできあがるだけです。 なのでCSSを適応させます。<pre><code>.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}

.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: 0.4s;
 transition: 0.4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: 0.4s;
 transition: 0.4s;
}

input:checked + .slider {
 background-color: #33f321;
}

input:focus + .slider {
 box-shadow: 0 0 1px #33f321;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}

.slider {
 border-radius: 34px;
}

.slider:before {
 border-radius: 50%;
}</code></pre>少し長いかもですがこれで切り替え用のスイッチができました。 ですが、このままでは何も変化しない普通のスイッチです。ですのでスイッチをオンにするとダークモードに切り替え、オフるとライトモードに切り替わるようにします。<h2 id="hd148c32f21">JavaScript</h2>まず、必要になってくるのは「今、スイッチがオンなのかオフなのか」の状態を知らなければいけません。 その情報をとってくるには下記コードで取得可能です。<pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
 if (element.checked) {
 console.log("スイッチがオンになりました。");
 } else {
 console.log("スイッチがオフになりました。");
 }
}</code></pre>無事チェックボックス(スイッチ)の状態を取得することができました。<h2 id="hcfd88cd66f">ダークモードにする</h2>ではいよいよダークモードにします。 以下のコードでダークモードにできます。<pre><code>document.documentElement.setAttribute("data-theme", "dark");</code></pre> ちなみにダークモードを解除、即ちライトモードにする方法は下記コードです。<pre><code>document.documentElement.removeAttribute("data-theme");</code></pre> 従ってスイッチがオンの時にダークモードにオフの時ライトモードにするには<pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
 if (element.checked) {
 document.documentElement.setAttribute("data-theme", "dark");
 } else {
 document.documentElement.removeAttribute("data-theme");
 }
}</code></pre>これでスイッチがオンの時にダークモードにオフの時ライトモードに切り替わりましたがまだ何も変わりません。 最後にCSSでダークモードならこの色、ライトモードならこの色を適応させるようにすれば終わりです。<pre><code>:root {
 --bgColor: #fff;
}

[data-theme="dark"] {
 --bgColor: #101010;
}

body {
 background-color: var(--bgColor);
}</code></pre>これで完成!!

ダークモードとライトモードを切り替えるスイッチャーを作りました。

<html><head></head><body><h2 id="h8d027c8ed3">はじめに</h2>おはようございます。こんにちは。こんばんは。 Watatakuです。 突然ですが、<code>$ npx creat-react-app</code> ができなくなりました。<pre><code class="hljs">$ 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> は？ <h2 id="h5d27caa348">とりあえず、指示通りやる</h2><pre><code class="hljs">$ npm uninstall -g create-react-app

up to date, audited 1 package in 237ms

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