はじめに

CodeGridの年中行事、年末年始の座談会です。Web関連の技術動向について、2020年を振り返りながら、2021年を展望します。前編は年末に、後編は年始に公開予定です。まずは、JavaScriptの動きから話を始めましょう。

司会進行はJamstackエンジニアの中村が、ときどき横から編集の外村や丸山が質問をしています。

ECMAScript 2020を振り返る

中村：まずはJavaScriptの今年の流れをお話しましょうか。矢倉さん、どうでしたでしょうか。

矢倉：ECMAScript 2020はどうだったかな……。Dynamic Importが2020ですね。だんだんと入る機能が少なくなってきたというか、機能としては大きいんだけど数は少ない感じなのか、あんまりStage 4に入るのがなくなってきたのかな。でもOptional Chainingとかは入りましたよね。

――ええっと、TC39のFinished Proposalsを見ると、2020では次の機能がリリースされたようですね。

• String.prototype.matchAll
• import()
• BigInt
• Promise.allSettled
• globalThis
• for-in mechanics
• Optional Chaining
• Nullish coalescing Operator
• import.meta

矢倉：モジュールの実装ほど影響は大きくはないんだけど、多少書き心地が良くなるものが多い感じですかね。Nullish CoalescingとOptional Chainingは、組み合わせて使うというのが多いかな。

中村：Nullish Coalescingは、TypeScriptだと、もうあるんだっけ？

森：そうですね。short-circuiting assignmentっていって、Nullish Coalescingをさらに書きやすくするやつが出てきていますね。最近出ててきたやつなんですけど。

// これまで次のように書いていた演算処理が
a = a + b
a = a - b
a = a * b
a = a / b

// 次のようにも書けるようになった
a += b;
a -= b;
a *= b;
a /= b;

矢倉：ああ、JavaScriptのプロポーザルにも似たようなやつあったかな。

杉浦：ES 2021の、Logical Assignment Operatorsですね。

矢倉：変数に値を代入するときに、aの条件を満たさなかったらb、条件式を満たせるならa、じゃなかったらbみたいなショートハンドを書いていたんですけど、それが式の代入の=の前に書けるので、重複を減らせるとか。オペレーターなんで、それの拡張で。ほんとにうれしいかどうかはわからないんですけど。

中村：aが条件満たしたら、なにもしないで済むっていうことなんですね。

杉浦：aがあるかどうかっていうのを知る必要がない、知らなくても代入できる。

――Logical Assignment OperatorsはTypeScriptではもう実装されていて、JSでは2021で入ってくるっていうこと？

杉浦：そうですね。これはES2021で実装されるもの（すでにモダンブラウザでは実装済）で、TypeScriptでもバージョン4.0から使えたという話ですね。

中村：TypeScriptはちょっと先のが使える感じはありますね。TypeScript自体は流行っていますよね。これから学びたいねっていっている人も多い感じがします。

――ちょこさん（森）はTypeScriptをよく使っている印象があるんですけど、案件の特性上TypeScriptを使っているんですか？ それとも自分が使いたくて？

森：2年くらい前からやっているVue.jsの案件があるんですが、自分で使いたいっていうのもあってTypeScriptを入れました。やっぱり、規模が大きくなってくるとタイポしたときに指摘くれたりとか、リファクタがすごく楽だったりするので。

以前、Angularの案件をTypeScriptでやったときすごい楽だなって思って、それをきっかけに個人でも使うようになったんですよね。Vue.jsに関しては、型推論が効かない場面があったりと相性の悪い面もあったのですが、Vue 3に移行したことでそのあたりも解決され、だいぶ楽になりました。移行はけっこう大変だったんですが。

Vue.js、React、Angularの動向

中村：Vue.jsの話が出ましたので、ちょっとフレームワークを振り返ってみましょうか。2020年はやっとVue 3が出ましたね。

杉浦：RFCが出たのが2019年の7月で、正式版が2020年の9月でしたね。

森：2020年の春ぐらいに出るみたいな話がなかったでしたっけ？

矢倉：まあ、思い通りのスケジュールでソフトウェアが開発されることって、そもそもないんじゃないかな。

杉浦：順当に議論が進んだ結果、このあいだ出たというだけなのでは。

森：みんなが「まだかな、まだかな」って言っていたから、それで遅れたっていう印象があったのかもしれない。

中村：確かに。Vue 3が待ちきれなくなってReactに人が流れているのかなみたいな印象もあったんですけど。

森：そんな印象もありますね。ツイートしている人もいたと思います。

中村：React自体は、確か2020年はバージョン17が出たんですよね。

杉浦：そうですね。Reactはリリースノートにも、「No New Features」、新機能はありませんって書いてある通り、ほとんど変わってないですね。JSXの変換を、いい感じにランタイムでやってくれるようになったくらいかな。

