Googleタグマネージャーと始めるJavaScript入門

コースを効果的に受講するコツや疑問点を解消する方法について説明します。

コース中に何度も登場するChromeデベロッパーツールの使い方について学びましょう。

コースを通じて利用する検証用のWebサイトを作成しましょう。

作成した検証用WebサイトにGoogleタグマネージャーを導入しましょう。

JavaScriptやGoogleタグマネージャーが思うように動かない場合のトラブルシューティング方法を学びましょう。

いよいよGoogleタグマネージャーでJavaScriptプログラムを配信してみます。

JavaScriptでWebページの要素を取得し、中にあるテキストをログに出力してみましょう。

JavaScriptでWebページ上の不要な要素を非表示にしてみましょう。

JavaScriptでWebページ上の要素のテキストを書き換えましょう。

JavaScriptでWebページ上の画像を別の画像に差し替えましょう。

ユーザーが画像をクリックしたときの処理をJavaScriptで登録してみましょう。

Webの仕組みの基礎として、WebブラウザとWebサーバーの関係について学びましょう。

HTMLの基本や、HTMLとWebページの関係について学びましょう。

HTMLとJavaScriptの関係や、Webページが表示されてJavaScriptが実行されるまでの流れについて学びましょう。

JavaScriptをWebブラウザ上で実行するいくつかの方法について学びましょう。

JavaScriptの実行方法の中でも、HTMLの各要素中にJavaScriptプログラムを直接書く方法について学びましょう。

JavaScriptの実行方法の中でも、scriptタグの中にJavaScriptプログラムを書く方法について学びましょう。

JavaScriptの実行方法の中でも、scriptタグで外部のJavaScriptファイルを読み込む方法について学びましょう。

Googleタグマネージャーがタグを配信してJavaScriptを実行する流れを学びましょう。

目の前にある自分のWebブラウザだけでJavaScriptを実行する方法を学びましょう。

Webページ上の要素をJavaScriptで操作する下準備として、要素を特定するためのCSSセレクタをコピーする方法を学びましょう。

Webページ上の要素をJavaScriptで取得するメソッドであるdocument.querySelector()の使い方を学びましょう。

取得した要素を後で使い回すために、JavaScriptの変数を作成してそこに格納する方法を学びましょう。

ページ上の要素を取得し、中のテキストを取得したり書き換えたりする方法を学びましょう。

取得した要素の属性値を操作することで、リンク要素の遷移先URLや画像要素の画像ソースを読み書きできることを体験しましょう。

ページ上の要素の色やサイズなどのスタイルを変更するため、CSSの基礎について学びましょう。

JavaScriptでページ上の要素のスタイルを変更し、文字の色を変えたり要素を非表示にしたりを試しましょう。

JavaScriptの中で全く新しいHTML要素を生成してWebページに挿入する方法について学びましょう。

ユーザーの操作に応じてJavaScriptの処理を実行する方法として、addEventListener()の使い方を学びましょう。

addEventListener()で処理を登録するときに使った「関数」の基礎について学びましょう。

ユーザーが一定量ページをスクロールしたらアラートを表示する、というJavaScriptプログラムを作成してみましょう。

何度も同じ処理が呼ばれないように、if文と真偽値データ（true/false）を使って条件指定をしてみましょう。

if文中で使う条件式について、比較による条件指定や複数条件を組み合わせた指定の方法を学びましょう。

Webページ上で発生しJavaScriptのaddEventListener()で検知できるeventの種類や、「イベント」という言葉の多義性について学びましょう。

Webブラウザが保持している情報の中で、JavaScriptで取得できるものについて紹介します。

URLの構造や、現在のアドレスバーに表示されたURLをJavaScriptから取得する方法を学びましょう。

ブラウザの言語設定や、ブラウザを特定するためのUserAgent文字列を取得する方法を学びましょう。

Webブラウザの中のデータ保存領域であるCookieやlocalStorageをJavaScripitから読み書きする方法について学びましょう。

このセクションで実装する「押したら上までスクロールするボタン」の完成品をデモします。

ボタンを右下に固定表示するプログラムを実装してみましょう。

ユーザーがボタンをクリックしたときにページを自動スクロールするプログラムを実装してみましょう。

ユーザーがページのどのくらいの割合までスクロールしているのかを計算するために必要なデータについて学びましょう。

ユーザーが一定スクロール率までページをスクロールしたときだけボタンが表示されるようにプログラムを実装してみましょう。

このセクションで作成したプログラムを実際にGTMで配信し、Webページに「上に戻る」機能を追加してみましょう。

学習の準備のため、検証用WebサイトにGoogleアナリティクス（GA4）を導入しましょう。

GA4に連携されたイベントをリアルタイムに確認する方法を学びましょう。

ユーザーが商品画像にマウスカーソルを当てたらGA4のカスタムイベントを飛ばすようなJavaScriptプログラムを実装しましょう。

ユーザーがカートボタンをクリックしたら、商品の名前や金額を含めてGA4のカスタムイベントを飛ばすようなJavaScriptプログラムを実装しましょう。

このセクションで作成したプログラムを実際にGTMで配信し、すべてのユーザーでWebページからGA4のカスタムイベントが飛ぶようにしてみましょう。

コース内容の復習として、Webブラウザ上でJavaScriptができることをおさらいしましょう。

より高度なJavaScriptを書くために学ぶべき周辺領域として、HTML、CSS、CSSセレクタに関する学習観点を紹介します。

より高度なJavaScriptを書くために学ぶべきもう1つの周辺領域として、正規表現を紹介します。

高度なJavaScriptの記述に欠かせない配列の概念や、それを使った繰り返し処理について学びましょう。

JavaScriptプログラムで必ず登場するオブジェクトの概念や、JSONとの関係性について学びましょう。

インターネット上のJavaScriptに関する記事を読めるようになるために、jQueryなどの外部ライブラリを使った書き方や、モダンなJavaScriptの記法について知っておきましょう。

これから学習を継続していく方に向けて、JavaScriptの学習を仕事に役立つ知識に昇華させるための3つのコツを紹介します。