Next.jsのgetStaticPathsについて初心者の方向けにfallbackの解説含めてご紹介します。

<h2 id="hfa0bd2cf6f">getStaticPathsについて</h2><p>動的ルーティングを行うページでgetStaticPropsを使用してSSGやISRといった技術を実現する際に扱う関数のことです。<br><br>getStaticProps, SSGについてはこちらで紹介しています。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPropsについて</a><br></p><h3 id="hca54225ffe">動的ルーティングとは</h3><p>動的ルーティングは別名、ダイナミックルーティングとも呼ばれ、予め決められたURLでなくてもアクセスした際のURLに応じたページを表示したりと汎用的なことができます。<br><br>動的ルーティングのページは[id].jsxのようなファイル名となり、SSGを利用するためにこの[id]に対するパス名をgetStaticPathsを用いて事前に決めていきます。<br><br>動的ルーティングについてはこちらで詳しく紹介しています。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/4" target="_blank" rel="noopener noreferrer">[入門]Next.jsのダイナミックルーティング作成方法</a><br></p><h3 id="h59f744c0be">実際のコード</h3><p>では、getStaticPathsを用いてパスの設定方法を実際のコードとともに説明します。<br><br>getStaticPaths関数はasyncを必ず使用し、pathsの中にあらかじめ登録しておくパスを入れます。<br><br>今回は[id].jsxを例に出していますが、仮に[slug].jsxを作成した場合は以下のコードにある「id」が「slug」となります。<br></p><pre><code>// [id].jsx
export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: '1'} },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: '2'} },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// こんな感じで続く
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: false
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h4 id="h21d3debdfe">fallbackについて</h4><p>getStaticPathsで定義しなかったパスにアクセスした際の処理をfallbackを用いることで決めることができます。<br>fallbackにはtrue, false, 'blocking'の3つの値があります。<br><br>以下コードのfallbackにそれぞれの値を入れて検証していきます。<br>(fallbackの動作を確認したいため、getStaticPathsで定義していないパスにアクセスします。)<br></p><pre><code>// [id].jsx

const FallbackTest = ({ title }) =&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;p&gt;Fallbackのテスト&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ title }&lt;/h1&gt;// ここにはgetStaticPropsから渡された値のtitle(タイトル)が入ります
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}

export default FallbackTest;

export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: String(1) } }// 定義しているパスは1のみ
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: // ここにそれぞれの値を入れてみる
&nbsp;&nbsp;&nbsp;&nbsp;}
}

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;title: "タイトル"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h5 id="h846ae80615">trueにした場合</h5><p>trueの場合、ページを読み込むと「Fallbackのテスト」のみ最初に表示され、その後に「タイトル」が表示されます。<br>これはサーバーサイドでHTMLファイルの生成が完了するまでの間、生成完了前のデータを表示するためです。<br>生成完了後は出来上がったデータを表示します。<br></p><h5 id="hf5378d359e">falseにした場合</h5><p>falseの場合は404エラーを返却するため上記のページコンポーネントとは異なったページが表示されます。<br></p><h5 id="h011f024988">'blocking'にした場合</h5><p>blockingを設定していると「Fallbackのテスト」と「タイトル」が同時に表示されます。<br>これはサーバーサイドでHTMLファイルを生成してからブラウザに渡すためです。<br>そのため途中から表示内容が変わることはありません。<br><br>また、この値だけ''がついているのに気が付いたでしょうか。<br>上記のtrueとfalseについてはbool型で、blockingは文字列となるため''をつける必要があります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>getStaticPathsはgetStaticPropsと一緒に使用する必要があるので興味のある方はぜひこちらの記事もご覧ください。<br><a style="color:#1784e9" href="http://127.0.0.1:8000/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPropsについて</a><br><br>最後までご覧くださりありがとうございました。</p>

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

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をアップデートしたらエラーが発生し、強制終了する

npmでパッケージをグローバルインストールしようとしたらパーミッションエラーが発生した時の対処法について。