森：JSXって、コンパイルしなくても使えるようになっているんですか？

杉浦：いや、そうではなくって、全部のファイルにimport React from "react"って書かなくても、勝手に判断してJSXの変換をしてくれるということですね。

森：ああ、なるほど。個人的な印象では、Vue 3の今回のリリースがReactを意識している印象ですね。Vue 3のComposition APIと、ReactのReact Hooksとか。

杉浦：似て非なるものですけどね！

森：（笑）いや、なんだか、目指す方向が一緒というか、やりたいことが一緒というか。あとはVue 3のTeleportってやつがReactのPortalかなと。それからReactにあるFragmentや、コンポーネントを非同期でロードできるようにするSuspenseコンポーネントもVue 3では導入されていて（Fragments、Suspence）意識しているのかなっていうのは感じましたね。

杉浦：VueのComposition APIのRFCにも、「React Hooksに影響受けています」っていうのは書いてありますね。

We acknowledge the creativity of React Hooks, and it is a major source of inspiration for this proposal.

森：ああ、そうですよね。Composition APIには、React Hooksのようなことを実現したいっていう側面もあると思うんです。

Reactの関数コンポーネントのように、頻繁に実行される描画関数内でStateを管理しようとしたら、描画時の無駄な処理をなくすために依存変数を明示する必要がありますよね。りぃさん（杉浦）のPreactのHooks記事にそういう解説があっておもしろかったんですけど、常に依存変数が何かを意識して書くのも結構しんどいなとも感じました。

杉浦：まあ、Vueでも、コンポーネントをまたいでReactiveなものを渡すときには、refにする・しないなどの制御はしないと、無駄にあっちこっち再描画しちゃうことになりますよね。

森：そうなんですよね。Composition APIの場合は、一度しか実行されない初期化のタイミングで「描画に影響するStateはこれ」という宣言をする構文になっていて、Stateの変化に応じて実行される描画関数とは違う場所で宣言することになります。そのため依存変数の明示を要求しない構文になっているので、その点は楽だなと思いました。

中村：あと、大きなフレームワークというと、Angularもありますね。今日の座談会には、社内のAngularに詳しい人が参加していないんだけど。

――社内のAngularマンの宇野さんに、簡単ではありますがコメントを貰っています。今年はそんなにAngularの動向を細かく追ってはいなかったそうですが。

• Version 9 of Angular Now Available — Project Ivy has arrived!

森：型が効くようになるのはいいですね。Angularがいち早くTSを取り入れて「わー、型付け便利〜」ってなってたけど、それだけにテンプレ経由すると型がはずれちゃうのがほんと残念っていう気持ちでしたので。

――なるほど。続いて、2020年6月にリリースされたAngular v10と、2020年11月にリリースされたAngular v11についてはどうでしょうか。これも宇野さんのコメントをもらっています。

坂巻：まあ、勝手にリロードしないでほしいと思う人もいるよね。

矢倉：そういえば、これはAngularJSの話なのですが、LTSのサポート終了がCOVID-19の影響で半年伸びたというアナウンスがありました。

――こんなところにも、コロナの影響が出ているんですね。

PreactやSvelte、最近注目しているライブラリ

中村：さっき、Reactに関係してPreactの話も出たんですけど、そのあたりの新しいライブラリはどうでしょうね？ 新しいってわけでもないか。Preactは結構前からありますよね。

矢倉：npmを見ると、5年以上前からあるっぽいですね。

杉浦：まあ、Preact、流行りはしていないですよね。

中村：ただ、前にCodeGridで行った読者アンケートでは、「今、気になっている、注目しているライブラリ／フレームワーク」という問いで、Preactを挙げている人もいたんですよね。この先どうなるんでしょうね？

杉浦：この先どうなるかはだれにもわかりませんが（笑）、ReactのロードマップにはあるConcurrent Modeは、Preactには来ないらしいということだけは、Issuesでわかっています。Reactの根本的なところに基づいた機能なので、実装するとすればコードがすごく増えてしまうからでしょうね。

――「ブラウザ独自のAPIを利用しつつ、必要最小限のAPIを選びぬいた分だけ軽い」という、当初のPreactのアイデンティティが崩れちゃうんですね。だからPreactに入れることはないのか。

中村：あと、Svelteはどうでしょうね。わりと2020年はSvelteの名前を聞くようになった気がします。ちょっと前から、速度が優先されるプロダクトでは使われるというのはあるかなと思いますね。

杉浦：自分が知ったから意識して聞くようになったからかもしれないので、いたるところで使われているとか、みんなが使っている、みたいな感覚はないですね。ほんと、知っている人は知っているって感じですね。

