山岸和利 @ykzts@ykzts.technology

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

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

Haneru Developers https://haneru.dev/

こちら技術書に関してわたしが四年前に書いた日記です。なつかしいですね。

2017年の春から開発者として働き始める人が読むべき技術書 | ykzts.blog https://ykzts.blog/2017/02/13/mandatory-technology-books

年末年始はコードを書かずにVTuberの配信を見て過ごしていました

誕生日プレゼントとしてAmazonほしいものリスト経由で獺祭をいただきました! ありがとうございます。

先週は誕生日だったのでお寿司を食べてきました。もう一皿あるのですがおいしそうだったので思わず写真を撮るのを忘れて食べてしまいました。

https://ykzts.technology/ をMastodon v3.3.0にアップデートしました。

https://ykzts.technology/ をMastodon v3.3.0rc2にアップデートしました。

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やニコニコ大百科でいろんな人たちがケンカをしていてとてもかなしい。