見出し画像

デザイナーも知っておきたいJavaScriptの基礎の基礎

さり

デザイナーがJavaScriptについてこれ知っといた方が良さそう、これ知っておきたかったーと思った最初の1歩をまとめました。(こんなことも知らんかったんかいと突っ込まれそうですがせっかくなので公開します)

なぜJavaScriptが必要か？

ページ内の情報をブラウザ上で書き換えるため
JavaScriptを使うと一挙一動ごとにいちいちページが遷移せず、同じページ内で情報だけを更新することができます。裏側ではデータをやりとりをした上で、ページ遷移はしない状態でユーザーは操作を継続できる(Ajax)ので、使いやすいアプリケーションをつくることができます。

webの仕組みとJavaScriptの役割

そもそも、Webは提供する側(サーバーサイド)と閲覧する側(クライアントサイド)が存在します。
サーバーサイドでは、エンジニアやデザイナーなどのデベロッパーがHTMLやCSS、画像データなどをサーバー側に置いて世界中の人が見ることができる状態にしています。(単にサーバーだけではなくデータベースや外部サービス(SaaS)との連携といった裏側のシステム群のことをサーバーサイドと言う)
一方、クライアントサイドでは、ユーザーがブラウザやアプリなどを使って見たり体験したりします。
ユーザーがスマホやPCなどからブラウザを使ってあるサイトにアクセスしようとすると、リクエスト(req)が送られ、サーバーがこれに対してレスポンス(res)を返し、ブラウザでレンダリングされることによって初めてユーザーはそのサイトを表示し見ることができます。
またそのサイト内で何らかの操作や遷移をした際には、またリクエスト(req)を送信し、サーバーがレスポンス(res)を返し、遷移先のサイトを見ることができるようになっています。

もしJavaScriptを使わなかった(HTMLとCSSだけとした)ら...？
HTMLとCSSだけのサイトもあるように、JavaScriptがなくてもサイト自体を見ることはできますが、
・レスポンスがHTMLファイルであるためページ遷移する度に再レンダリングする
・サーバー処理中は操作できない
といった使いづらいサイトになってしまいます。

一方で、JavaScriptを使うと
より体験がいいアプリケーションをつくることができます
例えばページ上でボタンクリックなど任意のイベントが発生すると...

①JavaScript + XMLHttpRequestでサーバーに対してリクエストを送信（非同期通信）ほしい情報、返ってくるレスポンスの情報を指定してリクエスト
②サーバーで受け取った情報のサーバー処理中もユーザーは操作を継続できる
③レスポンスをJSONやXMLなどの形式で返す
④受信したレスポンスを受けて、DOMでページを更新

という流れになり、更新のあった部分だけを書き換えるためページ全体を再レンダリングしない分早くなります。

JavaScriptのお仕事「データのやり取り」と「DOM操作」

JavaScriptのお仕事は大きく「データのやり取り」と「DOM操作」の2つがあります。
データのやり取り
ページを読み込んだ際に、JavaScriptがwebAPIに対してデータを受け取りに行きます。データベースから引っ張っていたデータをJSONなどの形で受けとり、パースと呼ばれる作業でHTMLに変換し、画面に反映させます。
DOM操作
「DOM」とは、「WEBページを表示する言語であるところのHTML」と「プログラミング言語であるところのJavaScript」を繋ぐ役目を持つもので、その操作を行い、データからHTMLをどんどん記述していくものです。

HTMLとどう動くのか？JavaScriptの読み込み

HTMLにはサイトの基本的な構造を記述します。この記述をCSSやJavaScriptなどのテクノロジーによって拡張および変更することができます。
JavaScriptはさまざまな要素の動作を制御するために使用し、HTMLのコードに埋め込んでブラウザの動的なエフェクト（ポップアップなど）を実行できるプログラミング言語とです。
そのため、JavaScriptはHTMLに読み込む必要があります。

JavaScriptを使うにあたり、
①外部スクリプト「ほにゃらら.js」を作ってそれをHTMLで読み込む
②HTMLの中に<script>タグを作り、その中に記述する
の2つの方法があります。

①外部スクリプト「ほにゃらら.js」を作ってそれをHTMLで読み込む
HTMLの<head>の中に

   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script defer type="text/javascript" src="ほにゃらら.js"></script>

上記を記述すると読み込むことができます。
ちなみに上の行はjQuery 3.xで、jQuery本体を読み込む前に、jQueryで動作するスクリプトを記述したファイルを読み込んでも動作しないため(※)、jQery本体を一番上で読み込む必要があります。
※ブラウザーが JavaScript のブロックを見つけたとき先頭から最後に向かって実行されるため、順番に気を配る必要があります。

②HTMLの中に<script>タグを作り、その中に直接記述する

   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script type="text/javascript">
   //ここに記述する
   </script>

これを書くとHTMLの中でJavaScriptを記述することができます。外部スクリプトからの読み込みが主流でこちらはあまり使われることがないようです。
JavaScriptを本当に書きたいと思ったらこちらの本が分かりやすかったのでオススメです！

押さえておきたいJavaScriptのイベントハンドラ

UIデザインをしていく上で、
　・ホバー時はどうなるのか？
　・フォーカスすると？
　・エラー時は？
　・Emptyな場合の画面は？
などなど色々な想定をしつつ画面を作っていくと思いますが、
JavaScriptのイベントハンドラを押さえておくと、デザインをするときに、
より想定したユーザーストーリーに合った挙動をデザインできたり、手戻りが少なくエンジニアを困らせずに済むかもしれません。(そうなりたい)

イベントは、ページ遷移を伴わないアクション(クリックした時やフォーカスが当たった時などのの動作)のことです。
イベントハンドラは、このイベントが発生した時に呼び出される処理のことで、発生したイベントごとに処理を実行することができます。

イベントは、どの要素からも発行されうる汎用的なもの(クリックやホバー)と、特定の要素(フォームなど)からしか発行されないものに区別することができます。
基本的なものはイベントハンドラ一覧によくまとまっていました。

特にフォームは、ユーザーが入力を開始する時やフィールドを離れる時などフィードバックするタイミンングが多く、JavaScriptを効果的に使用したユーザーインターフェースを設計する必要があるため、以下のForm Design Patternsがとても勉強になりました。

もう一段階先の話ですが、Google Analyticsのイベントトラッキングを使って、ページの遷移を伴わないがために通常のGoogleアナリティクスでは計測できないような行動（電話ボタンのタップや外部リンクのクリックなど）を計測し、機能の使用状況などを調べることができます。
イベントハンドラを知っておくことで、どの動作をイベントとしてトラッキングできるのかを判断できます。

参考リンク


サポートは「書籍購入」や勉強のための「活動費」に充てさせていただき、またnoteで還元したいと思います!!!よかったらポチッとよろしくお願いします🦉