npm audit fixで修正できない依存関係を手動で修正しアップデートしていたら発生しました。

<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsを利用しているとnode_modulesのchokidarのreaddirpで問題が発生しnpm run devをする度に黄色のエラー文が表示されました。<br><br>この時私はまだ知らなかったのですが、chokidarはファイル監視を行いファイルの変更を検知して処理を実行できるモジュールのことみたいですね。<br><br>サイトをlocalhostで立ち上げたり、本番環境では特に問題がなかったのですが毎回黄色の文で注意されるのもなんだったので解決策を考えてみました。<br></p><h2 id="h9bbb0bca62">開発環境</h2><p>node v14.14.1 (Fermium)<br>npm v6.14.14<br>macOS BigSur<br></p><h3 id="h9c52a97ec2">黄色で出力されるエラー文</h3><p>このような文で始まり、 エラー文は黄色の太文字で出力されていました。<br><br>意味としてはデータをキャッシュへ保存しようとしている最中にエラーが発生し、その問題はchokidarのreaddirpを解決できなかったことを示しています。</p><pre><code>[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'readdirp' in [パス名]/node_modules/chokidar to a directory</code></pre><h2 id="had0b1b94af">解決方法</h2><p>私が行った解決方法としては以下の手順です。<br></p><h3 id="hde282a442d">nodeのバージョンをアップグレード</h3><p>nodeはバージョン17.0.1が最新版でリリースされていたので今回はそれをインストールします。<br><br>※現在v17.0.0以降にするとエラーが発生する可能性があるので心配な方はv16以前のものにアップグレードしてください。<br><br>v17.0.0以降にしてエラーが発生してしまった方は下記の記事を参考にしてみてください。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/7" target="_blank" rel="noopener noreferrer">Node.jsをアップデートしたらエラーが発生し強制終了する</a><br><br>私はnodeのバージョン管理ツールとして「n」を使用します(他にはnodebrewやnodeenvもありますね)。<br><br>nodeがあってこその今回のエラーなのでnodeはもう導入済みだと思います。<br><br>下記コマンドでグローバルインストールしてしまいましょう。</p><pre><code>npm install -g n</code></pre><p>nのバージョン確認を行ってインストールができたか確認してみましょう。</p><pre><code>n -V</code></pre><p>latestとすることでnodeの最新版をインストールできます。</p><pre><code>n latest// バージョンを指定したい方はlatestの代わりに17.0.0などバージョンの値を入れてください！</code></pre><p>インストールが完了したらこちらも再度確認しておきましょう。<br><br>任意のバージョンになっていたら成功です！</p><pre><code>node -v</code></pre><h3 id="h390bfb2fd3">package-lock.jsonとnode_modulesの削除</h3><p>以下のコマンドを実行することで削除の確認をせずに一発で削除できます。</p><pre><code>rm -rf package-lock.json node_modules/</code></pre><p>npmのキャッシュを削除しておかないと次に行うnpmの再インストールでエラーが出る可能性があるので実行しておくことをお勧めします。</p><pre><code>npm cache clean --force</code></pre><h3 id="h807b020502">npmの再インストール</h3><p>削除したnode_modules/とpackage-lock.jsonが生成されます。</p><pre><code>npm install</code></pre><h3 id="ha4f4c9f20f">なぜこのエラーが発生したのか</h3><p>私は当初、npm audit fixで修正できない依存関係があったためpackage-lock.jsonの中身を手動で修正しアップデートしていました。<br><br>その後、発見されている脆弱性はなくなったのですがアップデートをしてしまったためかnodeのバージョンが古く、対応しきれずにいた可能性があります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>私が調べた限りだと日本語の記事はまだ存在しておらず、英語の記事も今回のエラー文と一致するものはなかったので同じ理由でお困りの方のお力添えができたらと思い記事にまとめました。<br><br>皆様のお役に立てれば幸いです。最後までご覧くださりありがとうございました。</p>

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsのバージョンを17へアップデート後、いつも通りnpm run devすると見たことないエラー文が出てきました。

<h2 id="h8d027c8ed3">はじめに</h2><p>私は普段、Next.jsを使用しているのですが、nodeをアップデートしnpm run devを実行したら、その直後にエラーが発生し強制終了してしまったので解決策を調べてみました。</p><h2 id="h9bbb0bca62">開発環境</h2><p>Node.js v17.0.1<br>npm v8.1.0<br>macOS BigSur</p><h2 id="he45680f0bc">参考記事</h2><p><a style="color:#1784e9" href="https://github.com/webpack/webpack/issues/14532" target="_blank" rel="noopener noreferrer">nodejs 17: digital envelope routines::unsupported #14532</a></p><h3 id="hdbdf25c00f">エラー文</h3><pre><code>node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);

Error: error:0308010C:digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'</code></pre><h2 id="had0b1b94af">解決方法</h2><p>package.json内のscriptsを以下の様に編集。<br>最初はbuildにNodeのオプションをつけていたのですが、vercelへのデプロイが上手くいかなかったので新しくlegacy-buildを作成し、通常のbuildとは切り離して考えています。</p><pre><code>"scripts": {
&nbsp;&nbsp;&nbsp;&nbsp;"dev": "export NODE_OPTIONS=--openssl-legacy-provider; next dev",
&nbsp;&nbsp;&nbsp;&nbsp;"build": "next build",
&nbsp;&nbsp;&nbsp;&nbsp;"legacy-build: "export NODE_OPTIONS=--openssl-legacy-provider; next build",
&nbsp;&nbsp;&nbsp;&nbsp;// start等は省略
}</code></pre><h3 id="h29425a3486">なぜ、エラーが発生したのか</h3><p>Node.jsはバージョン17以降、OpenSSLが1.1.0から3.0.0にアップデートしました。<br>そのためにnode v16以前で機能していたOpenSSLとは互換性がなく、今回のようなエラーが発生してしまったようです。</p><h2 id="ha214098e44">まとめ</h2><p>今回は開発環境立ち上げ時とビルド時の処理としてOpenSSLのレガシープロバイダーを利用するオプションを記述してありますが、v17が落ち着くまでの間、v16以前へダウングレードするのも一つの手かもしれませんね。<br><br>この記事がお役に立てば幸いです。</p>

