JavaScript / JS
よみ: ジェイエーブイエーエスシーアールアイピーティージェイエス
Web ページに動きと反応を加えるプログラミング言語。クリック・スクロール・フォーム検証・アニメーション・API 通信・地図・チャット・動画プレーヤを担う。フロントエンドの主要言語であり、Node.js としてサーバ側でも使われる。略称 JS。
本書のスタンス(Lesson 1-5)としては、「人物シリーズ」で JavaScript は「特技(動き・反応)」。担当者が JS のコードを読む必要はないが、「JS で実装する必要があるか」「JS が読み込めない / 重い環境でも最低限見られるか」という設計判断には関わる。何でも JS でリッチに動かす提案を受け入れない、というのが本書の基本姿勢。
設計上の判断軸:本文を JS で動的生成すると検索エンジンが読み取れないことがある(SPA の落とし穴・Lesson 6-3)、JS がエラーを吐くとボタンが反応せず CV 経路が止まる、外部スクリプト(GA / GTM / 広告タグ / チャットウィジェット)を大量に積むと表示が遅くなる、サードパーティ JS は Cookie 同意設計と連動する必要がある、JS の脆弱性はサプライチェーン攻撃の入口になる。
落とし穴は、JS 経由のフォーム送信で「送信成功」イベントが GA に届かず CV が計測されていなかった、JS ライブラリのバージョンが古いまま脆弱性放置、GTM 経由で入れた広告タグが他のタグと競合してエラー、SPA で history.pushState 後のページ遷移を GA に手動送信し忘れ、訪問者の Cookie ブロック設定で JS 計測が全滅。担当者の責任範囲は「JS の計測タグが本当に発火しているかを GA リアルタイムで確認する」までは含む(Lesson 6-7 の補完指標)。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- バックエンドエンジニア
- アクセス解析担当
- デザイナー
会話上での使用例
業者からリッチな JS 実装を提案されて、要件と照らす場面
-
業者ディレクター
ファーストビューに JavaScript でパララックスとパーティクルを入れます。インパクトが出ます
-
Web 担当者
スマホで重くならないですか?CV を取る LP なので、ファーストビューは 1.5 秒以内に表示が出ることを優先したいです。動きはサブビジュアルだけにしましょう
-
業者ディレクター
了解。サブビジュアルだけ動かして、ファーストビューは静止画 + CTA に絞ります
GA で CV 数が急に減って原因を探る場面
-
アクセス解析担当
先週から CV 計測が半減。GTM 触りましたか?
-
Web 担当者
リニューアル時にフォーム送信を JavaScript 非同期化したと聞いてます。送信成功イベントが GA に飛ばなくなった可能性が高いです。GA リアルタイムで実機テストして確認します