<h2 id="h9710ffdf15">余談</h2><p>npmで-gを使用しないインストールは普段行っていたのですが、</p><pre><code>npm install -g [パッケージ名]</code></pre><p>上記のコマンドでパッケージをグローバルインストールしようとした際に以下のエラーが発生しました。</p><pre><code>errno -13 Error: EACCES: permission denied, access '/usr/local/lib/node_modules'</code></pre><h3 id="had0b1b94af">解決方法</h3><p>所有権を現在使用しているユーザーに変更するため、以下のコマンドを実行します。</p><pre><code>sudo chown -R $( whoami ) /usr/local/lib/node_modules</code></pre><h4 id="h4833b037d8">コマンド解説</h4><p>sudo: スーパーユーザー(最も実行権限のあるアカウント)でコマンドを実行<br><br>chown -R: 指定したディレクトリとそのディレクトリ以下のファイルやディレクトリ(ここではnode_modulesの中身を指します)の所有権を変更する<br><br>/usr/local/lib/node_modules: 上記のコマンド対象となるディレクトリのパス<br></p><h4 id="hf639a082c8">変数解説</h4><p>$(): ()の中に変数名を入れることで文字列としてコマンド内で表示可能です。<br><br>whoami: 現在のユーザー名を表します。</p><h3 id="ha4f4c9f20f">なぜこのエラーが発生したのか</h3><p>npmでパッケージをグローバルインストールする際にはnode_modulesディレクトリとその配下へのアクセス権限が必要です。<br><br>今回の場合、コマンドを実行したユーザーにはnode_modulesに変更を加える権限がなかったためパッケージのインストールが出来ず、上記のエラーが出てしまいました。</p>

npmを使ったグローバルインストールでエラーが発生した際の対処法

sedコマンドの基本的なコマンド説明&例を、実行結果と一緒にできる限りわかりやすくまとめてみました。