Node.jsをアップデートしたらエラーが発生し、強制終了する

SSGまたはISRにするため配列を作成後、ページネーションがある一覧ページのパス生成をしてみました。

<h2 id="h8d027c8ed3">はじめに</h2><p>ページネーション機能のある一覧ページをSSGまたはISRにしようとした際に配列の作成を行い実装したのでこの記事を作成しました。<br></p><h3 id="h488aedbc12">実装していく上での要点</h3><p>APIサーバ(Django REST frameworkを使用)とWebサーバ(Next.js)を使用しています。<br><br>APIサーバは1ページあたりに表示する記事数を設定しており、Webサーバからリクエストがきた際にページネーションで扱うページ数を返すようにしています。<br>(1ページあたり表示する記事の数が6で記事数が12の場合、ページ数は2なので2をWebサーバへ返します)<br><br>正直なところ、今回のAPIサーバはページネーションで扱っているページ数を返しているだけなのでWebサーバだけでも実現可能ですが、「せっかくならAPIサーバを利用しよう」ということでこんな処理になっています。<br></p><h3 id="h9191248b17">実装の流れ</h3><p>APIサーバへリクエストを送り、ページネーションのページ数を取得。<br>1から取得したページ数までが埋まった配列を作成後、mapしgetStaticPathsのpathsとして登録します。<br><br></p><h3 id="h4a11fa49e6">なぜ配列を作成する必要があったのか</h3><p>SSGやISRを実装する上でgetStaticPathsは必須であり、このgetStaticPathsには扱うURLを以下の形式で事前に登録しなければいけないためです。<br>そのため1からページネーションで扱うページ数までが含まれている配列を用意しなければいけませんでした。<br></p><pre><code>// [id].tsxの時
[
&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ id: '1' }
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ id: '2' }
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;// こんな感じで続く
]</code></pre><h2 id="hb76ab553a8">JavaScriptでの配列作成</h2><p>まずはじめに、JavaScriptでの配列作成方法についてご説明します。<br></p><h3 id="h1d6d0d0cf6">最小値から最大値で中身を埋めて配列を作成する関数</h3><p>1からページネーションで取り扱うページ数までの数値を含んだ配列作成にはstartを1と固定してもいいのですが、汎用性を考慮してstartの値は引数として受け取れるようにしました。<br></p><pre><code>const array = (start, end) =&gt;
&nbsp;&nbsp;&nbsp;&nbsp;[...Array(end - start -1)].map((_, i) =&gt; start + i)</code></pre><h3 id="h4d849f4362">使い方</h3><p>上記の関数を定義後、以下のコードを実行すると[1,2, 3, 4, 5]となる配列を作成できるかと思います。<br></p><pre><code>array(1, 5);</code></pre><h2 id="h90edbb9aba">getStaticPathsの記述</h2><p>&nbsp;配列の作成方法を確認できたら、次に本来の目的である動的ルーティングを作成していきます。<br></p><pre><code>export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const paths = await [生成するURLを返す関数]();// 後で記述します
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: false// falseにしておくことで生成されていないパスへのアクセスに404を返す
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h3 id="hab42dcd649">生成するURLを返す関数</h3><p>次にconst pathsに対応する処理を記述していきます。<br>page_totalはページネーションで扱うページ数を表しています。<br></p><pre><code>import axios from "axios"// インストールも忘れずに

