一番優しいプログラミング入門
はじめに
みなさん、こんにちは！
この記事は、プログラミング学習を始めるため、簡単で優しい教材を探している方向けの記事です。
「プログラミングとは？」などの説明は省略して、とにかくまずは動くプログラムを書いてみようという内容です。
分からない箇所があればコピペで進めてもらっても大丈夫なので、ぜひ最後まで進めてみてください。
それでは早速始めましょう！
何を作るの？
この記事で作るプログラムについて紹介です。
以下のような時計を作ります。
プログラムを動かした時に、「◯時◯分◯秒」というように現在の時刻が表示されています。
動くサンプル
https://sanjimonica.github.io/clock_introduction/
実際に作ってみよう
それでは、実際にプログラムを作っていきましょう！
1.準備
プログラムを書く前に、まずはプログラムを書くためのファイルを作成しましょう。
新しいフォルダと、その中に1つファイルを作成します。
clockフォルダの作成
まず、プログラムファイルを保存するフォルダを作成します。
どこに作成しても大丈夫なのですが、見つけやすいようにデスクトップに作ってみましょう。
デスクトップにclockという名前のフォルダを作ってください。
clockフォルダを作成
プログラムファイルの作成
次は、プログラムを書くためのファイルを作りましょう。
まずは、「メモ帳」などのテキストエディタ（文章を書けるソフト）を開いてください。
そして、clockフォルダの中に、index.htmlという名前でファイルを作成してください。
ファイルの中身は、今のところはなんでも構いません。
何も書かなくても、何か書いていても大丈夫です。
この後で、このファイルにプログラムをどんどん書いていきます。
index.htmlを作成する
2. 文字を表示させる
ここからは、いよいよプログラムを書いていきます！
まずは、「こんにちは！」という文字を表示させるプログラムを書いてみましょう。
index.htmlをメモ帳で開いて、次のような3行を書いてみてください。
<script>
alert("こんにちは！");
</script>
プログラムが書けたら、上書き保存するのを忘れないようにしてください。
保存ができたら、以下の方法で実行してみましょう。
プログラムファイルの実行
このプログラムを実行するには、index.htmlをダブルクリックしてください。
index.htmlをダブルクリックする
すると、Webブラウザ（Microsoft Edge や Chrome）などが開いて、「こんにちは！」という文字が表示されます。
「こんにちは！」と表示される
上の画像のように表示されていれば成功です！おめでとうございます！
動くサンプル
https://sanjimonica.github.io/clock_introduction/step2/
もしindex.htmlをダブルクリックしても上の画像のようにならないときは、下記の方法を試してみてください。
index.html をダブルクリックしても開けない場合
Microsoft Edge や Chrome のアイコンの上に、index.htmlをドラッグ＆ドロップしてみてください。
これで「こんにちは！」と表示されたでしょうか？
これでも上手くいかなければ、別の何かが原因かもしれません。
難しければ、パソコンに詳しい人に聞いてみてください。
それでは、先ほど書いたプログラムについて解説です。
1, 3行目（<script>と</script>）
よく似た2つの行ですが、よく見ると3行目の方は/（スラッシュ）が入っています。
これらは2つセットで使われて、「この間にプログラムを書いてきますよ」ということを表しています。
なので、その間の行、つまり2行目がプログラムの部分ということになります。
それでは、2行目には一体何が書いてあるのでしょうか？
2行目（alert("こんにちは！");）
この行では、「『こんにちは！』という文字を、アラートで表示してください」という処理をしています。
アラートというのは、画面上に表示される小さな四角い枠のことです。
index.htmlをダブルクリックしたときに、「こんにちは！」と書かれた四角が表示されましたね。
まさにその表示を、この1行で行っています。
「こんにちは！」と書かれたアラートが表示されている
さて、まずは一つプログラムを書いてみましたが、いかがでしょうか？
難しいと感じても大丈夫です。プログラムを書いていくうちに自然と理解できることも多いので、どんどんこの記事を読み進めてプログラムを書いてみてもらえればと思います。
3. 文字を変更する
今度は、違う文字を表示させてみましょう。
先ほど「こんにちは！」と書いた部分を、以下のように「おはようございます！」に変更してください。
<script>
alert("おはようございます！");
</script>
上書き保存をしたら、ブラウザの画面を更新してみましょう。
更新するには、各ブラウザの「更新ボタン」を押してみてください。
Edge や Chrome の場合、それぞれ以下のマークが更新ボタンです。
Edge の更新ボタン
Chrome の更新ボタン
もし、更新ボタンではなく「×」ボタンが表示されているときは、その「×」ボタンを押してみてください。更新ボタンに変わります。
ブラウザの画面が更新できると、以下のような表示になるはずです。
「おはようございます！」と表示されている
これでプログラムを書き換えることができました！
動くサンプル
https://sanjimonica.github.io/clock_introduction/step3/
4. ◯時の部分を表示させる
ここからは、いよいよ時計部分の実装に入っていきます。
最終的には「◯時◯分◯秒」という表示ができるようにしますが、まずは「◯時」の部分だけを作ってみましょう。
index.htmlを、以下のように書き換えてみてください。
<script>
now = new Date();
hour = now.getHours();
alert(hour);
</script>
上書き保存したら、ブラウザの更新ボタンを押してみましょう。
以下のように、数字が表示されるはずです。
「◯時」の数字部分が表示される
この画像を撮影したときは午後3時、つまり15時だったため、「15」という数字が表示されています。
みなさんも、今の「◯時」の数字が表示されているでしょうか？？
もし今の時刻と違う数字が表示されている場合は、パソコンの日時設定が間違っていないか確認してみてください。
動くサンプル
https://sanjimonica.github.io/clock_introduction/step4/
それでは、今回書き換えたプログラムについて、何をしているかを見てみましょう。
2行目（now = new Date();）
まずは右側の部分を見てみましょう。new Date()と書かれていますね。
こう書くことで、今の日時の情報を取得することができます。
次に、左側の部分を見てみましょう。now = と書かれていますね。
これは「=の右側の結果を、左側の変数に代入する」という処理を行っています。
「変数」？「代入」？初めて聞く単語かもしれません。
順番に解説していきますね。
変数（情報を保存するための箱）
変数は、現実の世界でいう "箱" のような役割をしています。
箱といえば、何かを入れて保存しておいたり、後で使うときには箱の中から取り出したりしますよね。
プログラムの世界でも同じような感じで、この箱の中には様々な情報を入れておくことができます。
今回は、「現在の日時情報」をこの箱に入れました。
また、この箱には名前をつけることができます。
むしろ名前をつけておかないと、箱をたくさん作ったときに、情報を入れていたのはどの箱なのか区別できなくなってしまいます。
ここでは、=の左側に書いてあるnowが、箱の名前になっています。
代入（箱に情報を入れること）
変数の説明でも触れましたが、箱（変数）には情報を入れることができます。
この「箱に入れる」という処理のことを代入といいます。
代入は=という記号で行います。
代入をすると、「左にある変数」に「右にある情報」を入れることができます。
なので、ここではnowという箱に、new Date()の結果（つまり現在の日時情報）を入れています。
まとめると、2行目では「nowという変数に、現在の日時情報を保存する」ということをやっています。
どうでしょう。理解できたでしょうか？
難しければ、変数や代入については今は覚えなくても大丈夫です。
「nowってやつに日時を入れたんだな！」くらいでOKです！
3行目（hour = now.getHours();）
=の左にhourと書かれています。
ということは、何かの情報をhourという変数に入れているんですね。
では、何を入れているのでしょうか。
右側を見ると、now.getHours()と書かれています。
nowは2行目で出てきたとおり、現在の日時情報を保存しているのでした。
ここでは、そのnowから「◯時」に当たる情報を取得しています。
これも最初から用意されている機能なのですが、getHours()を使うと「◯時」の情報を取得することができるのです。
※()の部分も付けるのを忘れないでください。このようにして使用するものを関数といいます。
例えば、2022年1月1日15時23分59秒にこのプログラムを実行すると、now.getHours()では「15」という数字が取得できます。
これをhourに代入しているので、この行全体としては、「hourに 15 を代入する」という処理を行っています。
4行目（alert(hour);）
alertは先ほども出てきました。四角い枠の上にメッセージを表示するんでしたね。
表示するものはhourです。
ただし、hourというのは箱の名前なので、アラートに「hour」という文字が表示されるわけではありません。
箱の中に入っているものが表示されます。
ここでは現在の「◯時」の数字が入っているので、その数字がアラートに表示されます。
箱に入っている「15」がアラートに表示される
さて、プログラムを実行した時刻によって、表示される数字が変わるようになりました。
少しプログラムらしくなってきましたね！
ただし、今は数字が表示されるだけで、時計だということがいまいち分かりません。
次は「15時」というように、"時" の文字も表示されるようにしてみましょう。
先ほどのプログラムを、以下のように書き換えてみてください。
4行目のalertの中身が変わっています。
<script>
now = new Date();
hour = now.getHours();
alert(hour + "時");
</script>
上書き保存したら、index.htmlを実行してみましょう。
以下のように、「◯時」という表示になったでしょうか？
「◯時」という形式で表示される
動くサンプル
https://sanjimonica.github.io/clock_introduction/step4_2/
4行目（alert(hour + "時");）
+ "時"という部分が新たに追加されました。
なので、アラートに表示するのは「hour + "時"」というものになりました。
+という記号が初めて出てきましたね。
算数や数学では2つの数字を足し算するときに使う、おなじみの記号です。
プログラムの場合もそのように使うことがありますが、この場合は少し違います。
ここでは、表示される2つの文字列をくっつけています。このように、2つ以上のものをくっつけることを連結といいます。
連結すると「15時」という文字列になる
そして、その「15時」という文字列を、アラートに表示しています。
連結した「15時」という文字列がアラートに表示される
5. ◯時◯分◯秒の部分を表示させる
さて、あとは「◯時」と同じように「◯分◯秒」の部分も表示させるようにしましょう。
index.htmlを、以下のように書き換えてみてください。
ちょっと長いですが、頑張りましょう！
<script>
now = new Date();
hour = now.getHours();
minute = now.getMinutes();
second = now.getSeconds();
alert(hour + "時" + minute + "分" + second + "秒");
</script>
上書き保存したら、ブラウザの更新ボタンを押してみましょう。
以下のように、「◯時◯分◯秒」と表示されるでしょうか？
「◯時◯分◯秒」という形式で表示される
上手く表示できたなら、時計の完成です！おめでとうございます！
動くサンプル
https://sanjimonica.github.io/clock_introduction/step5/
それでは、解説を見ていきましょう。
2, 3行目（now = ～、hour = ～）
この2つの行は、先ほどから変更がありません。
nowには現在日時の情報が、hourには現在の「◯時」の数字が入っているんでしたね。
4, 5行目（minute = ～、second = ～）
これらは新しく追加された行ですが、よく見ると3行目（hour = ～）とそっくりです。
実際、やっていることも3行目とよく似ています。
4行目（minute = ～）では「◯分」の数字を取得してminuteという変数に代入しています。
同じように、5行目（second = ～）では「◯秒」の数字を取得してsecondという変数に代入しています。
以下の画像のような感じです。
「◯時」「◯分」「◯秒」の数字がそれぞれの箱に保存される
6行目（alert(hour + "時" + minute + "分" + second + "秒");）
3～5行目で、「◯時」「◯分」「◯秒」の数字部分が取得できました。
6行目では、これらを連結してアラートで表示しています。
アラートで表示するのは、hour + "時" + minute + "分" + second + "秒"という内容になっています。
少し長いですが、よく見てみると今まで取得した3つの数字に、文字をくっつけて表示している事が分かります。
3つ以上の連結も、それぞれの間に+を入れれば、ちゃんとくっついて表示されます。
「◯時◯分◯秒」の連結
プログラム完成！
これで、時・分・秒を表示する時計ができました！
何度かプログラムを実行し直してみると、ちゃんと今の時刻が表示されているはずです。
お疲れさまでした！
最後に
さて、実際にプログラムを作ってみましたが、いかがでしたでしょうか？
この記事をきっかけに、学習をどんどん進めてもらえれば嬉しいです。
断り書き（プログラムに詳しい人向け）
この記事は、「プログラム初心者が、勉強のために最低限動作するプログラムを作成する体験をする」ことを目的としています。
そのため、本記事で使用したプログラムソースは、教材用の内容となっています。実運用には適さない部分もあることをご了承ください。
Discussion