はじめに

これを見ている皆さんはWeb系の開発をしたことはありますか？
私はあくまで趣味として、Web系の開発をしています。
このサイトもDenoとFreshを使って開発している感じです。
そこで、今回は皆さんに習得して損はない技術を教えようと思います。
興味が出たらぜひやってみてください。

WebSocket

WebSocketは、リアルタイムなチャットなどを作る時にとっても重宝する技術です。Socket.IOなども流行っていますが、ネイティブにWebSocketで実装しても労力はそこまで変わりませんし、拡張性は上がります。
また、JavaScriptに標準APIとして搭載れており、以下のように書くことで使えます。(サーバサイドのコードは書いていませんのでご了承ください)

const ws = new WebSocket('url://of.server')

// 主に参加イベント
ws.onopen = () => console.log('誰かが参加しました')
// 主に退出イベント
ws.onclose = () => console.log('誰かが退出しました')
// 主にエラーイベント
ws.onerror = () => console.error('エラーが発生しました') 

// 主にメッセージ受信
ws.onmessage = (e) => {
  console.log('メッセージを受信しました')
  console.log(e.data)
}

結構かんたんに記述できることがわかりますね。
WebSocketを利用することで、比較的かんたんにWeb用のリアルタイムチャットを実装できたり、通知なども実装できるのでぜひやってみてくださいね。

Wasm(WebAssembly)

ここではWebブラウザ上以外での用途も話すので、Wasmのほうが適切です。

WasmはもともとWebブラウザ上でRustやC/C++などのネイティブなコンパイラ言語を動かすために作られた技術です。ただ、結構いい感じにできてしまったので、Webブラウザ以外にも流用しちゃおうということで、現在はDockerコンテナの代替になるように研究が進められています。ぶっちゃけ、いちいちLinuxコンテナを作るより、Wasmで操作したほうがコストがめちゃくちゃ低いんですよね。開発が進んでくれることを祈ります。

GraphQL

GraphQLは大規模開発に主に向けたRPCみたいなやつです。
REST APIでは、例えば
GET /articles で記事一覧を取得して、GET /tags でタグ一覧を取得して、GET /usersでユーザ一覧を取得して...とデータ量が増えるごとにリクエスト数も増えて、その分サーバへの負担も転送量も増えてしまいます。そこで、これらのリクエストを一回のリクエストにまとめるプロトコルみたいなやつがGraphQLです。ただ、個人の意見ですが、GraphQL使わなくても、自分で実装したほうが速いと思います。いわゆる

{
  'requests': [ 'articles', 'tags', 'users' ]
}

こんな感じでリクエストしたら来るみたいな処理を実装すればいいだけなので、かんたんですね。
まあ、GraphQLはクライアントなども豊富なので、選択するのもアリですね。

Twind / WindiCSS

TailwindCSSを知っている人はたくさんいるのではないでしょうか。
ですが、あれってJIT使わないと重いんですよね。そこで、TwindやWindiCSSの出番です。
Twindは、Javascriptを埋め込むだけでそのまま使えます。そして14kbくらいで、めっちゃ軽いです。
また、WindiCSSはViteなどでも使えるものです。これはJIT版のTailwindみたいなものです。
こっちも使いやすく、開発規模によってはTwindより軽くなります。

IndexedDB

皆さんはブラウザにデータを保存する時どういうふうにしているでしょうか。
localStorage や、クッキーなどもアリですよね。ですが、これらは最大でも数MBや数KBくらいしか保存できません。
そこで役立つのがIndexedDBです。
これはブラウザの標準APIとして搭載されており、だいたい1GBぐらいは保存できることも確認されています。
ただ、これはすごく低レベルなAPIなので、Dexie.jsやidbなどのライブラリを使って扱うほうが良いでしょう。

Service Worker

これは個人的にめちゃくちゃアツい技術です。swdevなどがこれを使っています。
Service Workerは、JavaScriptのfetch() のレスポンスの書き換えができるエグいやつです。
例えば.jsx のファイルをインポートしたら、バンドルされたJavaScriptが帰ってくる、なんてこともできるわけです。
ちょっとややこしい仕組みですが、ぜひ使ってみてください。

Web Components

かんたんに言うと、独自の要素を定義できるってかんじです。<my-element> タグを作れるみたいな。
これReactでやればいいじゃんなにがいいんだって話なんですが、大規模開発になると、ReactやVueなどの一つの技術に頼るだけではなく、様々なフレームワークを多用することがあります。そこで、独自要素をネイティブに定義することで、いろんなフレームワークでコードを流用することができます。コードで言うと、

const App = () => <my-element>Hello, world!</my-element>

とReactで書いて、

<my-element />

とSvelteで書く、みたいなコトができるわけです。
これを利用して私はtmlというフレームワークを作ったりしてます。

おわりに

どうでしたでしょうか。
Web業界は移り変わりが激しく、これらの技術もいつか廃れるかもしれませんが、面白い技術なので、今のうちに覚えておいてもいいかもしれません。
また、Webには他にもいろんなユニークな技術があると思うので、もし何か見つけたよ〜っていう方は僕のTwitter(@kstdx)にDMをお願いします。