HarioNote

<p>VSCodeをアップデートしたらstyled componentsの入力補完をしてくれている拡張機能が効かなくなったので、ダウングレードせずに解決できないかと調べたらできたのでその備忘録です。</p>
<p>ただ、今回の解決策はあくまでも私が試してうまく解消できた方法なので万人に当てはまるわけではありません。</p>
<h2>使用していたstyled componentsのコード補完の拡張機能</h2>
<p>使用していたのは「 vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)」です。<br>
<img src="https://storage.googleapis.com/newt-files/822f4a9b-906c-44bb-adf7-842d1153a252%2F2022-12-1046866.png" alt="2022-12-1046866.png"></p>
<p>↓こんな感じでstyled componentの定義内のcssの入力を助けてくれる便利なやつです<br>
<img src="https://storage.googleapis.com/newt-files/493861b4-b0c6-4f83-a1cd-a5c02e6c38a8%2F6541464653.png" alt="6541464653.png"></p>
<h2>試した解決策と結論</h2>
<p>結論から書かせてもらいますと、私の場合はVSCodeにインストールされていた「JavaScript and TypeScript Nightly」という拡張機能を取り除くことで解消することができました。</p>
<p>↓こちらです<br>
<img src="https://storage.googleapis.com/newt-files/e7f88aac-e340-487f-a7f0-d9d9fe10cdb8%2F6426454.png" alt="6426454.png"></p>
<p>拡張機能の欄から検索し、アンインストールをしVSCodeを再起動したら復活しました。<br>
これで快適な環境を取り戻せました。</p>
<h2>結論にたどり着くまでの経緯</h2>
<p>とりあえず色々ググったら<br>
↓こちらのissueにたどり着きまして、コメントを読み漁って解決方法にたどり着きました<br>
<a href="https://github.com/styled-components/vscode-styled-components/issues/354">https://github.com/styled-components/vscode-styled-components/issues/354</a></p>
<p>issue内のコメントでは、VSCodeの様々なversionや環境で発生していたり発生していなかったりの報告があったのですが、その中の1つにVSCodeのバージョンは変えずに拡張機能の組み合わせを細かく試した人がいて原因が「JavaScript and TypeScript Nightly」とであったと報告がありました。（本当に感謝。。。）</p>
<p>それでその拡張機能を検索したら私の環境にもインストールされていたので、アンインストールを試したらうまくいきました。</p>
<p>たどり着くのに時間がかかったので地味に疲れました笑</p>
<p>以上です。</p>


VSCodeをアップデートしたらstyled componentsの補完が効かなくなっていたので解消した【VSCode/拡張機能】

