PCを購入した場合、アプリケーションを使うことになりますが、ＰＣでプログラミングを学ぶ場合、複数の選択がありますが、WINDOWS 10では2つの選択肢があります。一つは、ブラウザで動くアプリケーションを作れるECMA Script（JavaScript）で、もう一つは、同社が提供している.NETです。
.NETはコンパイルをして.exe形式の実行ファイルを生成できるコンパイラーを使ってソースコードをビルドするものになりますが、.NETは仮想マシン用のバイトコードとしてコンパイルして、それをVM内で実行しています。つまり、
■ WINODWS
■ ＭＡＣ
■ Ｌｉｎｕｘ
のどの環境デコンパイルしてもバイトコードのコンパイルをするので、命令セットの影響を受けません。通常のコンパイル型言語では、アーキテクチャごとに異なる命令セットを使ってコンパイルをするので、互換性のないバイナリーが出来上がってしまいます。その為、互換性がないので、コンパイル環境と実行環境を合わせて奥く必要があります。
.NETは、JAVAのように仮想マシン用のバイトコードをコンパイルする仕様になっているので、コンパイル環境と実行環境を選ばないので、生産性の高い仕様になっています。JAVAの場合、コンパイル環境として、 【 JDK（Java Develop Kit） 】 が必要で、作成したアプリケー所の実行には、ランタイムの 【 JRE(Java Runtime Environment) 】 を使用する事になります。このJREにバイトコードを実行するための仮想マシンのJAVA VMとJAVA VM用の命令セットが入っているのですが、.NETでは、これが.exeファイルの中に包含された状態でコンパイルされます。その為、C++のようなコンパイル型言語に見えますが、VMを通しているので、ネイティブコードを書き出すコンパイル型言語とは異なる仕様の言語になっています。
JavaScriptは、WEBブラウザで実行できるインタプリタ型言語なので、WBブラウザがあれば、対応した仕様のものであれば実行できます。
J avaScript
JavaScriptと言うよりも、ECMA ScriptはWEBブラウザで動的な挙動を実装する時に使用するインタプリタ言語になりますが、他の言語とは異なり、単独で実行することはできません。この言語を使う場合には、HTMLファイルを作成する必要があります。
JavaScriptは、HTMLで動的な振る舞いを実装する時に使用するので、ブラウザ上で動作させるのは、JavaScriptではなく、JavaScriptが実行できる仕様になっているHTMLファイルになります。
その為、JavaScriptを使うためには、HTMLファイルを作成し、
■ ＨＴＭＬ内にＪａｖａＳｃｒｉｐｔを書く
■ 外部ファイルを作ってHTMLでJavaScriｐｔを
読み込んで使う
事になります。
H TMLファイル
HTMLファイルは、拡張子が 【 .html 】 になっており、 【 タグ 】 で制御することで、装飾文字の挿入や表組みなどを行う事ができます。
HTMLは、記述によってフォームも作れるのですが、HTML 5から実装されたCANVAS機能もあるので、記述だけでラインを引いたり図形を描くことが出来るようになっているのですが、SVGなどもそのまま表示できるようになりました。
HTMLは、 【 <タグ名> 】 で記述するのですが、間に文字列などが入る物は、 【 <タグ名> 記述 <タグ名> 】 のような形で記述を行います。
HTMLの記述については、
で触れていますが、基本的な構造としては、
■ <HEAD>タグ
■ <BODY>タグ
が存在しており、<HEAD></HEAD>タグの間に設定ファイルやインポートするファイルのリンクの記述を行い、<BODY></BODY>の中にコンテンツを記述する事になりますが、JavaScriptをHTMLファイルの中に記述する場合、 【 <SCRIPT>タグ 】 で記述する事になります。
JavaScriptは、HTMLのBODY内のオブジェクトを制御したり、フォームなども使用できるので、様々なことができますが、記述が5になって簡素化されているので、一番最初の行で 【 <!DOCTYPE HTML> 】 と宣言することでHTML5として認識されます。
HTML5では、<SCRIPT>タグ内の内容はJavaScriptとして認識されるため、HTML4までのように 【 TEXT/HTML 】 と言う記述の必要がなくなりました。
H TMLファイルを作る前の下準備
プログラミング言語を使ってプログラムを作る場合、事前に作業フォルダーを作ってその中で素材を配置して使用する事になります。
HTMLはサーバ内にコンテンツを配置して使用するための言語ですから、その表示を行う時に使用するものになりますが、サーバ上にコンテンツをアップして使う場合には、コンテンツを配置するスペースが決まってきます。その為、その中でファイルを管理する事になりますが、個人がレンタルサーバを借りてホームページを作る場合も同様で、アカウント内のファイルスペースの容量の範囲内にツリー構成を作って運用する事になります。この場合、
のようなツリーを作って運用する事になりますが、アカウントのトップページはindex.htmlで、そこから別のコンテンツに移動するような作りにします。レンタルサーバでスペースを借りる場合、そのサービスの範囲内でできる事しか行えませんから、無料のレンタルスペースの場合だとCGIが使えないサービスも存在しています。その為、サーバサイドスクリプトを使えないものもありますが、基本的にサーバを使う場合には、サーバサイドスクリプトが使えるので、サーバそのものを立てて運用する場合には自由にサーバの仕様とコンテンツの設計を行う事ができます。その為、実装したコンテンツの処理がサーバサイドで行う物を実装ずる事ができます。
ＣＧＩやCシェルなどがそう言った仕様のものになっていますが、ブログの処理は完全にサーバサイドの処理になりますが、WORDPRESSなどを使ってそう言った物を実装できます。当然、仮想化を使ったサービスや、DOCKERを使って実装したサービスなどもサーバサイドで処理が行われています。
その為、こう言ったサーバ内で動いている物を使うためには、オンラインでなければなりませんから、サーバクライアントシステムで、サーバにアクセスして使う物になります。これは、サーバ上に配置したホームページを閲覧する場合や、ブログやソーシャルメディアを使う場合にはオンラインでなければ使えないのとまったく同じ理由ですが、サーバサイドで運用しているサービスについてはすく案くともWANにつながっていないと使えない仕様になっています。
それに対し、JavaScriptはあくまでもHTMLを動的に扱うためのスクリプト言語ですから、オフラインでも使用できます。
と言うのも、HTMLファイルを構築した時にファイルはPC内部のストレージに記録されていますから、このファイルに挙動を実装した場合、そのファイルはPC内部にあるので、オフラインでも動作します。
つまり、HTMLファイルの場合、コンピューター内部で表示をするものなので、個人が所有しているPCのストレージ内ののファイルであれば、オフラインでも実行できます。そして、JavaScriptもHTMLで実行しているのでオフラインで動作します。
また、JaaScriptがブラウザで動作する時にはPCで処理を行っていますから、サーバにアップしても処理はそのHTMLファイルにアクセスしたPCで行います。
PCでJavaScriptを動かす場合は、オフラインでも動作するので、サーバ上のファイルで動作させるファイル参照などが存在しない場合だとオフラインで動作させることができます。その為、オフラインで動作するHTML5のコンテンツを作る事もできます。
■ 環境の構築
JavaScriptを使う場合、
■ HTML5
■ CSS3
■ ESMA Script（JavaScript）
になりますが、これは、コンパイルが全く必要のないものになりますから、動作させるためには、
■ WEBブラウザ
■ テキストエディタ
だけで作業ができます。その為、WIDNOWS環境だと、
■ メモ帳
■ PowerShell
のように編集できる環境があるので、コードを書くことはできますが、入力支援が全く存在しないので、任意のコードエディタを用意したほうが作業が行いやすくなります。
その為、フォームと文字列だけの動作だと、WEBブラウザとテキストエディタだけで作る事が出来るので、気軽に体験できるプログラミング言語になります。
コンテンツを作る場合に、マルチメディアファイルを作る場合には、別途それを作るソフトも必要になりますが、制御部分の学習だけだと、前述のものだけで揃います。
入力については、Visual Stucio Comminutyのように単独でフォームアプリを作れるような環境やVisual Studio Codeのようなコードエディタがあると便利ですが、制作時に作業用フォルダ―を製作してそこで必要なファイルを管理できるような作りのものを別途追加しておくと作業がしやすくなります。また、こうしたツールは、入力支援もあるので、OSに標準実装されているテキストエディタで作業をするよりも作業負荷の軽減が見込めます。
こうした環境を整えて、HTML/CSS/JavaScriptを書いていく事になります。
Ｈ ＴＭＬ
HTMLはリッチテキストなので、装飾やレイアウトをできるテキストを指定できるマークラップランゲージになります。前述のようにタグで指定することで文字の装飾などを行えますが、基本的にワープロソフトで行えるレイアウトのようなことをタグの記述で行う事ができます。
また、マルチメディアファイルの配置もタグで指定できるので、そう言ったコンテンツをページ内に配置する事ができます。
Ｃ ＳＳ
タグにはプロパティもありますがレイヤーのような階層構造を持たせることや画像に対してフィルター処理を加えることはできませんが、CSSを用いることでそれが可能になります。HTML5はタグが増えて色々な事が出来るようになりましたが、ピクセル単位でのレイアウトの指定や、ピクセルだけでなくミリやインチやパイカ単位で指定もできるので、そう言った意味ではごく当たり前にレイアウトが出来る仕様になっています。
こうした 【 細かなレイアウトや画像などの処理 】 を行う場合には、CSSを併用する事になります。
このようにHTMLとCSSを用いるとワープロソフトの様なレイアウトとグラフィックツールのようなレイヤーとフィルター効果まで手に入るのですが、これれはあくまでも 【 レイアウト 】 なので 【 定数 】 の処理になります。
定数という事は動きがありませんから、動的な物は作れません。また、レイアウトとフォームの表示しかできませんから、フォームに入力した値を変数として扱う事もできませんし、演算処理や条件分岐やループも実装できません。こうした 【 動的な挙動 】 を実装する際にプログラミング言語が必要になるわけですが、HTMLの場合、そう言った処理を行うためにJavaScriptを使います。現在は、【 ECMA Spcipt 】と呼びますが、略して 【 ES 】 と書かれている場合、JavaScriptのもとになっているこの言語の事を指します。現在は2020が策定されていますが、古いバージョンと現在のバージョンではできる事が違っていたり、宣言が違う場合もあるので注意が必要です。
Ｊ avaScript
JavaScriptは、インタプリタ型言語になりますが、この仕様の言語は上から順番にコードを処理していきます。これがインタプリタ型言語の特徴になりますが、前の世紀ののブラウザだとそのままですが、近年のブラウザは、JavaScriptの実行を行う際にJITコンパイルでバイナリーにして実行しています。これが、ChromeとFirefoxでは処理の方法が異なるので、ブラウザによって同じコードでも実行のされ方が異なります。結構前からインタプリタ言語でこう言った仕様になっていますが、PythonにもJITコンパイルの選択肢がありますから、そのまま実行するよりも速度を出す方法があります。機械学習や強化学習の場合、拡張ライブラリが高速に処理が出来る物が存在しているので、インタプリタ型言語ですが、Pythonでも速度が出る事も多く存在します。
その為、物凄く長い行のプログアムを実行する場合には、インタプリタ型言語は物凄く遅いのですが、現在はJITコンパイルを行えるので、前の世紀のBASICをBASICのコマンドだけで膨大な量のソースコードを書いてBASICインタプリタ上だけで動かすような状態とは異なります。また、インタプリタとJITコンパイルは選択できるので、用途によって使い分けることができます。
ちなみに、JavaScriptのJITコンパイルはブラウザ側の内部処理の話ですから、通常のコードを書いても使用されています。その為、ブラウザのバージョンが新しいほどバージョンの新しいスクリプトに対応していますから、使える機能も多くなります。
JavaScriptですが、getlEmentByIDメソッドを使う事で、HTML内で使用しているオブジェクトのコントロールが出来るので条件分岐を含めて動作する物も作れますし、このメソッドはDocumentオブジェクトのメソッドになりますが、これを用いることでHTML5から実装されたCANVAS機能を使うことができます。
その為、<img>タグで表示した画像の座標を変更することもできますし音楽の再生や停止なども行う事ができます。
Ｊ avaScriptの 【 Hello,World! 】
通常のプログラミング言語だと、Print文やPythonのようにPrint()関数で表示する事になりますが、オブジェクト指向のC++の場合だと、コンパイル時に必要になる命令のinclude stdio.hを宣言して、その後、main()関数を宣言した後に、printf関数を包含して、表示を行い、戻り値として0を返す事で表示をするという流れになりますが、こうした言語は、 【 コンソールに表示する 】 と言う 【 表示の対象 】 が決まっていますが。JavaScriptの場合、表示できる場所た複数あるので、いろいろなコードに遭遇します。と言うのも、
■ コンソールログに表示
console.log("hello world!");
■ アラートに表示
alrt("hello world!");
のようにどこにでも文字列を表示できるため、対象を何にするのかで記述が変わります。
Ｄ ocument
Documentインターフェースは、ページ内に新しい要素を加える事や、IDで管理されたものの取得が可能になりますが、コンストラクタとして使う場合には 【 Document() 】 の形で使います。
また、このDocument()には、プロパティとメソッドを負荷できますが、
■ プロパティ ： 取得
■ メソッド ： 追加
の要素を目的に合わせて追加できます。getElementByIdはプロパティになります。
HTMLファイル内に 【 Hello,World 】 と表示したい場合には、メソッドを追加する事になりますが、この時に使用するのが、document.writeメソッドです。
■ Document.witreメソッド
これを用いると、マークアップとして記述した内容がそのままHTMLファイルの内容として記述されます。
■ Document.witreメソッド
document.witre(markup)
と言う記述になりますが、これは、Body内に記述される仕様になっています。
コ ードを書く
まず、コードを書く前に作業用フォルダ―を作ります。2スピンドル以上だと呼び出しやすいので、セカンダリのフォルダー以降のフォルダー（USB接続の外付けのストレージでも問題はありません。）を用意して、
のような感じでフォルダーを作ります。今回は、HTML-TESTと言うフォルダーを作っておきました。
そして、最初に、HTMLを書きます。今回は、CSSについては、触れませんが、HTMLの構造について少しふれておきます。
H TML5
HTML5から記述の簡素化がされており、タグ内の記述が短縮されました。現在の最小単位は、
のような物になりますが、この構造ですが、
のように<head>タグの間に設定が入り、<body>タグの中に表示する物の記述が入ります。HTMLの ”HELLO,WORLD” は、
のようにBODYタグの中に記述するだけになります。WINDOWS環境でテキストエディタを使う場合、
のように 【 すべてのファイル 】 を選択しないと、.txtになるので、必ずこれを選択して、文字コードは 【 UTF-8 】 を選択します。
この状態で先ほどの作業フォルダ―に保存すると、
のようにファイルが追加されます。これを実行すると、
のように文字が表示されます。
■ HTML5の記述
HTML5では、
のように記述を行います。
まず、HTML5の認識ですが、先頭の行の
<!DOCTYPE html>
と記述すると、HTML5として認識されます。そして、次の行が文字コードの指定です。
<meta charset="UTF-8">
で表示段階でUTF-8ででコードを行う事になります。次の
<title>文字列</title>
ブラウザ上部に表示される文字の指定になります。これを
のように保存して、フォルダーからファイルを選択して実行します。
すると、
のようにタブのページの表記がファイル名ではなく、<title>タグで指定した文字列に代わっています。
■ 構造を追加する
HTMLでは、<body>タグ内に記述したものがひょじされますが、レイアウトをする時に、タグで分けることができます。
のように<header><article><hooter>で項目を分けることで
■ タイトル
■ コンテンツ
■ 注釈
のような感じで記述を分けてることができます。これを実行してみると、
のようになります。
Ｊ avaScriptの実行
ＪａｖａＳｃｒｉｐｔをbody内に記述する場合には、<script>タグを使のですが、前述のコードでは、外部にあるscript.jsと言うファイルがある場合にそれを参照するという記述になっています。つまり、ヘッダーで書いた仕様は外部ファイルを作った場合の読み込みで使用します。
<body>タグに直接記述する場合には、
<script> JavaScriptのコード </script>
で実行できます。今回は、すでに説明した、
■ document.write()
■ alert()
を用います。
JavaScriptでは、改行をする時に 【 ；（セミコロン） 】 を使いますが、これが入っていないとエラーになります。構造が少し違うとコロンの場所も変わってくるのですが、そう言ったコードも後で紹介します。
これは、コードの流れだと、 【 文字の表示 】 【 アラート 】 になっていますが、コンテンツの実行の前にアラートが出ないと問題があるので、アラートは先に出る仕様になっています。その為、このコードを実行すると、
のようにアラートが出て、
のようにコンテンツに文字が表示されます。
算 術演算子と変数を使う
JavaScriptもプログラミング言語なので、変数が使用できます。
のようなコードを書いて実行すると、
のようにアラートが出た後に、
のように変数を呼び出して文字列と結合して表示されます。この処理は、
の部分だけで処理が制御されているのですが、このコードは、3つのもので構成されています。
変 数の宣言
今回は、変数を用意して数式で使用しているのですが、
のように変数を宣言しています。ここで、letとconstが出ていますが、
■ let
代入した値の変動が発生する変数の宣言
■ const
代入した値の変動がない定数の指定
を行う時に使用します。今回の事例だと全てconstでも問題がない気がしますが、
のように、計算を行う為の項の代入は変数で行い、変更が発生しない数式を代入するの場合、定数になりますから、定数cはconstを使っています。
constを使う場合、 【 レイアウトのような固定された定数 】 で使用しますが、数値の変動が発生する場合は定数ではなく変数なので、その場合は、constではなく、letを用います。
プロgラミング言語での 【 = （イコール） 】 は、代入演算子なので、代入になります。その為、等号や一致のような記述の場合、異なる演算子を用いる事になります。今回は、加算を行っていますが、これは算術演算子になります。
次の行が、document.write()なので、表示になります。
の部分になりますが、
のような記述になります。ここでも 【 + （プラス） 】 を使っています。これも算術演算子なんですが、
のように結合できています。プログラミング言語では、記述の方法がそれぞれ異なりますが、str型とint型などの文字列と数値の結合ができます。
そして、最後にアラートで表示を行っています。
これは、文字列の表記をするために文字列を使っていますが、変数や数値だと、そのまま使えますが、文字列だと
■ ' （シングルクォーテーション）
■ " （ダブルクォーテーション）
を使います。文字列の中に 【 " （ダブルクォーテーション） 】 が登場するとコードが破綻するので、便宜上、 【 ' （シングルクォーテーション） 】 を使います。
P owerShell SEの場合
今回は、メモ帳を使ってみましたが、WINDOWS 10には、内部処理をコードの記述で制御できるPower Shellを実装しています。
Powershellはターミナルですが、統合環境のPowershell SEも実装されています。
コードを書いてみると、
のようになり、通常のソースコードだとコード部分は関数などを認識して畳めるようになっています。
のコード部分ですが、
のように畳むことができます。
Powershell SEでは、メモ帳と異なり、複数の形式で書き出せるようになっています。
XMLやテキストはそのまま書き出す事ができますが、非対応の言語の場合だと、メモ帳と同様に 【 すべてのファイル（*.*） 】 を選択して、拡張子まで含めたファイル名を指定して出力する事になります。
J avaScriptの場合
JavaScriptの場合、
■ キーの判定
■ マウスアクション
などが、標準で使えるのですが、この挙動はフォームアプリの挙動なので、対象のオブジェクトに対しての挙動になります。これと全く同じ条件が、 【 文字入力 】 にも当てはまるので、フォームを作成して文字を入力した後に、その変数を使って計算をするプログラムを書くことになります。
この時に、オブジェクトの状態を得る事になるので、getElementByIdを用いる事になります。