山岸和利 @ykzts@ykzts.technology

#因幡はねる さん関連のウェブアプリやウェブサービスの開発をしています。

わたしが作ったものは以下のページにまとめています。気に入ってもらえたらうれしいです。

Haneru Developers https://haneru.dev/

Next.jsは確かにVercelで運用するのが手軽で簡単なのですがVercel以外では運用できないかといえばそのようなことは全くありません。

Next.jsはOSSです。Vercel Inc. に勤められている方だけではなく多くの人たちの協力によって成り立っています。実際に会ったこともないようないろんな国にいる様々な人たちが協力して作られているソフトウェアなのです。

だからこそNext.jsはVercelに依存しているという発言をされてしまうのはとても残念であり、あまり愉快ではありません。

BlurHashはUGC等でサーバーサイドのWeb APIから返される値に含ませるのが基本の形になるかとは思いますがLPの遅延読み込みで使いたいと思い作成しました。画像が大きいとビルド時にかかる時間が大きく増えてしまうのは難点ではありますが、良い感じに使えるものができたのではないかという自負があります。

少し必要にかられてBlurHashをwebpackでのビルド時に生成するblurhash-loaderを作成しました。

exampleのためにwebpack.config.jsを久し振りに書いたのですが結構うろおぼえになってしまっていましたね。最近はNext.jsやGatsbyのようなもの経由でwebpackの設定をいじっているので直接webpack.config.jsを書く機会はもうなくなっていて、そうなるとやはり厳しいものがありますね。

inabagumi/blurhash-loader: A blurhash loader module for webpack. https://github.com/inabagumi/blurhash-loader

Next.jsのパーカーが売られているのですが背中に「デベロップ・プレビュー・シップ」とかたかなで書かれていてセンスがあって好きですね。

Drop Party | Next.js https://drop.party/nextjs

Next.jsにいくつかPull Requestを送っていたらコントリビューターSlackに招待していただいたのですが、日本人がわたし以外にひとりもいませんね。

Next.jsを使っているとReact v17へのアップグレードはすぐさまできます。ですが@next/mdxを使っている場合、MDXの内部でReact.createElementが使われているのでビルドに失敗してしまっていました。

というわけでMDXにPull Requestを送ったところすぐさまmergeしていただきました。この修正を含むv1.6.19もリリースされているのでMDXを先にアップデートする必要がありますが、気軽にReact v17にアップグレードできるようになったのではないでしょうか。

Add annotation to use classic runtime by ykzts · Pull Request #1307 · mdx-js/mdx https://github.com/mdx-js/mdx/pull/1307

わたしが個人で開発しているプロダクトは最近だとほぼReactで統一されているのでReactの新しいバージョンがリリースされるとこのように大量のPull Requestがrenovatebotさんから送られてきますね。

もしRenovateを導入していなかったらこれをひとつひとつ自身で行っていなければならなかったと考えるとおそろしいですね。

ですがv9.5.6-canary.3の時点では少しバグがあり期待した通りに動かなかったためいくつかのPull Requestを送らせていただいたところmergeしていただき、修正されたv9.5.6-canary.4がリリースされました。迅速に対応していただきありがたい限りですね。

Release v9.5.6-canary.4 · vercel/next.js https://github.com/vercel/next.js/releases/tag/v9.5.6-canary.4

先日からずっと注視していたNext.jsのImage Optimizerが含まれたNext.js v9.5.6-canary.3がリリースされました。現時点ではまだ最低限の実装ではありますが非常に協力で使い勝手が良くパフォーマンスの大きな向上も見込めるすばらしい機能かと思います。

Image OptimizerはimgixやCloudinaryのようなSaaSと同じく画像処理を行うWeb APIです。imgixやCloudinaryとは違って画像の拡縮やフォーマットの変換といった最低限の機能しか有していませんが一般的なWebページの用途では充分なのではないでしょうか。

Release v9.5.6-canary.3 · vercel/next.js https://github.com/vercel/next.js/releases/tag/v9.5.6-canary.3

Next.js v9.5.4がリリースされましたね。脆弱性の修正が含まれているリリースとなっていて全ての人がアップデートするべきものとなっていますね。

またNext.js v9.5.4には今のところunstableではありますがリダイレクト機能の追加も含まれています。getStaticPropsやgetServerSidePropsで

export const getStaticProps = () => Promise.resolve({
unstable_redirect: {
destination: '/example',
permanent: false
}
})

のようにunstable_redirectを追加すると任意のパスへリダイレクトさせられるようになります。

もちろんunstableなので変更になる可能性はありますが大変便利で使い勝手も良いので今後に期待ですね。

Release v9.5.4 · vercel/next.js https://github.com/vercel/next.js/releases/tag/v9.5.4

たまたま見付けたNextraという名前のNext.js製のドキュメント生成ツールなのですがTailwind CSSを使っていて見た目がそれなりに良く、またシンプルで軽快に動く様子でとても使い勝手が良さそうですね。まだできたばかりでNextra自体のドキュメントも書いている途中な様子なので時間を見て試してみたいと思います。

Nextra – Nextra https://nextra.vercel.app/

Twitterやニコニコ大百科でいろんな人たちがケンカをしていてとてもかなしい。

Next.js v9.5.3からLinkコンポーネントやrouter.pushなどで使われるasが不要になっていて簡単な記述で簡潔させられるようになっていて大変便利ですね。

Add initial handling for dynamic route href resolving and rewrites on the client by ijjk · Pull Request #15231 · vercel/next.js https://github.com/vercel/next.js/pull/15231

Just got my free ticket to #nextjsconf, grab yours! Let’s build a better web with #nextjs: https://nextjs.org/conf/tickets/ykzts @​vercelより

GitHub CLI 1.0 is now available - The GitHub Blog https://github.blog/2020-09-17-github-cli-1-0-is-now-available/

いつの間にかGitHub Container RegistryにリポジトリのREADMEが表示されるようになっていましたね。DockerfileにリポジトリのURLをラベルとして書き加える必要がありますが簡単に連携できてわかりやすいのでありがたいですね。

国際的に有効な身分証明書を持っていなかったためGitHub Sponsorsを使えるようになるまでしばらく時間がかかってしまいましたね。どうするかしばらく考えた結果、個人番号カードの取得をしました。

My GitHub Sponsors profile is live! You can sponsor me to support my open source work 💖 https://github.com/sponsors/ykzts?o=sd&sc=t

GitHubのWeb UI上にスポンサーリンクを追加させる .github/FUNDING.yml はしばらく前から使わせていただいてましたがPreviewができるのには気付いていませんでしたね。

Docker Quizはこちらから挑戦できます。

https://twitter.com/hatenatech/status/1302845698732249089