サイトの裏側でリッチなUIを支えるソースコード「JavaScript」

サイト制作、とくにフロントエンドの設計では欠かせなくなったJavaScript (以降、JS)やjQuery。JSやjQueryが何なのか知らないオトナを含め、子どもからシニアまで、1日に何度となくスマートフォンの閲覧やゲーム、カーナビの操作で、体感している機能です。
今回は、そんなJSを使用したUIの一部を紹介しましょう。

「スルッ」と動くと気持ちいい、「ヌルッ」のドロワー型も高支持率

ウェブサイトを例に、JSが働いているわかりやすい部分といえば、いわゆるハンバーガーメニューと呼ばれる、スマートフォンで使用される三本線で表示されるグローバルナビ。ビー・オー・スタジオのウェブサイトでも使っています。スマートフォン表示で右上、あるいは左上にある「三」をタップするとメニューを展開。それまでの「三」は「X」に変わり、「X」をタップするとクローズ。この動きを構成する要素がJSです。

JSはプログラミング言語のひとつであり、同じフロントエンドのPHPやPythonよりポピュラーで（※1）、習得する開発者が1番多いことでも注目を集めています。jQueryはそんなJSを使いやすくパッケージにしたファイルです。
自分でカリカリソースコードを書かずに、数行の記述で求める動きを手に入れられるため、ノンプログラマーのウェブ関係者から支持をされています。jQueryだけを集めた「ライブラリ」から、デモを見ながらサイトにふさわしいUIや機能を探すことが可能です。ちなみにビー・オー・スタジオの現場では、制作者が自らの経験値からその案件にフィットする組み合わせを【自分のライブラリ】からピックアップして、実装するケースがほとんど。「ライブラリ」を訪れるのは、公式SNSでアナウンスがあった時や、ブラウザ対応をチェックするくらいで、訪問の頻度は多くありません。

追従型PAGE TOPボタン

ビー・オー・スタジオのサイトにも採用する「トップへ戻る」ボタンにも、jQueryを使っています。ページをスクロールしていくと画面右下に矢印がフェードして表示されます。クリック（タップ）するとトップへ画面がスクロール。この動きもパッとトップに戻るのではなく、スムースにスクロールするように調整しています。ユーザーに使い勝手のよい動作や見せ方は、時流にもよるところが大きく、どんな動きが好まれているのか、またデバイス毎に見せ方や操作方法も変わってくるので、日頃からアンテナを張って情報取集をしています。

PCとスマートフォンの画像ファイルを切り替え

PC用とスマートフォン用の画像を2つ用意し、画面幅で自動的にファイルを切り替えます。管理がしやすくなり、PCでは横に長くスマホでは正方形といった画像でも対処ができます。
逆にJSを使わない方法としてSVG画像を用意し、デバイスによって画像を切り替える必要性をなくすことも選択肢としてはアリです。ただし一部の古いブラウザとAndroidの2.Xに未対応になるため、案件に応じてSVGを使ってみてはいかがでしょう。

他にもJSを使わず、メディアクエリでPC用とスマートフォン用の画像を読み込み、デバイスに応じて表示するという方法もありますが、画像のサイズによってスマートフォンで表示する際のレンダリング負荷が増え、表示速度の低下を招くこともあります。GomezとAkamaiの共同調査では、対象にしたインターネットユーザーの4割が、3秒以内に画面がロードされないと離脱をすると答えています。ECサイトに限らず、企業サイトでも、深刻な機会損失となりかねません。

レスポンシブでテーブル組みの場合。スマートフォンの自動スクロール

ここ数年の傾向として、スマートフォンで価格表や比較一覧などを＜table＞タグで括って、横にスクロールする形が増えています。表組テーブルがページにある場合、あらかじめスクロールする用にタグをJSで書き出すようにしておくと、制作者の作業効率が上がります。

一方、スマートフォンを利用するユーザーへの配慮として、テーブルの表が水平に動くことを気づかせる必要があります。スクロールバーだけでなく、アイコンで【スクロールできるよ】をアイコンで表示してくれるJSもあります。

JSの可能性について

開発者のコミュニティとして、2008年からサービスがスタートした“stackoverflow”。
SQLでのメソッド出し方や、RDSのサポートが終わってしまったDBをホストする場合の対応といった、デベロッパーが迷路に入ったときに救出してくれるだけでなく、このサイトを通じて仕事も見つけられるとあり、月訪問者数5,000万人が集っています。
そのstackoverflowが10万人の利用者を対象に行った2018年度調査から、「人気のあるプログラム言語」のをピックアップし、下に掲載しました。
「もっとも人気のあるテクノロジー」という質問に対し、全回答者の7割近く、プロの開発者からは7割以上が「JS」と答えています。そして日常的に使うプログラミング言語にも、JSがもっとも多いことを挙げています。

出典元：stackoverflow