私が「非同期通信」に強く拘る理由【UXの為にWeb制作を捨てる】
こんにちは、シンヤです！
今回はデザイナーの私が「非同期通信」に強く拘る理由【高いUXの実現】というテーマでお話しします。
「同期通信」と「非同期通信」について
HTMLを読み込んでページを切り替える技術を「同期通信」といいます。
わかりやすい例を挙げると「WordPressで作られたページ」とかがそうですね。
しかし今は、JavaScriptを使ってページを切り替える技術もあります。
これを「非同期通信」といいます。
裏側のHTMLは最初に読み込まれるJavascriptしか存在せず、JavaScriptがDOMを操作します。
ページ切り替え時に読み込みが発生しないので、スムーズな遷移が実現できます。
「非同期通信」の技術を使って作られたWebアプリのことを「Single Page Application（SPA）」といいます。
このブログもSPA（Gatsby.js）で作られています。
Pjaxと何が違うの？
少し話が脱線してしまいますが、非同期通信が出来るjQueryライブラリに、Pjaxというものがあります。
Pjaxは、URLを変更すると非同期でコンテンツを入れ替えてくれるライブラリで、SPAとは違い遷移先にHTMLが存在しています。
SPAの場合、実際には遷移先にHTMLがありません。
JavaScriptがDOMとURLを動的に切り替えて、リクエストがあった差分のみを描画しています。
HTMLとDOMについて
DOMとは「Document Object Model」の略称で、かんたんにいってしまうと、Webページを表示する仕組みのことです。
WebページはHTMLを読み込んだ後、内容を解析してDOMを作り出し、ページを表示しています。
つまりHTMLとは、「DOMを作るための設計図」のようなものです。
裏を返すと、DOMを作った後はHTMLは不要ということです。
このDOMを、JavaScriptを使って切り替えてWebページを表示する技術が「SPA」です。
答え：高いUXを実現したいから
結論からいうと、私が非同期通信にこだわる理由は上記になります。
Webでプロダクトを展開する場合、高いUXにこだわり抜くなら「非同期通信」意外に方法はありません。
なぜなら同期通信では、以下の課題があるからです。
- ページ遷移時に読み込みが発生してしまう
- サーバーサイドなしで動的処理ができない
- ネイティブアプリと同等の機能が使えない
- APIが使えない
1. ページ遷移時に読み込みが発生してしまう
これは上記で解説しました「SPAの説明」の通りです。
裏側のHTMLは最初に読み込まれるJavascriptしか存在せず、JavaScriptがDOMを操作します。
ページ切り替え時に読み込みが発生しないので、スムーズな遷移が実現できます。
つまり「同期通信では理想のUXを実現できない」ということです。
読み込みだけなら「Pjax」を使えば解決できないこともありません。
ただあくまで「読み込みだけ」なので、SPAと比較してできることは限られてきます。
後述の2~4は、Pjaxでは全てできません。
高いUX実現のために、技術的に可能なことは全て実行できる環境が欲しいのです。
2. サーバーサイドなしで動的処理ができない
動的処理とは「ユーザー1人ひとりに合わせて、表示内容を変更すること」です。
例を挙げると「会員登録・ログイン機能」や「Cookieによる表示内容の切り替え」などです。
非同期通信の場合、サーバーサイドで行っていた処理をクライアントサイドで実行します。
裏を返すと「今までサーバーサイドで行っていた動的処理を、クライアントサイドで実行できる」ということです。
SPAでできることが多いのもありますが、今流行の開発方法は、環境を細かく分けて開発するケースが多いです。
一例を挙げると、
- 静的処理は動的処理含む、見た目の機能は「フロントエンド」で
- AI・機械学習・APIの開発は「バックエンド」で
などですね。
このような開発形式を「マイクロサービスアーキテクチャ」といいます。
このように技術に合わせて環境を分けると「互いの長所を活かせる」や「メンテナンスがやりやすくなる」などのメリットもあります。
3. ネイティブアプリと同等の機能が使えない
ネイティブアプリとは「スマホにインストールして動作するアプリ」のことです。
一般的に言われる「アプリ」と同じです。
SPAはJavaScriptを使って「Web上で動作するアプリ」です。
なのでネイティブアプリと同等の機能を提供できます。
ただWebブラウザで動作するアプリなので、Webブラウザでできないことはできません。
ネイティブアプリと同等の機能とは、例を挙げると以下のような機能です。
| YouTube |
|---|
| 別ページへ遷移しても動画を再生する |
| リンクやタブでも迅速にページ遷移ができる |
| Coincheck |
|---|
| リアルタイムや指定した時間毎に数字を変更させる |
| WordPress |
|---|
| 編集画面でブロックを表示して、リアルタイムに入れ替えたり並べ替えたりできる |
この他にも「非同期通信だからこそ実現できる機能」は山のようにあります。
4. APIが使えない
APIとは「Application Programming Interface」の略称です。
他の会社が提供している機能を、自分たちも使えるようになることです。
例えば決済のサービスである「Stripe」や「PayPal」が提供しているAPIと連携すれば、自分のサービスに決済機能を導入できます。
フロントエンドでも動的処理ができるSPAだからこそできる芸当です。
「同期通信」の場合、サーバーからの応答が帰ってくるまで何もできないので、APIは使えません。
WordPressでAPIを使う方法
正確に言うと「WordPressの管理画面だけ抜き取って、フロントをSPA化させることでAPIを使えるようにする」です。
WordPressは「同期通信」なので、APIが使えません。
WordPressでAPIを使いたい場合、見た目を表示する技術をSPAで作り替える必要があります。
それを可能にするのが、WordPressをWebアプリケーション化させる「WordPress REST API」です。
管理画面だけ抜き取って、フロントを「React」や「Vue」などで作り替えることが可能になります。
参考までに、WordPress REST APIを使ったデモサイトを作成しました。
デモサイト
「非同期通信にこだわる」と決めた時点でWeb制作の道は捨てている
SPAは「Webアプリ」なので、非同期通信の環境にこだわると決めた時点で、私はWeb制作の道は捨てていると言えます。
「Web制作」と「Web開発」の違いについて
簡潔に言うと以下の通りです。
- Web制作：ホームページづくり
- Web開発：アプリケーションづくり
さらに噛み砕いていうと、
- Web制作：複雑な処理や動作はない
- Web開発：複雑な処理や動作がある
つまり、
- Web制作
- 静的なもの（見た目が基本的に変わらない）
- Web開発
- 動的なもの（見た目が流動的に変わる）
ということです。
例えばWeb開発は、
- ログイン前の画面
- ログイン後の画面
- ログイン後このボタンを押した場合の画面
- 特定のパラメーターがある場合の画面
- スマホアプリからログインした場合の画面
- メール通知やPush通知
などなど、考慮しなければいけない流動的な要素が、いくつも絡み合いながらデザインを作っていきます。
上記のような複雑な条件が絡み合うプロダクトを「アプリケーション（アプリ）」と呼びます。
Web上で動かせば「Webアプリ」。
スマホ上で動かせば「スマホアプリ」または「ネイティブアプリ」と言われます。
つまり「Web開発」の仕事場で「アプリを作って生きていく」と決めているということです。
同時に「高いUX実現のために、Web制作で生きていく道は捨てている」と言えます。
まとめ
- 私が非同期通信にこだわる理由は「高いUXを実現したいから」
- Webでページを表示する技術には「同期通信」と「非同期通信」の2つがある
- 「同期通信」はWordPressのような、HTMLを読み込んでページを表示する
- 「非同期通信」とはJavaScriptが、DOMを操作してページを切り替える
- 「同期通信」では、スマホアプリと同等の高いUXが実現できない
- 「非同期通信」を使えば、スマホアプリと同等の高いUXが提供できる
- Web制作は「同期通信」でホームページを作る
- 裏を返すとUXの為に「非同期通信にこだわる」と決めた時点で、Web制作の道は捨てている
今回は以上になります。
- 私が「非同期通信」に強く拘る理由【UXの為にWeb制作を捨てる】
