<p>一つのPCで仕事用のアカウントや個人のアカウントを使う時に、SourceTreeで複数のアカウントをSSH接続する方法です。<br></p><h2 id="h2c5465d9e5">複数のキーを作る</h2><p><br>SourceTreeでSSH接続する方法はこちらを見てください。<br><a href="https://www.mismith.me/blog/web/sourcetree-ssh" target="_blank" rel="noopener noreferrer">SourcetreeのSSH keyを生成する機能を使ってGitHubにssh接続する</a><br><br>上のリンク先の方法で、2つのGitHubアカウントの秘密鍵と公開鍵を作ります。<br>2つ作ると <code>.ssh</code> ディレクトリ以下は以下ファイルがつくられます（鍵の名前は分かりやすくしてます）</p><pre><code>config
work-GitHub
work-GitHub.pub
private-GitHub
private-GitHub.pub
known_hosts</code></pre><p><br></p><h2 id="h5fd37332db">キーをそれぞれ登録</h2><p>上記URLのSSH接続方法の記事に書いてある通り、キーをGItHubに登録します。<br><a href="https://www.mismith.me/blog/web/sourcetree-ssh#h746b25a198" target="_blank" rel="noopener noreferrer">GitHubでキーを登録</a><br></p><h2 id="hadd448e40b">SSH接続</h2><p>SourceTreeでキーを生成すると自動でconfigを作ってくれてます。中身はこんな感じだと思います。</p><pre><code>
# --- Sourcetree Generated ---
Host work-GitHub
	HostName github.com
	User git
	PreferredAuthentications publickey
	IdentityFile /Users/username/.ssh/work-GitHub
	UseKeychain yes
	AddKeysToAgent yes
# ----------------------------


# --- Sourcetree Generated ---
Host private-GitHub
	HostName github.com
	User git
	PreferredAuthentications publickey
	IdentityFile /Users/username/.ssh/private-GitHub
	UseKeychain yes
	AddKeysToAgent yes
# ----------------------------</code></pre><p><br>コマンドでそれぞれssh接続します</p><pre><code>ssh -T git@work-GitHub
ssh -T git@private-GitHub</code></pre><p><br>以下が表示されればOKです。</p><pre><code>Hi {account名}! You've successfully authenticated, but GitHub does not provide shell access.</code></pre><p><br></p><h3 id="ha821819953">アカウント名がどちらも同じ場合</h3><p>おそらく最初に接続したアカウント名が表示され続けると思いますが、特に問題ないです。<br>主となるアカウントを切り替えたい場合は、一旦sshの登録を削除してから、再度ssh接続します。</p><pre><code>ssh-add -D

ssh -T git@work-GitHub
ssh -T git@private-GitHub</code></pre><p><br></p><h2 id="h193b7e8f9a">GitHubからクローン</h2><p>通常クローンするソースURLの一部を変更してクローンします。<br>上記の手順で主となるアカウントの場合は、変更しなくてもクローンできます。</p><pre><code>// 変更前
git@github.com:mismith0227/mismith.me.git

// 変更後
git@private-GitHub:mismith0227/mismith.me.git</code></pre><p><br></p><h3 id="h691cdab511">SourceTreeにすでにあるリポジトリの変更</h3><p>すでにリポジトリがある場合は、リポジトリを開き右側にある設定アイコンから設定を開き、「リモート」タブを開くとパスを変更できます。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/e45947ae462e4196893fc2d9a12c05fb/%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%202022-03-13%2010.12.42.png" alt="" width="1262" height="672"><br></p>

SourceTreeで複数のGitHubアカウントを設定しSSH接続する方法です。

SourceTreeで複数のGitHubアカウントを設定しSSH接続する

<p>スター数多いし、オプションがあって便利そうなので使ってみました。<br>このブログの目次スクロールで使ってるので、押してみてください。<br><br><a href="https://github.com/fisshy/react-scroll" target="_blank" rel="noopener noreferrer">https://github.com/fisshy/react-scroll</a><br></p><h2 id="h555364dd6c">ライブラリ追加</h2><p>TypeScriptを使ってる場合は型ファイルも追加します。</p><pre><code>yarn add react-scroll @types/react-scroll</code></pre><p><br></p><h2 id="h3984736af0">基本的な使い方</h2><p>importしてスクロール先にid、Linkにtoで指定するだけです。<br><code>smooth</code> を<code>true</code> にすることで、スクロールするようになります。</p><pre><code>import { Link } from 'react-scroll'

 &lt;section id="section1"&gt;セクション1&lt;/section&gt;