const [登録するURLを返す関数] = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const array = (start, end) =&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[...Array(end - start + 1)].map((_, i) =&gt; start + i)

&nbsp;&nbsp;&nbsp;&nbsp;const res = await axios({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method: "GET",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: [page_totalを返すAPIサーバのURL],
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;const page_total = await res.data.page_total;
&nbsp;&nbsp;&nbsp;&nbsp;return array(1, page_total).map((pageNumber) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: String(pageNumber)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
}</code></pre><p>先ほど作成したarray関数を用いて、1からページネーションで扱う数(page_total)までの配列を作成しています。<br>私はpage_totalを取得するのにaxiosを使用していますが、fetchでも問題ありません。<br><br>これでページネーションを扱っている記事一覧のURLを事前に登録しておくことができました。<br></p><h3 id="h9be0c3393d">おわりに</h3><p>いかがだったでしょうか。<br><br>私は今回ページネーションを用いた一覧ページをISRにしたかったため新しく配列を作成し、ダイナミックルートの生成を試みました。<br><br>この記事がお役に立てば幸いです。<br>最後までご覧くださりありがとうございました。</p>

【Next.js】配列を使用して動的ルーティング生成

SSGを実現するのに欠かせないNext.jsのgetStaticPropsについて初心者の方に向けて簡単にご説明します。

<h2 id="h8d027c8ed3">はじめに</h2><p>getStaticPropsを理解する上でSSGという概念を知っておくと内容が頭に入りやすいと思うので最初にSSGについて説明します(既にご存知の方は飛ばしていただいても構いません)。<br></p><h3 id="hb782cfc26c">SSGとは</h3><p>SSGとはStatic Site Generationの略で、この技術を利用することで高速なレンダリングを実現できます。<br></p><h4 id="h934b8e623b">なぜ高速なのか</h4><p>レンダリングに関する技術として他にCSRやSSRといった技術があります。<br>この2つはユーザがウェブサイトにアクセスしてから様々な部品をまとめて1つのHTMLファイルを生成し、ページを表示します。<br><br>それに対してSSGはサイトのビルド時にHTMLファイルを事前に生成しておくため、サイトにアクセスしたユーザへ生成済みのHTMLファイルを渡すだけで済みます。<br>そのため、サイトにアクセスしてからHTMLファイルを生成する手間がなく、高速なレンダリングが可能となります。<br></p><h4 id="h9e2f65f7b4">SSGを利用するためには</h4><p>SSGは事前にHTMLファイルを用意する必要があるため、生成時に必要なデータを前もって決めておく必要があります。<br>そこで使用するのがgetStaticPropsです。<br></p><h3 id="hedbc5dfbee">getStaticPropsについて</h3><p>getStaticPropsについてはHTMLファイルを事前生成する際に必要なデータを決めておくものと考えるとイメージがしやすいかと思います。<br></p><h4 id="h59f744c0be">実際のコード</h4><p>getStaticPropsは関数として定義して使用します。<br><br>下記にはページコンポーネントとしてPageを定義し、HTML生成に必要なデータ(props)をgetStaticPropsから受け取っています。<br></p><pre><code>const Page = (props) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ props.title }&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{ props.description }&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}

