「HTMLの勉強を始めたいけどなかなか始められない」
「できれば独学でHTMLを学びたいけど、まずはどうすればいい？」
よし、では、今この瞬間から10分だけやってみましょう！
ということで第3回目です。
個人開発歴20年、大手のウェブ企業で部長を務め、学生時代には情報の教員免許も取得していた僕がわかりやすくお伝えします。
わかりにくいところがあればぜひコメント欄で教えてください！
HTMLはこれから学ぶのにコスパの良い言語です。
こちらの記事も確認してみてください。
前回のふりかえり
前回は「ページの装飾はCSSで行う」ということを確認しました。
CSSはHTMLタグの中に
<span style="color:red"></span>
のように記載すればいいので、
「やりたいことをググって装飾してみる」という方針を確認しました。
前回の最後のコードは下記の通りです。
やってみる
HTMLを分解
さて、前回の話の中でHTMLの中にCSSが潜んでいるという話が出てきましたが、実はもう1つ潜んでいる要素があります。
それはJavaScript（ジャバスクリプト）です。
CSSがHTMLの装飾を担当していたのに対して、JavaScriptはHTMLでの処理を担当します。
改めて前回最後に見たコードをよく見てみましょう。
まず、装飾する部分=CSSはこの青い部分です。
そして処理を行っているのはこの黄色い部分です。
この例では「kekka」というIDの場所に「moji」というIDが付いた文字列の長さを入れていました。
<script></script>は「スクリプトタグ」と呼ばれています。
このタグに囲まれた範囲に記載された文字は何らかの処理を行うためのコードなので閲覧者の画面には表示されません。
ということで、HTMLを勉強しながら実は「CSS」と「JavaScript」も同時に勉強していたというのが種明かしです。
今回はJavaScriptについてもう少し深く学んでいこうと思います。
ボタンを押すと数字が増えるカウンターを作る
ではJavaScriptを使ってボタンを押すと数字が増えていくカウンターを作ってみようと思います。
まずはHTMLタグを配置していこうと思いますがどんな部品が必要でしょうか？
- 数字を増やすためのボタン
- 数字を表示するための要素
これだけあれば作れそうです。
これらはここまでのコードを流用すればこんな感じで設置できます。
ポイント
<span id="counter">0</span>
<button onclick="count_up()">カウントアップ</button>
idに設定している「counter」や、ボタンを押したときのイベントに設定している「count_up()」は好きな名前で構いません。
わかりやすいようにcounterの初期の値は0にしておきました。
上記で実際にやってみようと思います。
やってみる
「プレビューへ反映」すると、「0」と「カウントアップ」というボタンが現れたと思います。
ボタンを押しても今の時点では何も起こりません。
なぜかというと、
ボタンを押したらcount_up()が実行されるように指定されているが、count_up()とはどんな処理かが定義されていない
ためです。
では、ここからが本題です。
実際に「count_up()」という処理の中身を書いていきましょう。
まずはやりたいことを整理すると、
- ボタンを押すと、count_up()が実行される
- count_upとは、IDが「count」と指定されいる数字を１増やして「count」に表示すること
ということになります。
1はすでにできているので、２を書いていきます。
まずは何はともあれ、処理を行うためのエリアを作る必要があるのでスクリプトタグ
<scrpit></script>
を書きます。
そして、スクリプトタグの中にcount_up()という処理を書いていきます。
<script>
function count_up(){
}
</script>
このfunctionというのは「関数」のことです。
数学で
f(x) = ax + b
のような関数の書き方があったのを覚えているでしょうか？
このfこそ、functionのfです。
話を戻すと、
スクリプトタグの中に記載しているコードは日本語で言うと
「count_up()」という名前の関数を定義します。
その内容は{}の中に記載します。
ということになります。
定義というのは「こういうものであると決めます」というような意味です。
そして関数という言葉があんまりピンとこない方は、
「関数とは、何かの処理の集まり」だと思っていただいて差し支えありません。
では実際に処理を書いていこうと思います。
IDが「count」と指定されいる数字を１増やして「count」に表示すること
という部分は、前回文字数をカウントしたコードと少し似ていますね。
前回は
document.getElementById("kekka").innerText = document.getElementById("moji").value.length;
という書き方をしていたのでそれと似た形になりそうです。
こんな感じではどうでしょうか？
document.getElementById("count").innerText = document.getElementById("count").innerText + 1;
IDが「count」という要素の数値を1つ増やして「count」に表示ということなのでこれで良さそうな気がします。
では実際にやってみましょう。
コードを確認して「プレビューへ反映」すると「カウントアップ」ボタンが表示されるはずです。
ボタンを押すとどうなりますか？
やってみる
実行するとこんな結果になったと思います。
これは意外な結果ですね（笑）
そうじゃないだろ！
と突っ込みたくなる結果です。
どうやら数値を1増やすのではなく、
「1」という文字を1つ増やす
と解釈されてしまったようです。
これはいわゆる「バグ」です。
ついにプログラマーの宿敵であるバグとの初対面を迎えました！
それでは、記念すべき初のバグを目の前にして
バグを潰していきましょう！！
まず、赤線の部分ですが、間違った形とはいえ「表示」は出てきたので書き方は間違ってなさそうです。
ポイント
document.getElementById("count").innerText = document.getElementById("count").innerText + 1;
となると、黄色の部分にバグがありそうだなと予想がつきます。
怪しい箇所は大きく分けて３箇所です。
- document.getElementById("count").innerText
- +
- 1
1に関しては「IDがcount」の要素を指定、くらいに思っていましたがよくみると長ったらしくでよくわかりませんね。
3つの中では1番怪しげです。
2に関しては「足し算をする記号は＋ではない何か別のものがあるかも」という可能性があります。
3に関してはただの数字なのでここが間違っていると考えるのは可能性が低そうですね。
ということで、最も怪しい「1」が誤っていると仮定して調べてみます。
そうです。ググります 笑。
「count」というのは自分で勝手に決めたIDだったので、
countの足し算がうまくいかない！
と言っても通じません。
そこで、自分で決めた要素は除外して
document.getElementById("").innerText 足し算 文字が増える
でググってみようと思います。
かなり具体的な検索ワードなので、これでわからなかったらだんだん抽象度を増やしていこうと思います。
すると検索結果にこんなものが出てきました。
こちらの検索結果によると
足し算しようとしているどちらかが文字列だと「+」の演算子は文字を連結してしまう
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1044549170
とのことです。
なるほど。ということは
document.getElementById("count").innerText
は数字ではなく文字列だから
文字列 + 数字
となって、文字列と数字が連結されてしまっていたということのようです。
本当でしょうか？
ちょっと確かめてみます。
コードをこんな風に変えてみましょう。
document.getElementById("count").innerText = 0 + 1;
元々のコードでは「document.getElementById("count").innerText」は数字の0のつもりで扱っていたのですが、
実はそれが文字列だったからうまくいかなかったのであれば、
「document.getElementById("count").innerText」を数字の0に置き換えた時にうまくいけば、確かにその可能性が高いことになります。
それでは実際にやってみましょう。
やってみる
プレビューへ反映して「カウントアップ」を押してみると、0が1に変わったはずです。
このあと何回「カウントアップ」を押しても数字は変わりません。
なぜならば、ずっと「0 + 1」を繰り返すだけだからです。
ということでどうやら「document.getElementById("count").innerText」は文字列として扱われているという仮説は正しそうです。
そもそもよくみると
document.getElementById("count").innerText
Textという記載があるので、文字列っぽいですね。
とするとこの部分を
document.getElementById("count").innerNumber
のようにすればいいかもしれません。ちょっとやってみましょう。
上記のように変更した上で「プレビューへ反映」して「カウントアップ」してみましょう。
やってみる
結果は
NaN
と表示されました。NaNが何なのかわからないのでググってみると
NaNとは、プログラミングにおいて、数値（実数）であることが期待される演算や処理の結果が数値として表せないものになったことを示す特殊な表現
とのこと。
さっきよりも何だか悪化した気がしますね。
予想して試してみたのはよかったので、正解を探してみましょう。
document.getElementById("").innerText 数値に変換
と調べるのもいいのですが、どちらかというと
文字列と数値を＋記号で足そうとしていた
ことが問題だったので、
javascript 文字列 数値に変換
で検索するのが良さそうです。
この辺りの検索方法はやっているうちに肌感が身についてくると思います。
上記で検索すると、こんな結果が出てきました。
どうやら
Number()
で文字列を囲むと、その文字列が数値を表す文字列の場合は数値に変換してくれるようです。
そこで先ほどのコードを直してみます。
document.getElementById("count").innerText = Number(document.getElementById("count").innerText) + 1;
これでやってみましょう。
やってみる
プレビューへ反映して「カウントアップ」を押してみると・・・
今度はうまくいきました！
まとめ
ということで今回はJavaScriptについて取り上げてみました。
CSSのとき同様それ自体のレクチャーよりも、
後で自分だけで学習を進めていけるような「取り組み方」をお伝えしましたがいかがだったでしょうか？
不明点などがあればコメント欄にお寄せください。
次回は「すぐに10分で」の最終回です！