&lt;Link to="section1" smooth&gt;セクション1へ&lt;/Link&gt;</code></pre><p><br></p><h2 id="h32a67f9128">オプション</h2><p>GitHubに書かれてますが、よく使うものをピックアップしました。<br><a href="https://github.com/fisshy/react-scroll#propsoptions" target="_blank" rel="noopener noreferrer">https://github.com/fisshy/react-scroll#propsoptions</a><br><br><code>duration</code> でスクロールの速度を指定できます。デフォルト <code>500</code>  です。<br><code>offset</code> はスクロール位置を調整できます。<code>-100</code>  にするとターゲットの上に100px余裕ができます。</p><pre><code>&lt;Scroll to="section1" smooth={true} duration={400} offset={-100} onSetActive={}&gt;
    セクション1
&lt;/Scroll&gt;</code></pre><p><br></p><h3 id="h76fa592817">アクティブなidを取得する</h3><p>以下のオプションで現在の表示位置のidを取得できます。<br>メニューをクリックでスクロールしたり、ブラウザのスクロールをすると、consoleに現在表示されてるidが表示されるはずです。<br>以下のコードはconsoleに出してるだけですが、setStateと組み合わせると現在位置のメニューをactive状態のスタイルにすることができます。</p><pre><code>&lt;Link
    to={item.id}
    smooth
    duration={400}
    onSetActive={(to) =&gt; console.log(to)}  // 追加
    spy={true}  // 追加
&gt;
    {item.text}
&lt;/Link&gt;</code></pre><p><br></p>

react-scrollでリンクをクリックすると画面内スクロールする機能を実装します

react-scrollで画面内スクロールを実装する

<p>Webpack Bundle AnalyzerをNext.jsで使えるようにした、<code>@next/bundle-analyzer</code> <span style="color:#000000"> を使ってバンドルサイズを計測してみます。</span><br><br><a href="https://www.npmjs.com/package/@next/bundle-analyzer" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/@next/bundle-analyzer</a><br></p><h2 id="hd8d793506b">インストール</h2><p><span style="color:#000000"> </span><code>@next/bundle-analyzer</code> <span style="color:#000000"> を追加します。</span></p><pre><code>yarn add @next/bundle-analyzer</code></pre><p><br></p><h2 id="h97ff70ca9c">next.config.js</h2><p>next.config.jsを以下のように書きます。</p><pre><code>const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});

const config = {
    // 省略
};

module.exports = withBundleAnalyzer(config);</code></pre><p><br></p><h2 id="h010248e8b0">package.json</h2><p><code>ANALYZE=true next build</code>  で実行できますが、scriptに書いておきます。</p><pre><code>"scripts": {
    "analyze": "ANALYZE=true next build" // 追記
},</code></pre><p><br></p><h2 id="h58192cbbbf">計測する</h2><p>以下のコマンドを打ちます</p><pre><code>yarn analyze</code></pre><p><br>しばらくすると <code>client.html</code> <span style="color:#111827"> と </span><code>server.html</code>  が作られてブラウザで開きます。<br>これは <code>client.html</code>  の方です。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/afe4f7a304c94315833567c963fd697a/%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%202022-02-26%207.37.31.png" alt="" width="2682" height="1384"><br><br>何のサイズが大きいかを視覚的に見れるのがいいですね。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>現状は特にネックになってることはないですが、今後問題が出てきたときに、分析して解消してみようと思います。</p>

Next.js + Webpack Bundle AnalyzerでJSのバンドルサイズを計測して可視化する方法です。

Next.jsでバンドルサイズを分析し高速化につなげる

<p>next-pwaを使ってPWA対応することで、ホーム画面に追加できるようにしたり、オフライン対応をやってみます<br></p><h2 id="hb9839ad71f">ライブラリ</h2><p><code>next-pwa</code>  を使います。</p><pre><code>yarn add next-pwa</code></pre><p><br></p><h2 id="h97ff70ca9c">next.config.js</h2><p>next.config.jsを以下のように書きます。</p><pre><code>const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

/** @type {import('next').NextConfig} */

const config = {
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  reactStrictMode: true,
}


