あらすじ

プログラミングを教える人と教わりたい人をマッチングするサイトMENTAで、
契約の相談をしたいという方から、下記のようなメッセージをいただきました。

jQueryでアコーディオン、ハンバーガーメニュー、タブ、スライド、ローディング、モーダルといった基本的なパーツの実装ができるレベルまで勉強したいです。

※ 文章は要約しています

これに対して、他のパーツについてはまあ良いのです。
ある程度、プログラミングの勉強をすっとばしても実装はできるレベルになれるかもしれません。

ですが「ローディング」は、基本的なパーツに見えるかもしれませんが
プログラミングの観点でみると、技術的には基礎レベルを超えており、
かなりプログラミングの理解をできてきた人じゃないと、理解＆実装＆お客様への説明がうまくできない機能になります。

なので「ローディング」に対するそもそもの話を記事にまとめました。
（おそらくこの人と同じように「ローディング」を表示するのは基本！だと思ってる人は多いと思うので）

ローディングが必要ない/適切じゃないパターンを理解する

HTML/CSS/JavaScriptだけで作るような作品（＝駆け出しWEB製作者が一人でつくる規模の作品）であれば
そもそもローディング画面を表示するほど、ローディングに時間がかかることはありません。

なぜなら、ローディング画面の表示ができるということは、
すなわち、HTML/CSSの読み込みがおわっているということで、
すなわち、画面も表示できるからです。

仮にメインのHTML/CSSと、
最初に表示したい小さめのHTML/CSSを別ファイルに分けたりしたとしても、
その読み込み時間の差は0.1秒いくかいかないかぐらいです。
そのくらいの時間に対してローディング画面を実装しても
「今、画面に一瞬なにかチラついた？」と気になるくらいのレベルのものになります。

ローディングが必要なパターンを理解する

ローディングが必要になる場面というのは、
たとえばサーバーにあるデータベースに対して、
大量のデータの中から特定の検索条件のものを見つけて取ってくる、みたいな時みたいに
ページを表示した後でサーバーからデータを取ってくる場合です。
（データベースからじゃなくても、サーバーが配信している何らかのデータを取ってくる場合でも同じ。）

そういう時に、やっと0.5秒〜数秒くらい表示することがあるというレベルです。

もちろんページを表示する前にデータを取ってくる場合も時間はかかりますが、
その場合、HTML/CSSの読み込みも終わってないので、ローディング画面も表示できません。

ローディングを理解するのに必要な知識

上記の理由から、
サーバーからデータを取ってくるような仕組みがある場合、

そのサーバーがどうやってデータを配信しているのか

を、サーバーサイドのエンジニアとお話して理解する必要がありますし、

そのサーバーからデータを取ってきている間だけローディングを表示する、というのはどうやるのか

の知識を身に着けておく必要があります。

これを理解するのは、冒頭で言っていた他の基本的なパーツの実装と比べると、難易度が高いです。

「ローディングを数秒間表示させる」という仕様は良くない

もちろん、細かいことはすっ飛ばして、
「最初に10秒だけローディングを表示する」という要件であれば
他と同じくらいのレベルで実装できます。

ですが、よほど大量のデータを読み込まないかぎり、
読み込みにそんなに時間かかることはありませんので、
それではユーザーを無駄に待たせているだけです。

たとえばスーパー超MAXもりもりハイスペックネットワーク通信でアクセスしても
ローディングで１０秒待たされるという話になります。

そういう仕様の良し悪しを説明できるくらいの理解度がないと、
作り手として相手に失礼という話にもなるかと思います。

業界の中には、上記がべつに相手に失礼とは感じない人も居るかもしれないし、
わかった上でそれでもいいと思ってる人も居るかもしれないですが…。

ローディングの理解に必要な知識の、具体的な名称（一例）

というわけで、ちょとネガティブな説明になっちゃいましたが
あくまでローディングは難しいよ、と言ってるだけで、
諦めろと言いたいわけじゃないので
ローディングの理解ができるようになるには
下記の技術くらいは理解できてないとうまくいかないよ、という例を紹介します。
やる気のあるひとは覚えましょう💪

下記はただの例です。
実際の仕事では、どうやってデータを取ってくるかによっても、必要な知識は変わってくると思います。
そのへんは実際にローディング画面を求めてくるお客さんにたいして
「何を待ってる間のローディングを表示したいのか」をヒアリングして、
そこから紐解いて、なんの知識が必要なのかを予測する必要があります。

API（エーピーアイ）

サーバーサイドからデータを取ってくるような機能は API と呼ばれます。

なかでもWEB制作であれば
WebAPI とか RESTAPI（RESTfulAPI）
なんて呼ばれる種類の技術の使い方を勉強をするといいと思います。