森：前に社内で、「2019年流行っていたフレームワークを集計したサイト（編集部注：The State of JavaScript 2019）」のことを話題にしたことがあったと思うんですけど、あれを見ると結構Svelteが上でしたよね。

杉浦：そうなんです、世界的には有名なんですよ！

中村：国内ではほぼSvelteの名前は聞かないんですけど、世界のデータとか見ていると、結構出ているなと。他のフレームワークと使い勝手的には一緒なんですけど、アプローチが違うので。そういう意味ではいいなあと。

森：Svelteって生成されるファイルサイズはちっちゃいんですよね？ 仮想DOMを用いず、小さなランタイムライブラリで済むように、事前コンパイルするので。

杉浦：もちろんアプリの規模によりますが、だいたいは比較にならないほど小さくなると思います。

中村：Svelteはコンパイラだと、一応言っていますからね。ただのJSファイルが吐かれるだけ。

森：TypeScriptの対応はどんな感じですか？

杉浦：最近そこそこがんばって対応されていて、いちおう使える感じですね。使えるけど、完璧ではなく、TypeScriptであるがゆえにこう書かなきゃいけないというのもいくつかあるみたいですけど。

中村：Svelteはその構造ゆえにテストが書きにくいという話があったかと思いますけど。ユニットテストみたいなものは、どうなんだろう？

杉浦：ソースコードだけを使ってっていうのはもちろん厳しいですよ。コンパイラ通さないとなにものにもならないので。別にコンポーネントをレンダリングしてそこに対してテストかけるのは普通にできますね。

森：来年、流行るかなあ……。

中村：別にプロダクトに入れるにあたって、海外では実績もあるし、これから日本で流行ってもおかしくないのかなって感じですね。

杉浦：そうですね。

中村：Svelteは使われていても、あんまりわかりやすくないのかな、プロダクトのものとしては。わかりやすくライブラリを読み込んでいるわけではないし。

杉浦：いや、それなりにわかりやすい（笑）。CSSのためのsvelte-ってクラス名がマークアップにいっぱいつきますから。

――じゃあわかりますね。

森：アメリカの大統領選の開票速報サイトにSvelteが使われているみたいなことが、社内の雑談で出たことありますね。

杉浦：まあそれを言ってしまうと、Svelteの作者Rich Harris氏はニューヨーク・タイムズのグラフィックエディタなんで、ニューヨーク・タイムズで使いまくっていますよ（笑）。

――それは使いますよねえ（笑）。

これからのライブラリ選定

中村：あとは、Next.jsとかの話だけど……去年のほうが流行っていた気もするけど。会社名が変わったのって2020年？

矢倉：そうですね、社名がZEITからVercelになった。Next.jsはお金の調達もすごいし、ぶいぶい言わせている印象がありますね。リッチなほうのスタティックサイトジェネレーションっぽいものを押し出しているのが今年ですね。

いまはReactとほかのライブラリを組み合わせて～というよりは、Next.jsを使うことが多いのかなってなんとなく思っていたんですけど。どうですかね？

杉浦：Next.jsだけで、だいたいなんでもできますからねえ。

中村：Next.jsはnpx create-next-appを実行して、pagesディレクトリの中にJSXでコンポーネント書いていったら、それだけでサイトとかアプリとかできるぞって感じですよね。コンポーネント書くだけでページができる。

森：やっぱり自前でゴリゴリやるよりは、そういうものに乗っかったほうが楽だったりするんですかね。でも、使っているうちに「かゆいところ」が出てきて、「この場合はどうやるんだ!?」みたいのがありがちかなと思ったりするんですが。そういうのって直面したりしませんでした？

杉浦：「相当かゆいやつ」ぐらいですね。そこはだいたい「こういうのが欲しいんだろ？」みたいのはあるから、これだけ支持されいてるのかなと思います。やっぱり、「流行っている」は「使っている層が多い」ってことなんですよね。

中村：流行っていないやつは、困ったときに検索しても出てこないつらみがあるんで。

――こうやってライブラリもいろいろあると、どれを選んでいったらいいんでしょうね。2020年の状況としては。

杉浦：各ライブラリより、リアクティブにUIを定義するという本質を学んでください、みんな！ と、言いたい（笑）。ReactもVueもSvelteも結局、Stateを用意してそれを更新したら表示がいいかんじに書き換わるというのがみんなやりたいことなんです。その考え方と作法さえ知っていれば、どのライブラリを使うかは些末な問題だと思いますね。

あとは、そういう基本の話の上に、めちゃくちゃでかいアプリを作ろうとすると、やっぱりどうにもこうにも正規化するところに労力を割かないといけないっていう流れはありますね。そうなると関数でシンプルに合成できるようにしたいし、TypeScriptみたいに型も導入したいとなる。なので、ReactもHooksで関数を混ぜようぜ！ってなってるし、Vue 3のComposition APIも、シンタックスとしては同じような方向になってますね。

