<p>いろいろとWordPressの開発環境ありますが、最近は何が流行ってるのかを調べてみました。<br></p><h2 id="hcf6f22595d">Local</h2><p><a href="https://localwp.com/" target="_blank" rel="noopener noreferrer">https://localwp.com/</a><br>最近といいつつ2016年~2017年ごろには名前を聞いていたDockerベースのGUIツール。当初はMacだけでした。<br>GUIツールなので、エンジニアじゃなくても使いやすいのがメリット。一方でコマンド操作（wp-cli）も使えるので、エンジニアにももちろん便利なツール。<br>すごく便利だけど、すごく検索しづらいのが最悪。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/7dead8ea9b1e4163a838a3825ae87bdb/%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%202021-12-20%2022.41.08.png" alt="" width="2626" height="1468"><br><br>Live Linkボタンを押すと、URLを発行して、ローカル環境を他の人に共有できる（しばらくすると切断されたり、実用性は低いみたいだけど）。</p><h3 id="h322dc8a0ba">アカウント作成</h3><p>まずはアカウントを作成して、アプリをダウンロードします。無料なので気軽に作りましょう。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/08feea26124b4673a87d9c3d680097c0/%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%202021-12-20%2022.44.56.png" alt="" width="1200" height="800"></p><h3 id="h784256bfb6"><br>アプリを起動し、サイトを作る</h3><p>アプリをダウンロードし、アプリを起動すると以下の画面になります。<br>「Create A New Site」をクリックし、サイトを作り始めましょう。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/730c2255d97340cc914225f710940eb6/%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%202021-12-20%2022.50.31.png" alt="" width="1197" height="796"></p><h3 id="he54da8d259"><br>サイト名やディレクトリ設定</h3><p>まずはサイト名やファイルを生成するディレクトリを指定します。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/cc7d3ff6c66543a99e02b0350c048057/%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%202021-12-20%2022.51.17.png" alt="" width="1196" height="792"></p><h3 id="h2ebc87d55e"><br>PHPやデータベースの環境設定</h3><p>次のPHPやMySQLのバージョンを選択したり、web serverの種類を選択します。<br>特に指定やこだわりがなければデフォルトでいいでしょう。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/79be4b97e0864edcb4fa8bdb2b189c1a/%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%202021-12-20%2022.51.40.png" alt="" width="1194" height="795"></p><h3 id="hb182ddbc93"><br>ID、パスワードの設定</h3><p>最後にログインするためのIDやパスワードを設定します。<br>ローカルなのでID・パスワードは適当です<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/80597fac998646409c61aaffe3186b9b/%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%202021-12-20%2022.52.16.png" alt="" width="1193" height="795"></p><h3 id="hac46f0c1e2"><br>ローカル環境完成</h3><p>しばらく時間かかりますが、ローカル環境が完成すると、以下の画面になります。<br>デフォルトでローカル環境が立ち上がってるので、右上の「OPEN SITE」をクリック。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/569fdbcf5caa4757a3f06442596481ce/%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%202021-12-20%2023.02.44.png" alt="" width="1195" height="794"></p><h3 id="h3b73831ab0"><br>テストサイト</h3><p>無事テストサイトが完成しています。<br>先程の画面の「OPEN SITE」の隣にある「ADMIN」をクリックすると管理画面へアクセスできます。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/d5901f2f69e74769a7d4a9fbba7b55be/%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%202021-12-20%2023.04.37.png" alt="" width="2370" height="1388"></p><h3 id="h5a94ee7ea6"><br>ファイル置き場</h3><p>デフォルトの設定から特に変更していなければ以下に <code>wp-config.php</code>  や <code>wp-content</code>  などのファイルがあります。<br><code>wp-content/themes</code>  にテーマファイルがあるので、ここでテーマ開発ができます。</p><pre><code>~/Local Sites/testsite/app/public</code></pre><p><br></p><h2 id="ha9f26399b0">wp-env</h2><p><a href="https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/#.wp-env.json" target="_blank" rel="noopener noreferrer">wp-env公式ドキュメント</a><br>WordPressが公式に発表した開発環境。2021年初め頃から使われ始めた？<br>Dockerベースで、Dockerとnpmが事前に必要です。npmは使える前提で進めます。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/da761d5762204bd3b0cca16c8c243460/%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%202021-12-20%2023.11.56.png" alt="" width="2112" height="1200"><br></p><h3 id="h7a9ef58e99">Dockerを入手</h3><p>以下のサイトからDockerを入手しましょう。Docker Desktopでいいと思います。<br><a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">https://www.docker.com/</a><br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/f953ac99b0924d2194545a44fc4b7a10/%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%202021-12-20%2023.16.01.png" alt="" width="2604" height="1372"><br><br>DockerをインストールしてDockerアプリを開くとこんな画面になってると思います。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/8e8feb3cd4c0445d8e04b6c675c7a876/%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%202021-12-21%200.02.39.png" alt="" width="1266" height="715"></p><h3 id="h6143ae335a"><br>開発準備</h3><p>以下のコマンドで開発に必要な準備をします。</p><pre><code>// ディレクトリ作成
mkdir test-theme

// 移動
cd test-theme

