【プログラミング未経験者のスタート】HTMLとJavaScriptで遊ぼう

どもども～、あべしんです！

「未経験者向けプログラミング実践」ということで、実際にプログラミングしてみましょう。

知識・経験ががない
プログラミングの基礎すら知らない

という方でも問題ありません。
簡単なプログラムを順番に解説していくので、気軽に実践してください。

記事の内容は以下の通りです。

難しい話は抜き
細かい部分は飛ばして必要最低限の解説のみ
書いて動かすことがメイン
30分ほどで終わるボリューム

この記事でプログラミングの感覚を掴みましょう！

今回作るのは「日時取得アプリ」です。
ボタンを押すと現在の年月日時分秒を表示してくれるというシンプルなものです。

これをHTMLとJavaScriptという２つの言語を使って作っていきます。

必要なものを用意
プログラミング開始
１つ学ぶとできることの幅が広がる
JavaScriptを本格的に学ぼう

必要なものを用意

プログラミングに必要なものが３つあるので用意します。

エディタツール
Webブラウザ
HTMLファイル

順番に解説します。

エディタツール(VSC)を導入

まずはVSCを用意します。

VSC(Visual Studio Code)は、プログラミングに特化したエディタツールで、メモ帳やサクラエディタといった他のツールよりも圧倒的にプログラミングがやりやすくなります。

エディタツールはプログラミングする上では必須アイテムです。
エディタツールはいくつか種類がありますが、当ブログではVSCをおすすめしてます。

メモ帳でもプログラミングはできますが、これを機にVSCを使ってみましょう！

まずは下のリンクから自分のPCに合ったものをダウンロード&インストールしましょう。
(インストールまでの手順は割愛します)

Visual Studio Codeをダウンロード

インストールできたらVSCを起動します。
初期の状態だと英語表示になっていてわかりづらいので、ついでに日本語対応もやっておきましょう！

「拡張機能」ボタンを押す
検索ワード欄に「japanese」と入力
「Japanese Language Pack for Visual Studio Code」を選択する
「Install」ボタンを押してインストールする

上の手順を実施したら一度Visual Studio Codeを閉じて再起動しましょう。

画像のようにさっきまで英語表記だった部分が日本語表記に変わっていればOKです！

Webブラウザを起動

書いたプログラムコードを動かすために、Webブラウザを使います。

WebブラウザはFirefoxやGoogle Chromeなどどれでも大丈夫ですが、今はGoogle Chromeが一番主流なので今回はGoogle Chromeを使用します。

まだ入れてない方は下記からダウンロードしましょう。

Google Chromeダウンロード

HTMLファイルを作る

プログラムコードを書くファイルを作ります。
HTMLファイルとは、拡張子(ファイルの種類を表すもの)が「.html」となっているファイルのことです。

場所はどこでもいいので、右クリックから「新規作成」→「テキストドキュメント」でテキストファイルを作り、ファイル名を変更すればOKです。

今回はファイル名を「study.html」としましょう。
作ったファイルをVSCにドラッグ&ドロップして読み込ませ、編集できるようにします。

上の方に先ほど作ったファイル「study.html」の名前がありますね。
これで「study.html」を編集できる状態になりました。

これで準備OKです！

それではさっそくコードを書いてみましょう！

プログラミング開始

雛形を作る

まずは雛形を作ります。

半角文字で”!”(Shift + 1)を入力し、Enterを押します。
すると、以下のように謎の文字が大量に出てきます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

これはHTMLという言語のコードで、HTMLやJavaScriptでコードを書く際に必ず必要になる雛形のようなものです。
今は深く理解しなくても大丈夫です。

今回注目すべき部分は9行目、11行目にある<body>と</body>です。
この間に書かれたコードが、Webブラウザ上で実際に表示されます。

この後も<body>と</body>の間にコードを書いていきます。

ボタンの配置

まずはボタンを配置してみましょう。
下記のように一行コードを追記してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
</body>
</html>

study.htmlを保存して、Webブラウザにドラッグ＆ドロップして読み込ませてみましょう。
するとページ上にボタンが出現します。

ボタンは押せますが、押しても何も起こりませんね。

なぜかというと、「ボタンが押されたときに何をするか」を指示していないからです。
指示するプログラムコードは後程書くので一旦置いときましょう。

ざっくりコード解説

「input」はWebページ上に部品を配置するときに使うものです。

部品はいろいろありますが、今回使いたいのはボタンです。
その場合「type=”button”」と書くことでボタンが配置できます。

「部品の種類(type)をボタン(button)にする」という意味ですね！

「value=”今日の日時は？”」の部分はボタン上に表示する文字を指定しています。

テキストボックスを配置

次に「テキストボックス」というものを配置します。
ボタンの時と同様にコードを追記してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
    <input type="text" id="result" readonly="readonly" style="width: 150px; height: 30px;">
</body>
</html>

テキストボックスとは、簡単に言うと文字を入力したり表示したりするための箱です。
今回は、現在日時を文字でテキストボックスに表示します。

