フロントエンドの仕事を始めて半年とちょっとが過ぎましたが、

コーディングをする上での考え方がUPDATEされることが多々あります。

 

最初に強くそれを感じたのが、タイトルにもある状態についてです。

 

コードを書いていると、

変数や定数に真偽の状態を格納して使うことが多々あります。

 

別にこれが間違っているわけではありません。

全ての言語ではそのほうが分岐がわかりやすいですし、

むしろ型の概念がある言語ではそのほうがつかいやすいことが多いでしょう。

 

しかしこのままの頭でいくと、

フロントとしての挙動がきもちわるくなることがあります。

 

ユーザの状態を考えましょう。

 

ログインしていれば、ユーザの名前を。

そうでなければログインを促すようにしたい。

というありがちな話です。

判定に必要なデータは非同期でAPIから受け取ります。

 

APIからisLogin = trueを受け取りました。

ではこうしましょう。

“`

display = ‘ログイン’;

if (isLogin) return display = userName;

return display;

“`

 

別におかしいことはないですよね。

ほんとうにそうでしょうか。

 

実際サイトをみると、次のようなうごきになります。

 

(前提としてすでにログインしているとします)

1.サイトに訪問

2.一瞬、ログインが表示されている

3. 少し遅れてユーザ名が表示される

 

サイトを訪れたユーザはきっと2に違和感を覚えるでしょう。

どうすればよかったのでしょうか。

 

方法はいろいろですが、一例を挙げるのであれば、

 

1.サイトに訪問

2.ログインないしユーザ名が表示されるところは、ローディングアイコンが表示されている

3. 少し遅れてユーザ名が表示される

 

このことから、

先ほどのコードdisaplayはログインorユーザ名では分けられなかったという

事実が浮かびます。

 

要件定義が完璧であれば防げた話でしょう。

でも漏れなく、は望めないでしょう。

 

フロントエンドのエンジニアは、要件や仕様を鵜呑みにせず、

常にユーザに寄り添った目線で考え、適切な状態を提供できるよう

目を光らせていないといけないでしょう。