// init 
yarn init -y</code></pre><h3 id="h5d60d48b31">wp-envを追加</h3><p>以下のコマンドでwp-envを追加します</p><pre><code>yarn add @wordpress/env -D</code></pre><h3 id="hc3c362ab18">scripts</h3><p>package.jsonのscriptsに以下を記述します。</p><pre><code>{
  "name": "test-theme",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "wp-env": "wp-env" // ここ追記
  },
  "devDependencies": {
    "@wordpress/env": "^4.1.3"
  }
}</code></pre><h3 id="h1d40932a6f">起動</h3><p>以下のコマンドで起動します。最初は時間かかります。</p><pre><code>yarn run wp-env start</code></pre><p>doneになったあと <code>localhost:8888</code>  にアクセスすると、ローカル環境のサイトが確認できます。<br>管理画面は <code>http://localhost:8888/wp-login.php</code>  です。id・パスワードは <code>admin / password</code>  です。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/96fe657041ab4de1ab613fee1b62d587/%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%202021-12-21%207.45.27.png" alt="" width="2114" height="1426"><br><br>逆にローカル環境を止めるときは以下のコマンドを打ちます</p><pre><code>yarn run wp-env stop</code></pre><h3 id="h2f3709f158">.wp-env.jsonの作成</h3><p>開発環境を立ち上げることはできましたが、ディレクトリにはまだ以下だけで、テーマの開発ができません。</p><pre><code>.
├── package.json
└── yarn.lock</code></pre><p><br>そこで.wp-env.jsonを作成し、themesにテーマを指定することで、管理画面からテーマを切り替えられるようになります。<br>また、プラグインはpluginsにurlを指定すると、追加してくれます。<br>その他のオプションは <a href="https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/#.wp-env.json" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>で。</p><pre><code>{
  "core": null,
  "themes": ["./"],
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
  ],
  "config": {
    "WP_DEBUG": true,
    "WP_DEBUG_LOG": true,
    "WP_POST_REVISIONS": false
  }
}</code></pre><p><br>2021年現在、デフォルトのテーマが <code>twentytwentyone</code>  なので、<code>twentyseventeen</code>  を追加して切り替えてみます。<br>以下からTwenty Seventeenをダウンロード、zipを解凍し、ディレクトリ直下に置きます。<br><a href="https://ja.wordpress.org/themes/twentyseventeen/" target="_blank" rel="noopener noreferrer">https://ja.wordpress.org/themes/twentyseventeen/</a></p><pre><code>.
├── package.json
└── yarn.lock
└── twentyseventeen
│&nbsp; &nbsp;├── style.css
│&nbsp; &nbsp;</code></pre><p><br>記述したら以下のコマンドを打ちアップデートします。</p><pre><code>yarn run wp-env start -update</code></pre><p><br>管理画面のテーマを見るとTwenty Seventeenが追加されているので、有効化すると切り替わります。<br><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/ffe4a19135354f35ae581c3bb8c58a0b/%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%202021-12-21%208.43.10.png" alt="" width="2640" height="1434"><br></p><h2 id="hd9ae6796b2">どの開発環境がいいか</h2><p>GUI派ならLocal、コマンド使えるならwp-envなど、やりやすい方法でいいと思います。<br>コマンド使えてもLocalは便利なので使ってもいいですし、Docker使えるならDockerで作ってもいいですし。<br><br>自分がやりやすい方法で快適に開発しましょう<br></p>

最近のWordPress開発環境を調べてみた

<p>IE非対応の案件で、「IEでも崩れないようにしてほしい」などと言われた時に、思わず非対応だから対応しないよと言葉通りの正論を言いたくなります。<br>それはエンジニア同士では通用するかもしれないですが、業種が違えば前提が違うので、納得して進行するためにもきちんと理由を伝えるようにするといいと思います。<br><br>結論からいうとIE非対応なのにIE対応をすることは、「<strong>対応する必要がないことを、開発側の裁量で対応した結果、品質を下げる</strong>」ことになります。<br>逆に言えばIE非対応の時に完全にIEを切って対応することで、<strong>パフォーマンス改善やセマンティックなコーディングなど品質が高いコード</strong>に繋がります。<br><strong>別にIE非対応にしたら開発が楽だからという理由だけで、やりたくないわけではありません。</strong><br><br>クライアントが言ってくるのは分かりますが、上記の理由からエンジニアから気を使って対応しないで欲しい思っています。<br></p><h2 id="h40056cbbdb">そもそも認識が違いそうなこと</h2><p>IEに完全に非対応で書くと、まず目に入るのはスタイル崩れです。そのためCSSを変えたらいいのではと思われるかもしれないです。<br>しかし、IEに対応するコードというのはCSSだけでなくHTMLやJavaScriptもあります。<br>また、「CSS（見た目）だけでもいいから」と言われたとしても、CSSとHTML or JavaScriptが関連して書かれているコードもあるため、CSSだけというわけにはいきません。<br>以下、その例です。</p><h2 id="he62c4a3811">簡単なHTMLとCSSの例</h2><p>子階層があるリストのこのようなレイアウト（実際にあったレイアウトです）。<br>ulの中に親リストが7つありますが、親リスト1と親リスト2には子階層のメニューがあります。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fembed%2Fpreview%2FNWaRBoN%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DNWaRBoN&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fpen%2FNWaRBoN&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br>これをIEを考慮する場合、Flexboxで並べると思うので、HTMLは以下のようになるはずです。もしくはulのなかにliを3つならべて、3つめのliに親リスト3以降のリストを入れる（どちらにしても意図した構造ではない）<br>本来一つのリストのはずなのに、二つのリストに分ける必要があります。</p><pre><code>&lt;div class="wrap"&gt;
  &lt;ul class="list"&gt;
    &lt;li&gt;
      親リスト1
      &lt;ul&gt;
        &lt;li&gt;子リスト1&lt;/li&gt;
        &lt;li&gt;子リスト2&lt;/li&gt;
        &lt;li&gt;子リスト3&lt;/li&gt;
        &lt;li&gt;子リスト4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      親リスト2
      &lt;ul&gt;
        &lt;li&gt;子リスト1&lt;/li&gt;
        &lt;li&gt;子リスト2&lt;/li&gt;
        &lt;li&gt;子リスト3&lt;/li&gt;
        &lt;li&gt;子リスト4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

  &lt;ul&gt;
    &lt;li&gt;親リスト3&lt;/li&gt;
    &lt;li&gt;親リスト4&lt;/li&gt;
    &lt;li&gt;親リスト5&lt;/li&gt;
    &lt;li&gt;親リスト6&lt;/li&gt;
    &lt;li&gt;親リスト7&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre><p>しかし、IE非対応のGrid Layoutを使うと以下のマークアップでサンプルのレイアウトが可能です。<br>サンプルのコードはGrid Layoutを使ってます。</p><pre><code>&lt;ul&gt;
  &lt;li&gt;
    親リスト1
    &lt;ul&gt;
      &lt;li&gt;子リスト1&lt;/li&gt;
      &lt;li&gt;子リスト2&lt;/li&gt;
      &lt;li&gt;子リスト3&lt;/li&gt;
      &lt;li&gt;子リスト4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    親リスト2
    &lt;ul&gt;
      &lt;li&gt;子リスト1&lt;/li&gt;
      &lt;li&gt;子リスト2&lt;/li&gt;
      &lt;li&gt;子リスト3&lt;/li&gt;
      &lt;li&gt;子リスト4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;親リスト3&lt;/li&gt;
  &lt;li&gt;親リスト4&lt;/li&gt;
  &lt;li&gt;親リスト5&lt;/li&gt;
  &lt;li&gt;親リスト6&lt;/li&gt;
  &lt;li&gt;親リスト7&lt;/li&gt;
