モダンなアプリにするには？
モダンなアプリにするには？！
2022年9月1日
モダンなアプリにするには？
コマンドラインで足し算をするプログラムができましたが、これは昔のスタイルです。最近のアプリは、GUI(グラフィカル・ユーザー・インターフェース:Graphical User Interface)と呼ばれる、もっと使いやすいです方法で作られています。NodeJS を使った場合には、コマンドラインでの利用になりますが、同じ Javascript のプログラムでも、Web ブラウザを利用するともっと、使いやすいプログラムにする事が可能です。今回は、Web ブラウザ上で足し算をするプログラムにしてみました。
Web ブラウザで動くアプリ
最近の Web ブラウザは、Javascript を使ったプログラムを実行できるようになっています。 Web ページを作る時に利用される HTML を使って記述すると、Windows パワーシェルのような「特殊」なウインドウを開いて実行しなくても、Web ブラウザ上で必要なデータを入力してボタンの操作で足し算の計算をするようなアプリにする事ができます。
この場合、HTML でデータを入力するフォームを作って、その中に Javascript のプログラムを組み込むと Web ブラウザで動くアプリになります。
最近の Web ブラウザは、Javascript を使ったプログラムを実行できるようになっています。 Web ページを作る時に利用される HTML を使って記述すると、Windows パワーシェルのような「特殊」なウインドウを開いて実行しなくても、Web ブラウザ上で必要なデータを入力してボタンの操作で足し算の計算をするようなアプリにする事ができます。
この場合、HTML でデータを入力するフォームを作って、その中に Javascript のプログラムを組み込むと Web ブラウザで動くアプリになります。
まずは HTML でフォーム作り
最初にやることは、HTML でデータを入力するためのフォームを作ります。
<!DOCTYPE html>
<html>
<head>
<title>足し算のプログラム</title>
</head>
<body>
<div>
<input />
<label>+</label>
<input />
<label>=</label>
<input />
<button>Calculate</button>
<button>Clear fields</button>
</div>
</body>
</html>
このファイルを保存して、Web ブラウザで開きます。Web ブラウザのリンク（URL）を入れる所に、保存した HTML ファイルの場所を指定すると、フォームが表示されます。
HTML 形式のファイルにはパターンがあって、まずは、上の記述をコピーしてファイルに保存して下さい。 この記述でやっているのは、ファイル（ドキュメント）のタイプが HTML であることをブラウザに教えています。 その上で、HTML の記述は「html」のタグで囲みます。その中は、「head」と「body」のタグで囲まれた部分で構成されています。「head」の部分は、タイトルなど、この HTML の基本情報で基本的には実際には表示されない部分です。（タイトルは Web ブラウザのタブなどに表示されます）「body」は、実際に表示される HTML の記述を各部分です。
今回は、「input（入力フィールド）」、「label（ラベル）」、「button（ボタン）」の三つの部品を使っています。これらは、DOM(Document Object Model)と呼ばれていて、Javascript と連携できるような仕組みになっています。
最初にやることは、HTML でデータを入力するためのフォームを作ります。
<!DOCTYPE html>
<html>
<head>
<title>足し算のプログラム</title>
</head>
<body>
<div>
<input />
<label>+</label>
<input />
<label>=</label>
<input />
<button>Calculate</button>
<button>Clear fields</button>
</div>
</body>
</html>
このファイルを保存して、Web ブラウザで開きます。Web ブラウザのリンク（URL）を入れる所に、保存した HTML ファイルの場所を指定すると、フォームが表示されます。
HTML 形式のファイルにはパターンがあって、まずは、上の記述をコピーしてファイルに保存して下さい。 この記述でやっているのは、ファイル（ドキュメント）のタイプが HTML であることをブラウザに教えています。 その上で、HTML の記述は「html」のタグで囲みます。その中は、「head」と「body」のタグで囲まれた部分で構成されています。「head」の部分は、タイトルなど、この HTML の基本情報で基本的には実際には表示されない部分です。（タイトルは Web ブラウザのタブなどに表示されます）「body」は、実際に表示される HTML の記述を各部分です。
今回は、「input（入力フィールド）」、「label（ラベル）」、「button（ボタン）」の三つの部品を使っています。これらは、DOM(Document Object Model)と呼ばれていて、Javascript と連携できるような仕組みになっています。
プログラムを組み込む
HTML の記述には、Javascript のプログラムを組み込むことができます。 Javascript のプログラムを HTML に組み込む場合、「script」のタグで囲みます。
今回、組み込む Javascript のプログラムの例です。 今回は、作成したフォームの部品に名前をつけて、プログラムからアクセスできるようにしています。
「operand0」と名前をつけた（id を指定）した、入力フィールドは、
document.getElementById("opeland0");
でアクセスできます。
入力フィールド内の文字を取り込むには、
const inputField = document.getElementById("opeland0");
const inputString = inputField.value;
のようにするとアクセスできます。
入力フィールドに文字をセットする場合には、
const inputField = document.getElementById("opeland0");
inputField.value = "この文字が表示されます";
のようにすると、与えられた文字、この場合「この文字が表示されます」が入力フィールドに表示されます。
処理は、「function」を使うと、必要な処理をまとめて機能毎にプログラムを部品化する事ができます。今回は、「calculate()」と「clearFields()」の二つの処理を関数で記述しています。
あとは、ボタンが押された際に処理を呼び出す仕組みを追加すればプログラムと先程のフォームを関連づけることができます。
ボタンがクリックされた際に、関数「calculate()」の処理をしたい場合には、
<button onclick="caluculate()">Calculate</button>
のようにすると、「Calculate」のボタンがクリックされた際に、関数「calculate()」 が呼び出されるようになります。
Javascript のプログラムは以下のようになります。
// Input fields
const inputField0 = document.getElementById("opeland0");
const inputField1 = document.getElementById("opeland1");
// Output fields
const resultField = document.getElementById("result");
function calculate() {
// Clears the output field
resultField.value = "";
// Gets the input values
const ope0input = inputField0.value;
const ope1input = inputField1.value;
// Parses the input values to integer values
const ope0 = parseInt(ope0input);
const ope1 = parseInt(ope1input);
// Checks the input values are numbers
if (isNaN(ope0)) {
inputField0.value = "整数ではありません";
if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
}
alert("整数を入力して下さい");
} else if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
alert("整数を入力して下さい");
} else {
result.value = ope0 + ope1;
}
}
function clearFields() {
inputField0.value = "";
inputField1.value = "";
resultField.value = "";
}
HTML の記述には、Javascript のプログラムを組み込むことができます。 Javascript のプログラムを HTML に組み込む場合、「script」のタグで囲みます。
今回、組み込む Javascript のプログラムの例です。 今回は、作成したフォームの部品に名前をつけて、プログラムからアクセスできるようにしています。
「operand0」と名前をつけた（id を指定）した、入力フィールドは、
document.getElementById("opeland0");
でアクセスできます。
入力フィールド内の文字を取り込むには、
const inputField = document.getElementById("opeland0");
const inputString = inputField.value;
のようにするとアクセスできます。
入力フィールドに文字をセットする場合には、
const inputField = document.getElementById("opeland0");
inputField.value = "この文字が表示されます";
のようにすると、与えられた文字、この場合「この文字が表示されます」が入力フィールドに表示されます。
処理は、「function」を使うと、必要な処理をまとめて機能毎にプログラムを部品化する事ができます。今回は、「calculate()」と「clearFields()」の二つの処理を関数で記述しています。
あとは、ボタンが押された際に処理を呼び出す仕組みを追加すればプログラムと先程のフォームを関連づけることができます。
ボタンがクリックされた際に、関数「calculate()」の処理をしたい場合には、
<button onclick="caluculate()">Calculate</button>
のようにすると、「Calculate」のボタンがクリックされた際に、関数「calculate()」 が呼び出されるようになります。
Javascript のプログラムは以下のようになります。
// Input fields
const inputField0 = document.getElementById("opeland0");
const inputField1 = document.getElementById("opeland1");
// Output fields
const resultField = document.getElementById("result");
function calculate() {
// Clears the output field
resultField.value = "";
// Gets the input values
const ope0input = inputField0.value;
const ope1input = inputField1.value;
// Parses the input values to integer values
const ope0 = parseInt(ope0input);
const ope1 = parseInt(ope1input);
// Checks the input values are numbers
if (isNaN(ope0)) {
inputField0.value = "整数ではありません";
if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
}
alert("整数を入力して下さい");
} else if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
alert("整数を入力して下さい");
} else {
result.value = ope0 + ope1;
}
}
function clearFields() {
inputField0.value = "";
inputField1.value = "";
resultField.value = "";
}
入力フォームとプログラムを組み合わせた例
今回は、HTML の記述に Javascript の記述を組み込んで一つのファイルでアプリを実現します。
やることは、HTML の部品（DOM）に「id」を使って名前をつけます。 この名前を使って、Javascript のプログラムから入力フィールドにアクセスできるようにします。
HTML のボタンにボタンがクリックされた場合に呼び出す関数を指定します。 Javascript 側では、呼び出される関数を記述します。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<input id="opeland0" type="text" />
<label>+</label>
<input id="opeland1" type="text" />
<label>=</label>
<input id="result" type="text" />
<button onclick="calculate()">Calculate</button>
<button onclick="clearFields()">Clear fields</button>
</div>
</body>
</html>
<script>
// Input fields
const inputField0 = document.getElementById("opeland0");
const inputField1 = document.getElementById("opeland1");
// Output fields
const resultField = document.getElementById("result");
function calculate() {
// Clears the output field
resultField.value = "";
// Gets the input values
const ope0input = inputField0.value;
const ope1input = inputField1.value;
// Parses the input values to integer values
const ope0 = parseInt(ope0input);
const ope1 = parseInt(ope1input);
// Checks the input values are numbers
if (isNaN(ope0)) {
inputField0.value = "整数ではありません";
if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
}
alert("整数を入力して下さい");
} else if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
alert("整数を入力して下さい");
} else {
result.value = ope0 + ope1;
}
}
function clearFields() {
inputField0.value = "";
inputField1.value = "";
resultField.value = "";
}
</script>
前回の例のように、数字以外の文字が入力された場合は、処理するデータが入力されない場合（空白の場合）のエラー処理を記述しています。
これで、計算する数値を入力して、「Calculate」ボタンを押すと計算結果を表示して、「Clear」ボタンを押すと入力フィールドのデータがクリアされるアプリになります。
今回は、HTML の記述に Javascript の記述を組み込んで一つのファイルでアプリを実現します。
やることは、HTML の部品（DOM）に「id」を使って名前をつけます。 この名前を使って、Javascript のプログラムから入力フィールドにアクセスできるようにします。
HTML のボタンにボタンがクリックされた場合に呼び出す関数を指定します。 Javascript 側では、呼び出される関数を記述します。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<input id="opeland0" type="text" />
<label>+</label>
<input id="opeland1" type="text" />
<label>=</label>
<input id="result" type="text" />
<button onclick="calculate()">Calculate</button>
<button onclick="clearFields()">Clear fields</button>
</div>
</body>
</html>
<script>
// Input fields
const inputField0 = document.getElementById("opeland0");
const inputField1 = document.getElementById("opeland1");
// Output fields
const resultField = document.getElementById("result");
function calculate() {
// Clears the output field
resultField.value = "";
// Gets the input values
const ope0input = inputField0.value;
const ope1input = inputField1.value;
// Parses the input values to integer values
const ope0 = parseInt(ope0input);
const ope1 = parseInt(ope1input);
// Checks the input values are numbers
if (isNaN(ope0)) {
inputField0.value = "整数ではありません";
if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
}
alert("整数を入力して下さい");
} else if (isNaN(ope1)) {
inputField1.value = "整数ではありません";
alert("整数を入力して下さい");
} else {
result.value = ope0 + ope1;
}
}
function clearFields() {
inputField0.value = "";
inputField1.value = "";
resultField.value = "";
}
</script>
前回の例のように、数字以外の文字が入力された場合は、処理するデータが入力されない場合（空白の場合）のエラー処理を記述しています。
これで、計算する数値を入力して、「Calculate」ボタンを押すと計算結果を表示して、「Clear」ボタンを押すと入力フィールドのデータがクリアされるアプリになります。
まとめ
今までは、NodeJS を利用して、Windiws Power Shell などでコマンドをタイプして実行するプログラムでしたが、今回は、Web ブラウザの入力フォームから処理するデータを入力して Web ブラウザ上で結果も表示できるようにする例を紹介しました。
コマンドラインのプログラムに比べると、利用者により使いやすいアプリになりました。 最近のアプリは、コマンドラインで実行するものよりは、今回の Web ブラウザのフォームのように、GUI と呼ばれる使いやすいインターフェースを使ったアプリが主流になっています。
ただし、記述しなければいけない部分が増えるため、コードは複雑になります。今回の例では HTML を利用して入力のフォームを記述して、Javascript のプログラムを埋め込んでアプリにしています。 コマンドラインのプログラムに比べると記述量は増えていますし、入力フォームの操作（イベント）に対する処理などが必要になるのでやや面倒になります。
たたし、アプリの使い勝手を考えると GUI を利用した方が断然便利です。
一般的なアプリの開発を考えた場合には、GUI を利用した実装は現状では必須です。
今までは、NodeJS を利用して、Windiws Power Shell などでコマンドをタイプして実行するプログラムでしたが、今回は、Web ブラウザの入力フォームから処理するデータを入力して Web ブラウザ上で結果も表示できるようにする例を紹介しました。
コマンドラインのプログラムに比べると、利用者により使いやすいアプリになりました。 最近のアプリは、コマンドラインで実行するものよりは、今回の Web ブラウザのフォームのように、GUI と呼ばれる使いやすいインターフェースを使ったアプリが主流になっています。
ただし、記述しなければいけない部分が増えるため、コードは複雑になります。今回の例では HTML を利用して入力のフォームを記述して、Javascript のプログラムを埋め込んでアプリにしています。 コマンドラインのプログラムに比べると記述量は増えていますし、入力フォームの操作（イベント）に対する処理などが必要になるのでやや面倒になります。
たたし、アプリの使い勝手を考えると GUI を利用した方が断然便利です。
一般的なアプリの開発を考えた場合には、GUI を利用した実装は現状では必須です。
コメント
コメントを投稿