module.exports = withPWA(config)</code></pre><p><br></p><h2 id="hf66acd8140">manifest.webmanifest (manifest.json)を作る</h2><p>manifestはジェネレーターを使うと簡単に作れます。<br>こちらのサイトで作りました。アイコン用に<span style="color:#333333">512x512の画像が必要です。</span><br><a href="https://www.simicart.com/manifest-generator.html/" target="_blank" rel="noopener noreferrer">https://www.simicart.com/manifest-generator.html/</a><br><br>書き出された <code>manifest.webmanifest</code> を見ると以下のようになっています。</p><pre><code>{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "test",
    "short_name": "test",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}</code></pre><p><br>ただ、これだと後にLighthouseでPWAのチェックをするときに、maskableアイコンで引っかかるので追記しておきます。</p><pre><code>{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "test",
    "short_name": "test",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "./icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ]
}</code></pre><p><br></p><h2 id="h9d0f3377f8">Headに追記</h2><p>headタグに以下の3つを追記します。<code>theme-color</code>  や <code>apple-touch-icon</code>  も書かないとLighthouseのチェックで怒られます。</p><pre><code>&lt;meta name="theme-color" content="#f9a8d4" /&gt;
&lt;link rel="manifest" href="/manifest.webmanifest" /&gt;
&lt;link rel="apple-touch-icon" href="/icon-192x192.png" /&gt;</code></pre><p><br></p><h2 id="h79cd62f757">確認する</h2><p>以下のコマンドでビルドして、起動します。</p><pre><code>yarn build 
yarn start</code></pre><p><br>アドレスバーを見るとインストールボタンが表示されてると思います。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/90d3629a8cd74e46926dbc848f647899/%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%202022-02-20%2011.16.40.png" alt="" width="1346" height="78"><br><br>あとは、デベロッパーツールのネットワークタブからオフラインにしてリロードしてみても、ちゃんと表示されます。<br></p><h2 id="h1d28be3174">Lighthouseで確認</h2><p>デベロッパーツールのLighthouseを開き、計測をします。<br>PWAの結果をみて、特に問題がなければ以下のように表示されます。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/043022ad54cc4e82acaec0b588c6485d/%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%202022-02-20%2011.05.12.png" alt="" width="1084" height="796"><br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://dev.classmethod.jp/articles/next-js-pwa/" target="_blank" rel="noopener noreferrer">Next.js で作成した Web アプリを PWA 対応する</a></li><li><a href="https://qiita.com/NozomuTsuruta/items/8991707ff549b1552e78" target="_blank" rel="noopener noreferrer">Next.jsでサクッとPWA対応</a></li><li><a href="https://qiita.com/kojikanao/items/7f614bc2656d3dc2d894" target="_blank" rel="noopener noreferrer">Nextjs(next.js 9+)、15分位でPWAに対応するためにやること</a></li><li><a href="https://software.pitang1965.com/2021/06/27/manifest-doesnt-have-a-maskable-icon/" target="_blank" rel="noopener noreferrer">PWAの”Manifest doesn’t have a maskable icon”の解決</a></li></ul>

next-pwaを使ってPWA対応し、ホーム画面に追加できるようにしたり、オフライン対応をやってみます

next-pwaを使ってPWA対応する