&lt;/ul&gt;</code></pre><p>flexboxの方はCSSのためにHTMLの構造が決まってしまってますが、本来はHTMLの構造を決めた上でスタイリングしていくべきで、Gridを使うとそれが実現できる場面があります。<br>このようにIEに対応していない新しいコードを使うことで、本来あるべきセマンティックなコーディングも可能になります。<br>これはほんの一例ですが、このように見た目だからCSSじゃなく、HTMLやJavaScriptと関連がある実装はたくさんあります。</p><h2 id="h8254f149e2">IEを切ったらつかえるコード</h2><p>挙げたらきりがないので、web制作で実用性のあるものをピックアップしてます。</p><h3 id="hd0e9724409">HTML</h3><ul><li>pictureタグ<ul><li>CSSを使わずに、ブラウザサイズによって画像を切り替えることができる</li></ul></li><li>Details &amp; Summary<ul><li>HTMLだけで簡易的な開閉メニューが作れる</li></ul></li></ul><h3 id="h20b4c98e2a">CSS</h3><ul><li>grid<ul><li>グリッド状のレイアウト</li></ul></li><li>object-fit<ul><li>imgをbackground coverなどのように配置できる</li></ul></li><li>aspect-ratio<ul><li>要素の比率を指定できる。</li></ul></li><li>position: sticky</li></ul><h3 id="hc4defc135b">JavaScript関連</h3><ul><li>window.scrollTo<ul><li>いわゆるトップへ戻るなどの実装のコードを従来よりも簡略化できる</li><li><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo</a></li></ul></li><li>Resize Observer<ul><li>リサイズ時の要素のサイズを取得したりできる</li><li>MDNには実験的な機能といいつつIE以外では動く</li><li><a href="https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver</a></li></ul></li><li>Swiper JS<ul><li>高機能スライダープラグイン。ver5移行はIE非対応</li><li><a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a></li></ul></li></ul><h2 id="h1afe451c43">さいごに</h2><p>「Gridとか使いたいけど、使っていいか分からない」と聞くことありますが、それは案件の対応ブラウザを確認して、使えるなら使いましょう。対応ブラウザで動けば使っていいんです。<br>対応しなくていいブラウザに気を使ってコーディングするといつまでも新しいコードを使う機会が来ないので、積極的に使うことをおすすめします。</p>

IE非対応の案件で「IEでも崩れないようにしてほしい」などと言われた時に納得する理由を伝えようという話

IE非対応だけどIE対応してほしいと言われた時に伝えること

<p>以下の記事を参考にmicroCMSから情報を取得してサイトマップを生成してみました。<br><br><a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac" target="_blank" rel="noopener noreferrer">Next.jsで動的にXMLサイトマップを生成する</a><br></p><h2 id="hb98b91ffe2">sitemap.xml.tsxを作成</h2><p>sitemap.xml.tsxを作成し以下のように書きます。書き方は前回書いたRSSの生成と大枠は同じです。<br><a href="https://www.mismith.me/blog/web/nextjs-microcms-rss" target="_blank" rel="noopener noreferrer">Next.jsとmicroCMSで動的にRSSフィードを生成する</a><br><code>getAllContents</code>  については以下の記事を見てください。<br><a href="https://www.mismith.me/blog/web/microcms-get-all-contents" target="_blank" rel="noopener noreferrer">microCMSで全記事取得する</a></p><pre><code>import { GetServerSidePropsContext } from 'next'
import { getAllContents } from '@/libs/getAllContents'
import { Blog } from '@/types/Blog'

async function generateSitemapXml() {
  let xml = `&lt;?xml version="1.0" encoding="UTF-8"?&gt;`
  xml += `&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;`

  const posts = await getAllContents()

  posts.forEach((post: Blog) =&gt; {
    xml += `
      &lt;url&gt;
        &lt;loc&gt;https://〇〇〇〇〇〇.com/blog/${post.category.id}/${post.id}&lt;/loc&gt;
        &lt;lastmod&gt;${post.updatedAt}&lt;/lastmod&gt;
      &lt;/url&gt;
    `
  })

  xml += `&lt;/urlset&gt;`
  return xml
}

export const getServerSideProps = async ({
  res,
}: GetServerSidePropsContext) =&gt; {
  const xml = await generateSitemapXml()


  res.statusCode = 200
  res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
  res.setHeader('Content-Type', 'text/xml')
  res.end(xml)

  return {
    props: {},
  }
}

