きょうは JavaScript を動かしてみます。
膨大な Web サイトの中で、いかに効果的、かつ魅力的に Web サイトを見せていくかというのは、大変重要なことです。
なぜなら、Web サイトの印象は、お互いに顔が見えないネットの世界では、その企業・お店・個人の印象そのものになってしまうからです。
Web デザインの印象でイメージが変わってしまい、その印象でサイトそのものを判断されてしまう、このことから考えても Web デザインは重要です。
きょうはあなたと、Web サイトで JavaScript を動かすことについて学習します。
プログラミングにも栄枯盛衰はつきもの。かって JavaScript は Flash に押されていました。それが Google の先駆性と開発環境の違いによって完全に逆転しました。私は「Web の進化」に留意しつつ勉強を続けたいと思っている三重県津市在住のそこそこ年取っている男性です。
１．Script を書く場所は？
ここでひとつ深呼吸して、ひとまず心臓の混乱を鎮め、神経を落ち着かせます。
あれこれやっているうちに、なりゆきで JavaScript を書くはめになってしまいました。JavaScriptを書くためにはJavaScript というのがどういう成り立ちのものなのか、それを根本から体感として理解しなければなりません。
「車を運転するにはまずエンジンをかけなければならない」と同じくらい当たり前のことですね。
１．JavaScript の学び方は
まずクライアント側とサーバー側があります。クライアント側はブラウザ等です。ユーザーからページが見たいというとブラウザはサーバー側にリクエストをするのです。サーバー側はその要求に応じてレスポンスを返します。このやりとりで実際のHP を見ているといえます。
JavaScript はサーバー無しでも見れますが、返すのはHTML/CSS ということです。従来のWeb はレスポンスがHTML だったのですが、
２．現在のWeb はレスポンスが JSON です
JSON（JavaScript Object Notation）は、データを表現するための軽量なデータ形式です。
レスポンスとは、「返事・返答」などの意味
JSONは人間にも機械にも読み書きしやすく、特にウェブアプリケーションやサーバー間のデータ通信に広く使用されています。
JSONは、キーと値のペアを持つオブジェクトを使用してデータを構造化します。オブジェクトは中括弧（{}）で囲まれ、キーと値のペアはコロン（:）で区切られます。キーは文字列で表現され、値は文字列、数値、真偽値、配列、またはネストされたオブジェクトなど、さまざまなデータ型を持つことができます。
以下はJSONの例です。
この例では、”name”キーの値は”John”、”age”キーの値は30、”isStudent”キーの値はfalseとなっています。さらに、”hobbies”キーの値は配列で、3つの要素を持ち、”address”キーの値はネストされたオブジェクトであることがわかります。
JSONは、データのシリアライズ（直列化）やデータの交換、保存など様々な用途で利用されます。多くのプログラミング言語やフレームワークは、JSONのパース（解析）や生成に対するサポートを提供しており、データの受け渡しや処理を容易にすることができます。
JavaScript で「時計」を作ると、1秒ずつ刻々と変化していきます。HTML 側で動くからです。しかし PHP や Ruby で作ると Web ページを見ている限り動きません。サーバーサイド側だからです。JavaScript って「ランチ」に例えると、ご飯は HTML CSS に対し、「おかず」のようなものです。
JavaScript は HTML でつくられたコードの中に埋め込むことで、HTML だけでは表現できない動的な表現を Web サイト上に実現します。Web ページは「読むもの」から「見るもの」、そして「動くもの」へと進化してきたのです。
どこでもいいのですが、いちおう場所は <body> の中にします。‘use strict’ ; と入力すると、chrom で「エラーチェック」ができるようになります。document は「文書」のことで、getElement は、任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数です。
body の中に書き込むのね。
３．オブジェクト、プロパティ、メソッドについて
オブジェクト：データと機能をまとめたもの。
オブジェクト
JavaScriptのオブジェクトは、キーと値のペアの集合を持つデータ構造です。オブジェクトは、関連するデータや機能をグループ化するために使用されます。
JavaScriptのオブジェクトは、波括弧（{}）で囲まれ、キーと値のペアはコロン（:）で区切られます。キーは文字列で表現され、値は文字列、数値、真偽値、関数、他のオブジェクトなど、さまざまなデータ型を持つことができます。
以下はJavaScriptのオブジェクトの例です。
この例では、personという名前のオブジェクトが定義されています。personオブジェクトは、”name”キーの値が”John”、”age”キーの値が30、”isStudent”キーの値がfalseです。さらに、”sayHello”キーの値は関数です。
オブジェクトの値には、ドット演算子やブラケット演算子を使用してアクセスできます。例えば、person.nameは”John”を返し、person[“age”]は30を返します。関数の場合、person.sayHello()と呼び出すことができます。
JavaScriptのオブジェクトは、データの構造化や関連するデータや機能のまとめ、動的なプロパティの追加や削除など、さまざまな用途で利用されます。オブジェクト指向プログラミングの基礎となる概念の一つです。
JavaScriptにおいて重要な役割を果たしています。
プロパティって何？
プロパティ
JavaScriptにおけるプロパティは、オブジェクトに関連付けられた値またはメソッドです。オブジェクトは、関連するデータとそれを操作するための関数をまとめたものです。プロパティは、オブジェクトの特定の特性や状態を表現するために使用されます。
プロパティは、キーと値のペアとして定義されます。キーは一意の識別子であり、値はそのキーに関連付けられたデータです。例えば、以下のようなJavaScriptオブジェクトを考えてみましょう：
この例では、personというオブジェクトが定義されています。personオブジェクトには3つのプロパティがあります。nameプロパティの値は”John”、ageプロパティの値は30、professionプロパティの値は”Developer”です。
プロパティはドット記法またはブラケット記法を使用してアクセスすることができます。例えば、personオブジェクトのnameプロパティの値にアクセスするには、以下のようにします：
プロパティの値は変更することもできます。以下の例では、ageプロパティの値を変更しています：
新しいプロパティを追加することもできます。以下の例では、personオブジェクトにcityプロパティを追加しています：
または、ブラケット記法を使用して次のように書くこともできます：
また、プロパティの削除も可能です。以下の例では、personオブジェクトのprofessionプロパティを削除しています：
これがJavaScriptにおけるプロパティの基本的な概念です。プロパティはオブジェクトの構造を形成し、データを保持および操作するための重要な要素です。
メソッド
JavaScript のメソッドっちゅうのはな、オブジェクトに所属しとる関数のことやねん。オブジェクトが持っとるデータ（プロパティ）を操作するために使うもんや。たとえば、オブジェクトが「車」やったら、「走る」とか「止まる」とかがメソッドになるっちゅうわけや。
let car = {
brand: "Toyota",
model: "Corolla",
drive: function() {
console.log("走っとるで！");
},
stop: function() {
console.log("止まったで！");
}
};
car.drive(); // 走っとるで！
car.stop(); // 止まったで！
こんな感じで、オブジェクトの中にメソッドを定義して、そいつを呼び出すことで、オブジェクトの状態を変えたり、何かアクションを実行したりするんや。
プロパティは、オブジェクトに関連付けられた値またはメソッドです。
４．JavaScript を書く場所
Web ページの HTML ファイルの中に直接記述することができます。
通常、JavaScript コードは <script> タグで囲まれて、<head> タグまたは <body> タグの中に配置されます。例えば、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
<script>
// JavaScript code goes here
</script>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
また、JavaScript のコードを別のファイルに保存し、HTML ファイルから読み込むこともできます。この場合、<script> タグの src 属性にファイルのパスを指定します。例えば、以下のようになります。
<html>
<head>
<title>JavaScript Sample</title>
<script src="script.js"></script>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
ここで、script.js は JavaScript コードが保存されたファイルの名前です。このファイルは、HTML ファイルと同じディレクトリに保存する必要があります。
addEventListener は、イベントリスナー（イベントに合わせて実行させる関数）を登録するためのメソッドです。このばあい、「クリックさせる」という意味です。なお、{}（波カッコ）は関数や構文・命令等や変数を表します。
その <style> が <pink> 色にする、ということですね。ブラウザは、HTML ファイルを読み込んでいるときに <script>タグを見つけると、そこから </scriptp> までの間に書かれていることを JavaScript の文とみなして実行するのです。
ブラウザが読み込んで、JavaScript の文とみなして実行するのね。
２．JavaScript をデバッグする
デバッグって修正することだね。
「document」は表示しているページ全体のオブジェクトです。「elementById」は関数です。ちなみに半角を入れないで「ById」をつけます。「クリック」した時点でこの「関数」を実行するよという意味になります。ちなみに昔は関数を「function」としていました。
「addEventListener」は「引数」を2つ指定できます。1つ目は「click」、2つ目は「()＝関数」です。
JavaScriptのデバッグとは、JavaScriptコードのエラーや問題を特定し修正するプロセスを指します。デバッグは、開発者がプログラムの実行時に発生するエラー、予期しない動作、または正しく動作しない部分を特定し解決するために行われます。
１．JavaScriptのデバッグ
コードのエラーや問題を特定し、正しく動作するように修正することができます
コンソールにログを出力する
console.log()メソッドを使用して、変数の値やメッセージをコンソールに出力することができます。これにより、コードの特定の箇所での値や実行の流れを確認することができます。
ブレークポイントを設定する
開発者ツールのデバッガを使用して、コードの実行を一時停止する場所を指定することができます。これにより、プログラムの特定のステップごとに変数の値や実行の流れを確認することができます。
エラーメッセージを読む
JavaScriptのエラーメッセージは、問題の原因や場所を示してくれることがあります。エラーメッセージを読んで問題の特定や修正に役立てることができます。
コードを分割してテストする
問題のあるコードがどこにあるのか特定できない場合、コードを小さな断片に分割してテストすることができます。そうすることで、問題が発生している部分を特定しやすくなります。
デバッグツールを利用する
主要なWebブラウザ（Chrome、Firefox、Safariなど）には、開発者ツールが組み込まれており、JavaScriptのデバッグに役立つ機能を提供しています。これらのツールを使用すると、変数の値の監視、スクリプトの実行の一時停止、ステップ実行などを行うことができます。
デバッグのプロセスは開発者によって異なる場合もありますが、上記の手法は一般的なデバッグ手法の一部です。
２．JavaScript をデバッグするいくつかの方法
デバッグとは、間違いを調べて修正すること
コンソールにログを出力する
console.log() 関数を使用して、変数の値や処理の流れを確認できます。例えば、以下のように書くことができます。「let」は変数を宣言し、後ろの「ｘ」それを「＝」で「１０」という変数にします。
console.log(“x の値は ” + x + ” です。”);
デバッガを使う
ブラウザにはデバッグツールが搭載されており、コードの実行中に変数の値や処理の流れを確認することができます。デバッグツールを開くには、一般的に F12 キーを押すか、ブラウザのメニューから開くことができます。詳しい使い方は、ブラウザのドキュメントを参照してください。
例外をキャッチする
例外が発生した場合、エラーメッセージが表示されます。このメッセージを読んで、どこでエラーが発生したかを確認し、修正することができます。
コードを分割してテストする
大きなコードを一度に書くと、エラーが発生した場合に原因を特定するのが難しくなります。そこで、小さな部分に分割して、順番にテストしていく方法があります。このようにすることで、問題がある部分をより簡単に特定できます。
テスト用のデータを用意する
データの値が正しいかどうかを確認するために、テスト用のデータを用意することができます。これにより、どこで問題が発生しているかをより明確に特定することができます。
これらの方法を使用して、JavaScript のコードを効果的にデバッグすることができます。Web ページ中の JavaScript に誤りがある場合、その個所を指摘するメッセージを出すようにできます。
３．chrom から console タブをクリック
動かないと、どこか入力ミスが考えられます
そこで chrom の三つ玉から「その他のツール」→「デベロッパーツール」から、「console」タブをクリックします。すると、右端に間違っている個所の行数がでるので便利です。
これは「document オブジェクトの getElementByID プロパティに target を代入する」と読みます。「addEventListener に click する」と読みます。
オブジェクトというのは「～が」という意味です
get～はメソッドで「どうする」という意味です。メソッドには必ず（）がつきます。命令文です。プロパティ（性質）と同じようなものです。id 属性として「target」がついています。html の方は ”target” ですが、JavaScript は ‘target’ です。そういう決まりです。
JavaScript は大文字小文字を区別します
例えば、Element を 間違って element とするとどうなるでしょうか？
三つ玉から「その他のツール」→「デベロッパー」をクリックすると、上記のように右端に20行目がおかしいですよと表示してくれるのです。大文字と小文字は区別します。また全角文字はトラブルの原因になります。全角のスペースは見えないので、トラブルの原因がわからなくなるのです。
カーソルを置いた状態で「ctrl」+「/」で、コメント「//」になったり、通常のコードにもどったりもできます。なおコピペは楽ですが学習効果はありませんね。必ず自分で書くようにしましょう。
JavaScript では、改行やスペースをかなり自由にいれることができます。しかし（”）や（’）の引用符で囲まれている箇所では改行を入れることはできません。文末には（；）をつけます。
文末には（；）をつけます。
３．JavaScript を動かすには
動かすにはWeb ブラウザが必要です。
１．JavaScriptを実行するには
JavaScriptコードを実行し、ウェブページ上で動作を確認
- HTMLファイルを作成するか、既存のHTMLファイルを開きます。テキストエディタなどの適切なソフトウェアを使用して、ファイルを作成または編集します。
- <script>タグを使用してJavaScriptコードを埋め込みます。以下は、基本的な例です。
上記の例では、<script>タグ内にJavaScriptコードを記述しています。alert(“Hello, World!”);は単純なメッセージを表示するためのJavaScriptコードです。
- HTMLファイルを保存します。
- 保存したHTMLファイルをWebブラウザで開きます。ブラウザはHTMLファイルを読み込み、埋め込まれたJavaScriptコードを実行します。この場合、ブラウザによって”Hello, World!”というメッセージが表示されるはずです。
JavaScriptコードは、HTMLファイル内に埋め込むだけでなく、外部のJavaScriptファイルとして保存して参照することもできます。その場合、<script>タグ内の代わりに、<script src=”ファイルのパス”></script>という形式で外部ファイルを参照します。
また、JavaScriptを実行するためには、ブラウザがJavaScriptをサポートしている必要があります。現代の主要なWebブラウザ（Chrome、Firefox、Safari、Edgeなど）は、デフォルトでJavaScriptをサポートしています。
上記の手順を実行することで、JavaScriptコードを実行し、ウェブページ上で動作を確認することができます。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Example</h1>
<p id="message"></p>
<script>
var message = "Hello, world!";
document.getElementById("message").innerHTML = message;
</script>
</body>
</html>
また、外部の JavaScript ファイルを読み込む例を示します。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Example</h1>
<p id="message"></p>
<script>
var message = "Hello, world!";
document.getElementById("message").innerHTML = message;
</script>
</body>
</html>
ここで、script.js は外部の JavaScript ファイルで、以下のようになります。
「var」は変数ですが昔の書き方です。今は「let」「const」が一般的です。
このように、JavaScript コードを Web ページに埋め込むことで、Web ブラウザで実行することができます。
これで動かせることができるのね。
var message = "Hello, world!";
document.getElementById("message").innerHTML = message;
JavaScript は、ブラウザさえあれば動作出来ます。
それだけ学習するハードルが低いといえると思います。JavaScript を学習するにあたり、まず最初に覚えるべきエッセンス。
Google Map も JavaScript です。通信で取得したデータを利用して、Web ページのデータが必要な部分だけ更新しています。Web ページ自体を再読み込みすることなく、Web サーバーと画面との双方向のやりとりが行われています。
一時、Flash が大流行したことがありましたが最近は見かけませんね。アドビが開発したものでしたが、動かすには Flash Player が必要でした。ところが、HTML5 になってからは、企業の製品をインストールできないのでは「理念に反する」とかで利用できなくなったのです。
２．そこで JavaScript が注目された
JavaScriptを実行するには
テキストエディタを開くか、統合開発環境（IDE）を使用します。Windows や Mac などのオペレーティングシステムには、デフォルトでテキストエディタが付属しています。また、Visual Studio CodeやAtom などの人気のあるテキストエディタや IDE も利用できます。
新しいファイルを作成し、”.js”という拡張子を付けます。JavaScript のコードは通常、拡張子が “.js” のファイルに保存されます。
テキストエディタや IDE で、JavaScript のコードを入力します。JavaScript のコードは、変数の宣言、関数の定義、条件分岐、ループなどのプログラムの要素を含むことができます。
JavaScript コードを実行するために、HTML ファイルなどのウェブページに組み込むこともできます。HTML の <script> タグ内に JavaScript コードを記述するか、外部の JavaScript ファイルを読み込むことで、ウェブページ上で JavaScript を実行することができます。
ブラウザで JavaScript を実行する場合、作成した HTML ファイルをブラウザで開くことでJavaScript コードが実行されます。ブラウザは JavaScript エンジンを内蔵しており、JavaScript コードを解釈して実行します。
タイムなデータの処理が必要な場合に威力を発揮します。
あとがき
私が JavaScript を知ったのは Flash が全盛期の頃でした。それこそFlashの前で風前の灯のような感じだったと思います。どちらも「動き」が主だったのですが、Google が Map 活用しだしてから息を吹き返したのです。一方、消えてしまったのが Flash の方でした。
JavaScriptがFlashより優位に立った理由
オープンな標準化
JavaScript は ECMAScript 標準仕様に基づいており、オープンな標準化プロセスを経て開発されています。一方、FlashはAdobe が所有するプライプライエタリな技術であり、開発や拡張に制約がありました。JavaScript のオープン性は、開発者が自由に利用・改善・共有できることを意味し、広範なコミュニティの支援を受けることができました。
クロスプラットフォーム
Flash は Adobe Flash Player プラグインを必要としましたが、JavaScript はブラウザに組み込まれた実行環境であるため、追加のプラグインのインストールは不要です。これにより、ユーザーが特定のプラグインをインストールする手間やセキュリティ上の懸念がなくなり、広く普及することができました。
モバイルデバイスの普及
スマートフォンやタブレットの普及により、モバイルデバイスでのウェブ体験が重要となりました。Flash はモバイルデバイスでのサポートが制限されており、パフォーマンスの問題やセキュリティ上の懸念がありました。一方、JavaScript はモバイルブラウザでネイティブにサポートされており、クロスプラットフォームで快適なユーザーエクスペリエンスを提供することができました。
ウェブの進化とエコシステム
JavaScript はウェブの進化とともに成長しました。HTML5 やCSS3 などの新しいウェブ技術との統合が容易であり、リッチなウェブアプリケーションを作成することができます。また、JavaScriptのエコシステムは非常に活発で、豊富なライブラリやフレームワークが存在します。これにより、開発者は効率的にアプリケーションを構築し、既存のコードやリソースを再利用することができます。
これらの要因により、JavaScript は Flash よりも広く受け入れられ、ウェブ開発の主要な言語となりました。
コメント