<p>GitHubにssh接続するときに毎回調べてるので覚書として書いておきます。<br><br>コマンドを使ってSSH keyを生成して、GitHubとSourcetreeに設定する方法もありますが、Sourcetreeで生成する機能を使えばコマンドを使う必要ないので楽です。<br>今回はそのSourcetreeを使う方法でやっていきます。<br></p><h2 id="hf611f32d3f">SSH キーの生成</h2><p>Sourcetreeを起動したら、「設定」→「アカウント」を開きます。<br>「追加」ボタンを押して、ホストで「GitHub」を選択します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/8405ffa7ed4944ae8e1f7dade3dcdebb/%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%202022-02-13%2010.36.03.png" alt="" width="1358" height="898"><br><br>「アカウントを接続」を押すと、ブラウザが開きGitHubにログインしていれば、自動的にユーザーとリンクしてくれます。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/cff2fe5014ff41d185b54d3dc5f7ba9f/%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%202022-02-13%2010.37.12.png" alt="" width="1342" height="884"><br><br>キーがないので、「キーを生成」を押します。パスワードを聞かれるので、任意のパスワードを設定してください。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/c9e8701565a54dac9ec6130ba8ca401d/%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%202022-02-13%2010.37.49.png" alt="" width="1352" height="888"><br><br>作成を押すと、必要なpublic keyとprivate key、configを生成してくれます。<br>クリップボードにコピーを押すと、public keyをコピーしてくれます。<br>保存して、アカウントを登録しておきましょう。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/172a0d7692de445da512db93bcb3756d/%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%202022-02-13%2010.38.11.png" alt="" width="1348" height="892"><br></p><h3 id="h3ec43765ff">キーを確認したい</h3><p>以下のコマンドで生成されたキーがあるかを確認できます</p><pre><code>// .sshへ移動
cd ~/.ssh
// ファイルを確認
ls</code></pre><p><br></p><h2 id="h746b25a198">GitHubでキーを登録</h2><p>GitHubの「設定」→「SSH &amp; GPG keys」のページで「New SSH key」ボタンを押す。<br>Titleはわかりやすいタイトルを、keyにクリップボードにコピーしているpublic keyを貼り付け、「Add SSH key」を押します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/2ce41fbbfde64949b3e2332a97164fb0/%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%202022-02-13%2010.48.38.png" alt="" width="1622" height="880"><br><br>これでGitHubでの作業は完了です。<br></p><h2 id="h3cfdc86e1c">接続確認</h2><p>以下のコマンドを打ちます。</p><pre><code>ssh -T git@github.com</code></pre><p><br>以下のように表示されればOKです。</p><pre><code>Hi {account名}! You've successfully authenticated, but GitHub does not provide shell access.</code></pre><p><br></p><h3 id="he4f1f618fe">Permission deniedと言われる時</h3><p>以下のコマンドでssh keyを登録します</p><pre><code>ssh-add ~/.ssh/{秘密鍵}</code></pre><p><br><code>-K</code>  をつけると再起動しても毎回言われなくなります。</p><pre><code>ssh-add -K ~/.ssh/{秘密鍵}</code></pre>

SroucetreeのSSH keyを生成する機能を使って、コマンドを使わずキーを生成してGitHubにssh接続する方法です。

SourcetreeのSSH keyを生成する機能を使ってGitHubにssh接続する

<p>Node.jsのバージョン管理に<code>n</code> いいよとは聞いてたものの、惰性で<code>nodebrew</code> を使ってましたが、<code>n</code>  に切り替えました。<br><br><a href="https://github.com/tj/n" target="_blank" rel="noopener noreferrer">tj / n</a><br><br>明確に何がいいのかと聞かれると分からないですが、nodebrewと違ってバージョン変更をインタラクティブにできるのはめっちゃ楽です。<br><code>n</code> とコマンドを打ったらインストールしてるNode.jsのバージョンが表示されて、上下で選択すれば切り替えれます。</p><pre><code>&nbsp; &nbsp; node/14.18.0
&nbsp; ο node/16.13.2

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit</code></pre><p><br></p><h2 id="hd67db42127">nodebrewの削除</h2><p>まずは以下のコマンドを打ってnodebrewを削除します</p><pre><code>brew uninstall nodebrew</code></pre><p><br>完了したら以下で消えてるか確認しますが、なんかいろいろ表示されたので、まだ残ってるみたいです。</p><pre><code>nodebrew -v</code></pre><p><br>以下で場所を確認する</p><pre><code>// 場所確認
which nodebrew

// 以下のように表示。adminは自身のPCによります
/Users/admin/.nodebrew/current/bin/nodebrew</code></pre><p><br>以下のコマンドで削除</p><pre><code>rm -R /Users/admin/.nodebrew</code></pre><p><br>これで <code>nodebrew -v</code>  で再確認すると消えてるはずです。<br><code>~/.bashrc</code> や <code>~/.bash_profile</code> 、<code>~/.zshrc</code> にnodebrewのpathを書いてると思うので、それも削除しておきます。</p><pre><code>export PATH=$HOME/.nodebrew/current/bin:$PATH</code></pre><p><br>自分は <code>~/.bash_profile</code>  に書いてましたが、catalinaからデフォルトシェルがbashからzshに変わったそうなので、以下の <code>n</code> の設定ではzshを使います。<br>zsh使わないと <code>n zsh: command not found: node</code>  とか言われます。<br></p><h2 id="h2d565a4e6d">nのインストール</h2><p>以下のコマンドで追加します</p><pre><code>brew install n</code></pre><p><br>終わったら以下のコマンドで <code>n</code> が入ってるか確認</p><pre><code>n --version</code></pre><p><br></p><h3 id="hfbc549b9f6">パスを通す</h3><p><code>.zshrc</code> に以下を書きます。</p><pre><code>export N_PREFIX=$HOME/.n
export PATH=$N_PREFIX/bin:$PATH</code></pre><p><br>以下のコマンドを打ちます</p><pre><code>source ~/.zshrc</code></pre><p><br>これで準備OKです。<br></p><h2 id="h55ffaaa359">Node.js</h2><h3 id="hd8d793506b">インストール</h3><p>以下のコマンドでNode.jsをインストールします</p><pre><code>// 最新版
n latest