const Page = () =&gt; null
export default Page</code></pre><p><br></p><h2 id="h49d870d0e1">robots.txtを作る</h2><p>publicディレクトリ以下に <code>robots.txt</code> を作り以下のように書きます。<br>これでクローラーにサイトマップの場所を知らせることができます。</p><pre><code>Sitemap: https://〇〇〇〇〇〇.com/sitemap.xml
User-agent: *
Allow: /*
Disallow: /api/*</code></pre><p><br></p><h2 id="h8751aecef6">Google Search Consoleに登録する</h2><p>Google Search Consoleで生成されたサイトマップを登録します。ステータスは最初は取得できないかもしれないですが、しばらくすると成功します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/fb5de2f060b448b489a08c589c309501/%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%202021-12-19%2014.58.54.png" alt="" width="1820" height="606"><br></p><h2 id="h100a34fea5">サイトマップの知識</h2><p><br>見様見真似でサイトマップを実装してみましたが、サイトマップについて少し調べてみました。<br>全てではないですが、ポイントになりそうなところを書き出してます。<br></p><h3 id="hef15940d33">一貫性のあるURL</h3><p><code>www</code>  付きのURLの時は、<code>www</code>  を省略せずに書く。<br>また、相対パスで指定しない<br></p><h3 id="h7bc25ff57d">サイズの上限</h3><p>一つのサイトマップにつき、最大50,000件のURLを書き込める。<br>また、圧縮されていない状態で50MBまで。<br></p><h3 id="h7ace57614a">無視されるタグ</h3><p><code>priority</code>  と<code>changefreq</code> は無視されるため、指定不要です。</p><h3 id="heeca548bf5"><br>サイトマップ内の URL の順番</h3><p>上から順にインデックスするわけではないので、特に順番の指定はない<br></p><h3 id="h83fd28cbd3">lastmod</h3><p><code>lastmod</code> は、ページ最終更新日との比較できる場合に使うため、一貫している必要がある。<br></p><h3 id="hfd1608910c">サイトマップは必ずしも必要ではない</h3><p>サイトマップは以下のサイトでは作る必要はないそうです。</p><ul><li>500ページ以下の小規模なサイト</li><li>サイト内でリンクされている（直接URLを叩かないと開けないページではない）</li></ul><p><br>個人ブログではなくても問題なさそうです。<br></p><h3 id="h335a87b5ef">参考サイト</h3><ul><li><a href="https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ja" target="_blank" rel="noopener noreferrer">サイトマップについて - Google 検索セントラル -</a></li><li><a href="https://technical-seo.jp/generate-sitemap/" target="_blank" rel="noopener noreferrer">XMLサイトマップの作り方</a></li></ul>

Next.jsとmicroCMSで動的にサイトマップを生成して、Google Search Consoleに登録するまでをやってみました

Next.jsとmicroCMSで動的にサイトマップを生成する

<p>以下の記事を参考にmicroCMSからデータを取得しRSSフィードを生成してみました。<br><br><a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac" target="_blank" rel="noopener noreferrer">Next.jsで動的にRSSフィードを生成する</a><br></p><h2 id="h8aa52e1c36">必要なライブラリを追加</h2><p><code>rss</code>  というnpmライブラリを使います。TypeScriptで書いているので <code>@types/rss</code>  も追加します。</p><pre><code>yarn add rss @types/rss</code></pre><p><br></p><h2 id="h46cfcde323">feed.tsxを作成</h2><p>pages/feed.tsxを作成し、以下のように記述します。</p><pre><code>import RSS from 'rss'
import { GetServerSidePropsContext } from 'next'
import { client } from '@/libs/client'
import { Blog } from '@/types/Blog' // 必要に応じて作ってください

async function generateFeedXml() {
  const feed = new RSS({
    title: '〇〇のフィード',
    description: '〇〇のフィード',
    site_url: 'https://〇〇〇〇〇〇.com',
    feed_url: 'https://〇〇〇〇〇〇.com/feed',
    language: 'ja',
  })

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

  contents?.forEach((post: Blog) =&gt; {
    feed.item({
      title: post.title,
      description: post.description,
      date: new Date(post.createdAt),
      url: `https://〇〇〇〇〇〇.com/blog/${post.category.id}/${post.id}`, // 適宜修正してください
    })
  })

  return feed.xml()
}


export const getServerSideProps = async ({
  res,
}: GetServerSidePropsContext) =&gt; {
  const xml = await generateFeedXml()

  res.statusCode = 200
  res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
  res.setHeader('Content-Type', 'text/xml')
  res.end(xml)

  return {
    props: {},
  }
}

const Page = () =&gt; null
export default Page</code></pre><p><br>これで <code>自分のサイトURL/feed</code>  にRSSフィードが生成されます。<br><br>参考までにこのサイトのRSSは以下のようになってます<br>https://www.mismith.me/feed</p>

Next.jsとmicroCMSで動的にRSSフィードを生成する

<p>Firebaseでユーザー削除するのも簡単だろうと思ってたら、ユーザー削除する時に再認証させたり、ユーザーに関するデータを削除するにはCloud Functionsで再帰的に処理を書く必要があり面倒さがありましたが、拡張機能が追加されたことでめっちゃ楽になってました。<br><br>前提としてFunctionsや拡張機能を使うので、Blazeプランで行います。<br></p><h2 id="h046876a126">手順</h2><ol><li>ユーザー削除処理がされたら、<code>uid</code>  をFirestoreに <code>deleted_users/{uid}</code>  で登録</li><li>Cloud Functionsで <code>deleted_users</code>  に追加されたのをトリガーにユーザー削除を実行</li><li>Firebaseが提供している拡張機能 「Delete User Data」を使って、関連するデータを削除</li></ol><p><br></p><h2 id="he41199affb">削除ユーザーをFirestoreに登録</h2><p>Next.jsでユーザー削除処理を書きます。削除ボタンをクリックしたら、<code>deleted_users</code>  にuidが追加されます。</p><pre><code>await setDoc(doc(db, 'deleted_users', currentUser.uid), {
  uid: currentUser.uid,
  createdAt: Timestamp.fromDate(dayjs(new Date()).toDate()),
})

await auth.signOut()

Router.push(`/`)</code></pre><p><br></p><h2 id="he71cbf30c5">Cloud Functionsでユーザー削除</h2><p>Cloud Functionsの方で以下のコードを書きます。 <code>deleted_users</code>  に追加されたのをトリガーに、そのuidのユーザーを削除します。<br>これでユーザーは削除されました。</p><pre><code>exports.deleteUser = functions
  .region('asia-northeast1')
  .firestore.document('deleted_users/{docId}')
  .onCreate(async (snap, context) =&gt; {
    const deleteDocument = snap.data()
    const uid = deleteDocument.uid


    // Authenticationのユーザーを削除する
    await admin.auth().deleteUser(uid)
  })</code></pre><p><br></p><h2 id="h59131e3ee5">拡張機能Delete User Dataで削除ユーザーのデータを削除</h2><p>ユーザーは削除されましたが、そのユーザーに関するデータは残っているので拡張機能を使って削除します。<br>以下から拡張機能を有効化します。<br><a href="https://firebase.google.com/products/extensions/firebase-delete-user-data" target="_blank" rel="noopener noreferrer">Delete User Data</a><br>設定はこんな感じです。location設定ミスってしまったんですが、特に不都合ないのでこのままにしてます。 <code>asia-northeast1</code>  がいいと思います。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/66b2fa8bca934600ba759ab73b81b8cb/%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%202021-12-12%2016.28.54.png" alt="" width="1996" height="1316"><br></p><h2 id="h1afe451c43">さいごに</h2><p>Firebase簡単で便利なのに、削除機能めんどくさいなと思ってたら、めっちゃ簡単になってて嬉しいです。</p>

Next.js × Firebaseでユーザーと関連するデータを削除する機能を作る

<p><span style="color:#363636">今年やってよかったこと Advent Calendar 2021の11日目担当です。</span><br><a href="https://adventar.org/calendars/6245" target="_blank" rel="noopener noreferrer">https://adventar.org/calendars/6245</a><br><br>去年はこちら。はてなブログで書いてました。<br><a href="https://blog.mismith.me/entry/2020/12/17/013002" target="_blank" rel="noopener noreferrer">今年やってよかったこと Advent Calendar 2020</a><br></p><h2 id="h4394b682a0">今年やってよかったこと</h2><p>去年のブログをみると、コロナのせいもあって一人で何か楽しむことが多かったですが、今年は誰かと会って遊ぶことが増えました。<br><br>今年やって良かったことは人と会うことです。<br></p><h2 id="h11b29f0ec8">写真</h2><p>今年は以前よく写真を撮りに行っていた人たちと、写真を撮りに行きました。<br>また、2,3年ぶりにグループ展示に参加したり、GALLERY ROOM305という展示スペースで出展することもやりました。<br>やっぱり誰かと話しながら写真撮ったり、お互い撮った写真を見てあれこれ話するの楽しいです。<br>それぞれのこだわりがあって、そういう視点もあるんだなと新たな発見になります。<br><br>今年撮った写真で一番のお気に入りはこれです。グループ展の準備が終わった後の暇な時間に撮った写真です。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/f937ce5e2b414967b5e5ef383ce33114/2021-09-04_11-08-42_000.jpeg" alt="" width="1345" height="892"><br></p><h2 id="h0c820dc814">食べ飲み</h2><p>ワクチンを打ってからは、久しぶりな人たちと飲みに行ったりたこぱをしました。<br>久しぶりすぎて近況を話すだけでも話題が尽きず、環境が大きく変わってる人もいれば相変わらずな人もいて面白いです。<br>たこぱした時のツイートです。</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">たこぱ <a href="https://t.co/WKSjvdppIc">pic.twitter.com/WKSjvdppIc</a></p>&mdash; ▲ (@misumi_takuma) <a href="https://twitter.com/misumi_takuma/status/1464527593902727169?ref_src=twsrc%5Etfw">November 27, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h51f8041c91">来年は</h2><p>去年はコロナでほぼ自粛、今年は徐々に外に出ることができたので、来年はもっと活動的になれたらいいなと思っています。<br>そもそも去年は仕事に関する技術の勉強会や、写真ももっと活発にいこうと意気込んでいた矢先、コロナで出鼻挫かれたので、2年遅れですが、頑張っていきたいと思ってます。</p>

今年やってよかったこと Advent Calendar 2021の11日目担当です

今年やってよかったこと Advent Calendar 2021

<p>あまり需要があるか分からないですが、タイトルの通りGitHub Actionsであるブランチの中から必要なファイルだけを、別のブランチに書き出す方法です。<br><br>どういう時に使っているかというとHugoという静的サイトジェネレーターのテーマを配布しているのですが、開発時のコードから配布用に一部のコードだけを抽出してreleaseブランチにpushということをしています。<br><br><a href="https://github.com/mismith0227/hugo_theme_pickles" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/hugo</a><a href="https://github.com/mismith0227/hugo_theme_pickles" target="_blank" rel="noopener noreferrer"><em>theme</em></a><a href="https://github.com/mismith0227/hugo_theme_pickles" target="_blank" rel="noopener noreferrer">pickles</a><br></p><h2 id="hd50df88437">もともと使っていたTravis CI</h2><p>もともとはTravis CIを使っていましたが、ある日なぜか止まってしまったので、GitHub Actionsに切り替えてみました。Travis CIの時はtravis.ymlでシェルスクリプトを実行してビルドしてpushとかしていました。<br><br><a href="https://github.com/mismith0227/hugothemepickles/blob/d243af0c3ab8a194d4829814636019a6eff78345/bin/deploy.sh" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/hugo</a><a href="https://github.com/mismith0227/hugothemepickles/blob/d243af0c3ab8a194d4829814636019a6eff78345/bin/deploy.sh" target="_blank" rel="noopener noreferrer"><em>theme</em></a><a href="https://github.com/mismith0227/hugo_theme_pickles/blob/d243af0c3ab8a194d4829814636019a6eff78345/bin/deploy.sh" target="_blank" rel="noopener noreferrer">pickles/blob/d243af0c3ab8a194d4829814636019a6eff78345/bin/deploy.sh</a><br></p><h2 id="hf0d425ae06">GitHub Actions</h2><p>実行する流れはTravis CIと全く同じで、GitHub Actions用に書き換えただけです。書き換えたといってもymlファイルなのでちょっと読んだら分かると思います。</p><pre><code>name: create new branch

on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout master
        uses: actions/checkout@v2
        with:
          ref: master

      - name: npm init
        uses: actions/setup-node@v2
        with:
          node-version: '12.x'

      - name: Create new Branch
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        run: |
          yarn
          yarn build
          rm -rf .git
          git init
          git config --global user.email "ci@example.com"
          git config --global user.name "CI Action"
          if [[ ! -f .gitignore ]]; then
            # Make sure .gitignore exists
            touch .gitignore
          fi
          if ! grep -q .gitignore; then
            echo "src
          .editorconfig
          .gitignore
          .babelrc
          .github/
          ./images
          webpack.config.js
          bin
          gulpfile.js
          .prettierignore
          .prettierrc
          config.js
          node_modules
          content
          package.json
          svgpack
          tmp
          config.toml
          yarn.lock
          renovate.json
          !/exampleSite/config.toml
          !/exampleSite/content
          !/exampleSite/static" &gt;&gt; .gitignore
          fi
          git add .
          git commit -m "Deploy from Github Actions"
          git push --force --quiet "https://$GITHUB_ACTOR:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git" master:release</code></pre><p><br></p><h2 id="h9f8666f99b">詰まったところ</h2><ul><li>gitignoreにechoするところで、travisの時のままにしていると、インデントが入ってしまってignoreできなかった</li><li>nodeの設定かかないと、ビルド時にエラーになる</li></ul><p><br></p><h2 id="h3a9c6c865f">GitHub Token の作り方</h2><p>GithubのSettingsで作成し、リポジトリで設定します。キャプチャめんどいので手順だけ</p><ol><li>Settings &gt; Developer settings &gt; Personal access tokens でtockenを生成する</li><li>リポジトリのSettings &gt; Environmentsでtockenを貼り付けて、任意の名前で設定（ACCESS_TOKEN）という名前にしたとする</li><li>使うときはsecrets.ACCESS_TOKEN</li></ol><p><br>tockenを生成するときは期限を決めることができます。例えばプロジェクトの期限が決まってるときは、それに合わせて期限を設けておくとセキュリティ的にもよさそうです。<br>期限きれてもまた生成すればいいだけなので、適当に設定しておくといいと思います。</p>

GitHub Actionsで必要なファイルだけ別ブランチに書き出す書き方です。

GitHub Actionsで必要なファイルだけ別ブランチに書き出す

<p>以下の記事でFirebase v9にて初期化はできましたが、Firestoreでコレクションやドキュメントの追加、アップデート、削除などで書き方が変わっていました。<br><br><a href="https://www.mismith.me/blog/web/firebase-version9" target="_blank" rel="noopener noreferrer">https://www.mismith.me/blog/web/firebase-version9</a><br><br>ある程度書いたら書き方分かってきます。コレクションを取得するときは <code>collection</code>  、ドキュメントを取得するときは <code>doc</code>  、それぞれ追加や更新するときは <code>addDoc</code>  や <code>updateDoc</code>  、<code>deleteDoc</code>  を使います。<br></p><h2 id="h0733387e72">データの取得</h2><h3 id="h867ac3b084">コレクションリストの取得</h3><p>以下のように、初期化したfirestoreをimportし、collection以下の階層はコンマ区切りで指定していきます。</p><pre><code>import {
  getDocs,
  collection,
  query,
  orderBy,
  DocumentData,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const getData = async () =&gt; {
  const q = query(
    collection(firestore, 'users', user.uid, 'todo'),
    orderBy('createdAt', 'desc')
  )

  const querySnapshot = await getDocs(q)

  const reduceList = querySnapshot.docs.reduce(
    (acc: TodoItem[], doc: DocumentData) =&gt; [
      ...acc,
      {
        id: doc.id,
        title: doc.data().title,
        details: doc.data().details,
      },
    ],
    []
  )

  setData(reduceList)
}</code></pre><p><br></p><h3 id="hb4ff9e1638">ドキュメントの取得</h3><p>コレクションにぶら下がってるドキュメントの取得です。 <code>routerQuery</code>  は取得したいドキュメントのidを何かしらの方法で取得している前提です。個人的にはNext.jsを使ってるので、URLからidを取得したパターンで書いてます。</p><pre><code>import {
  getDoc,
  doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const getData = async () =&gt; {
  const docRef = doc(
    db,
    'users',
    user.uid,
    'todo',
    routerQuery.todoid
  )

  const querySnapshot = await getDoc(docRef)
  setData(querySnapshot.data())
}</code></pre><p><br></p><h2 id="h418415c78b">データの追加</h2><p>次はデータの追加です。ざっと以下のように書きます。Timestampを使いたい場合はfirestoreからimportします。</p><pre><code>import { addDoc, collection, Timestamp } from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const addData = async (data: addData) =&gt; {
  const docRef = await addDoc(
    collection(db, 'users', user.uid, 'todo'),
    {
      title: data.title,
      details: data.details,
      createdAt: Timestamp.fromDate(dayjs(new Date()).toDate()),
    }
  )
  console.log(docRef.id)
}</code></pre><p><br></p><h2 id="h3063e90945">データの更新</h2><p>データの更新にはupdateとsetがあります。updateはデータがあれば上書きするだけなのに対し、setはデータがなければ作成し、データがあれば上書きします。場面に応じて使い分けましょう。<br>書き方に大差はないのですが、一応どちらも書いときます。</p><pre><code>import {
  updateDoc,
  setDoc,
  doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略
  
const updateData = async (data: FromValue) =&gt; {
  await updateDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQuery.id
    ),
    {
      title: data.title,
      details: data.details,
    }
  )
}
  
const setData = async (data: FromValue) =&gt; {
  await setDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQuery.id
    ),
    {
      title: data.title,
      details: data.details,
    }
  )
}</code></pre><p><br></p><h2 id="h8aad3887d6">データの削除</h2><p>もうここまでくれば何となくわかると思います。</p><pre><code>import {
  deleteDoc,
  doc,
} from 'firebase/firestore'

// 省略

const deleteData = async () =&gt; {
  await deleteDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQueryid
    )
  )
}</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>最初は書いてて分からん状態でしたが、書き進めて慣れてくると理解できるし、むしろ前よりコードがスッキリしたかなと思います。<br></p><h2 id="h335a87b5ef">参考サイト</h2><p>その他詳しいことはドキュメントを見てください<br></p><ul><li><a style="color:#202124" href="https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja" target="_blank" rel="noopener noreferrer">Cloud Firestore でデータを取得する</a></li><li><a style="color:#202124" href="https://firebase.google.cn/docs/firestore/manage-data/add-data?hl=ja" target="_blank" rel="noopener noreferrer">Cloud Firestore にデータを追加する</a></li></ul>

Firebase v8からv9へ移行するときのFirestoreでのコレクション取得やドキュメント追加などのデータ操作の書き方の備忘録です

Firebase v8→v9でFirestoreのコレクション取得やドキュメント追加などのデータ操作の書き方

<p>以前は記事にカテゴリ名を表示だけはしていたのですが、ページネーションを実装したついでに、カテゴリ一覧も追加しました。<br>ただ、調べてもなかなか実装方法でてこなかったので、備忘録でまとめておきます。<br></p><h2 id="h00b8af9eb7">仕様</h2><p>以下のように作ります</p><ul><li>カテゴリ別に一覧ページを作る</li><li>各カテゴリ別にページングを作る</li><li>パスの例 <code>example.com/blog/web/page/1</code>  </li></ul><p><br></p><h2 id="h5237216ef8">そもそもセレクトフィールドが間違いだった</h2><p>記事に表示のためにセレクトフィールドをスキーマに持たせていて、カテゴリの表示だけはしていました。<br><a style="background-color:#ffffff" href="https://blog.microcms.io/add-select-field/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/add-select-field/</a><br><br>当初は記事にカテゴリ持たせといて、filterかけて取得したら一覧作れるのかなと思ってたけど違ったみたいです。早めに気づいて良かった。<br><br>実際は、microCMSのヘルプに書かれてるように、カテゴリのためのコンテンツ（API）を作り、カテゴリを付けたいコンテンツの方で「コンテンツ参照」のスキーマを作る必要があります。<br><a href="http://help.microcms.io/ja/knowledge/categories-and-tabs" target="_blank" rel="noopener noreferrer">http://help.microcms.io/ja/knowledge/categories-and-tabs</a><br><br>ブログの記事にカテゴリの表示だけなら当初の方法でいいのですが、カテゴリ一覧メニューや、カテゴリ別ページを作るためにはカテゴリだけを取得できるAPIが必要です。タグのような複数選択の場合は「コンテンツ複数参照」でスキーマを作ります。<br><br>ブログを作る場合のスキーマは、microCMSが自社ブログのソースコードをGitHubに上げてくれてるので、Readmeに書いてあるスキーマを参考にするのがいいです。<br><a href="https://github.com/microcmsio/microcms-blog" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/microcms-blog</a><br></p><h2 id="h71e5f7c2cf">Pages</h2><p>pages以下blogのところを抜き出すとこのような構成にしています。細かいとこはやりやすいようにしてください。</p><pre><code>├── pages
│&nbsp; &nbsp;├── blog
│&nbsp; &nbsp;│&nbsp; &nbsp;├── [category]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.tsx // ブログ個別ページ
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── page
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── index.tsx // カテゴリの一覧ページ
│&nbsp; &nbsp;│&nbsp; &nbsp;├── index.tsx // ブログトップ（blog/page/1と表示は同じ）
│&nbsp; &nbsp;│&nbsp; &nbsp;└── page
│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── index.tsx // ブログ一覧（pagination用。blog/page/[ページ数]）</code></pre><p><br></p><h2 id="hfda00e257e">実装のポイント</h2><p>全部書くとしんどいので、ポイントになるとこだけピックアップ。全体はGitHubのリポジトリ見てください。<br><a href="https://github.com/mismith0227/mismith.me" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/mismith.me</a><br><br>getStaticPathsでパスを生成するのですが、記事全体のページング作る実装に加えて、まずはカテゴリを取得して、その分をmapする必要があります。</p><pre><code>export const getAllCategoryPagePaths = async () =&gt; {
  const resCategory = await client.get({
    endpoint: 'blog-category',
  })

  const paths: string[] = await Promise.all(
    resCategory.contents.map((item: BlogCategory) =&gt; {
      const result = client
        .get({
          endpoint: 'blog',
          queries: {
            filters: `category[equals]${item.id}`,
          },
        })
        .then(({ totalCount }) =&gt; {
          const range = (start: number, end: number) =&gt;
            [...Array(end - start + 1)].map((_, i) =&gt; start + i)

          return range(1, Math.ceil(totalCount / BLOG_PER_PAGE)).map(
            (repo) =&gt; `/blog/${item.id}/page/${repo}`
          )
        })
      return result
    })
  )


  return paths.flat()
}


export const getStaticPaths: GetStaticPaths = async () =&gt; {
  const paths = await getAllCategoryPagePaths()

  return { paths, fallback: false }
}</code></pre><p><br>ポイントとしてはこれが全てなんですが、冒頭でも書いた通り当初は記事のAPIの中でセレクトフィールドでカテゴリを付けていたため、getStaticPathsでどうやってカテゴリ情報とればいいのか悩んでました。<br>コンテンツ参照の存在を知って、実装することができました。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今まで最低限の機能しか持たせてなかったですが、カテゴリとか一般的なブログの機能を実装しようとするとまだまだ知らないこと多いです。<br>今後もNext.jsの知見貯めたいので、もっと一般的なブログに近い実装を追加していきたいです。</p>

Next.js + microCMSでカテゴリ一覧ページの作り方が調べてもいまいち分からなかったので試しながら実装しました。

Next.js × microCMSでカテゴリ一覧ページを作る

<p><span style="color:#363636">npm scriptsで開発環境する手順です</span><br></p><h2 id="h137a0f7a86">やってみること</h2><p>最低限で以下をやってみます。</p><ul><li>htmlをdistへコピー（ejsやpugは使わないです）</li><li>SassをCSSへコンパイルしdistへ</li><li>BabelでJSをトランスパイルしてdistへ</li><li>browser-syncでブラウザを立ち上げる</li><li>各ファイルの更新を監視</li></ul><p><br></p><h2 id="h7255e71066">ディレクトリ</h2><p>こんな感じになります。</p><pre><code>├── babel.config.json
├── dist
│&nbsp;&nbsp; ├── css
│&nbsp;&nbsp; │&nbsp;&nbsp; └── style.css
│&nbsp;&nbsp; ├── index.html
│&nbsp;&nbsp; └── js
│&nbsp;&nbsp;     └── index.js
├── package.json
├── src
│&nbsp;&nbsp; ├── html
│&nbsp;&nbsp; │&nbsp;&nbsp; └── index.html
│&nbsp;&nbsp; ├── js
│&nbsp;&nbsp; │&nbsp;&nbsp; └── index.js
│&nbsp;&nbsp; └── sass
│&nbsp;&nbsp;     ├── base.scss
│&nbsp;&nbsp;     └── style.scss
└── yarn.lock</code></pre><h2 id="h2e3240617b">npm-run-all</h2><p>まず、npm-run-allというモジュールをインストールしておき、タスクをまとめて実行できるようにしておきます。</p><pre><code>yarn add npm-run-all -D</code></pre><h2 id="hda1205ad89">html</h2><p>htmlはejsやpugを使わずにそのままdistへコピーします。 コピーするには&nbsp;<code>cpx</code>&nbsp;というモジュールを使います。Macだと&nbsp;<code>cp</code>&nbsp;コマンドでもいいのですが、Windowsでは&nbsp;<code>copy</code>&nbsp;というコマンドらしく異なるため、どちらの環境でも動作するようにしてみます。</p><h3 id="h31c01ffa04">cpx</h3><pre><code>yarn add cpx -D</code></pre><p><br></p><h3 id="hc6a9bd6981">ファイル作成</h3><p>適当にhtmlのファイルを作ります。ディレクトリは冒頭の構成を参考にしてください。</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="./css/style.css" /&gt;
    &lt;script type="text/javascript" src="./js/index.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;タイトル&lt;/h1&gt;
    &lt;section&gt;
      &lt;h2&gt;セクションタイトル&lt;/h2&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="h010248e8b0">package.json</h3><p>以下をscriptsに追加します。最初にインストールした&nbsp;<code>npm-run-all</code>&nbsp;を使い&nbsp;<code>html:*</code>&nbsp;このような指定をすることで&nbsp;<code>html:</code>&nbsp;がついた処理をまとめて行います。htmlに関してはタスクが一つですが、後述のタスクで役に立ちます。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
},</code></pre><p>以下のコマンドを打つとhtmlをコピーしてくれます</p><pre><code>yarn run html</code></pre><p><br></p><h2 id="h20b4c98e2a">CSS</h2><p>SassをCSSにコンパイルします。 ほぼ必須といってもいい&nbsp;<code>autoprefixer</code>&nbsp;でプレフィックスも付くようにします。</p><h3 id="hc197e6fff5">modules</h3><pre><code>yarn add sass postcss postcss-cli autoprefixer -D</code></pre><p><code>postcss</code>&nbsp;は&nbsp;<code>autoprefixer</code>&nbsp;を使うためですが、ブログによっては&nbsp;<code>postcss-cli</code>&nbsp;だけしか使っていない記事もあります。その記事が間違っているわけではなくて、<code>postcss-cli</code>&nbsp;のバージョンによるみたいです。詳しくは以下を参考にしてください。今回はv8系を使ってるので&nbsp;<code>postcss</code>&nbsp;も入れています。<br><a style="color:#222222" href="https://blog.mismith.me/entry/2021/05/22/230025" target="_blank" rel="noopener noreferrer">postcss-cliをインストールすると Cannot find module postcss とエラーが出てしまう - RX100で撮り歩くブログ</a></p><h3 id="hc6a9bd6981">ファイル作成</h3><p>Sassのファイルを作ります（中身は本当に適当です）。ディレクトリは冒頭の構成を参考にしてください。</p><pre><code>body {
  background-color: #fff;
}

h1 {
  font-size: 48px;
  user-select: none;

  span {
    color: blue;
  }
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}</code></pre><h3 id="h010248e8b0">package.json</h3><p>CSSに関するタスクを追加します。browserslistも追加します。どのブラウザに対応したいかは書き方を調べてみてください。package.jsonに追記するのではなく、<code>.browserslistrc</code>&nbsp;というファイルを作成して書いてもいいです。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
},
"browserslist": [
  "&gt;0.25% in JP",
  "not ie &lt;= 10",
  "not op_mini all"
],</code></pre><p>以下のコマンドを打つと&nbsp;<code>css:</code>&nbsp;で始まるタスクを実行してくれます</p><pre><code>yarn run css</code></pre><h2 id="hd148c32f21">JavaScript</h2><p>BabelでJavaScriptをトランスパイルします。もうサポート終了予定の発表がされましたが、一応IE11対応してみます。この辺りの設定は必要に応じて変えてみてください。&nbsp;<code>uglify-js</code>&nbsp;で圧縮もします</p><h3 id="hc197e6fff5">modules</h3><pre><code>yarn add @babel/cli @babel/core @babel/preset-env uglify-js -D</code></pre><h3 id="hc6a9bd6981">ファイル作成</h3><p>JavaScript</p><pre><code>const test = () =&gt; {
  console.log("test2");
};

test();</code></pre><p>babel.config.json</p><pre><code>{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}</code></pre><h3 id="h010248e8b0">package.json</h3><p>JavaScriptのタスクを追加します。&nbsp;<code>yarn run js</code>&nbsp;で動くはずです</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
},</code></pre><h2 id="h125ae2d190">browser-syncでブラウザ立ち上げ、ファイルの更新を監視</h2><p>それぞれのタスクを登録できたので、browser-syncでブラウザを立ち上げて、ファイルを変更したら自動的にブラウザに反映するようにします。ここまでできたら最低限のコーディング作業はできますよね</p><h3 id="hc197e6fff5">modules</h3><p>browser-syncと監視用のwatchを入れます。</p><pre><code>yarn add browser-sync watch -D</code></pre><p><br></p><h3 id="h010248e8b0">package.json</h3><p>watchとbrowser-syncのタスクを追加します。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
  "watch:html": "watch 'npm run html' ./src/html",
  "watch:css": "watch 'npm run css' ./src/sass",
  "watch:js": "watch 'npm run js' ./src/js",
  "watch:server": "browser-sync start --server dist --files 'dist, **/*.html, !node_modules/**/*'",
  "watch": "npm-run-all -p watch:*"
},</code></pre><p><code>yarn run watch</code>&nbsp;でブラウザが立ち上がります。html、Sass、JavaScriptを更新するとブラウザがリロードされて変更が反映されます。</p><h2 id="h1afe451c43">さいごに</h2><p>最低限の環境は簡単に作ることができました。 gulpもnpm scriptsも一長一短で好きな方を使えばいいと思いますが、いろいろと変遷しているタスクランナーに依存しないのはいいところですね。<br>とはいえgulp使ってる人多いし、gulpでいいかと思いますが、選択肢の一つとして覚えておくといいと思いました。</p>

タスクランナーにgulpではなくnpm scriptsを使ってみました

Blog