export default Page;</code></pre><p>props内にページで扱いたいデータを記述し、ページコンポーネントへpropsを渡します。<br></p><pre><code>export const getStaticProps = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// ページコンポーネントに渡したいものを記述
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: "タイトル",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description: "説明です。"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><p>これをビルドすることでh1タグの中には「タイトル」が入り、pタグには「説明です。」が入ったHTMLファイルを生成できます。<br><br>ちなみに開発環境ではnpm run dev後、ページにアクセスすると自動的にページをビルドしてくれます。<br><br>ただ、上記のコードを見ると「だったら直接タグの中に記述した方が良くない？」と思った方もいらっしゃるかと思います。<br><br>その通りです。<br>ではこのgetStaticPropsの実力が発揮される時はどんな時なのか。<br><br>それは、外部データを取得してページ内で扱いたい時です。<br></p><h4 id="h72ec3e6d1a">一般的な使用方法</h4><p>外部データを持ってくる関数として新たにgetArticleDataを作成しました。<br><br>以下のようにしてデータを持ってきていますが、データフェッチングをした経験がない方は少々ややこしく感じてしまうかもしれません。<br><br>ここで大切なのはgetStaticPropsのpropsへJSONを入れているということなので「getArticleDataは外部から持ってきたJSONをgetStaticPropsのarticleに渡してるんだな〜」くらいの認識で大丈夫です。<br></p><pre><code>import axios from "axios";// インストールも忘れずに

const getArticleData = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const res = await axios({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method: "GET",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: "https://hoge.com/article",// データを取得するサイトのURL
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;// エラー処理等はお好みで
&nbsp;&nbsp;&nbsp;&nbsp;const article = await res.data;
&nbsp;&nbsp;&nbsp;&nbsp;return article;
}
const Page = (props) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ props.article.title }&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{ props.article.description }&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}
export const getStaticProps = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const article = await getArticleData();// 外部データを取得しそれをreturnする関数
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;article
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><p>getArticleDataで行った外部データの取得からHTMLの生成までビルド時に実行されるため、サイトアクセス時に外部からデータを取得して、次にページを生成して....なんて手間がなくなるわけですね。<br></p><h3 id="h1be95aba8c">JSONについて</h3><p>JSONについて初めて耳にした方向けに簡単にまとめてみました。<br><br>外部とデータのやり取りを行う際には一般的にJSON(JavaScript Object Notation)と呼ばれるものを使います。<br>getArticleDataではaxiosと呼ばれるJavaScriptのライブラリを使用して以下のようなJSONデータを取得しています。<br></p><pre><code>{
&nbsp;&nbsp;&nbsp;&nbsp;"title": "タイトル",
&nbsp;&nbsp;&nbsp;&nbsp;"description": "記事説明です。"
}</code></pre><p><br></p><h2 id="h9be0c3393d">おわりに</h2><p>いかがだったでしょうか。<br><br>Next.jsにはgetStaticPropsの他にgetStaticPathsという便利な関数も用意されているので気になった方はこちらもぜひご覧ください。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPathsについて</a><br><br>最後までご覧くださりありがとうございました。</p>

JavaScriptの記事
Article filter by JavaScript

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsをアップデートしたらエラーが発生し、強制終了する

【Next.js】配列を使用して動的ルーティング生成

【入門】Next.jsのgetStaticPropsについて

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

JavaScriptの記事Article filter by JavaScript

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsをアップデートしたらエラーが発生し、強制終了する

【Next.js】配列を使用して動的ルーティング生成

【入門】Next.jsのgetStaticPropsについて

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

JavaScriptの記事
Article filter by JavaScript