// 安定板
n stable

// バージョン指定
n 14.18.0</code></pre><p><br></p><h3 id="he0c1a9d11e">バージョン切り替え</h3><p><code>n</code> と打って上下キーで選択するだけです。</p><pre><code>n
&nbsp; &nbsp; node/14.18.0
&nbsp; ο node/16.13.2

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit</code></pre><p><br></p><h3 id="hbd710e8e21">インストールされてるバージョン確認</h3><p><code>list</code>  コマンド</p><pre><code>n list</code></pre><p><br></p><h3 id="h419eb04cda">削除</h3><p> <code>n</code>  と打った時にメッセージに書かれてる通り上下でバージョンを選び、enterではなく<code>d</code> を押すと消すことができます。</p><pre><code>n
&nbsp; &nbsp; node/14.18.0
&nbsp; ο node/16.13.2

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit</code></pre><p><br>もしくはコマンドもあります。</p><pre><code>n rm 14.18.0</code></pre><p><br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://github.com/tj/n" target="_blank" rel="noopener noreferrer">n</a></li><li><a href="https://mgnknowledge.shiesowa.com/lesson/install-node-js/" target="_blank" rel="noopener noreferrer">Node.jsのバージョン管理ツール n のインストール</a></li><li><a href="https://tanarizm.com/command-not-found-npm" target="_blank" rel="noopener noreferrer">【Mac】zsh: command not found: npm でコマンドが通らない時の対処法</a></li></ul>

Node.jsのバージョン管理にnodebrewを使ってましたが、nに移行しました

Node.jsのバージョン管理をnodebrewからnに移行する

<p>microCMSで書いた記事のHeadingタグから目次を生成する方法です。<br></p><h2 id="h555364dd6c">ライブラリ追加</h2><p>HTMLをパースする <code>jsdom</code>  を追加します。</p><pre><code>yarn add jsdom @types/jsdom</code></pre><p><br></p><h2 id="hb5c2ab504c">目次データを作る</h2><p>記事を生成する <code>getStaticProps</code> で以下のように書きます。<br>必要な部分だけ書き出しています。</p><pre><code>import { JSDOM } from 'jsdom'

type Toc = {
  text: string | null
  id: string
  name: string
}

export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
&nbsp; const { params, previewData } = context
&nbsp; if (!params?.category || !params?.id) {
&nbsp; &nbsp; throw new Error('Error: ID not found')
&nbsp; }

&nbsp; try {
&nbsp; &nbsp; const id = toStringId(params.id)
&nbsp; &nbsp; const data = await client.get({
&nbsp; &nbsp; &nbsp; endpoint: 'blog',
&nbsp; &nbsp; &nbsp; contentId: id,
&nbsp; &nbsp; })


&nbsp; &nbsp; const dom = new JSDOM(data.content)
&nbsp; &nbsp; const toc: Toc[] = []
&nbsp; &nbsp; dom.window.document
&nbsp; &nbsp; &nbsp; .querySelectorAll('h1, h2, h3, h4, h5, h6')
&nbsp; &nbsp; &nbsp; .forEach((heading) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; toc.push({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: heading.id,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: heading.tagName,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: heading.textContent,
&nbsp; &nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; })

&nbsp; &nbsp; const category = await client.get({
&nbsp; &nbsp; &nbsp; endpoint: 'blog-category',
&nbsp; &nbsp; })

&nbsp; &nbsp; return {
&nbsp; &nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; &nbsp; blog: data,
&nbsp; &nbsp; &nbsp; &nbsp; toc: toc,
&nbsp; &nbsp; &nbsp; &nbsp; category: category.contents,
&nbsp; &nbsp; &nbsp; &nbsp; currentCategory: toStringId(params.category),
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; }
&nbsp; } catch (e) {
&nbsp; &nbsp; return { notFound: true }
&nbsp; }
}</code></pre><p><br></p><h2 id="h9ff8ab2267">目次コンポーネントを作る</h2><p>目次データで配列が作られたのであとはそれを表示させればOKです。<br>本当は1~6のレベルで入れ子にできたらいいんですけど、面倒なので階層なしのリストにしました。<br>以下は例です。</p><pre><code>export const Toc = ({ className, items }: Props) =&gt; {
  return (
    &lt;Details className={className} open&gt;
      &lt;Summary&gt;目次&lt;/Summary&gt;
      &lt;List className={className}&gt;
        {items.map((item, index) =&gt; (
          &lt;Item key={`${item.id}-${index}`} name={item.name}&gt;
            &lt;Link href={`#${item.id}`}&gt;{item.text}&lt;/Link&gt;
          &lt;/Item&gt;
        ))}
      &lt;/List&gt;
    &lt;/Details&gt;
  )
}</code></pre><p><br>開閉できるようにSummary要素を使ってみました。<br>今回はページ内スクロールは実装していませんが、目次クリックでスクロールして欲しい場合は、<code>react-scroll</code> というライブラリを使うといいみたいです。<br><a href="https://www.npmjs.com/package/react-scroll" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/react-scroll</a><br></p><h2 id="h335a87b5ef">参考サイト</h2><p>以下の記事にあるGitHubリポジトリを参考にしました。<br><a href="https://zenn.dev/wattanx/articles/d45d5627ffef54" target="_blank" rel="noopener noreferrer">microCMSブログのNext.js版を作成した</a></p>

