なぜWebに関わる人にはJavaScript知識が必要か？

2021年5月24日 19:00

どうも、エンジニアのgamiです。

僕はYouTubeチャンネルを細々とやっています。そのチャンネルで、昨日から「WebマーケティングのためのJavaScript」という動画シリーズを始めました。

昨今、デジタル接点での体験向上が事業の競争力に直結するようになるにつれて、Webマーケティングと呼ばれるような活動の重要性も増しています。「Webマーケティング」と聞くとWeb広告のイメージが強いかもしれませんが、ここではWeb上での顧客とのコミュニケーション全般を円滑にする活動を広く「Webマーケティング」と呼ぶことにします。

一方で、Webマーケティングをちゃんとやろうとすると、JavaScriptに代表されるWebのテクノロジーに対する理解が不可欠になります。しかしながら、「Webマーケティングに関するテクノロジー」という知識領域は、エンジニアとマーケターという職種の間で放置されがちです。質の良い学習教材も少ないし、実際の業務でも見て見ぬ振りをされているケースが散見されます。

今回のnoteでは、「なぜWebマーケティングのために非エンジニアがJavaScriptを読める必要があるか？」という疑問に向き合いながら、Webマーケティングとテクノロジーについて考えます。

JavaScriptを書かされるWebマーケターの存在

僕の本業での役割の1つに、KARTEというSaaSのテクニカルサポートがあります。KARTEはWebサイト上のユーザー行動の計測やそれに応じたアクションができる、まさにWebマーケティング業務で使われることが多いサービスです。

KARTEに限らず、GoogleアナリティクスやGoogleタグマネージャーなどのWebマーケティングで多用されるサービスをちゃんと使うには、JavaScriptの知識が要求されます。自社のWebサイトにサービスを導入するには、サイト上に外部JavaScriptファイルを呼び出すためのタグを設置する必要があります。またWebサイト上からユーザーの行動情報を密に取得しようとすると、そのためのJavaScriptプログラムを記述する必要があります。もちろん、各サービスはよくあるユースケースをテンプレート化しているので、場合によってはJavaScriptを見なくて済むこともあります。しかし、ちょっと複雑なことをやろうとすると、すぐにJavaScriptの壁にぶつかります。

テクニカルサポートをしていると、Webマーケティング施策の実装でJavaScriptに苦しむWebマーケターをよく目にします。JavaScriptとかは難しくてよくわからないが、エンジニアのリソースは常に逼迫しており、自分が何とかしないといけない。見様見真似で必要なJavaScriptプログラムを書いたが、うまく動かずにエラーを吐いてしまう。調べてもどうすればいいかわからず、利用サービスのサポートに助けを求める。そんな問い合わせが、僕のところにもチラホラやってきます。

Webの体験への高まる期待と、追いつかないリソース

これまでのnote記事でも述べてきたように、Webなどのデジタル接点における顧客体験の重要性が日に日に増してきています。

誰もがインターネットに常時接続されるようになった世界で、実現できることの領域は爆発的に広がり、サービス体験に対するユーザーの期待値も上がっています。単に「Webサイトがある」とか「機能を提供している」だけでは事業を伸ばすには足りず、Webを通じてユーザーの行動や思いを常に把握し、個別のユーザーに最適なコミュニケーションを取れるようにしたり、サイト自体の悪いところを改善したり。「Web上での体験をもっとよくして欲しい」という社内外から期待や要求が高まっています。

他方、Web上のユーザーの状況を密に把握しそれに応じた施策を実装するためには、高度な仮説検証能力に加えて、JavaScriptの知識が必要になります。もちろんマーケティング専任のエンジニアが社内にいれば問題ないかもしれませんが、日本企業の中でそんな会社はほとんどありません。またテクノロジーに明るいWebマーケターも、Webの体験に対する期待に十分応えるほどには世の中で全然足りていないのが現状でしょう。実際、僕がテクニカルサポートの仕事で顧客企業の担当者の方と相対する中でも、「この人がJavaScriptを読み書きできればやれること広がるのになあ」と思わされることが多々あります。

ちなみに日本では、Webマーケティング業務を広告代理店に丸投げする会社も多いようです。システム開発を外注し続けたことで社内のエンジニアが育たなかった話と同様、Webマーケティングを外注し続けたことで社内に技術的なノウハウが蓄積されなくなってしまう。日本の外注文化が、技術に明るい人材の育成を阻害しているという側面は大いにありそう。

なぜWebに関わる人にはエンジニアじゃなくてもJavaScript知識が必要か？

Webは、ネイティブアプリと比較しても、自由度の高いプラットフォームです。JavaScriptというWebの共通言語によって、Webサイト自体の振る舞いをかなり自由に書き換えることができます。Webサイトの運営側は、ユーザーがWebサイトのどの部分に注視し、どの要素をクリックし、フォームをどこまで入力したのか、いつでも計測し始めることができます。また、ユーザーの属性や行動、時期や時間帯、などに応じてサイトのコンテンツを出し分けることもできます。

