HarioNote

<h2>症状が発生したきっかけ</h2>
<p>Nodeのバージョンを18に上げたら急に立ち上げられなくなりました。</p>
<p>理由は調べたらいろいろ言及しているものがあったのですがここでは省略します。（「storybook node 18 」などでググるといろいろ出てきます）</p>
<h2>行った解決策</h2>
<p>私の場合、単純にstorybookリポジトリの<a href="https://github.com/storybookjs/storybook/issues/18019">こちら</a>のissueのコメントにあった解決策を試したら解決しました。以下に手順を示します。</p>
<ol>
<li>nodeモジュールの追加<br>
・@storybook/builder-webpack5<br>
・@storybook/manager-webpack5<br>
の2つのモジュールを追加します。</li>
</ol>
<pre><code>npm install @storybook/builder-webpack5@6.5.13 --save-exact
npm install @storybook/manager-webpack5@6.5.13 --save-exact
</code></pre>
<p>※バージョンはその時最新にするなど調整してください。</p>
<ol start="2">
<li>main.jsを修正<br>
　module.exports以下の内容が加わるように変更を加えてください。</li>
</ol>
<pre><code>module.exports = {
  core: {
    builder: &quot;webpack5&quot;,
  },
}
</code></pre>
<p>以上の変更を行って、「npm run storybook」を実行したら無事storybookを立ち上げることができました。</p>
<p>以上です。</p>
<h2>参考</h2>
<ul>
<li><a href="https://github.com/storybookjs/storybook/issues/18019">https://github.com/storybookjs/storybook/issues/18019</a></li>
</ul>


【React/TypeScript】nodeのバージョンを上げて、storybook起動しようとしたら「TypeError: Cannot read properties of undefined (reading ‘createSnapshot’)」とか言われて、立ち上げられなかったのを解決した【Storybook】

<p>表題の通り、Next.jsを13にアップデートしたことでコードの修正が必要になったのでその備忘録です。<br>
　私の場合は主に「next/image」「next/link」で修正が必要でした。</p>
<h2>next/image</h2>
<p>主に以下の内容がアップデートの目玉らしい</p>
<ul>
<li>レイアウトシフトなしで画像表示</li>
<li>オンデマンドでファイル最適化</li>
<li>クライアント側のJS軽量化</li>
<li>styleの設定がより簡単に</li>
<li>Webプラットフォームとの整合性</li>
<li>ネイティブ遅延ロードによりさらに高速化</li>
</ul>
<h3>13より前のnext/imageを使っていた私の場合</h3>
<p>古いverのNextImageは「next/legacy/image」という名前に変更されたらしい。</p>
<p>新しいnext/imageでは、「layout=”fill”」「objectFit=”contain”」のような指定がいらなくなるようだ。（fillについては、単純に「fill」というプロパティがあるようだ）</p>
<p>すぐに対応できないがNext.jsのバージョンは上げたいという人用なのか、next/legacy/image（古い仕様のままになるよう）に置換するコマンドが用意されているとのこと。<br>
　私の場合は新仕様に修正する方向の対応するため上記のコマンドは使用していません。</p>
<h2>next/link</h2>
<p>中にaタグを仕込む必要がなくなったとのこと。（というより子要素に<code>&lt;a&gt;</code>があれば削除の必要がある）</p>
<p><Link>タグ内にhref等を設定することになります。</p>
<p>よってpassHrefプロパティは不要になるが、旧仕様にも対応できるようにするためか現状は残してある。</p>
<h2>まとめると</h2>
<p>私の場合以下の修正が必要だった。</p>
<ul>
<li>next/image
<ul>
<li>廃止となったプロパティ削除</li>
<li>指定するプロパティ変更</li>
</ul>
</li>
<li>next/link
<ul>
<li>子要素のタグ削除</li>
<li>hrefは<code>&lt;Link&gt;</code>に設定</li>
</ul>
</li>
</ul>
<h2>参考</h2>
<p>https://nextjs.org/blog/next-13#breaking-changes<br>
https://nextjs.org/docs/api-reference/next/link<br>
https://nextjs.org/docs/api-reference/next/image</p>


Next.js 13 にアップデートにしたら修正が必要だった箇所の備忘録

<p>Next.jsプロジェクトの開発中、実機でデバックしていたらなぜかiPhoneでのみクラッシュする現象に遭遇しました。なんどもリロードするような挙動をするため、最初はリダイレクトループかな？と思いましたがPCでアクセスすると発生しないためとても困惑しました。その際の対応の備忘録です。</p>
<h2>原因/結論</h2>
<p>結論からいいますと、クラッシュするページで表示している画像のサイズが大きすぎることが原因と思われます。</p>
<p>いろいろ調べているうちに、私と同様の症状と思われるissueが見つかりましてそれが<a href="https://github.com/vercel/next.js/issues/34455">こちら</a>になります。<br>
　issue内のコメントで「iOSが画像読み込み時のRAM使用量を制限しているため…」とありました。どうやらこれが原因の可能性が高そうです。</p>
<h2>検証と対応</h2>
<p>症状が発生しているページで使用している画像を調べてみると、かなりサイズが大きい画像が混じっていました。</p>
<p>これを試しにサイズダウンしてみると問題の症状が発生しなくなりました。</p>
<p>ここまでたどり着くのに相当時間がかかってしまったのでほっとしました。</p>
<p>何かしらの対策がされるまで今後は注意しようと思います。</p>
<p>以上です。</p>


【React/TypeScript】iPhone(実機)でのみNext.jsがクラッシュする現象に遭遇した【Next.js】

<p>Reactなどの開発をチームで行っていると、MacユーザーとWindowsユーザーのどちらもいる場合、ESLintなどのチェックで改行コードが引っかかることがあります。</p>
<p>そんなときGitを使っているなら、設定ファイルを利用して一度に変更してしまうのが楽です。</p>
<h2>手順</h2>
<p>今回は改行コードをCRLFからLFに変更する場合を例とします。</p>
<p>まず「.gitattributes」ファイルをプロジェクトのルートディレクトリに作成します。</p>
<p>次にエディタで次の一行を書いて保存します。</p>
<pre><code>* text=auto eol=lf
</code></pre>
<p>これで、以降は自動で作成したファイルの改行コードはLFになります。</p>
<p>その時点で既に存在している他のファイルの改行コードはそのままなので、一度ファイルを削除してGitの機能でチェックアウトするなどして復活させればLFになった状態で復活します。</p>
<p>コマンドなら</p>
<pre><code>git checkout -f
</code></pre>
<p>で復活させます。</p>
<p>以上</p>


Recent Articles

【React/TypeScript】nodeのバージョンを上げて、storybook起動しようとしたら「TypeError: Cannot read properties of undefined (reading ‘createSnapshot’)」とか言われて、立ち上げられなかったのを解決した【Storybook】

Next.js 13 にアップデートにしたら修正が必要だった箇所の備忘録

【React/TypeScript】iPhone(実機)でのみNext.jsがクラッシュする現象に遭遇した【Next.js】

【改行コード変換】Gitの機能を利用して複数ファイルの改行コードを一括変更する方法の備忘録