※ APIという言葉は「AとBをつなぐ機能」という、広い意味をもった言葉なので、
　他にもたくさんの使われ方があります。
　この機能のことだけをAPIと呼ぶわけではないので、そこは注意です。

先程說明してた「そのサーバーがどうやってデータを配信しているのか」というのは、
言い換えると「そのサーバーのAPIは、どういう仕様でデータを配信しているのか」という話になります。

Ajax（エージャックス）

APIの話とかぶってくるのですが、
サーバーで配信しているデータをJavaScriptで取得して、
それを変数に代入したりするときに使う機能が Ajax と呼ばれます。
（本質的には、JavaScriptでインターネット上のURLにアクセスする機能のことです）

ローディングが必要になるような処理を実装するときには
「Ajax を使って API を利用する」というような処理をすることになると思います。

Ajaxを使う方法はいくつかあります。
以前それについての說明を記事にまとめたことがあるので、共有しておきます。
Qiita: 【JavaScript】Ajaxを使うための色んな方法まとめ【これから学ぶ人用】

同期処理（どうきしょり）

JavaScriptで「この処理が終わるまで待つ」という機能を使うには、
JavaScriptの 同期処理 と呼ばれる機能を使います。
（Promise、async/awaitなどの機能です。）

基本的にはJavaScriptは、１行１行の処理がおわったら次の行の処理
という進み方をしますが、
Ajaxを使うときはこのルールから外れた動きをしますので、
この機能を利用する必要があります。

これも書き方が複数あります。
以前に說明を記事にまとめたことがあるので、共有しておきます。
Qiita: 【JavaScript】非同期処理とasync/await ~難しいこと抜きで、まず使いはじめるための知識~ ( ´ε` )💻

SQL（エスキューエル）

ローディングが必要になるケースとして
「データベースを利用してデータを取ってくる場合」という說明をしましたが、
この「データベースを利用」するために必要な言語を SQL と言います。

WEB制作の場合は
すでにサーバーサイドのエンジニアがSQLのコードを書いていて、
JavaScriptでは、それを実行→データにまとめて取得してくれるURLに
Ajaxでアクセスするだけになる可能性が高いです。

なので、こちらがSQLをガッツリ理解して使用することはないかもしれませんが、
サーバーサイドのエンジニアと話す機会があれば
必然的に会話にでてくる内容になると思うので
どういうことができるものなのかの理解はしてた方がいいと思います。

ただしデータベースではあるけど
SQLは使わない、というデータベースも存在します。
そういうものは NoSQL と呼ばれています。

また、データを取ってくるだけでデータベースは利用してない、
ということもあるとおもいますので、
まずはお客さんにたいして
「どういうところからデータを取ってくるのか」をヒアリングして、
そこから紐解いて、なんの知識が必要なのかを予測する必要があります。

サーバーとのやりとりの内容を理解できる程度のプログラミング知識

ここだけ、ふわっとした話になってしまいます。

WEB制作をはじめたいという駆け出しの人は
気がはやってるので「とりあえず最低限の知識を身に着けてはじめたい！」という人も多いと思います。

WEB制作で必要な「最低限の知識」というと、
HTML CSS jQueryと、jQueryを利用するのに必要な最低限のJavaScriptの知識
というラインナップになるかと思いますが、
この「jQueryを利用するのに必要な最低限のJavaScriptの知識」というのは、
「JavaScriptを利用するのに必要な最低限のJavaScriptの知識」よりも、浅い内容になるかと思います。

このレベルのプログラミング知識だと、
サーバーサイドからデータを取ってくるやりとりをするときに
うまく進められないことがあるかもしれません。
なので、ごりごりプログラミングを利用した作品（WEBアプリっぽいの）を作成できる程度の
プログラミング知識は身につけておくと、ためになると思います。

データを取ってくる先の仕組みが、その会社で作ったAPIだった場合は
サーバーサイドエンジニアと仕様の打ち合わせをする機会があるかもしれませんし、
他の会社がつくったAPIを利用する場合は、
そのAPIの資料を読んで理解しなければいけない可能性があります。
もちろん、APIを利用せずに、
単純にAjaxを利用してデータを取ってくるだけ、という場合もあると思います。

そのへんはお客さんにたいして
「どうやってデータを取ってくるのか」をヒアリングして、
そこから紐解いて、なんの知識が必要なのかを予測する必要があります。

まとめ

說明は以上になります。

ローディング以外の機能は、HTML/CSSで作った見た目を、
表示させたり消したりするだけで済む話なのですが、
ローディングに関しては「読み込む」＆「読み込みを待つ」という動作が必要になるので
ぜんぜん基礎レベルの話じゃないよ、という話でした。

難しいというのは、できないという意味ではないので
勉強がんばりましょう！とは思うのですが

「ひとまず何かできるレベル」を目指している方にとっては
ローディングもそこに含めるのは微妙かと思うので
知っておいていただけたらと思います。