JavaScript 次の一歩 (1)
JavaScript はじめの一歩 (3) からの続き。プログラムを適当なグループでまとめる
プログラムの規模が大きくなると
適当な単位でグループ化する話が出てきます。
繰り返し使う処理を外部 js ファイルにする
よく使う処理を外部の js ファイルにまとめ、
毎回書かなくて済むようにします。
HTML のスタイルを CSS ファイルに分離する話と同じ考え方です。
外部 js ファイルに分離する
クラス (class) でプログラムを記述する
ES2015 のクラス
ES2015 では class や constructor などの予約語を使ってクラスを記述します。 Java や C# に近い書き方をします。 クラスの中にある関数は メソッド と呼びます。
● ES2015 のクラスの書き方 class MyClass { //コンストラクタ constructor(){ this.name = "ES2015のクラス"; } //メソッド method1(){ console.log("name=" + this.name); } }
参考で function や prototype を使ったクラスの書き方は IE 時代までの昔話です。現在では使用しません。
グラフの座標変換のサンプル
- Transform2D_2022.js
座標変換のサンプル。class のプロパティや getter/setter のサンプル。
グラフの座標変換
div で sin 関数のグラフを描く。
JavaScript タイマー処理, 座標変換の処理を入れる
ボールが跳ねるサンプル
下に 3つのサンプルを用意しました。
どれも動作はほぼ同じプログラムですが、書き方が異なっています。
canvas タグ
JavaScript タイマー処理
- TestJS_canvas_ball2.html
初歩的な書き方で書いたサンプル。 グローバル変数とグローバル関数が多く並ぶプログラム。 クラス (class) やオブジェクトは使用していません。
規模の大きなプログラムになると、 グローバルの変数や関数を大量に並べるとプログラムを管理しにくくなるので、 適当な部品の単位でまとめます。下のサンプルに続く。 - TestJS_canvas_ball2_ES2015.html
ボールのクラスとアプリケーションのクラスにまとめてあります。 ボールは class で記述し、ボールのオブジェクトを作って操作します。 こちらは IE11 では動作しません。現代風の書き方です
JavaScript: クラス (class) (1) - (参考:昔風) TestJS_canvas_ball2_class.html
昔のサンプル。クラスを function や prototype で記述。 こちらは 2010年代の IE 時代までの話で、現在では使いません。
JavaScript: クラスの書き方 (IE時代の昔話)
いろいろ
- TestJS_instanceof01.html
instanceof 演算子のテスト。
JavaScript: 文法などのノート
async/await, Promise の処理 (2023/07)
はじめの一歩というよりも大分濃い目の話になります。 不慣れな間は混乱することも多い話です。
async/await や Promise の処理は、 処理を実行開始してから処理結果を受け取るまでの間に遅延があり、 待機状態のある処理で使います。 例えばファイルのダウンロード、ファイルの読み込み、 モーダルダイアログなどがあります。
- TestJS_dialog_modal_async01.html
dialog タグでモーダルダイアログの処理をするサンプル。
ダイアログが閉じるまで await で待機し、 ダイアログで押されたボタンの値を Promise.then() で受け取るサンプル。
HTML: dialog タグ, Promise と async/await で処理する
メソッドを連想配列や 2重配列に並べる (2023/11)
if ... else if の分岐が大量に現れる処理では if ... else if を使用せず 配列や 2重配列にメソッドや関数を並べて処理します。 コマンドインターフェイスの処理やステートマシンの処理で使います。
- TestJS_parse_line03.html
元サンプル: if ... else if がたくさん並ぶプログラム。
TestJS_function_map02.html
連想配列に処理をまとめた例。
テキストを行に分割する
連想配列に登録する
- 使用例
コマンドアプリケーション、GUI アプリケーションのコマンドインターフェイスなど。
map = { コマンド名 : コマンドに対応するメソッドやコマンドオブジェクト, ... }
GUI アプリケーションでも同じ処理を 1) マウス操作、 2) キーボードショートカットで操作、 3) コマンド入力で操作、 4) コマンドを記録したマクロテキストで自動処理などさまざまな方法で呼び出します。 ということで複数の経路からの処理の呼び出しをコマンドインターフェイスで集約し、 アプリケーション内部ではコマンド処理に置き換えます。 コマンド型の処理は編集履歴・操作履歴の保存・再生などでも使用します。
シリアライズの話とも関係します。 現在だと JSON でデータや履歴を記録するような話になると思います。
2重配列に登録する
制御系の処理などで使用します。ステート・イベントの 2重配列のテーブルにメソッドやコマンドオブジェクトを並べて処理します (ステートマシン)。
- 使用例
1) eval() を使わない電卓の処理
2) データテキストのパーサー、プログラムテキストの解釈
3) 通信プロトコルの制御、機器の制御
など。
table = [ //状態1の配列 [ state1_event1, state1_event2, .... ], //状態2の配列 [ state2_event1, state2_event2, .... ], ... ]
関連
- C言語では関数ポインタをマップやテーブルに並べて処理する話に相当します。
- Java では Swing (GUI の部品) でコマンドオブジェクトを Action
インターフェイスのサブクラスで作って Hashtable (ActionMap)
に登録する話などで出てきます。
javax.swing インタフェースAction
javax.swing クラスActionMap - C#: メニューバーをXML定義ファイルで自動作成
アプリケーションのメニューバーを XML ファイルで作成して XML に書かれたコマンドパラメータで処理する例。Java の ActionMap ようなオブジェクトを作って Hashtable にメソッドを登録して処理します。
セキュリティ関連
これ重要です・・・。
自分のサイトとは異なるサイトに script src= などでむやみにリンクを張らないこと。
・外部ホストの js ファイルにむやみにリンクしないこと。 必ず js ファイルをコピーして、自分のホストに置くこと。 ライセンスが絡んでコピー使用できない場合は、むやみに使わない。 1)素性の知れない怪しげな js ファイルにリンクしない。 セキュリティ上の問題が起こる可能性があります。 2)管理元やIPアドレスも知らないようなサイトの js ファイルにリンク しない。 3)よく知られている js ファイルでも、クッキーなどプライバシーの 問題が出る可能性もあります。
コロナ対策じゃないけど、変な三密にならないように気をつけましょう・・・
使うときに注意の必要な関数やプロパティ
セットする文字列の内容によっては不正な JavaScript 実行の原因になります。 掲示板などでユーザーが入力したテキストや 出典不明のデータファイルの処理にはそのままでは使えません。
- document.write()
TestJS_document_write_security01.html
JavaScript: document.write() - innerHTML
TestJS_innerHTML_security01.html
JavaScript: HTML 要素を作成する - eval()
JavaScript: eval() 関数