<h2 id="h401d62a9b4">sedコマンドについて</h2><p>文字列の置換や抽出、削除など多くのテキスト処理ができるコマンドです。<br>ちなみにsedは「Stream EDitor」の略です。<br><br>sedコマンドについては、Linux(GNU系)かmacOS(BSD系)かで処理が変わってくるので、その内容についても触れながら紹介していきます。</p><h3 id="h61147ed331">参照ファイルの準備</h3><p>まずは、参照元のテキストファイルを作成します。</p><pre><code>// test.txt
AAAA AAAA
BBBB BBBB
CCCC CCCC
DDDD DDDD
AAAA AAAA</code></pre><p>続いてsedコマンドを記述していきます。</p><h3 id="hfcd2682aee">出力処理</h3><h4 id="h7f3bc15df3">出力結果の行数を指定して表示</h4><p>eオプションはsedの第一引数(下記コードの[指定行1],[指定行2]p)がコマンド、第二引数以降(下記コードの[ファイル名])は入力ファイルと指定するものです。<br><br>eオプションを省略した場合にも、第一引数がコマンド、第二引数以降は入力ファイルと処理するため、省略も可能です。<br>※当コマンド以降、全てeオプションを省略しています。<br><br>nオプションは指定しなかった余分な行の文字列を表示しないようにするものです。</p><pre><code>// sed -e -n [指定行1],[指定行2]p [ファイル名]
sed -e -n 2,3p test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><p>test.txtの2~3行までの内容を表示します。</p><pre><code>BBBB BBBB
CCCC CCCC</code></pre><h4 id="hf0da065ce5">特定の行を消して表示</h4><pre><code>// sed [削除する行]d [ファイル名]
sed 1d test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><p>1番目の行を削除して表示します。</p><pre><code>BBBB BBBB
CCCC CCCC
DDDD DDDD
AAAA AAAA</code></pre><h4 id="h5a23c22d27">ファイル内にある対象の文字列を他の文字列に置換する</h4><p>sは正規表現で置換処理をするという意味になります。</p><pre><code>// sed 's/[対象文字列]/[置き換える文字列]/' [ファイル名]
sed 's/AAAA/ZZZZ/' test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><p>AAAAがZZZZに置換されます。<br>ただし実行結果の通り、各行でマッチした対象文字列の1つ目のみにしか置換をしません。<br><br>ちなみに実行しても置換されたデータが表示されるだけで、ファイルデータは変わりません。</p><pre><code>ZZZZ AAAA
BBBB BBBB
CCCC CCCC
DDDD DDDD
ZZZZ AAAA</code></pre><h4 id="hbd2140cc93">ファイル内にある対象の文字列全てを他の文字列に置換する</h4><p>もし、各行でマッチした対象文字列 全てに対して置換をしたい場合には先ほどのコードにgコマンドを使用すれば可能です。<br>※ gの後にスラッシュは不要なので注意が必要です。</p><pre><code>// sed 's/[対象文字列]/[置き換える文字列]/g' [ファイル名]
sed 's/AAAA/ZZZZ/g' test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><pre><code>ZZZZ ZZZZ
BBBB BBBB
CCCC CCCC
DDDD DDDD
ZZZZ ZZZZ</code></pre><h4 id="h85f6228a0d">各行のn番目の対象文字列に対してのみ他の文字列に置換する</h4><pre><code>// sed 's/[対象文字列]/[置き換える文字列]/[n]' [ファイル名]
sed 's/AAAA/ZZZZ/2' test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><pre><code>AAAA ZZZZ
BBBB BBBB
CCCC CCCC
DDDD DDDD
AAAA ZZZZ</code></pre><h4 id="h871754c484">行番号を指定して対象の文字列を他の文字列に置換する</h4><pre><code>// sed '[行番号1],[行番号2]s/[対象文字列]/[置き換える文字列]/' [ファイル名]
sed '2,5s/AAAA/ZZZZ/' test.txt</code></pre><h5 id="h45437cb5d5">実行結果</h5><pre><code>AAAA AAAA
BBBB BBBB
CCCC CCCC
DDDD DDDD
ZZZZ AAAA</code></pre><h3 id="hbf109d27b1">ファイルの上書き処理</h3><p>上記では置換したデータを表示するだけですが、今度は実際にファイルを上書きしてみましょう。<br>ファイルに変更を加える場合には、iオプションを使用します。<br><br>下記のコマンドはLinux(GNU系)のsedとmacOS(BSD系)のsedではコマンドに差異があるため、ご使用のOS(sed)に応じてご使用ください。<br>詳しくは下記の記事をご覧ください。<br><a href="/blog/661354204">【Linux】MacOSのsedコマンドでエラーが発生した時の対処法</a></p><h4 id="hbfbdc6092d">出力結果の行数を指定して上書き</h4><p>Linux(GNU系)</p><pre><code>// sed -i 's/[対象文字列]/[置き換える文字列]/g' [ファイル名]
sed -i 's/AAAA/ZZZZ/g' test.txt</code></pre><p>macOS(BSD系)</p><pre><code>// sed -i '' 's/[対象文字列]/[置き換える文字列]/g' [ファイル名]
sed -i '' 's/AAAA/ZZZZ/g' test.txt</code></pre><h5 id="h4e46cde533">実行後のファイル</h5><pre><code>ZZZZ ZZZZ
BBBB BBBB
CCCC CCCC
DDDD DDDD
ZZZZ ZZZZ</code></pre><h4 id="h8b35967894">ファイル内にある空白を削除して上書き</h4><p>Linux(GNU系)</p><pre><code>// sed -i 's/[スペース]//g' [ファイル名]
sed -i 's/ //g' test.txt</code></pre><p>macOS(BSD系)</p><pre><code>// sed -i '' 's/[スペース]//g' [ファイル名]
sed -i '' 's/ //g' test.txt</code></pre><h5 id="h4e46cde533">実行後のファイル</h5><pre><code>AAAAAAAA
BBBBBBBB
CCCCCCCC
DDDDDDDD
AAAAAAAA</code></pre><h4 id="h71d67e6163">ファイルの中身を全て削除</h4><p>Linux(GNU系)</p><pre><code>// sed -i 'd' [ファイル名]
sed -i 'd' test.txt</code></pre><p>macOS(BSD系)</p><pre><code>// sed -i '' 'd' [ファイル名]
sed -i '' 'd' test.txt</code></pre><h5 id="h4e46cde533">実行後のファイル</h5><pre><code></code></pre><h2 id="h9be0c3393d">おわりに</h2><p>いかがだったでしょうか。<br>数多くあるLinuxコマンドの中でも、使われることの多いsedコマンド。<br>他にもawkなどの便利なコマンドがたくさんあるので、興味のある方はぜひ調べてみてください！<br><br>最後までご覧いただき、ありがとうございました。</p>

【Linux】sedコマンドの基本的な使い方をまとめてみました

MacOSでsedコマンドにiオプションをつけて実行した際にsed: 1: "test.txt": undefined label 'est.txt'と発生してしまい、思った通りの挙動にならなかったため、対処法をまとめました。

