未来工作ブログ
2020.07.09

HTML+Javascriptでスマートフォンアプリ開発![2:HTMLとJavascript]

  • よーだのプログラミング講座

こんにちは。
未来工作ゼミのハカセ。よーだです。

思い出したように帰ってきたプログラミング講座。
Monacaを利用した開発では、主にWEBサイトを構築するための言語であるHTMLとJavascriptを利用してアプリを開発します。
今回はHTMLやJavascriptってなんぞや?とその読み解き方について解説します。

準備

[1:はじめてみよう]で準備した開発環境とMonacaデバッガーをインストールしたスマートフォンを用意します。
[1:はじめてみよう]で作ったプロジェクトを開いておきましょう。
1

HTML

HTMLを読んでみよう

HTMLは主にWEBサイトの表示に使われるハイパーテキスト(Hyper Text)の構造を<>でかこんだタグと呼ばれる構文で定義する言語です。
2
アプリのコードを一つずつ確認しながらどのような書き方になっているのかを確認しましょう。

<!DOCTYPE HTML>


DOCTYPEタグはその文書がどのようがプログラム言語で記述されているかを宣言します。ここではHTMLで記述されていることをDOCTYPEで宣言しています。

<html>
(ここに子供のタグが入る)
</html>


htmlタグはHTML 文書においてルート (基点) となるタグです。HTMLでは全てのタグはこのタグの中に記述することが決まっています。
htmlタグは開始タグと終了タグを持ちます。終了タグはタグ名の先頭にスラッシュ(/)がついたものです。開始タグと終了タグの間に記述されたタグは、子供のタグとなります。

<head>
</head>


headタグは文書に関連して人間の目に触れない、プログラムだけで使う情報を記述します。たとえばページのタイトル、文字装飾などのスタイルの情報やスクリプトなどです。htmlタグの子供として配置し、開始タグと終了タグの間に情報を記述します。

<meta charset="utf-8">


metaタグは文書に関するデータを定義するタグです。ここではcharset属性で文字コードがutf-8である。と定義しています。タグは「属性名=”値”」の形式で名前の付いた値を持つことがあります。

<script src="components/loader.js"></script>
<script type="text/javascript">
    function hello_world() {
        alert("画面に表示したい文字列を変更");
    }
</script>


scriptタグは文書の機能や振る舞いを記述できるスクリプトを定義します。src属性を指定した場合、指定されたファイルのスクリプトを読み込みます。type属性で開始タグと終了タグの間に直接スクリプトを書くこともできます。

<link rel="stylesheet" href="components/loader.css">


linkタグはスクリプト以外の外部ファイルとの関連を定義します。ここではスタイルシートという文書の見た目を定義するファイルを読み込んでいます。

<body>
</body>


bodyタグは文書の本文コンテンツを示すタグです。開始タグと終了タグの間に画面に表示されるものを配置していきます。htmlタグの中に一つだけ配置できます。HTMLはhtmlタグの中にheadタグとbodyタグが一つずつ配置されているのが基本的な構成です。

<input type="button" value="hello world" onclick="hello_world();">


inputタグはWEBサイト上で利用者(ユーザ)の入力を受け付けるコンテンツを配置します。bodyタグの子供として記述します。入力とはボタンを押す、文字列を入力するなどです。type属性でどのような入力を受け取るコンテンツにするかを定義します。ここでは type=”button” と指定することでクリックで切るボタンを表示するよう定義しています。

テキストボックスを追加してみよう

試しにinputタグを追加して、ユーザが文字列を入力できるテキストボックスを表示してみましょう。
以下のコードを本文であるbodyタグの中に追加して、ファイルを保存(Ctrl+S / ⌘+S)します。

<input type="text" value="hello world">


3
うまくいくとボタンの横にテキストボックスが表示されるはずです。
テキストボックスにはボタンにあった hello world という文字列が既に入力されています。これはvalue属性で指定した値がtype=”button”の時はボタンに表示される値、type=”text”の時は入力された(されている)値となるためです。
このように同じタグであっても属性の指定方法で見た目や機能が変わるものがあります。

HTMLのまとめ

HTMLには様々なタグが定義されていますが、そのすべてを覚える必要はありません。

<tag property="value">
</tag>


・タグは上記の通り、<>で囲まれ、タグ名称で始まります。
・属性の名前=”値”の形式で属性が指定されます。属性の値にあるダブルコーテーション(””)は必ず必要なルールです。
・開始タグと終了タグの間に別のタグを記述すると子供のタグになります。
・終了タグを持つタグはタグ名の前にスラッシュ(/)を付けた終了タグが無いとうまく表示されません。
この基本的な構文ルールだけ覚えておけば、HTMLを読み解くことができます。