<p>前回の記事の続きです。</p>
<p>ページ全体のデフォルトのSEO設定はできたので、今度は記事ページ固有のSEO設定ができるようにします。<br>
本記事の環境では<a href="https://www.newt.so/">Newt</a>（ヘッドレスCMS）を利用しているため、Newtのapiから返ってくる値を利用して自動で各記事ページにSEO設定が行われるようにすることを目標とします。</p>
<p>そのため本記事ではNextSeoに設定される値はNewt由来の変数がほとんどになりますが、Newtを使用していない環境の方の場合も、設定する値の取得方法が異なるだけで設定する項目は変わらないと思うので、基本的にやることも変わらないと思います。</p>
<h2>実装</h2>
<h3>記事ページのコンポーネントを編集</h3>
<p>本記事ブログはNewtのNext.jsテンプレートが土台となっているため、もともと最小限のseoに関する記述が記事ページのコンポーネントに書かれていますので、それらを削除しnext-seoでの設定の記述に書き換えます。</p>
<p>↓が元々の状態です。</p>
<pre><code>...
  return (
    &lt;Layout app={app}&gt;
      &lt;Head&gt;
        &lt;title&gt;{title}&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:type&quot; content=&quot;article&quot; /&gt;
        &lt;meta property=&quot;og:title&quot; content={title} /&gt;
        &lt;meta property=&quot;og:description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:image&quot; content={ogImage} /&gt;
        &lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot; /&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;/Head&gt;
...
</code></pre>
<p>これを以下のように書き換えました。</p>
<pre><code>...
import { NextSeo } from &quot;next-seo&quot;;
...
  return (
    &lt;Layout app={app}&gt;
      &lt;NextSeo
        title={title}
        description={description}
        openGraph={{
          title,
          description,
          type: &quot;article&quot;,
          article: {
            tags: currentArticle.tags.map((tag) =&gt; tag.name),
            authors: [currentArticle.author.fullName],
            publishedTime: currentArticle?._sys?.createdAt,
            modifiedTime: currentArticle?._sys?.updatedAt,
          },
          images: [
            {
              url: currentArticle.coverImage.src,
              width: 700,
              height: 420,
              alt: title,
            }
          ],
        }}
      /&gt;
...
</code></pre>
<p>※<code>&lt;Head&gt;</code>は削除しました。<br>
基本的にNewtのapiから取得している値を流用してセットしているだけです。</p>
<h3>記事ページを確認</h3>
<p>では<code>npm run dev</code>で立ち上げて記事ページにアクセスしてSEO設定を確認してみます。<br>
確認すると以下のようにmetaタグが生成されています。<br>
<img src="https://storage.googleapis.com/newt-files/d8fb89f8-00c2-49c2-8251-3b43d9419a5f%2F212018.png" alt="212018.png"></p>
<p>以上です。</p>


【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

<p>本ブログをWordPressからNewt + Next.js(v13)にリニューアルしてからSEOの設定を行っていなかったため、npmモジュールの<code>next-seo</code>モジュールを使って設定してみました。</p>
<p>next-seo：<a href="https://www.npmjs.com/package/next-seo">https://www.npmjs.com/package/next-seo</a></p>
<h2>NextSeo</h2>
<p>※以下公式の情報を基に私の意訳になります。<br>
next-seoはSEOを設定したいページに<code>NextSeo</code>タグ埋め込むことで動作し、headタグ内に設定した内容に沿ってmetaタグ等をレンダリングしてくれるそうです。</p>
<p>これだけ読むとすべてのページにNextSeoタグを埋め込む作業が必要なように思えますが、自動ですべてのページにデフォルトのSEO設定を出力してくれるデフォルトSEO設定機能があるようです。<br>
Next.jsの_app.js(カスタム<code>&lt;App&gt;</code>)を利用する方法が提供されています。</p>
<p>これに加えてページ固有のSEO設定を行いたい場合は、そのページにのみ個別で<code>NextSeo</code>タグを設定すれば上書きしてくれるっぽいです。</p>
<p><code>next-seo.config.js</code>のようなファイルを作成しておき、そこにデフォルトのSEO設定を記述しておき読み込ませて使用する方法も紹介されています。</p>
<p>Title Template機能を使用すれば記事タイトルの表示形式の設定もできるようです。</p>
<pre><code>title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title
</code></pre>
<h2>実装</h2>
<h3>next-seoモジュールインストール</h3>
<pre><code>&gt; npm install --save next-seo@5.15.0 --save-exact
</code></pre>
<p>※versionは最新のものを確認して各自修正してください。</p>
<h3>デフォルトのSEO設定を記述するファイル作成</h3>
<p><code>next-seo.config.ts</code>という名前で設定ファイルを作成（ファイル名はなんでもokです）<br>
今回は以下のように記述してみました。</p>
<pre><code>import { DefaultSeoProps } from &quot;next-seo&quot;;

const SITE_NAME = &quot;HarioNote&quot;;

const TitleTemplate = `%s | ${SITE_NAME}`;

const config: DefaultSeoProps = {
  title: SITE_NAME,
  titleTemplate: TitleTemplate,
  defaultTitle: SITE_NAME,
  description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
  canonical: &quot;https://harionote.net/&quot;,
  openGraph: {
    url: &quot;https://harionote.net/&quot;,
    title: SITE_NAME,
    description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
    siteName: SITE_NAME,
  },
  twitter: {
    site: SITE_NAME,
    cardType: &quot;summary_large_image&quot;
  }
}

export default config;
</code></pre>
<h3>_app.tsxにてデフォルトのSEO設定を適用</h3>
<p>next.jsの機能としてある_app.tsx(または_app.js)ファイルを利用して先程作成したデフォルトのSEO設定がすべてのページに適用されるようにします。</p>
<p>※<code>_app.tsx</code>ファイルはない場合は新規作成してください。配置場所は<code>/pages</code></p>
<p>元々↓のような_app.tsxを</p>
<pre><code>import &quot;../styles/globals.css&quot;;

function MyApp({ Component, pageProps }) {
  return (&lt;Component {...pageProps} /&gt;);
};

export default MyApp;
</code></pre>
<p>↓のように編集しました。</p>
<pre><code>import &quot;../styles/globals.css&quot;;
import { DefaultSeo } from &quot;next-seo&quot;;

import SEO from &quot;../nextSeo/next-seo.config&quot;;

function MyApp({ Component, pageProps }) {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre>
<p>編集後<code>npm run dev</code>コマンドで立ち上げて確認すると</p>
<p><img src="https://storage.googleapis.com/newt-files/ae4b9c96-0273-4971-9101-615f0879efef%2F16541656.png" alt="16541656.png"><br>
となっていたheadタグ内に<br>
<img src="https://storage.googleapis.com/newt-files/a65e6c48-47ab-4048-9803-4e79ce9dee76%2F192404.png" alt="192404.png"><br>
のようにmetaタグが生成されるようになりました～。</p>


<p>表題の通りです。Next.jsのプロジェクトにGoogle Tag Managerを導入する際に、公式のexampleがあるのですがそれを見ながらやっても若干苦戦したのでその備忘録です。</p>
<p>公式example：<a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib">https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib</a></p>
<h2>要点</h2>
<p>今回扱うファイル</p>
<ul>
<li>.env.sample(.env.local)</li>
<li>pages/_document.tsx<br>
本記事内の表記について</li>
<li>GTM：Google Tag Managerのことです</li>
</ul>
<h2>実装</h2>
<h3>envファイルにGTMのIDを追加</h3>
<p>「.envファイル」(.env.sample, .env.local等)にGTMのIDを記述しておきます。</p>
<pre><code>...

GTM_ID=XXX-XXXXXX

...
</code></pre>
<p>＜補足＞<br>
　タグマネージャーのIDは下図の部分に記載されているものです。</p>
<p><img src="https://storage.googleapis.com/newt-files/7291b0eb-f12e-47c9-8c3a-58f858066649%2Fimage-58566.png" alt="image-58566.png"></p>
<h2>_document.tsxにGTM導入のための記述追加</h2>
<p>「/pages/_document.tsx」にGTMを導入するための記述を追加します。</p>
<pre><code>import { Html, Head, Main, NextScript } from &quot;next/document&quot;

/* ↓追記箇所 */
const GTM_ID = process.env.GTM_ID;

export default function Document() {
  return (
    &lt;Html&gt;
      &lt;Head&gt;
/* ↓追記箇所---------------------------------------------- */
          {GTM_ID &amp;&amp; (
            &lt;Script
              id=&quot;gtag-base&quot;
              strategy=&quot;afterInteractive&quot;
              dangerouslySetInnerHTML={{
                __html: `
                      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                      j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
                      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                      })(window,document,'script','dataLayer', '${GTM_ID}');
                    `,
              }}
            /&gt;
          )}
/* ↑追記箇所---------------------------------------------- */
      &lt;/Head&gt;
      &lt;body&gt;
/* ↓追記箇所---------------------------------------------- */
          &lt;noscript&gt;
            &lt;iframe
              title=&quot;Tag Manager&quot;
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height=&quot;0&quot;
              width=&quot;0&quot;
              style={{ display: &quot;none&quot;, visibility: &quot;hidden&quot; }}
            /&gt;
          &lt;/noscript&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
/* ↑追記箇所---------------------------------------------- */
      &lt;/body&gt;
    &lt;/Html&gt;
  )
}
</code></pre>
<p>追加する記述内容は以上です。</p>
<h2>動作確認</h2>
<p>Next.jsを立ち上げて、Chromeなどブラウザの開発ツールで確認してみます。<br>
　「Network」の欄をみるとちゃんと200が返ってきているようです。<br>
<img src="https://storage.googleapis.com/newt-files/ea58df0a-e08f-4093-a3a2-7a335995e8d0%2Fimage-685748.png" alt="image-685748.png"></p>
<p>ちなみにですが、タグマネージャーのプレビュー機能は、localhostで実行している場合でも行えるのでそちらで確認もしてみるといいかもしれません。</p>
<h2>Advanced</h2>
<p>よりよいコードや設計にするためのAdvancedな項目を挙げてみました。</p>
<ul>
<li>「GTM_ID」を「_document.tsx」の外で(別ファイルで)定義
<ul>
<li>環境変数を引っ張ってくる「process.env.XXX」の記述を都度書かせるような設計をしない。（ケアレスミスの温床になりやすい）</li>
<li>使用する環境変数が多い場合、その方がプロジェクト全体がクリーンになる。（と思ってる）</li>
<li>定義ファイルで定義する際についでにZodとかで型安全化するのもあり</li>
</ul>
</li>
<li>「_document.tsx」に記述した、&lt;Script …/&gt;の「dangerouslySetInnerHTML」に渡している内容は別ファイルで定義しておいた方が_document.tsxの全体の見通しがよくなるかも</li>
</ul>
<p>以上です。</p>


【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

<h2>ポイント</h2>
<p>以下のものを利用しました。</p>
<p>GitHub Actions<br>
「Add To GitHub projects」（※classicのGitHub projectsはサポートしてないので注意）</p>
<h2>手順</h2>
<h3>アクセストークンを生成しておく</h3>
<p>GitHubの右上のアカウントメニューのSettingsをクリックし</p>
<p><img src="https://storage.googleapis.com/newt-files/dc573fd2-bbf4-47d0-9d6e-88af33a9974f%2Fimage-6165.png" alt="image-6165.png"></p>
<p>Settings左メニュー一番下の「Developer settings」をクリック</p>
<p><img src="https://storage.googleapis.com/newt-files/31e4a880-9b06-4e2f-8d17-800cbf47fbd1%2Fimage-8651.png" alt="image-8651.png"></p>
<p>左メニューのPersonal access tokensのTokens(classic)をクリック<br>
<img src="https://storage.googleapis.com/newt-files/4ff7bfcc-b531-41b7-b139-9a46de22766d%2Fimage-9556.png" alt="image-9556.png"></p>
<p>「Generate new token」をクリックし、「Generate new token(classic)」を選択します。</p>
<p><img src="https://storage.googleapis.com/newt-files/bb90fff9-252d-455f-9f01-928c61d36bd5%2Fimage-1061.png" alt="image-1061.png"></p>
<p>各項目を入力してtokenを作成します。<br>
scopesは以下のようにしました。<br>
これについては、個人アカウントのリポジトリで行うかorgで利用するかで異なると思うので各自調整してください。</p>
<p><img src="https://storage.googleapis.com/newt-files/a3513df0-4a5d-4d55-b0a6-6c29c0dfdb7c%2Fimage-11024.png" alt="image-11024.png"></p>
<p>tokenを生成すると最初にtokenを表示してくれますが、以降リロード等すると二度と表示されないので、コピーして控えておきます。</p>
<p><img src="https://storage.googleapis.com/newt-files/977d5749-983d-4698-a64a-1b74910fc8c6%2Fimage-1254.png" alt="image-1254.png"></p>
<h2>目的のリポジトリのSecretsにtokenを登録する</h2>
<p>今回はOrganizationで行いたいのでOrganizationのSecretsでもいいのですが、リポジトリのSecretsで行いたいと思います。</p>
<p>監視対象のリポジトリのページにアクセスして「Settings」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/b2769bb6-fc30-474d-bf02-a775bc75affa%2Fimage-13428.png" alt="image-13428.png"></p>
<p>遷移先ページ左メニューのSecrets &gt; Actionsをクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/97777bf9-a47f-41c0-ad7e-3ec7a23ae9fe%2Fimage-1585.png" alt="image-1585.png"></p>
<p>表示されたページの「New Repository secret」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/ddac0134-c13f-497d-bfcb-71893600950f%2Fimage-1654.png" alt="
"></p>
<p>Nameは「GHPROJECT_TOKEN」とでもして（なんでも良いです）<br>
Secretに先程コピーして控えておいたtokenを入力し、「Add secret」をクリックしてsecretに登録します。</p>
<p><img src="https://storage.googleapis.com/newt-files/e164358b-8fae-43b7-940f-47e98c394384%2Fimage-1775.png" alt="image-1775.png"></p>
<h2>Workflowを作成</h2>
<p>リポジトリにissueが作成されたらActionsで実行されるworkflowを作成します。先程作成したtokenやsecretはここの処理で必要になります。</p>
<p>監視するリポジトリのページにアクセスし、「Actions」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/5654f026-ff5d-4ac3-867e-233c0b5fec6a%2Fimage-1885.png" alt="image-1885.png"></p>
<p>左メニューの「New workflow」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/68d5b70f-886a-4ae2-9c92-a51490b36ea5%2Fimage-1978.png" alt="image-1978.png"></p>
<p>表示されたページの「set up a workflow yourself」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/78210b79-2ed4-4325-8e0f-9d56d4c7b30e%2Fimage-2075.png" alt="image-2075.png"></p>
<p>workflowのエディタが開かれるので、以下のように入力します。<br>
ファイル名(〇〇.yml)も各々で自由につけてokです。</p>
<p><img src="https://storage.googleapis.com/newt-files/68df02cc-ccb3-448f-997c-eaea5d1c6240%2Fimage-2297.png" alt="image-2297.png"></p>
<pre><code>name: 'Your workflow name'
on:
  issues:
    types: [opened]
jobs:
  add-issue-to-project:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/add-to-project@vX.X.X　←バージョンは各々確認
      id: add-issue-to-project
      with:
        project-url: 自分のGitHub ProjectのURL（〇〇/projects/[project No.] まででok）
        github-token: ${{ secrets.GHPROJECT_TOKEN }}　←自分で付けたtokenの名前にしてください
</code></pre>
<p>↑各項目は各々の環境に合わせて変更してください。<br>
「actions/add-to-project@vX.X.X」のバージョンは↓で確認できます。<br>
<a href="https://github.com/marketplace/actions/add-to-github-projects">https://github.com/marketplace/actions/add-to-github-projects</a></p>
<p>書き終わったら右上の「Start commit」でcommitしてymlを保存しましょう。</p>
<p>これで準備は完了です。</p>
<h3>確認</h3>
<p>最後に対象のリポジトリでissueを作成してProjectに追加されるか確認し、できてればokです。</p>
<p>以上です。</p>
<h2>Advanced</h2>
<p>趣味とか私用でないOrganizationにおいては、個人のアクセストークンの利用はやはり避けた方が良いと思います。今回は試験的な試みというか私自身がやりたくてやっているだけなので、参考にする場合は自己責任でお願いします。</p>
<p>どのようなルールで組織のトークンを管理するかは議論するといろんな意見が出てきそうですね。</p>


【GitHub】特定のリポジトリにissueが作成されたら、自動で Project(GitHub Projects)に追加されるようにする【GitHub Projects】

<h2>MFAとは</h2>
<p>MFAとは「多要素認証」という意味で、ユーザー名＋パスワード以外でも認証を行います。</p>
<p>今回のawsではスマートフォンアプリで認証を行います。</p>
<h2>きっかけ</h2>
<p>IAMにダッシュボードにアクセスするとMFAの設定を行うことを推奨されます。<br>
　なので「MFAを追加」ボタンをクリックしてMFA設定の手続きを開始します。</p>
<p><img src="https://storage.googleapis.com/newt-files/c5794fb8-a0eb-48f4-a654-b07fd2daab66%2Fimage23.png" alt="image23.png"></p>
<h2>MFA設定手順</h2>
<p>「MFAを追加」ボタンをクリックすると以下のような画面が表示されるので、「MFAの有効化」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/7eed7d76-6717-4390-9d22-42fcd969d8e1%2Fimage-4141.png" alt="image-4141.png"></p>
<p>クリックして表示されたモーダルで「仮想MFAデバイス」を選択して「続行」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/c8c3016b-518c-4c83-95ec-5adf4215637e%2Fimage-5615.png" alt="image-5615.png"></p>
<p>MFAデバイスを用意します。今回はスマホです。事前に自身のスマホに、awsのMFAでの認証に使用可能なアプリを事前にインストールしておきます。<br>
　MFAに使えるスマホアプリとしては以下のものがあるようです。</p>
<p><img src="https://storage.googleapis.com/newt-files/c14a17b9-53ca-46cb-a382-5fc283800cc2%2Fimage-6461.png" alt="image-6461.png"></p>
<p>今回はiphoneでGoogle Authenticatorというアプリを使用します。</p>
<p><img src="https://storage.googleapis.com/newt-files/d35b5a1a-089f-4b5c-a002-54bbbcb2a164%2Fimage-6415.png" alt="image-6415.png"></p>
<p>手元のiphoneで「Google Authenticator」を起動しておき、「QRコードの表示」をクリックしてQRコードを表示して、Google Authenticatorアプリの＋ボタンをタップして、「QRコードをスキャン」を選択して、表示されているQRコードをスキャンします。</p>
<p><img src="https://storage.googleapis.com/newt-files/15ff2572-9de5-4973-8f30-93d97fd2380a%2Fimage-5646.png" alt="image-5646.png"></p>
<p>スキャンすると「Google Authenticator」にMFAコードが表示されますのでこれを入力します。</p>
<p><img src="https://storage.googleapis.com/newt-files/1df4ea07-9694-4b45-9f32-ce6fcde6545a%2Fimage-65744.png" alt="image-65744.png"></p>
<p>しかし私はここで、入力欄にある文言の「連続する2つのMFAコードを以下に入力」のやり方がよくわかりませんでした。。。<br>
　Google Authenticatorにはコードは1つしか表示されていなかったからです。</p>
<p>結局どうすればうまくいったかというと…</p>
<p>Google Authenticatorに表示されているコードを「MFAコード1」の欄に入力し、30秒程待ってGoogle Authenticatorのコードが更新されたらそれを「MFAコード2」に入力。</p>
<p>これで「MFAの割り当て」をクリックすることでうまくいきました。</p>
<p><img src="https://storage.googleapis.com/newt-files/bdffe3a0-7a09-4134-8737-46cdfa2feb56%2Fimage-8644.png" alt="image-8644.png"></p>
<p>私の確認不足で何処かに明記されていたのかもしれませんが、この単純な手順がわからず無駄に悩んでしまいました。</p>
<p>以上です。</p>


AWSのIAMでMFAを設定しようとしたら「連続する2つのMFAコードを以下に入力」がわかりにくかったので備忘録

<p>クラウド上にあるPostgreSQLのデータベースをローカルにコピーしようと思い、ちょうどクラウドにもローカルにもpgAdmin4の接続が設定済みだったため、そのままpgAdmin4の機能でバックアップとリストアをしようと思ったら意外とハマったので備忘録としてまとめる。</p>
<h2>手順</h2>
<h3>バックアップ</h3>
<h4>1. pgAdmin4起動</h4>
<p>本記事でのpgAdminのversionは6.15です</p>
<h3>2. バックアップしたいデータベースを右クリックし「バックアップ」を選択</h3>
<p><img src="https://storage.googleapis.com/newt-files/0ebdfa4d-e3d6-49b7-8c16-e916c47344b0%2Fimage-9.png" alt="image-9.png"><br>
※テーブル単位でバックアップしたい場合はテーブルを右クリックします。</p>
<h3>3. バックアップのオプションを指定</h3>
<p>表示されたウィンドウで以下の設定でバックアップを行います。<br>
※以下特に明記しない項目はデフォルトのままです。</p>
<ul>
<li>ファイル名： ＜任意のファイル名＞.sql<br>
→拡張子は、以下の「形式」の項目で「平文」を選択するので.sqlにしてます。</li>
<li>形式： 平文<br>
→「リストアをsqlの実行で行いたい」＋「生のsqlを編集したりしたい場合がある」という理由で平文を選択しています。</li>
<li>エンコーディング： UTF8<br>
→これについては各々の環境に合わせて変更してください。<br>
<img src="https://storage.googleapis.com/newt-files/4de23f77-e3c7-4970-a178-26aa0f218f60%2Fimage-10.png" alt="image-10.png"></li>
</ul>
<p>次に「データ/オブジェクト」タブの「保存しない」のグループの</p>
<ul>
<li>「所有者」</li>
<li>「権限」</li>
</ul>
<p>の項目のみチェックをonにします。</p>
<p><img src="https://storage.googleapis.com/newt-files/a3dbca3b-8921-44de-b341-9fdc2ad09508%2Fimage-11.png" alt="image-11.png"></p>
<p>最後に「オプション」タブでは「INSERTコマンドを使用」をonにします。<br>
→onにするとバックアップで作成されるsql文でinsertコマンドを使用するようになります。<br>
　（以前insertを使用しないでバックアップしたら、リストアするときに構文エラーになってハマったことがあったので、私はこのような設定にしています）</p>
<p><img src="https://storage.googleapis.com/newt-files/3b342175-2f2f-4f7f-9579-0594b616745d%2Fimage-12.png" alt="image-12.png"></p>
<p>以上のようにオプションを指定したら、「バックアップ」ボタンをクリックします。</p>
<p>バックアップは以上です。</p>
<h2>リストア</h2>
<h3>前提</h3>
<p>本記事ではリストアはsqlの実行により行うので、リストア先となるデータベースとデータがある場合、先に古いデータベースを削除しておいてください。（テーブルの無い空のデータベースがあるだけならそのままでokです。）</p>
<p><img src="https://storage.googleapis.com/newt-files/40f04127-d59e-4003-8936-b49183081bb0%2Fimage-13.png" alt="image-13.png"></p>
<p>＜補足＞<br>
　データベースが接続中で削除できない場合に強制切断するには、クエリツール（対象のデータベースを右クリック &gt; クエリツール等で起動可能）で以下の内容を実行します。（実行は自己責任でお願いします）</p>
<p><img src="https://storage.googleapis.com/newt-files/2d74c90b-f0a5-4372-b9d7-cb1a5bbd1a8b%2Fimage-14.png" alt="image-14.png"></p>
<pre><code>select pg_terminate_backend(pid) from pg_stat_activity where datname = '＜任意のデータベース名＞';
</code></pre>
<h3>1. リストア先となる空のデータベースを作成する</h3>
<p>「データベース(n)」を右クリックして、「作成 &gt; データベース…」を選択します。<br>
　（※nは保有しているデータベースの数です）</p>
<p><img src="https://storage.googleapis.com/newt-files/b1fe7bb0-837c-4b24-8f75-e5ac3ebf7d16%2Fimage-15.png" alt="image-15.png"></p>
<p>表示されたウィンドウで「データベース」の項目に任意のデータベース名を入力して、「保存」ボタンをクリックしてデータベースを作成します。</p>
<p><img src="https://storage.googleapis.com/newt-files/e13d9b6e-bd96-48ac-8c4a-b5799ad58e32%2Fimage-17.png" alt="image-17.png"></p>
<h3>2. クエリツールでバックアップしておいたsqlを実行する</h3>
<p>作成した空のデータベースを右クリックしてクエリツールを起動します。</p>
<p><img src="https://storage.googleapis.com/newt-files/b9082b37-5a56-4d0c-98c8-c149808d79b3%2Fimage-19.png" alt="image-19.png"></p>
<p>「バックアップ」の工程で作成された〇〇.sqlファイルをテキストエディタで開くなどして、内容をクエリツールにコピペします。<br>
　コピペしたら、▶ボタンをクリックして実行します。<br>
（バックアップのsqlが実行できればクエリエディタでなくてもやり方は何でもokです）</p>
<p><img src="https://storage.googleapis.com/newt-files/c2174659-b492-4c14-819a-a9799256b5e5%2Fimage-20.png" alt="image-20.png"></p>
<p>以上でリストア完了です。</p>
<p>↓確認するとテーブルが作成されています。</p>
<p><img src="https://storage.googleapis.com/newt-files/f6cf4d04-8c37-4719-89f7-7028c3c24c00%2Fimage-21.png" alt="image-21.png"></p>
<p>以上です。</p>
<p>＜おまけ＞<br>
　sqlのようにテキスト量が多いファイルの中身を確認する場合は、個人的には「Notepad++」が軽量でおすすめです。（開発はもっぱらVSCodeですが）<br>
　デフォルトのエディタにしなくとも「右クリック &gt; Edit with Notepad++」で呼び出せるのも地味に便利です。</p>
<p><img src="https://storage.googleapis.com/newt-files/e20b3a89-d173-47b7-8d4d-5f747c827536%2Fimage-22.png" alt="image-22.png"></p>


【pgAdmin4/PostgreSQL】pgAdmin4でのPostgreSQLデータベースのバックアップとリストア手順まとめ【バックアップ/リストア】

<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>


Articles in 2022