<h2 id="h8d027c8ed3">はじめに</h2><p>Bashで開発環境の構築ファイルを作成していたら、sedにiオプションを付けて使用している箇所でエラーが発生しました。<br></p><h2 id="h9bbb0bca62">開発環境</h2><p>macOS: 12.0.1<br></p><h2 id="h9710ffdf15">余談</h2><p>このエラーはLinux(GNU系)のsedか、macOS(BSD系)のsedかが鍵となっています。<br><br>お使いのsedがどちらなのか分からない場合には、以下のコマンドを試してみてください。</p><pre><code>sed --version</code></pre><p>Linux(GNU系)の場合は、以下のようにエラーが出ずにコピーライトなどの情報が表示されます。</p><pre><code>sed (GNU sed) ....</code></pre><p>macOS(BSD系)の場合は、--versionというオプションはないため以下のようにillgal optionと表示され、usageが表示されます。</p><pre><code>sed: illegal option .....</code></pre><h3 id="had0b1b94af"><br>解決方法</h3><h4 id="h8853c934f4">バックアップファイルを生成するようにする</h4><p>macOS(BSD系)のsedはバックアップファイルを生成することで、下記コマンドでiオプションを使用できます。</p><pre><code>sed -i '.bak' 's/[対象文字列]/[置換後文字列]/' [ファイル名]</code></pre><p>または</p><pre><code>sed -i.bak 's/[対象文字列]/[置換後文字列]/' [ファイル名]</code></pre><h4 id="h346706e980">バックアップファイルを生成せずにiオプションを使用する</h4><p>「いちいちバックファイルを生成されると困る..!」といった場合には、拡張子の記述をなくすことでバックアップファイルの生成を行わずにiオプションを使用できます。</p><pre><code>sed -i '' 's/[対象文字列]/[置換後文字列]/' [ファイル名]</code></pre><h3 id="h6294a2384c">なぜこのエラーが発生するのか</h3><p>結論からまとめると、これはLinuxのsedとmacOSのsedは厳密には違うものだからです。<br>LinuxのsedはGNU系であり、macOSのsedはBSD系のコマンドとなっています。<br><br>特にiオプションを使用した際の挙動に違いがあります。</p><h3 id="h6643b3a7e3">Linux(GNU)</h3><p>GNU系の場合、以下のコマンドで文字列の置換 &amp; ファイルデータの上書きができます。</p><pre><code>sed -i 's/AAAA/ZZZZ/g' test.txt</code></pre><h3 id="h41104b6371">macOS(BSD)</h3><p>BSD系で上記と同じコマンドを実行すると、以下のようにエラーが出ます。</p><pre><code>sed: 1: "test.txt": undefined label 'est.txt'</code></pre><p> 次にeオプションをつけて実行してみます。</p><pre><code>sed -ie 's/AAAA/ZZZZ/g' test.txt</code></pre><p>すると、エラーも表示されずにファイル内容が上書きされます。<br><br>しかし、よく見ると、test.txteという新しいファイルが生成されており、オプションとしてつけたはずのeが拡張子として判別されてしまいます。<br></p><h3 id="h81a2a72083">GNU sedのインストール</h3><p>Homebrewにある、gnu-sedをインストールするのも一つの手です。</p><pre><code>brew install gnu-sed</code></pre><p>インストール後、下記コマンドが使用できます。</p><pre><code>gsed 's/AAAA/ZZZZ/g' test.txt</code></pre><p><br></p><h3 id="ha76ad17005">zshでaliasを設定する方法</h3><p>GNU sedインストール後、gsedではなく、sedで入力したいという方はzshのエイリアスでsedをgsedと設定すると対応できますね。</p><pre><code># ~/.zshrc
alias sed='gsed'</code></pre><p>私はGNU sedをインストールせずに、GNUのsedとBSDのsedを使い分けたかったので以下のように設定しています。</p><pre><code># ~/.zshrc
alias gsed='sed -i '' -e'</code></pre><h2 id="ha214098e44">まとめ</h2><p>macOSでsedを使用する際には、-iの後に''をつける必要があるので、それが面倒な方はgnu-sedのインストールを行うといいですね！<br>この記事がお役に立てば幸いです。<br><br>最後まで記事をご覧いただき、ありがとうございました。</p>

【Linux】MacOSのsedコマンドでエラーが発生した時の対処法

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>

Standard記事一覧
Article