――そうすると、二極化していくってことですか？ 大きなものを作るアプローチと、SvelteやPreactだと、軽量化していくアプローチと。

杉浦：二極化するというより、それぞれのフレームワークが持つ思想の色がより強く出てくるのではないかなと思ってます。

Reactは、大きいアプリをきれいに作れるよう関数によって正規化していく思想だと思っているので、小さいものを作ろうとした場合に持て余すというか。哲学を学ばずに場当たり的にコードを書いちゃうと、後でメンテできなくなるみたいなのがよくある印象です。

VueのComposition APIは、別に使いたくなければ使わなくていいようになっているんですよね。なので大した規模でないなら、今まで通り書けばいいし、大きいアプリをきれいに作らなければいけなくなったときには、そういうやり方が用意されている。というのが、VueのVueたるゆえんの一番いいところですよね。

Svelteは、小さいものを作るのには、コードの記述量も少なくて本当に楽ですね。ただ大きいものを作るためには、仕組みはあれどノウハウがまだ蓄積されておらず、一般的には難しいという印象です。

というように、どういうものを作りたいのかに応じて、フレームワークを使い分けるというのもアリかなと思っています。

――このあたりのお話はまたどこかでじっくりしてみたいですね。今日は、ひとまず次の話題、HTML/CSS関係に進みましょう。

Chromium Edgeのリリース

中村：HTML関係では、今年一番大きなニュースは、Chromium Edgeが出たこと？

矢倉：出たのは、2020年1月だったんですよね。もう1年くらいか。

坂巻：Windows Updateの自動配信でEdge Legacyと置き換わるのが、4月にずれ込んだんですよね。

中村：そうそう。コロナで確定申告の期限が4月まで延長されることになったので、その影響に考慮したと発表していましたね。

矢倉：ただ、自動で入るのも、Windows Updateのオプションで入れる感じで、OSのアップデートにバンドルされるかたちじゃなかったらしいです。バンドルされるようになったのが、今年の10月の20H2と呼ばれているアップデートですかね。

中村：では、現時点では、普通にアップデートしていれば、みんなChromium Edgeになっているということですね。

矢倉：今、手元に会社の検証機のSurfaceがあるんですけど、このあいだアップデートしたらChromium Edgeに変わっていました。

Microsoft 365のEdge Legacyのサポートが、2021年3月に終わりますね。IE11に関しては、Microsoft Teamsで2020年の11月に、Microsoft 365で2021年の8月にサポートが終わるようです。

杉浦：IEで開いたサイトが強制的にEdgeに飛ばされるのは、あれはなんでしたっけ？

矢倉：それはMicrosoftが用意したIE非互換サイトのリストに登録されていたサイトへ、IEで開いたらEdgeに転送されるというものですね。日本のサイトはあんまりないみたいですね。増えていくかもしれないけど。

IEは昔からそういう互換性のリスト持っているんですよね。たとえば、古いDOCTYPEでIEのdocumentModeが8だけどHTMLのビデオを使っちゃったがゆえにみたいな、ねじれた互換性のところを表示するリストですね。IEからEdgeへの転送も、たぶんそれの応用なんだと思うんですけど。

だから、もうちょい前からできたんじゃないかなと思うので、なんで今のタイミングなのかはわからないんですけど。でも、まあ、それでしあわせになれるところもあるんじゃないかと思いますね。

中村：げこたん（坂巻）、HTMLを書く人としてはどうですか。Chromium Edgeで、前のEdge Legacyがいなくなったことで楽になったりします？

坂巻：まあ、「Chromiumだからそんなに細かく見なくていいよね〜？」ということは少しあるかな。

中村：最後に1回ぐらい動いているのを見ればいいかと。

坂巻：そうですね。EdgeHTMLはキメラみたいな感じだと思うんですよね。WebKitで起きるバグは起きるし、IE由来の不具合も起きなくはないし、わりと大変だった。あと、以前のEdgeはブラウザ自体の操作感があまり良くなかったので、Chromiumになったことで操作感も改善したと思います。

矢倉：そうですね、デフォルトになって、中身もほとんどChromeなのはいいですね。コンピューターに明るくない人が新しくWindowsマシンを買ったときとか、何かのアプリを使うためにChromeをインストールしなくてもよくなる。

開発のほうも、ChromeのDevToolsのチームがEdgeのチームに引き抜かれたりしたようです。Chromium Edgeにしかない機能も多少あります。開発環境としてもMicrosoftは力を入れているっぽいですね。

――なるほど。Chromium EdgeはMac版も出ていますしね。では、次はHTMLやCSSの仕様について、2020年を振り返ってみましょう。

（後編へ続く）

（構成：編集、丸山）