先日は、
■ JavaScriptとオブジェクト 【 JavaScript 】
の中で、入力待ちの方法について書きました。その中で、
【 getElementByID 】
を使った記述について紹介しました。HTML 5から記述が変わったので、非推奨になったものも存在します。
先日、 【 Document.write() 】 について書きましたが、HTML 5からは非推奨になっているので、現在は異なる記述になっています。
文 字を入れ替える
先日、文字を入れ替える時の方法を書きましたが、Document.writeの代わりになるものとして、HTML5では、 【 innerHTML 】 を用います。
■ innerHTML
document.getElementById（ID名）.interHTML = 記述内容
と言う記述を行う事で、元のHTMLを書き換える事ができます。例えば、
のような記述を行った場合、
のように表示されます。その為、何もない状態でinnertHTMLを使うと、document.write()と同じ使い方ができます。
その為、
のようなタグを指定した場合、
のような感じで、タグが反映されます。これはdocument.write()でも同じ事ができますが、現在の仕様だとdocument.writeが非推奨になっているのでこれを用いる事になります。
文 字を挿入する
innerHTMLの場合、書き換えを行いましたが、JavaScriptでは、文字列などを元の記述に対して挿入することもできます。
この場合、 【 insertAdjacentHTML 】 を用います。
■ innerAdjacentHTML
document.getElementById（ID名）.interAdjacentHTML
（挿入する位置,記述内容）
と言う記述で指定します。document.getElementByID()はエレメントなのでエレメントの後に
【 insertAdjacentHTML（挿入する位置,記述内容） 】
を追加する事になります。配置する位置ですが、
のようになっており、
のように記述すると、
のように文字が挿入されます。
H TML5で廃止されたタグ
前述のようにDocument.write（）が非推奨になっているのですが、タグも非推奨の物が存在しており、
■ <MARQUEE>タグ
タグ内に含めた文字列を電光掲示板のように流すタグ
■ <BLINK>タグ
タグ内に含めた文字列を点滅させるタグ
■ <ISINDEX>タグ
入力欄を用意します。
■ <CENTER>タグ
センタリングを行います。
■ <FONT>タグ
フォントの大きさや色などを指定します。
■ <BIG>タグ
文字を置きくします。
■ <SAMLL>タグ
文字のサイズを小さくします。
■ <STRIKE>タグ
打消し線を指定します。これと同様に<S>タグも非推奨に
なりました。
■ <TT>タグ
タグ間の文字列は等幅フォントになります。
■ <U>タグ
フォントの下にアンダーラインを引きます。
■ FRAME 要素
画面を分割する際に、フレームで分けることで、個別のページを
1つのHTMLファイルで表示をする事のできる要素。
これが廃止になったので、
■ <FRAME>タグ
■ <FRAMESET>タグ
■ <NOFRAME>タグ
のようにフレームを指定して、そのフレームの構成に対してフレ
ームで指定した範囲に割り当てるHTMLファイルの指定を行う
物が最初の二つで、フレーム非対応のブラウザ用の表示をす
るために用意するのが一番最後の物になります。
（＊） 代替として、インラインフレームの指定を行う<IFRAME>
タグを使用します。
■ <APPLET>タグ
JAVAアプレットの呼び出しをします。
（＊） 代替として、<OBJECT>タグや<EMBED>タグを使用しま
す。
■ <ACRONYM>タグ
マウスカーソルを合わせる（onMuouseOverの状態）にすると
略称の正式な名称が表示される
（＊） 代替として、<ABBR>タグを使用します。
■ <ISINDEX>タグ
検索キーワード入力用の一行のテキストボックスを作ります
（＊） 代替として、<INPUT>タグを使用します。
■ <DIR>タグ
ダイレクトリストを作ります。
などが廃止されています。フレーム要素はインラインフレームを配置して、それをCSSで管理するような仕様に変更されています。それ以外の要素は、表示に関係するような物になりますが、HTML５では、こうした要素は、CSSでタグ内に追加して表示する事になります。例えば、
<div align="center">
とかのように要素で対応できるものもありますが、基本的にレイアウトをする場合、<DIV>タグと<SPAN>タグで構成するので、打消し線を使う場合だと、
<span style="text-decoration: line-through">～</span>
のような感じで、CSSをタグに書くか、ヘッダーで指定するか、外部ファイルを作って読み込むことになります。
このほかにも、ネットスケープやInternetExplorer独自のタグなどは非推奨になっています。その為、<BGSOUND>タグなども非推奨になっています。また、<BASEFONT>タグのようにサイズの基準を決めてそこからプラスマイナスで制御するような物もありましたが、このタグも非推奨になっています。
HTML5では、装飾をCSSで行い、HTMLは簡素な記述にするような仕組みになっているのですが、安全性のないものや使用頻度の少ないものなどが廃止や非推奨になっており、CSSで行える内容はタグではなく、CSSで対応するようになっています。
J avaScriptで非推奨になったもの
これについては、
■ 非推奨の機能、廃止された機能 【 MDN WEB DOC 】
https://developer.mozilla.org/ja/docs/Web/JavaScript/
Reference/Deprecated_and_obsolete_features
で詳細が記載されていますが、ループで使用するforについては、
■ for each ... in
■ for ... in
が廃止され、現在は、 【 for ...of 】 が推奨されています。Arrayの要素の中の並列処理をするアレイの機能も廃止になったようです。
橙要素は存在していますが、タグだと<small>タグのようにHTML5では意味合いが違う物も存在するので、注意が必要です。
記 記述の変化
JavaScript（ES5以降）では、 【 var 】 ではなく 【 let 】 を使うようになっているので、コードの記述を行う場合に、
■ 変数の宣言 ： let
■ 定数の宣言 ： const
になっています。その為、古いバージョンのJavaScrptの記述しか知らない場合、解らない部分が出てきます。また、非推奨になっている物中には、並列処理を行う物もあるので、並列処理を行う選択肢も違っています。（選択肢自体は複数存在するので、JavaScriptでマルチスレッドが使えなくなったわけではありません。）
■ 定数 ： const
WEBページのレイアウト時の座標や表示を行う際のウイ
ンドウのサイズのように、最初に指定した後は変更しない
ものを指定する場合に使います。
定数の場合、数式だと小学校の算数で登場しますが、小
学校の算数では、数字で構成された数式を学習します。
この時に、記述されている数式の数字は固定されてい
ますが、constがこの状態です。その為、テストや教科書
や問題集の数式は印刷物だと固定された状態で出題さ
れているので、 【 定数で指定した数式 】 という事に
なります。
■ 変数 ： let
文字入力を行った時の文字列や、ゲームキャラのタイル
の読み込み範囲や移動などのように推移が発生する物
を扱う場合に使用します。この辺りは、数学の関数で登
場する 【 f(x) = 変数xを含む数式 】 と同じです。この
場合、f(1)やｆ（1/2）のように数値の代入が可能ですが、
xは定数ではなく変数なので、こうした異なる数値の代入
ができます。
小学校の算数で数字同士の計算は定数と書きましたが、
プログラムで算数の問題を出すような物を作る場合、定
数のパターンだと答えが解ってしまうので、変数で出題
して解を適正に計算し、その解と回答の判定を行う事に
なります。
こうしたプログラムを組んだ場合、
■ 出題時の数値 ： 変数
■ 回答の入力値 ： 変数
なので、変数を用いたプログラムになります。
ちなみに、元から存在する、varですが、これは、関数内外の双方から呼び出せます。その為、スコープ外から呼び出すようなことが発生しないようにする場合にはletとconstを用います。
こう書くと、 【 varって便利な気がする 】 訳ですが、実はそうではなく、関数名がローカル変数とグローバル変数と一致した状態にしてしまうと弊害が出ます。JavaScript特有だと思うのですが、 【 巻き上げ 】 と言う現象によって不具合が出ます。
JavaScriptでは、
【 関数の内部で宣言されている変数は、その関数の先頭で
宣言されたものと見なされる 】
ので、再代入を行った時にグローバル変数で宣言した値よりも後に宣言した関数の値が優先されることはありません。
プログラミング言語の仕様として、内部処理で変化せず、そのまま使用する物が 【 定数 】 で、関数やクラスなどコード内の処理によって値の変化が発生する物が 【 変数 】 になりますが、関数の内部で宣言された変数は、外部参照が不能なので内部処理でしか実行できないので、関数内の変数が存在する場合、returnで戻り値（諸rの結果や演算結果）を 【 出力 】 することになります。これによって、関数の呼び出し時に関数の引数 （作成した関数の場合、戻り値は関数内の変数として使っているので、その値が代入されます。この辺りは、数学で登場する一変数関数のxと同じですし、二変数関数のx、yと同じです。関数の宣言時の引数というのは、関数内の変数なので、それが一変数関数なのか多変数関数なのかの違いになります。） の入力後に結果として出力されます。
その為、変数にも二種類あり、関数内で宣言されている関数外（スコープ外）からアクセスできないローカル変数と、全ての場所から参照できるグローバル変数があります。
■ グローバル変数
プログラムを書く時に最初に使う変数の記述方法。クラスや
関数の外に記述し、どこからでも参照が出来る仕様になって
います。
let a = 0;
function b（）{ };
■ ローカル変数
関数の内に記述し、どこからでも参照が出来る仕様になって
関数の内に記述し、関数内でしか使用できない仕様になって
います。
function b（c）{
let a = 1
};
のようになります。
■ varが非推奨な理由
前述のようにJavaScriptでは 【 巻き上げ 】 が発生するのですが、letやconsｔでも発生しますが、この二者の場合、書き換えが発生する前にエラーが出てプログラムが止まります。varの場合、そのまま実行されるので、予期せぬバグが発生します。
また、varの場合、 【 var 変数名 】 だけで記述するとこれが通ってしまうという問題があります。例えば、
var a
のような宣言をしたとします。この場合、JavaScriptの仕様では、
【 変数aは、undefinedを格納した変数 】
と言う状態になります。つまり、格納した覚えのない値の入った変数が実装されてしまうわけです。
のようなコードを書くと、先頭に変数が表示さえるのですが、この状態だと、varで宣言した数が存在しません。この状態で実行すると、
のように 【 undefined 】 が代入された形で実行されます。
ちなみに、varとletは変数の宣言なので、再代入が可能なので、この状態で、
var a; //undefinedが代入される
a = 1; //1が代入される（再代入）
という感じになります。
のようにコードを書き替えると、
のように1が代入されているので、最初は値なしで、後は値の宣言をしたものが追加されています。
再宣言と言うのは、
var a = 1; //1が代入される
var a = 2; //2が代入される（再宣言）
のようにvarで同じ変数を再度宣言する事です。これは、関数を用いた時に問題が出るのですが、まず、
のようにグローバル変数の宣言をvarで宣言して、関数c（）で呼び出した場合、
のようにグローバル変数が読み込まれています。これが、スコープ外の変数の参照になるのですが、グローバル変数は、
のように関数外でも呼び出せますが、関数内からでも呼び出す事ができます。では、このコードを、
のように関数内で再宣言をすると、
のようにグローバル変数が消えてしまいます。このように巻き戻しがあり、しかも実行されてしまうという問題があるので、varは非推奨となっています。
あと、変数の宣言ですが、名称だけで宣言することも可能ですが、これも非推奨となっています。letは再代入はできるので、
のようなコードを書くと、
のようになりますが、再宣言をすると実行されません。
constは、再代入が不可能な指定なので、こうした処理自体が出来ません。
あと、letを使った状態で、関数内で入れ子状にして同じ名称の関数を再宣言した場合、 【 入れ子の中だけで実行される 】 のでその外側で再度その変数を呼び出した場合、同じ階層の変数を参照して実行されるのですが、varの場合、入れ子の中の変数を読み込むとそのまま書き換わってしまうので、問題があります。その為、同じ変数名での再宣言は必要性がない場合使わない方がいいのですが、varの場合、構造を無視した振る舞いをするので、そうした点で問題があります。
今回のような簡素なコードだと、varを使った時の問題も発見しやすいのですが、HTMLファイルの<body>タグ内に<script>タグで記述するというのは、通常は行わないので、多くの場合は外部ファイルになります。そして、今回のように 【 関数 】 で発生するという事は、クラスでも発生するという事ですから、外部ライブラリ参照型の作りにした場合、自作ライブラリの変数をvarおよび変数名のみの呼び出しで行た場合、呼び出した先で常に今回のような問題が発生するので、無駄にバグを増やしてしまう結果になります。その為、規模が大きくなると、アクセスがしやすい利便性よりも、 【 巻き上げ 】 の弊害が大きくなるのでletやconstを用いて、同一名の変数の再宣言はしないようにコードを書く必要があります。
あと、何も入っていない状態でも変数が入り簡単に書き換える事が出来るというのも問題ですから、バグの誘発要因になる事と、変数の状態を管理する意味でletとconstが推奨されています。
古いJavaScriptの本だと
<script>
var a = ' Hello,World! '；
document.write(a);
</script>
のような構文でHello,worldを表示する（というか、console.log();でステータスバーに表示したり、alart();でアラート表示するような処理もありますが...。）方法もありましたが、現在は、この二つは非推奨になっています。