デザイナーにむけた「阿部寛」のお話
この記事はGoodpatch Anywhere アドベントカレンダー2日目の記事です。
最速のWebサービス「阿部寛」
有名なネタとして、HTMLと画像のみで作られてる阿部寛さんのホームページがよく挙げられます。
バックエンドからデータを取得してきたり、Javascriptで要素を差し替えたりをブラウザの上でやるとWebは重くなります。
とはいえ世の中がみんな阿部さんのようにミニマリストやるわけにもいかないので、がんばって阿部さんっぽくなろうとしてるのが昨今のWeb開発です。
阿部寛のような作りのサービスを、静的コンテンツだとかよくいいます。
ものすごく乱暴ですが、以下がいっぱいあるほど、似てない阿部さんです。
データベースの参照
Javascript！
ほんでデザインは阿部寛ポテンシャルを決める大きな要素だよ。という話をします。
今も昔もSSRが1つのアンサー
↑の逆説で、ブラウザの上で色々やらなければWebは軽いわけです。
一昔前は全部これでした。
阿部寛さんのプロフィールをデータベースに入れておいて、プログラミングとか気にせずプロフ更新できるようにしました！ってなったらSSRです。
じゃあもうSSRでいいじゃん?
昨今のサービスって**「ログイン」とか「検索」**とかユーザーの操作で変わってしまいますじゃん？
その都度ページを読み直せばいいけど。**それをいまの子たちは許してくれはるん？デザイナーはイケてるって思ってくれるん？**というお話になります。
ログインとかユーザーの操作がなくても、最近のサービスは訪れただけスクロールしただけでもう一個ユーザーの動作があった扱いになってることも多いです。
前にもきてくれたあなたにはコレがおすすめやでとか。とかしたいのです。
CDNをどんだけ使い倒せるかの戦い
近頃。デザイナーさんでも、SSGだとかISRだとかJamStackだとかの言葉を聞くことも増えてきたんじゃないでしょうか？
すごく乱暴にこれらを説明すると。HTMLをキャッシュにぶち込む工夫です。
キャッシュに入ってる画像とかはサーバーから取ってくるより、速くとれます。そういうものなんです。
つまりページを丸ごとキャッシュすれば、めちゃ速くページが見れることになります。
阿部さんくらいシンプルならキャッシュとか気にしなくてよいけど、世の中のサービスはそうはいかないくらいにはデカくて困ってしまうわけです。
じゃあ全部キャッシュすればいいじゃん？
キャッシュから持ってきたものは、前に見た時の状態のままです。
「お知らせ」だとか「マイページ」だとか、前に見た状態のままだとまずいことの方が多いんじゃないでしょうか？
情報が刻々と変わってしまう要素はキャッシュにぶち込みづらいわけです。
キャッシュからなにかを取るということは、最新の状態をとりにいかないってことです。
「阿部寛≒早くてシンプルなWeb」に少しでも近づきたい、、！
SSRとキャッシュ、両方いい感じに使えば阿部さんに近づけるやん。っていうのが最近の流行です。
見るだけ・読むだけなら、SSRしたHTMLをキャッシュにぶち込む。
ユーザーの個人情報がモリモリにあったり操作をガリガリにやるなら、毎回SSRする。
だいたいは見るだけ・読むだけなんだけど、一部最新の状態じゃないと困る。なら一部を除いてSSRしてキャッシュにぶち込む。です。
内容が一緒のページなら 1 > 3 > 2の順で速いです。
その上でいかにJavascriptを使わないかです。
デザインの話はいつでてくるのよ？
部分的にキャッシュするだとか、Javascriptを切り離すだとかは、わりと新しめの技術なので難易度が高くなりやすかったり、要件やデザインによってはそもそもできなかったりします。
デザインの時点で↑を解決・軽減できる見込みがめちゃあります
部分的に扱いやすい設計になってたり
辺に散らばってなかったり
複雑な計算等を要求されなかったり
雑なおまとめ
なれるのに阿部さんにならないのは勿体無いよね？かっこいいもんね？
と言いたいがために、長々とした文章を書いてしまいました。
いまの世の中で阿部寛さんを目指すなら、 どこでJavascriptつかうだとか、キャッシュ使うだとかを知ってる必要がありそうです。
もちろんデザイナーの皆さんが↑の知識を持ってればもはや約束された阿部寛さんですが、
デザイナーのみなさんただでさえやること多くて忙しい日々だと思うので、
エンジニアをよしなに使ってやってください。というお話でした。
良いお年を🙇