はじめに
エンジニアリングにおいては、「ユーザーの行動を理解し、それを後押しする体験を技術で設計・実装し、継続的に改善していくこと」が重要です。フロントエンド領域では、データ・UI・インタラクションを統合し、価値ある体験として提供することが求められます。
テンプレートエンジンとJavaScriptを活用することで、静的な画面ではなく、データに基づいた動的なUIを構築でき、ユーザーの意思決定を支える仕組みを実装できます。これにより、エンジニアとして以下のような価値を発揮できます。
◼️ 動的かつインタラクティブなUIの実装
テンプレートエンジンでデータを動的に描画し、JavaScriptでユーザー操作に応じたインタラクションを加えることで、状況に応じて変化するUIを実現できます。
例：データに応じた表示切り替えや、条件に応じた通知・アニメーションを実装し、ユーザーの行動を自然に誘導する。
◼️ 迅速な改修と継続的な改善サイクル
フロントエンドの実装を自らコントロールできることで、仕様変更や改善要望に対して即時対応が可能になります。これにより、検証と改善のサイクルを高速に回せます。
例：UIの文言や配置変更を即時反映し、ユーザー反応をもとに継続的な最適化を行う。
◼️ データドリブンなUI/UX改善
JavaScriptでユーザーの行動データを取得・分析し、実際の利用状況に基づいた改善ができます。実装と分析を一体化することで、より精度の高い意思決定が可能になります。
例：クリックや離脱などのイベントを計測し、ボトルネックとなる箇所を特定してUIを改善する。
◼️ 保守性・拡張性を意識した設計
テンプレート構造やコンポーネント設計を最適化することで、変更に強く再利用可能なコードベースを構築できます。これにより、長期的な開発効率と品質を担保できます。
例：UIパーツを分割・共通化し、影響範囲を最小限に抑えながら機能追加や修正を行う。
◼️ コスト効率と開発価値の最大化
内製での実装・改善が可能になることで、外部依存を減らし、スピードとコストのバランスを最適化できます。結果として、プロダクトの価値向上に直結する開発が可能になります。
例：既存の構成を活かしながら機能追加を行い、最小限の工数で最大の効果を生み出す。
エンジニアにとって重要なのは、「見た目や機能を作ること」ではなく、「ユーザー行動とデータをもとに、価値ある体験を設計・実装し続けること」です。これにより、プロダクトの成果に直結するエンジニアリングが実現できます。
JavaScriptをはじめよう！
HTMLやCSS は、色やカタチなど各パーツという扱いでありましたが、JavaScriptはブラウザを「動かす」ためのプログラム言語になります。
例えば、Webサイトを訪問したとき、ポップアップ画面のように、Webサイト上でアニメーションが動いているのを見たことがあるようにブラウザが「動く」ために、指示を出しているプログラミング言語がJavaScriptです。
実際にエディターに記載してみよう。それぞれのタグを変更して、どう変わるかを確認してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>JavaScriptBasic</title> </head> <body> <p>JavaScript Basic</p> <script> 'use strict'; /*エラーチェック用 */ console.log("Hello, world!"); /* ログコンソールに文字列を表示する */ </script> </body> </html> |
Livewaveにて実行内容を確認する。
作成（ダウンロード）したファイル（index.html ）をGoogleChromeから実行してください。
GoogleChromeで確認
C-3. Chromeのデベロッパーツールを使うを使うを参考にGoogleChromeからConsoleを開くことで確認できます。
Hello worldが表示されることを確認しよう。
外部スクリプトから読み込む方法を知っておこう！
多くのJavaScriptコードを持つ場合、別のファイルに置くことができます。
|
1 |
<script src="/js/script.js"></script> |
コードの構造を理解しよう！
基本的な構成要素です。
すでに alert('Hello, world!') という文を見ており、これは “Hello, world!” というメッセージを表示します。
文の末尾にセミコロン(;)を置くことで文と文に区切ります。
|
1 2 3 4 5 6 |
alert(3 + 1 + 2); //6が表示されます。 /*** 補足 コメントについて ***/ /* コメントの書き方は、/**/で囲みます。 */ // //このコメントは文の後ろに続いていきます。 |
変数とは何かを知っておこう。
変数はデータのための “名前付けされた格納場所” です。
実際にエディターに記載してみよう。それぞれのタグを変更して、どう変わるかを確認してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let message1; message1 = 'Hello'; // 文字列を格納します 文字をポストロフィ (') で囲みます console.log(message1); // 変数の中身を表示します let age1=20, user1='名前1'; console.log(age1); console.log(user1); /** 同じ内容です。 **/ var message2 = 'Hello'; // 文字列を格納します console.log(message2); // 変数の中身を表示します var age2=25; var user2='名前2'; console.log(age2 + user2); |
「var」 と「let」 は、 一緒です。どれも変数を宣言します。
課題
参考表示 Level3-4_1.html を確認して 外部スクリプトを読み込んでいるか確認してください。何がコンソールにでていますか？
表示されている文言をコピーし、以下の課題のファイルにpタグを設けて、貼り付けてください(例：「〇〇」が表示されている。)
実行結果 Level3-4_1.html のファイルを使って、上にある「変数のサンプル」の内容を作成してみてください。
googleConsoleに表示されているか確認して、
作業が完了できたDiscordから情報を提示してください。
GutHubでの提出をお願いします！
作成したファイル名をindex_j_1.htmlにして提出してください。
ヒント
軽い動作なので、HTML内にscriptタグを設けて、実行しても良いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>JavaScriptBasic</title> </head> <body> <p>JavaScript Basic</p> <p>/* 「Level3-4_1.html」に表示されている内容をコピペ */</p> <script> /* ここに「変数サンプル」を貼り付けてください </script> </body> </html> |
課題・復習用検索キーワード
| 検索例 |
| 🔍Java Script できること |
| 🔍JS とは |
| 🔍JS 変数とは |