こうしたWebの自由度を最大限に活かすことができれば、「ユーザーのことを深く理解しコミュニケーション手段や提供サービス自体を改善する」というサイクルを高速に回せるようになります。顧客を深く理解する営みは、Webサイトに閉じる話ではなく、事業全体にとって重要なことです。

逆にいえば、せっかくWebサイトを公開しているのにそこを訪れる顧客の行動データや潜在的なニーズを取り逃していたり、悪い体験を野放しにしていたりすれば、どんどん顧客ロイヤリティは下がって事業全体に負の影響を与えてしまいます。

もちろん、元々プログラミングができるエンジニアがマーケティング領域の業務を担うようになるケースも増えるでしょう。実際、国内企業がマーケティングエンジニアを募集する例も目にします。

一方で、テクノロジーに明るいマーケターを増やすということの方が直近では重要だろうと、僕は思っています。Webマーケティング業務に対する期待や歯がゆさを現場で一番強く感じているのは、まさに今その業務に携わっている人であるはずです。その人が少し手を伸ばしてよりテクニカルな領域も自分でカバーできるようになれば、改善サイクルを回すスピードが飛躍的に上がる感覚があります。

JavaScriptはWebブラウザ上で実行できるほぼ唯一のプログラミング言語です。逆に言えば、JavaScriptさえ読み書きできるようになれば、Webの世界をある程度自由に書き換えられるようになります。というわけで、僕としては細々とJavaScriptをWebに関わる非エンジニアに教える活動を続けていって、Webの未来を良い方向に変えていこうと思います。

もしJavaScriptを本気で学びたいけどどうすればいいかわからない人がいたら、ぜひ気軽にTwitterとかで声かけてください。

WebとJavaScriptのヤバい自由度について

以上で本題は終わりです。

最後に、「Webとは自由度の高いプラットフォームである」という点についての技術的な雑記を付け加えておきます。Webページを制御するためのJavaScriptの機能は、狂気的なほど自由であり、危なっかしさを感じるほどのヤバさを持っています。

以下、マガジン購読者の方だけどうぞ。

さて、WebページはHTMLというマークアップ言語によって記述されます。HTMLの中には、JavaScriptプログラムを埋め込むことができます。Webページが読み込まれたタイミングで、そのJavaScriptプログラムが全て実行されます。

Webの自由度を物語るJavaScriptのヤバい点は、主に2つあります。

1つは、Webページをかなり強力に操作できる点です。極端な例では、1行のプログラムでWebページ全体を真っ白に変えることも可能です。たとえば、noteのトップページを開き、ブラウザのデベロッパーツールからConsoleタブを開きます。

そこで次のプログラムを実行します。

document.body.innerHTML = '';

すると、ページのコンテンツが空っぽになり、何も表示されなくなります。

もちろんこんなことをするケースは稀ですが、元々のHTMLで記述されたWebページコンテンツを、JavaScriptプログラムで後から全く別のものに書き換えたりできるわけです。

また、ユーザーの操作に応じた処理を後から追加することもできます。たとえばボタンクリック時の挙動やスクロール時の処理などもJavaScriptで定義することができます。

2つ目は、JavaScriptプログラムを外部から取得し実行できるという点です。HTMLに外部JavaScriptファイルを読み込むタグを入れ込むだけで、外部サービスで生成したJavaScriptプログラムをサイト上で実行できるようになります。

たとえば、GoogleタグマネージャーというサービスのJavaScriptを実行するには、サイト上に下記のHTMLタグを設置します。

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

これをサイトに置くだけで、Googleタグマネージャーの管理画面上で記述したJavaScriptプログラムが、Webサイトを開いた全てのユーザーのWebブラウザで実行されるようになります。もっと言えば、Googleタグマネージャーによって配信したJSプログラムでまた別のサービスのJSプログラムを読み込むということもできます。ヤバいですね。

JavaScriptは、Webサイトを自由に操作でき、外部ファイルからでもプログラムを読み込める。これら2つの特徴によって、極端に言えば外部サービスのタグをサイトに1つ入れるだけでWebページのほとんどの制御をそのサービスに任せることができます。これにより、Webマーケティングに関わる業務を外部サービス側に切り出すことができるようになり、エンジニアとWebマーケターの分業がやりやすくなっています。

ちなみに、こうした自由度の高さは同時にセキュリティリスクの高さにもつながっています。もちろん、Webブラウザ自体にもセキュリティ対策のための機能はたくさん追加されています。しかし、「JSプログラムを実行させるだけで悪意のある第三者がユーザーの見ているWebページを自由に制御できてしまう」というリスクは常にあります。この点は常に意識したいところです。

Webが自由なプラットフォームであり広くユーザーに使われている以上は、Webに関わる我々はその自由と真剣に向き合う必要があるわけです。具体的には、Webの自由度の高さを最大限に活かして優れたユーザー体験を模索していくことが、競争優位性に直結するという状況になっています。ポジティブに捉えれば、Webとは様々な仮説をすぐに検証できてとても楽しい場所です。Webで遊べる人を増やすことができれば、楽しく仕事できる人が増えるんじゃないかなあと夢想しています。