ファイルを保存してWebブラウザをF5キーで更新してみましょう。
(一度ドラッグ＆ドロップでファイルを読み込ませたら、以降は更新するだけでOKです)

何の変哲もない四角が出てきますね。
今はただの四角でOKです。

ざっくりコード解説

ここでもinputを使っていますね。
ボタンの時は「type=”button”」と書きましたが、テキストボックスの場合は「type=”text”」と書きます。

ちなみに、「readonly=”readonly”」という部分がありますが、これを書くと「このテキストボックスは文字を表示することはできるけど入力はできないよ」という意味になります。

readonly(読み取り専用)なので見ることしかできないというわけですね。

以上でHTML部分のコードは完成です。
ここから先はJavaScriptのコードを書いていきます。

JavaScript用の部屋を作る

まずは下記のように追記をしてください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
    <input type="text" id="result" readonly="readonly" style="width: 150px; height: 30px;">

    <script type="text/javascript">

    </script>
</body>
</html>

なにやら「javascript」という文字が含まれていますね。

このコードを書くと、「<script type=”text/javascript”> から </script>の間に書いたコードはJavaScript言語ですよ！」という意味になります。

ものすごく簡単に言うと、HTMLで書いた部分とJavaScriptで書いた部分がごっちゃにならないように目印をつけてます。

いわばJavaScript用の部屋を作るイメージ。

今はJavaScriptでコードを書くときに必要なんだなぁ～くらいに覚えておけばOKです。

ではこの中にJavaScriptのコードを書いていきましょう！

ボタンを押した時に動く処理を実装

先述した通り、「ボタンを押した時に何をするか」のコードを書いていきます。
下記のように追記してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
    <input type="text" id="result" readonly="readonly" style="width: 150px; height: 30px;">

    <script type="text/javascript">
        document.getElementById("get-btn").addEventListener('click', function(e) {
            document.getElementById("result").value = "押されたよ！";
        })
    </script>
</body>
</html>

何やら小難しそうなのが登場しましたね笑

やってることは、ボタンが押されたらテキストボックスに「押されたよ！」という文字を表示するというものです。
一旦日時ではなく適当な文字を表示するようにしてます。

ではファイルを保存して更新してみましょう！
ボタンを押してみると

「押されたよ！」が表示されましたね。
これでボタンが押された時に動く部分ができました。

ざっくりコード解説

一言でいうと、「HTMLのinputをJavaScriptで操作している」です。

14行目のコードでボタンが押されたことを検知してくれます。
16行目に閉じ括弧「})」がありますね。
検知すると「})」までのコード(つまり15行目のコード)を実行するようになっているんです。

15行目は、テキストボックスに「押されたよ！」という文字データを設定する処理になります。

以上の流れで、テキストボックスに文字が表示されたというわけです。

ということは「押されたよ！」の文字の代わりに日時を設定すればいいということですね！

現在日時を取得

それでは現在日時を取得してみましょう。
下記のように追記＆修正してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
    <input type="text" id="result" readonly="readonly" style="width: 150px; height: 30px;">

    <script type="text/javascript">
        document.getElementById("get-btn").addEventListener('click', function(e) {
            let date = new Date();
            document.getElementById("result").value = date;
        })
    </script>
</body>
</html>

保存してWebブラウザを更新した後、ボタンを押してみてください。

「Tue Sep 21 2021 07:00:03 GMT+0900 (日本標準時)」
何やら見慣れない形で表示されましたね。

これは誤作動などではなく、ちゃんと日時を取得できているんです。
ただ、少し特殊な形になっているので、この日時データを見やすい形に改良してあげる必要があります。

ざっくりコード解説

15行目の「date」と「Date()」に注目しましょう。

dateは変数といって、数値や文字などのデータを入れる箱のようなものです。
Date()は日時を取得してくれる機能で、JavaScriptで予め用意されているものです。

ここでは「Date()でとってきた日時データをdateという箱に入れる」という処理をやっています。
その後に箱に入った日時データを、先ほどと同様にテキストボックスに設定しているんです。

日時データを改良

テキストボックスに設定する前に、取得した日時データを改良してみましょう。
下記のように追記＆修正してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <input type="button" id="get-btn" value="今日の日時は？" style="width: 120px; height: 40px;">
    <input type="text" id="result" readonly="readonly" style="width: 150px; height: 30px;">

    <script type="text/javascript">
        document.getElementById("get-btn").addEventListener('click', function(e) {
            let date = new Date();
            let result = "";

            result = date.getFullYear() + "/";
            result = result + (date.getMonth() + 1) + "/";
            result = result + date.getDate() + "　";
            result = result + date.getHours() + ":";
            result = result + date.getMinutes() + ":";
            result = result + date.getSeconds();

            document.getElementById("result").value = result;
        })
    </script>
</body>
</html>

更新してみましょう。

最初にお見せした画像と同じく、押した時の年月日時分秒が表示されれば成功です。

何度か押してみると秒単位で時間が進んでますね。
つまり、リアルタイムを表示してくれている証拠です。

お疲れ様でした！
これでめでたく時間取得プログラムの完成です！