2022年も始まって1ヶ月経ちました。

カルキチブログも今年で3年目。今年も頑張って書いていこうと思います。

普段はテーマを決めて、決めたテーマについての記事を執筆していますが、今回は特定の分野ではなく、2022年1月にあったor知ったウェブ系技術に関してまとめるといった形の記事を執筆してみました。

「あった」ではなく、「知った」系のトピックも含まれているため、ちょっと古い情報もあるかもしれません。

新しいReactベースのフレームワーク「Remix」

少し古い情報かもしれませんが、React Routerの作者が開発に携わった「Remix」と呼ばれるフレームワークが、2021年の11月23日に正式リリースされたらしいです。

Remixには以下の特徴があります。

• フルスタックフレームワークである
• SGの機能を備えていない
• CDN環境でコードを実行することで、高速化を図っている
• ベンダーロックインなくFWの機能をフル活用できる

パフォーマンス改善のアプローチにSGではなく、CDN環境でコードを実行する手段（いわゆるエッジコンピューティング）を採用している点が非常に興味深いと感じました。

SGはビルド周りの設定がややこしかったり、大量のページを生成するときはビルド時間を短縮する方法を考えないといけないので、結構大変です。。。

ベンダーロックインされることなくフレームワークの力を100%引き出せる点もいいと思いました。

Next.jsの場合パフォーマンスを100%引き出すには、Vercelにデプロイする必要があります。

NetlifyやAWS Amplifyなどでもデプロイ自体は可能ですが、以下のような問題点があります。

• Netlify・・・SSR・ISRを使用するためには、Netlifyが提供するプラグインが必要。
• AWS Amplify・・・SG・SSR・ISRはデフォルトで使用できるものの、ビルド時にAWSのリソースを生成する必要があるので、ビルドが非常に遅い。

Remixが普及するかどうかは現時点ではまだなんともいえませんが、普及してきたら、SGではなく、エッジコンピューティングを使用したJSフレームワークが増えてくるかもしれないですね！

Nuxt3便利そう

まだPublic Beta版ですが、2022年のフロントエンド技術だとNuxt3にも注目しています。

以下の記事にNuxt3系でできるようになることがまとめられています。

Nuxt 3 を今すぐオススメしたい 15 のポイント

https://zenn.dev/ytr0903/articles/d0a91f6180d34e

Nuxt3の新しい機能

https://zenn.dev/azukiazusa/articles/nuxt3-new-features

最近はアプリ開発・ウェブ制作、どちらもReact・Next.jsを使うことが多いですが、LPのような規模の小さいサイトやキャンペーンサイトのような作りきりのサイトは、Reactよりも、普通のHTML・CSSに近い感覚で書けるVue・Nuxtの方が合っていると考えています。

CSS系のライブラリを何使うか考える必要もないし、Vue自体がピュアなHTML・CSSに近い感覚で書けるので、エンジニア以外がサイトの改修に携わることもReactよりは簡単にできるからです。

Next.jsよりもフレームワーク感が強く、ディレクトリ構成などのばらつきが出づらい点もNuxt.jsのいい部分だと考えています。

Nuxt3のディレクトリ構成は公式に載っています。

https://v3.nuxtjs.org/docs/usage/data-fetching

Viteで使用可能なテストツール「Vitest」

絶賛開発中なので、流石に実践導入は難しいと思いますが、Viteで使用可能なテストツール「Vitest」と呼ばれるツールが出たらしいです。

【Vitest】絶賛開発中のVitestを使ってみる

https://qiita.com/tak001/items/3491758d95bfee2c65bc

Vueの作者が開発しているビルドツールViteは、esbuild（Golang製のバンドラー）をビルドに使用することで、webpackなどの従来のビルド系ツールとは比べ物にならないくらい高速にビルドを実行することができます。

話が少し脱線しましたが、Vitestはjestに近い書き心地でありながらテストの実行速度も速いらしいので、今後Viteを使用したプロジェクトには導入される可能性が高くなりそうです。

Node.jsでついにfetch APIが標準搭載されるそう

Hacker Newsを流し読んでいたら見つけたのですが、Node.jsでfetch APIが標準搭載されるそうです。

マイナーアップデートで入るらしく、試験的な機能なので --experimental-fetch フラグが必要とのことです。

Hacker News

https://news.ycombinator.com/item?id=30129560

GitHubのイシュー

https://github.com/nodejs/node/pull/41749

fetch APIはクライアントサイドではライブラリを導入しなくても使用できますが、現状Node.jsにはfetch APIが存在しないので、fetch APIを使用するためには、node-fetchと呼ばれるライブラリを導入する必要があります。