HTMLについてはMDN Web Docsのサイトが参考になります。HTMLの仕様で定められているタグや属性のリファレンス(辞書)や、学習向けのチュートリアルがあるため、詳しく知りたいときは参照するようにしましょう。

うんちく:MDN Web Docsってなんだ?
MDN Web DocsはMozilla(モジラ)という団体が管理しているHTMLやJavascriptなどの技術文書を掲載しているサイトです。多くの人が協力してWEBに関する技術について解説してくれています。Google、サムスン電子、Microsoftなどの企業がWEB関連技術を開発する際もここの文書に従って作られます。
大人向けなので難しく書かれていますが、プログラムの技術を学ぶときは、できるだけ個人のブログなどではなく、こうした信頼できる情報源を確認するようにしましょう。

Javascript

Javascriptを読んでみよう


function hello_world() {
    alert("画面に表示したい文字列");
}


※文字列の内容は違っていても問題ありません。
<script type=”text/javascript”>タグの中に記述されている上記の文字列が、Javascript(ジャヴァスクリプト)になります。
この記述では、hello_worldという名前のJavascriptの関数を定義しています。関数とはあるプログラムの処理をひとまとめにしたものです。

function


最初に行の先頭にfunctionキーワードを書き、関数を定義することを宣言します。

function hello_world


functionキーワードの次に半角スペースを一つ開けて関数の名前が続きます。名前は半角英数字であれば好きなものを付けることができます。
スクリプトの記述は画面に出す文字列など以外はすべて半角英数と一部の記号のみで行います。

function hello_world() {
}


関数名に続いては丸カッコでくくった引数リストというものが続きます。ここでは引数がないので単純に丸カッコで閉じます。
丸カッコの次は、波カッコでくくります。波カッコの中に関数の処理を定義します。

function hello_world() {
	alert("画面に表示したい文字列");
}


関数の処理として、alert関数にダブルクォーテーション(””)で囲んだ文字列を引数として設定しています。alert関数は標準で定義されている関数で、引数で渡した文字列をダイアログで表示する機能を持っています。

<input type="button" value="hello world" onclick="hello_world();">


HTMLのボタンを定義しているinputタグでhello_world関数を呼び出しています。onclick属性はコンテンツがクリックされたときに実行するスクリプトを指定できる属性です。関数名();とする事で関数を呼び出して、定義した処理を実行することができます。

スクリプトを追加してみよう

次のように関数を追加してみましょう。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript">
        function hello_world() {
            alert("画面に表示したい文字列");
        }

        function input_text(text_box) {
            alert(text_box.value);
        }
    </script>
</head>
<body>
	<input type="button" value="hello world" onclick="hello_world();">
    <input type="text" value="hello world">
</body>
</html>

さらにテキストボックスにonchange属性を追加します。
onで始まる属性はユーザの入力に反応するスクリプトを指定するため、イベントと呼ばれることもあります。onchangeはvalue属性が変化したときにスクリプトを実行するため、チェンジイベントと呼ばれます。onclickはクリックイベントとも呼ばれます。

<input type="text" value="hello world" onchange="input_text(this);">


定義したinput_text関数の引数にthisというオブジェクトを引き渡して呼び出しています。thisは特殊なキーワードで呼び出すコンテンツ自体を値として渡すことができます。

ここでテキストボックスの内容を変更(change)してみます。テキストを一部削除や変更してテキストボックス以外のところをクリックしてフォーカスを外してみましょう。
4
ダイアログでテキストボックスに入力された内容が表示されれば成功です。

Javascriptのまとめ

Javascriptの主に関数の定義の読み解き方を学び、onで始まる属性でイベントを利用して呼び出してみました。
HTMLと同じか、それ以上にJavascriptにも色々な構文や機能があります。ですがそれらを覚える必要はありません。今回学んだ関数の定義の様に基本的な構文だけ頭に入れておき、必要な時にリファレンス(辞書)を参照するようにしましょう。
JavascriptもMDNが参考になります。少し難しいですが、ここでもチュートリアルなどがありますので、詳しく知りたいときは参照するようにしましょう。

むすび

一番最初に作ったアプリケーションの構造を読み解き、少しだけ改造してみました。
まだまだアプリケーションとしてば見栄えが悪かったりしますが、HTMLで作ったアプリケーションは見た目を整えるのは比較的簡単にできますので、試作品を作る段階では構造と動きを優先して開発すると良いでしょう。

文中でも何度か書きましたが、どのプログラム言語にしろ機能や定義を暗記する必要はありません。基本的な構文を読み解けるようになれば、何をしている処理なのかを把握することができます。
どの言語もアップデートにより機能や定義は常に変化しますので、その時の最新の情報をリファレンス(辞書)で確認するようにしましょう。

参考:https://developer.mozilla.org

関連するブログ
RECOMMEND WEBLOG

チャンネル
CHANNEL