ちなみにそのペイントホールディングっていう機能があって、
それもChromeの機能なんですけど、
developer.chrome.comっていうブログの中にも
このペイントホールドっていう専門の記事が書かれてますので、
もし興味ある方は見てみてください。
ちょうど今日読むこの2つの記事のリンクもツイートします。
そのSafariのほうもですけど、
webkit does not need metaname color schemaみたいなタグですね。
to do thisということを言ってますね。
thisって言ってるのはそのペイントホールディングっていうものですね。
webkitはもうだいぶ前から実は実装されていて、
it is needed for more than reasons
いくつかの理由があってこれが実装されたよってことですね。
Safari has been doing paint holding in most carriers for years
数年間によってペイントホールディングの実装とか
あの辺の拡張というのは実はSafariがしてきたんだよってことを
この中のエンジンの方がおっしゃってますね。
いやあ、実は知らなかった。
一応Chromeもそれができるようになりましたと。
続いてまたChromeの話ですけど、
Chromeっていうのはback forward cacheを実装しましたと。
現在すべての主要なブラウザがこの最適化というのを行っていて、
MPA内の前後の移動っていうのをほぼ
瞬時に行うことができるようになりましたよと言ってますね。
やっぱりなんだかんだキャッシュ戦略のところだと思うんですけど、
そこがさらに進んでMPAでページ遷移とかの前後が
前後の移動っていうのがほぼ瞬時に行うことができるようになったので、
別にSPAのようにシームレスの体験が
かなり近いことができるようになったよと言ってますね。
続いてサービスワーカーですね。
っていうのがありますと。
これかつては実験的な機能だったんですけど、
現在のモダンブラウザでは事実上ほぼ100%利用可能と言っても過言ではないので、
クライアント側のルーターもおよびその複雑さを実装する必要なく
オフラインナビゲーションというのも可能になりますよと言ってます。
最後シェアエレメントトランジッションですね。
これまた別、それ専用の記事が貼られてますね。
これはGitHubのリポジトリですね。
シェアドエレメントトランジッションというライブラリーかなの記事がありますけど、
ライブラリじゃないな、これ多分Webのベース機能かな。
ただ、なるほど、オーガニゼーションがWICGですね。
そのシェアドエレメントトランジッションというのが受け入れられて、
ブラウザ間で実装されればNPAナビゲーション間のアニメーションというのを行うことも提供されますと。
なのでよりSPAでしかできないと言われたような
ページ間移動の時のアニメーションというところもNPAで全然できるようになってきたよという話ですね。
あとはそのブラウザ間で実装されればさらにそれができるようになったよというふうに言ってます。
以上4つの点に関して考えると、別にSPAじゃなくてもNPAでも全然
僕らの目指したりとか表現したいことができ始めてきているということを言ってますね。
これはSPAにその場所がないと言ってるわけじゃないですと。
リッチ・ハリスという方がおっしゃっていることには、
移行期のアプリについての素晴らしい講演というのを彼が行っているらしいですね。
そのGreat Talkというところのまたリンクがあって、これはYouTubeのリンクですね。
これもちょっと別で、終わった後にツイートしてみようと思いますね。
リッチ・ハリスの発言は基本的には大体聞いてて損はない気がするので、
素晴らしい講演を行っているんですけど、
SPAを採用したいくつかの理由をその中で解説されていますと。
例えばオーディオとかビデオプレイヤーなど、またはチャットウィジェットのように
ページ道に耐えられるような、どこにでもあるような要素が必要な場合というのが一つですね。
あるいは無限ロードのリストでバックボタンを押すとか、
リストの前の位置に戻るようなものですね。
そういうものにSPAが欲しいなという話ですね。
このような機能を明示的に使用していないチームでも、
未知の要素を理由にSPAを選択することがあります。
未知の要素を理由にSPAを選択するってあるのかな。
何とも言えないです。
とりあえずSPAみたいなところは正直あったりはしますけどね。
今のモダンなJavaScriptフレームワークが、
基本的にはSPAを作るためというのが発端にあったフレームワークばかりなので、
そのフレームワークを使いたいためにSPAにしておくのがいいんじゃないのとか、
もしくはサーバーサイドレンダリングするとかとはありますよね。
逆に言うと今MPAを作るときに今のフレームワークって何を使うかっていうのは、
また結構面白い議論もあると思うんで、
それはそれで考えてみたいと思いますけどね。
いつの日かナビゲーションアニメーションを実装したくなったらみたいな。
最初にやってないときですね。
ナビゲーションするときのアニメーションを実装したくなったらとか、
常時表示型の動画プレイヤーを追加したくなったらとか、
既存のブラウザーABIでサポートされてないカッタマイズが必要になったらとか、
いろんなそういう問いがあったときにとりあえずそういうことを加味して
SPAにしておく方が柔軟性があって対応が効くんじゃないのって話だと思うんですけど。
MPAの選択っていうのはブラウザーABIが十分でない場合に
ページを制御する将来の可能性を事実上立つことになると。
アーキテクチャ上の大きな決断になるっていうことは否めないということですね。
結局のところSPAは完全な制御を可能にするので、
多くのチームがそれを諦めることに躊躇しているのです。
ありますね。
どっちにしろMPAになったら画面遷移するので、
遷移したときにデータがフラッシュして消えてしまうところがどうしたって言い舐めないのもありますけどね。
SPAだからストアがあって、ストアでずっと状態管理をして、
別に厳密に言うと画面遷移じゃなくてJavaScriptでコンテンツを書き換えているだけなので、
そういうことができるし、
ハードウェアの進化があったからこそSPAっていうのが今実現可能になっているのも事実としてはあるんですけど、
改めてMPAにするときどうなんだろうというのはありますが、
MPAは基本完全なる画面遷移でサーバーに1回データを取りに行かなきゃいけないので、
フロントエンドの今のモダンな機能が完全に立たれてしまうというところは確かに大きいですね。
それがあるので躊躇しているというか、
MPAを選択しないということですよね。
ビジネス的観点とか将来的なことをいろんなものを加味すると、
やっぱりSPAの方が柔軟性があっていいよねっていう話だと思いますけど、
とはいえですね、以前にも同じようなシナリオを見たことがこの人はあると言っていました。
長い間JQueryっていうのがブラウザーが提供したAPIを提供していて、
夜間に熟睡したいチームはJQueryを選択しました。
言いたいことは分かるんですけど、
結果JQueryはフレームワークじゃなくてライブラリなのですけど、
いろんな開発現場がフレームワークとして使ったので、
なんだかんだ熟睡できないチームが多かったんじゃないかなと思ったりはしています。
昔のJQueryの闇を歩いた人はこの意見に対しては不運という、
怪異的に読めるなと思いました。
懐かしい思いです。
戻ります。やがてブラウザーが追いついて、
クエリーセレクターやフェッチなどのAPIを提供するようになると、
JQueryは不要な荷物のように思えてきましたと。
ぶっちゃけるとXHRがクソだるかったので、
簡単にコールできるようになったというのが正直言うと一番の理由じゃないですかね。
なので最近JQueryを使うとしたら、
コンパクトになった実際版のJQueryが出てるんですよね。
そういうのを使うほうがまだいいかもしれないですね。
本当に必要な機能はフェッチ系の処理とか書き方が楽になるので、
もう一個は多分アニメーションですね。
簡単にアニメーションがJQueryで実装できるのでそこの辺も大きいのかなと思いました。
全然CSSで簡単に書けたりするし、アニメートJSみたいなのもあったりするので、
いくらでもJQueryを使わない理由というのはいっぱいありますし、
そもそもJQuery本体が重いというのもあったりしますけどね。
これを作り上げたジョン・レシグってやはり天才だったなというのを思ったりします。
余談が過ぎだしたので本記事に戻ります。
ちなみにジョン・レシグは結局Reactを書いてるらしいです。
まあまあそれは時代の変化だと思います。
戻ります。
SPAでも同じようなことが言えるんじゃないでしょうかというふうに言ってます。
JQuery使わずに別にブラウザのネイティブAPIを使えばいいんじゃないのという話ですね。
説明のためにリッチ氏がSPAが必要なものの例を挙げているということを言ってましたね。
さっきの動画中でも言ってるかもしれないですね。
主に3つ挙げてます。必要なものというのは。
1つはチャットウェジェットを常に表示するということですね。
Shared Element Transitionというのがさっきですね。
これを使用してNPAナビゲーション中にウェジェットを表示しつけるというのが1つです。
2つ目はバックボタンでスクロール位置を復元する無限リストということですね。
ブラウザ戻るボタンのことだと思いますけど。
スクロールしていった位置を復元する無限ローディングのリストですけど。
こちらについてはコンテンツビジビリティを使用して
必要であればサービスワーカーに頂戴保存することもできます。
最悪ローカルストレージにぶち込んでしまえばというのも正直あったりしますね。
それはちょっと無理やり感はありますが。
続いてナビゲーションの間、再生し続けるオーディオ・ビデオプレイヤーを常に表示するみたいなところですね。
今日NPAでは不可能なんですけど、今後どうなるかというのは何もわからないですし、
Picture-in-PictureというAPIがいつかこれをサポートするかもしれないねというふうに言ってますね。
いろんな例を挙げてましたけど、しかしはっきり言ってSPAが完全になくなるとは正直思えませんというのがこのフィッシャーの意見ですね。
フォトショップやフィグマのようなものをNPAとして合理的に実装できるかは分かりません。
しかし新しいブラウザAPIや機能が次々と登場し、SPAの優位性が徐々に損なわれていけば、
将来的にはより多くのチームがNPAを構築することを選択するようになるでしょうと言ってます。
個人的にはこれだけ多くの選択肢があるのはエキサイティングなことだと思います。
しかもどれも10年前よりずっと良くなっているというところも注目になっていますね。
私は人々がオープンマインドでSPAとNPA、そして移行キーアプリとでも呼ぶのでしょうかね。
その両方というのが将来より良くなるように後押し付けていることを願っていますので、
一旦この記事は締められておりますというところですね。
一旦SPAとNPAのざっくりとした比較をしてみて、NPAも再評価してもいいんじゃないのという話をされてますね。
ただまだまだやっぱりSPAの方が幅広いし表現力も高いし、
これがなくなることはないというところも言及されていて、
どっちを選択するとか、画面によってはアプリケーション全体がSPAじゃなくて、
一部分の画面整理のところはNPAになるというのも全然あっていいと思いますけどね、個人的には。
というところでした。
では一旦今読んだThe Balance has shifted away from SPSというところの記事は終わりで、
フォローアップの記事があります。
Morrison's SPAです。
SPA図というやつですね。
ここに続いての考察が書かれているので、
続いてというかより深いところですかね。
書かれているのでここをちょっと読んでいこうかなと思います。
いきましょう。
前回の記事、SPAからバランスが崩れたというやつですね。
今読んだ記事からそれなりの反響を読んだので、
今回はその続きとしていくつかの点を明確にしたいなと思って読みます。
この記事自体が前の記事からほとんど日が経っていないので、
本当に大反響を読んだのかなと思いました。
では続きましょう。
まず定義の話ですね。
Definitionです。
ある界隈でSPAは俗にJavaScriptを大量に使ったウェブサイトを呼び付けるようになりました。
まあまあ別に否定はしないけど。
JavaScriptがあまり好きじゃない人たちなどにとっては、
こういうSPAに対して否定的な人って結構集まってるよっていうふうに言ってます。
JSが好きじゃない人たちは、
それはSPAが好きじゃないでしょうね。
しかしこれは私の言うSPAとは全く違います。
つまりクライアントサイドのルーターがあり、
全てのナビゲーションが新しいページをロードするのではなく、
同じHTMLページに留まっているようなウェブサイトです。
それだけだと言っていて、
それがSPAと言うかと言うとちょっと違うよって話をしてますね。
プログラミングモデルやシングルページアプリケーションを
コーディングしているように感じられるかどうかは実は関係はないよと言っていて、
この筆者の方の定義では、
TurboLinksはSPAフレームワークだと言ってます。
TurboLinksってなんだっけ。
GitHubのTurboLinksっていう、
これこそライブラリーかな。
ちょっと僕が不勉強で申し上げました。
TurboLinksっていうのがあるらしいですね。
っていうのはSPAフレームワークです。
例えフレームワークのユーザーとして、
JavaScriptに触れる必要がないとしてもだと言ってますね。
クライアントサイトのルーターがあれば、
それはSPAなんですと言ってます。
やっぱり根幹はルーターですよね、確か。
第2に、私の投稿の要点っていうのはSPAを葬り去り、
その墓の上で踊ることではありませんと。
やっぱり海外の方の表現力面白いな。
私はSPAは素晴らしいと思いますし、
多くのSPAに携わってきました。
SPAには明るい未来が待っていると私は思っています。
私が言いたかったのは、SPAを使う理由が
ナビゲーションを速くするためだけだとしたら、
それは見直す時期が来てるんじゃないかというところですね。
それがさっきのMPAの見直しってところの
結構根本的な理由の一つだというところですね。
MPAはやっぱりローディングがかかってしまうので、
やっぱりシームレスに動くSPAとの体験が
やっぱり全然違いませんってところがあるんですけど、
そのナビゲーションが遅いっていうのを理由に、
SPAが選ばれてるだけだとしたら、
今MPAでも全然いいぞっていう話が出てきてる話ですね。
もちろんそのキャッシュ的な話が結構大きいと思いますけど。
なぜならっていう理由が書かれていて、
なぜならブラウザーのストリーミングHTMLパーサー
っていうのはSPAが完全なJSONまたはHTMLをダウンロードして
手動でDOMに注入するのにかかる時間よりも早く
アバウトなコンテンツを描けるからですと。
この例って言ってますけど、例のリンクはないですね。
この例ではGitHubっていうのはターボリンクスの
SPAナビゲーションよりも新しいHTMLを取得するために
古典的なサーバーのラウンドトリップを
行ったほうがいいということになりますと。
まあまあまあまあそうですよね。
とはいえ私の投稿はいくつかの資料深いコメントや
フィードバックを目指しましたと。
そしてSPAの最近の人気低下には他の理由があるのか、
またある種のウェブサイトではなぜSPAが将来も
魅力的な選択肢であり続けるのかをちょっと考えるようになりました。
文脈とかコミュニティとか場合によっては
SPAっていうのは結構人気が下がってきているっていうのは
事実があってその理由は何なのかっていうのもありますし、
逆にある種のウェブサイトでは全然SPAが今、
今後もずっと使われ続けるっていう事実もあるそうですね。
それについてちょっと深く考えてみたいなっていうところですけども。
まず一つ目ですね。
コアウェブバイタルズです。
Googleの出したコアウェブバイタルズですね。
これについて一旦セクション切られてますね。
2020年Googleっていうのがコアウェブバイタルズっていうものをですね、
検索ページのランキングの要因にすることを発表しましたと。
これは業界に衝撃を与え、
それまでパフォーマンスをあまり重要視していなかった人たちが
サイトのスピードスコアに最新の注意を払いになったと言っていいと思います。
これ結構僕も衝撃でしたね。
パフォーマンスが悪いサイトはGoogleの検索の中で
上位に表示しないっていうふうに言い出したので、
終わってなりましたねこれは。
いい意味ですよ僕は。
結構これ嬉しかったです、どっちかというと。
やっぱり重いページで自分の時間を使うの嫌ですからね。
コアウェブバイタルズっていうのは、
ページロードに非常に重点を置いていることに注目していることが重要ですよと。
いくつかの要素があるんですけど、
例えばLGPってやつですね。
Largest Contents PaintとFIDですね。
First Input Delayってやつですね。
っていうのがあって、
これはいずれも最初のナビゲーション中の
ユーザーエクスペリエンスのみに適用されますと。
あとはCLSですね。
Communicative Layout Shiftっていうのがあって、
これさっきから出てきているこの英単語3つってやつですけど、
これはあくまでコアウェブバイタルズの中で出てきている観点ですね。
をまとめたものになります。
カテゴライズしたものですね。
っていうのは、
CLSっていうものは最初のナビゲーションと
それ以降に適用されるものになりますよと言ってますね。
Googleっていうのは最初のページ読み込み後の
サイトの速度は実はあまり気にしていませんと。
彼らはGoogleでリンクをクリックして
その後のページを読み込んだときの体験だけを気にしていると言ってますね。
これらの測定基準っていうのが
ユーザーエクスペリエンスの正確な代理であるかどうか
っていうのにも関わらずに
SPAに対して大きく偏っているんですよっていう風にやってます。
はあ、まあそうね。
この基準がそもそも
UXのいい方なのか悪い方なのかっていうのを
それ自体は一つの議論もあるんですけど
これかどうかっていうのは別に気にしていなくて
とにかくSPAに対して大きく偏っているっていうことを言ってますね。
SPAの価値提案全体っていうのは
少なくともパフォーマンスの観点からですね。
価値提案の全体っていうのは
後続のインタラクションが早くなるのと引き換えに
大きな先行コストを支払うということになりますと。
これはあくまで理論上のことですけどね。
これらの測定基準によって
GoogleっていうのはSPAがクライアント側でレンダリングする場合
LCBですね。
多くのJavaScriptをロードする場合
これがFIDですね。
またはクライアント側でコンテンツを徐々にレンダリングする場合
これはCLSですね。
それぞれにペナルティーを課していますよと言ってますね。
なるほどでした。
シンプルなHTMLファイルと
JavaScriptを使用しない古典的なMPAですね。
マルチページアプリケーションっていうのは