fetch APIがNode.jsに標準搭載されたら、フェッチ系のライブラリを別途導入する必要がなくなるので、今以上にJSでサーバーサイド開発をするのが捗りそうですね！

プレゼンをmarkdownで作れるOSS「Slidev」

プレゼンテーションをmarkdownで作成することができる「Slidev」というOSSがあります。

Slidevには以下のような特徴があります。

• markdownでプレゼンテーションを作成できる
• CSSで見た目の調整が可能
• GitHub PagesやVercel、Netlifyなどのホスティングサービスを利用することでプレゼンテーションの共有が簡単にできる

スライドを作成するためには、CLI操作やmarkdownの知識が必要なので、エンジニア向けではありますが、普段使っているテキストエディタでプレゼンテーションが作成できるので、とても便利だと感じました。

最近は社内の技術共有会で使用する機会が多いです。

以下のプレゼンテーション資料はSlidevで作成したものです。

https://yota-k.github.io/front-2021/

ただ、複雑なレイアウトの構築や、アニメーションなどを設定するのは難しそうなので、そういったプレゼンテーションを作成するときはGoogleスライドの方が合っていると思います。

WordPress5.9リリース

1月25日（米国時間）にWordPress5.9がリリースされたらしいです。

目玉機能として、フルサイト編集機能がリリースされました。

ブロックエディター（Gutenberg）を使ってサイトのすべてを組み立てることができるらしいです。

→Wixみたいですねw

最近のWPを見ていると、どんどんノーコードの方向性に舵を切っているなと思います。

Gutenbergのブロックエディタが出たくらいの頃からその兆候はありましたが、今後のWPは今以上にノーコード路線に舵を切っていくと考えています。

Googleが画像検索結果のUIにMaterial Youを採用

テスト導入のフェーズなのか、自分の環境では確認できませんでしたが、Googleが画像の検索結果に新しいUIを取り入れるようと試みているらしいです。

Googleの新しい画像検索結果はMaterial Youを採用しようとしている

https://www.suzukikenichi.com/blog/new-google-image-search-results-with-material-you/

Material Youと呼ばれるUIを取り入れているらしく、検索対象の画像に合わせてUIコンポーネントの色調が調整されるようです。

ゆめみ 「Rust」を今後推進

都内のIT企業「ゆめみ」が今後Rustを推進していくそうです。

フロントやっている方だと、無職 やめ太郎さんがいる会社っていうと、知っている方いらっしゃるかもしれないです。

https://twitter.com/raykataoka/status/1481096589880045571

Rust OSSコミッターやテックリードも採用していきたいという文面から本気度が伺えます。

個人的には、お世辞にも日本国内で普及しているとはいえないRustを推進していくという尖った発想はかなり好きです。

僕自身は、Rustを書いた経験はないですが、所有権の概念がよくわからず、「Rust書くか」とはなっていないのが現状です。

まとめ

まとめます。

• 新しいReactベースのフレームワーク「Remix」
• Nuxt3便利そう
• Viteで使用可能なテストツール「Vitest」
• Node.jsでついにfetch APIが標準使用できるようになりそう
• プレゼンをmarkdownで作れるOSS「Slidev」
• WordPress5.9リリース
• Googleが画像検索結果のUIにMaterial Youを採用
• ゆめみ 「Rust」を今後推進

おまけ

Remixに関しての所感

チュートリアル3分の1ほど触ってみて感じたのは、React・TypeScript・Node.jsの知識に加えて、CDNやエッジコンピューティングなどより高度な知識が求められるので、使いこなすのは難しそうです。

エッジコンピューティング・ベンダーロックインの意味についても、よく分からなかったのでまとめました。

エッジコンピューティング・・・利用者や端末と物理的に近い場所にサーバを配置して、設置されたサーバでデータ処理・分析を行う分散コンピューティングの概念のこと。

ベンダーロックイン・・・独自技術に大きく依存したシステム等を採用した際に、他ベンダーの提供する同種のシステム等への乗り換えが困難になる現象のこと。

Nuxt3についての所感

正式リリースされるまでは待とうと思いますが、正式リリースされたらLPやキャンペーンページ制作する機会があったら積極的に使っていきたいです。

WordPress5.9に関しての所感

自分がWPやってた1年半くらい前は、フルスクラッチテーマ（webpackでSCSS・JSのバンドル処理とかも組んでた）作って、カスタムフィールド使って、管理画面のUIカスタマイズとかもゴリゴリにやっていましたが、そんな需要もそのうち無くなってくるんですかね。