Next.jsとmicroCMSで記事中のheadingタグから目次を生成する方法です。

Next.js × microCMSで目次をつくる

<p>記事のソースコードにシンタックスハイライトで、コードに色付けして見やすくします。<br></p><h2 id="h555364dd6c">ライブラリ追加</h2><p>HTMLをパースする <code>jsdom</code> とハイライトする <code>highlight.js</code> を追加します。</p><pre><code>yarn add jsdom @types/jsdom highlight.js</code></pre><p><br></p><h2 id="h847f0b7c3b">ハイライトのためのclass追加</h2><p><code>jsdom</code>  と <code>highlight.js</code> を使って、コードに色付けするためにclassを追加します。<br>以下記事詳細ページにて <code>getStaticProps</code> の必要な部分だけ書き出したコードです。</p><pre><code>import hljs from 'highlight.js'
import { JSDOM } from 'jsdom'

export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
    })


    const dom = new JSDOM(data.content)

    dom.window.document.querySelectorAll('pre code').forEach((element) =&gt; {
      element.innerHTML = hljs.highlightAuto(element.textContent ?? '').value
      element.classList.add('hljs')
    })

    const body = dom.window.document.body.innerHTML

    const category = await client.get({
      endpoint: 'blog-category',
    })

    return {
      props: {
        blog: data,
        body: body,
        category: category.contents,
        currentCategory: toStringId(params.category),
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}</code></pre><p><br></p><h2 id="hcd797b61f4">Highlight.jsのテーマを読み込む</h2><p>テーマが用意されてるので、好みのスタイルを読み込みます。<br>デモページがあるので、好きなテーマを探しましょう。<br><a href="https://highlightjs.org/static/demo/" target="_blank" rel="noopener noreferrer">https://highlightjs.org/static/demo/</a><br><br>このブログでは <code>Stack Overflow Light</code> というテーマを使ってます。<br>記事詳細のコンポーネントで以下のように読み込めばOKです。</p><pre><code>import 'highlight.js/styles/stackoverflow-light.css'</code></pre><p><br></p><h2 id="h335a87b5ef">参考サイト</h2><p>以下の記事にあるGItHubリポジトリを参考にしました。<br><a href="https://zenn.dev/wattanx/articles/d45d5627ffef54" target="_blank" rel="noopener noreferrer">microCMSブログのNext.js版を作成した</a></p>

ソースコードにシンタックスハイライトを導入して見やすくしてみます。

Next.js × microCMSでシンタックスハイライトをつける

<p>記事中にある <code>img</code> タグに <code>loading="lazy"</code> 属性を付けて、画像を遅延読み込みするようにします。<br></p><h2 id="h555364dd6c">ライブラリ追加</h2><p><code>jsdom</code>  というライブラリを使います。<code>jsdom</code>  はHTMLパーサにDOM APIを追加したものらしい。類似のライブラリで <code>cheerio</code>  というものがあり、最初はこっちを使ってましたが、jQueryっぽい書き方が馴染まなかったりして、<code>jsdom</code> を使うことにしました。</p><pre><code>yarn add jsdom @types/jsdom</code></pre><p><br></p><h2 id="h0d74b591d5">imgタグにloading属性をつける</h2><p>記事詳細ページの <code>getStaticProps</code> で以下のように書きます。必要な部分だけ抜き出しています。<br><code>jsdom</code> で <code>img</code> タグを取得し、それらに対して <code>loading</code> 属性を追加するようにしています。</p><pre><code>import { JSDOM } from 'jsdom'

export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
    })
    
    // この辺り追加
    const dom = new JSDOM(data.content)

    dom.window.document.querySelectorAll('img').forEach((element) =&gt; {
      element.setAttribute('loading', 'lazy')
    })
    const body = dom.window.document.body.innerHTML

    const category = await client.get({
      endpoint: 'blog-category',
    })

    return {
      props: {
        blog: data,
        body: body,
        category: category.contents,
        currentCategory: toStringId(params.category),
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}</code></pre><p><br>簡単ですが、これで記事の画像を遅延読み込みできるようになりました。<br></p><h2 id="h335a87b5ef">参考サイト</h2><p>こちらの方の記事にあるGitHubのコードを参考にしました。<br><a href="https://zenn.dev/wattanx/articles/d45d5627ffef54" target="_blank" rel="noopener noreferrer">microCMSブログのNext.js版を作成した</a></p>

microCMSで書いた記事中あるimgタグにloading="lazy"を付けて遅延読み込みさせる方法です。

Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける

<p>Firestoreでデータを追加読み込みする時に、無限スクロールにするためにreact-infinite-scrollerというライブラリを使ってみました。<br><a href="https://github.com/danbovey/react-infinite-scroller" target="_blank" rel="noopener noreferrer">https://github.com/danbovey/react-infinite-scroller</a><br><br>react-infinite-scroll-componentというライブラリもあるようですが、react-infinite-scrollerの方がGithubスターの数が多いので、今回はreact-infinite-scrollerを選びました。<br><a href="https://github.com/ankeetmaini/react-infinite-scroll-component" target="_blank" rel="noopener noreferrer">https://github.com/ankeetmaini/react-infinite-scroll-component</a><br></p><h2 id="hd8d793506b">インストール</h2><p>パッケージを追加します</p><pre><code>yarn add react-infinite-scroller</code></pre><p><br></p><h2 id="h3984736af0">基本的な使い方</h2><p>リストをInfiniteScrollコンポーネントで囲うだけです。スクロールしてリストの最後に差し掛かる時にloadmoreの関数が発火します。</p><pre><code>import InfiniteScroll&nbsp;from "react-infinite-scroller"

// 省略

&lt;InfiniteScroll
&nbsp; loadMore={loadMore}
&nbsp; hasMore={true}&nbsp;
&nbsp; loader={&lt;div key={0}&gt;loading&lt;/div&gt;}
&gt;
&nbsp;&nbsp;  &lt;ul&gt;
      {list.map((value) =&gt; &lt;li&gt;{value}&lt;/li&gt;)}
&nbsp;&nbsp;&nbsp;  &lt;/ul&gt;
&lt;/InfiniteScroll&gt;</code></pre><p><br></p><h2 id="h0b0fb9c990">Firestoreで追加読み込み</h2><p><br>Firestoreではoffsetがないので、追加読み込み時はtimestampを使って読み込みした最後のリスト移行から追加読み込みするようにします。<br></p><h3 id="h466509ec71">やること</h3><p><br>例えば15件ずつ取得する時にやることをざっと書き出すと...<br></p><ol><li>まずは普通に15件取得</li><li>取得した15件のリストの最後のtimestampをstateに保存</li><li>全てのリストのうち最後の1件のidを取得しておく（追加読み込みするかどうかを判定するため）</li><li>react-infinite-scrollerでloadmoreが発火</li><li>2で保存したtimestampの次のリストから15件を取得する（startAfterを使う）</li><li>現在のリストと5で取得したリストを結合</li><li>上記を繰り返す</li><li>リストの最後のidと3で取得したidが合致する場合は、これ以上ないと判断し追加読み込みはしない</li></ol><p><br></p><h3 id="h59f744c0be">実際のコード</h3><p>いろいろ省略して雑ですがこんな感じです</p><pre><code>const [lastDate, setLastDate] = useState(null)
const [todoList, setTodoList] = useState&lt;TodoListItem[]&gt;([])

useEffect(() =&gt; {
&nbsp;&nbsp;getLast()
&nbsp;&nbsp;getTodos()
}, [])

// 最後のidを取得
const getLast = async () =&gt; {
  const res = await getDocs(
    query(
      collection(db, 'users', uid, 'todos'),
      orderBy('createdAt', 'asc')
      .limit(1)
    )
  )

&nbsp;&nbsp;setOldestId(res.docs[0].id)
}

// リスト取得
const getTodos = async () =&gt; {
  let fetchTodos = await getDocs(
    query(
      collection(db, 'users', uid, 'todos'),
      orderBy('createdAt', 'desc')
    )
  )

&nbsp; // lastDateがある場合は初回読み込みではないと判断しstartAfterで追加読み込みする
&nbsp; if (lastDate) {
&nbsp;   // リストの最後のidと全てのリストの最後のidが同じ場合は追加読み込みしない
&nbsp;&nbsp;  if (oldestId === todoList[todoList.length - 1].id) {
&nbsp;&nbsp;&nbsp;   return
&nbsp;   }
&nbsp;&nbsp;  fetchTodos = fetchTodos.startAfter(lastDate)
&nbsp; }

&nbsp; const res = await fetchTodos.limit(15).get()

&nbsp;const todos: TodoListItem[] = res.docs.reduce(
&nbsp;  (acc: any, doc: any) =&gt; [
&nbsp;&nbsp;&nbsp;  ...acc,
&nbsp;&nbsp;&nbsp;  {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  id: doc.id,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  text: doc.data().text,
&nbsp;&nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;todoList
&nbsp;&nbsp;)
&nbsp;&nbsp;// リストのstateに生成したリストを追加
&nbsp;&nbsp;setTodoList(todos)
&nbsp;&nbsp;
  // 新しく取得したリストのうち最後のtimestampを保存
&nbsp;&nbsp;setLastDate(res.docs[res.docs.length - 1].data().createdAt)
&nbsp;&nbsp;setIsLoading(false)
}

&lt;InfiniteScroll
&nbsp; loadMore={getTodos}
&nbsp; hasMore={oldestId !== todoList[todoList.length - 1].id}
&gt;
&nbsp; &lt;Timeline className={styles.styledTimeline}&gt;
&nbsp;&nbsp;  {todoList.map((item) =&gt; {
&nbsp;&nbsp;&nbsp;   return (
&nbsp;&nbsp;&nbsp;&nbsp;    &lt;Timeline.Item key={item.id}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     &lt;div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      {item.text}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;    &lt;/Timeline.Item&gt;
&nbsp;&nbsp;&nbsp;   )
&nbsp;&nbsp;  })}
&nbsp; &lt;/Timeline&gt;
&lt;/InfiniteScroll&gt;</code></pre><p><br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://oswdiary.net/archives/6121" target="_blank" rel="noopener noreferrer">https://oswdiary.net/archives/6121</a></li><li><a href="https://zenn.dev/syu/articles/1aeebcf13172d1" target="_blank" rel="noopener noreferrer">https://zenn.dev/syu/articles/1aeebcf13172d1</a></li></ul>

Firestoreのデータの追加読み込みをreact-infinite-scrollerで無限スクロールにする方法です。

BlogCategory: web

SourceTreeで複数のGitHubアカウントを設定しSSH接続する

react-scrollで画面内スクロールを実装する

Next.jsでバンドルサイズを分析し高速化につなげる

next-pwaを使ってPWA対応する

SourcetreeのSSH keyを生成する機能を使ってGitHubにssh接続する

Node.jsのバージョン管理をnodebrewからnに移行する

Next.js × microCMSで目次をつくる

Next.js × microCMSでシンタックスハイライトをつける

Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける

react-infinite-scrollerを使ってFirestoreで無限スクロールを実装する

Category

Blog.css-a4b7kp{display:inline-block;margin-left:24px;font-size:18px;}@media (max-width: 37.5em){.css-a4b7kp{display:block;margin-left:8px;font-size:16px;}}Category: web

SourceTreeで複数のGitHubアカウントを設定しSSH接続する

react-scrollで画面内スクロールを実装する

Next.jsでバンドルサイズを分析し高速化につなげる

next-pwaを使ってPWA対応する

SourcetreeのSSH keyを生成する機能を使ってGitHubにssh接続する

Node.jsのバージョン管理をnodebrewからnに移行する

Next.js × microCMSで目次をつくる

Next.js × microCMSでシンタックスハイライトをつける

Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける

react-infinite-scrollerを使ってFirestoreで無限スクロールを実装する

Category

BlogCategory: web