【超初心者向け】JavaScriptはHTMLを動かす仕掛け！

ひなドリ

JavaScriptって何？

わかドリ

JavaScriptは言語のひとつで、HTMLを動かしたり、画面に現れない処理をするときに使うものだよ。

この記事でわかること

JavaScriptとは
JavaScriptの基本構造

前回のゼロわかはこちら▼

Contents

JavaScriptはHTMLを動かす仕掛け
JavaScriptの基本構造
JavaScriptの書き方
JavaScriptは難しい？
HTMLの要素を変更するJavaScriptのサンプル
このページではこれだけ覚える！
- JavaScriptはHTML、CSSとは書き方が違う
今回のゼロわか

JavaScriptはHTMLを動かす仕掛け

JavaScriptは、主にHTMLの要素を変更したり、何かをきっかけとしてプログラミング的な処理をするときに使用するものです。

例えば、ボタンをクリックしたときに項目に入っている数値を足し算する時や、同じくボタンをクリックしたときに文字の色を変えるなどの処理をすることが出来ます。

それをするためにはJavaScriptだけではなく、HTML、CSSの知識も必要なため、JavaScriptはこの中では最も難しいと言えるでしょう。

ただし、JavaScriptがあることでサーバサイドの処理もできるなどWebシステム開発にとって欠かすことのできない言語のひとつです。

そのため、これを覚えることが出来ればエンジニアとして大きく成長できる言語とも言えるでしょう。

HTML、CSS、JavaScriptの役割についてわからなければ、こちらも見てみましょう。

【超初心者向け】HTMLとCSSとJavaScriptの違いと役割をゼロから解説

JavaScriptの基本構造

JavaScriptはHTML、CSSとは基本構造がガラリと変わり、いわゆるプログラミング的な考え方が必要になってきます。

例えば「変数」や「関数」などがそれにあたります。

HTMLの<script>タグ内にJavaScriptのコードを書くことで、HTMLファイル内に埋め込むことができます。

また、JavaScriptのコードは、外部ファイルとして分離することもできます。外部ファイルにJavaScriptのコードを書いて、HTMLファイルで読み込むことができます。

外部ファイルを読み込む時は以下のように書きます。

<script src="script.js"></script>

こちらは簡単なサンプルとしてHTML内に書いたものです。

<script>
  let x = 10; // 変数の宣言と初期化
  console.log(x); // コンソールに出力する
  if (x > 5) { // 条件分岐
    console.log('xは5より大きい');
  } else {
    console.log('xは5以下');
  }
</script>

ひなドリ

なんか、プログラムっぽくて難しいかも…

わかドリ

そうだよね。そもそも、何がなんだかわからないよね。そこを説明していくよ。

JavaScriptを理解するためには最低限「変数」や「if文」という考え方が必要になってきます。では、そちらを説明していきましょう。

JavaScriptの書き方

先ほどのサンプルを使用して、説明してきます。

<script>
  let x = 10; // 変数の宣言と初期化
  console.log(x); // コンソールに出力する
  if (x > 5) { // 条件分岐
    console.log('xは5より大きい');
  } else {
    console.log('xは5以下');
  }
</script>

このサンプルを日本語に直すと「変数に入っている値が5より大きければコンソールに”xは5より大きい”という文字が出力されて、5以下であれば”xは5以下”という文字が出力される」というプログラムとなります。

このサンプルは、分解すると大きく3つの要素で構成されています。

それは「変数」、「if文」、「画面出力（コンソール）」です。

let x = 10;　　　　　　←　これが変数
if (x > 5) {} else {}　 ←　これがif文
console.log(x);　　　　←　これが画面出力（コンソール）

ひなドリ

変数…？

わかドリ

プログラム内で使う入れ物って言えばいいかな

変数は文字や数字を入れられる入れ物と思ってください。

例えば、y = “わかドリ”;という風に書けばyという名前の変数（入れ物）「わかドリ」という文字を入れることが出来ます。letは入れ物を使うよって宣言する時に必要なものと思ってください。

次にif文です。if文はその名の通り、”もし○○だったら”という命令文です。

今回の場合は( x > 5 )ですので、xという変数の中に入っている数値が5より大きいか、ということを見ています。

5より大きければ、if (x > 5) { A処理 } else { B処理 }と書かれているうちA処理が実行され、そうでなければB処理が実行されます。

console.log(x)については、JavaScript特有の書き方で、ブラウザのコンソールというところに変数xの中身を出力するものです。

ひなドリ

難しい…

わかドリ

うん、改めて文字にしてみると難しいね

JavaScriptは難しい？

JavaScriptはHTML,CSSと比較して難しいと言えるでしょう。

その理由をわかドリはこう考えます。

プログラムらしい「変数」や「関数」という考え方が必要
HTMLと組み合わせることが多く、HTMLの知識があることが前提
イベント処理など、独自の仕組みも覚えることが多い

他にもいろんな理由がありますが、ざっくりいえば「覚えることが多い」ということがJavaScriptが難しいと言える理由となります。

ただ、それを補ってあまりあるメリットがあるため、ぜひとも覚えてほしい言語のひとつです。

HTMLの要素を変更するJavaScriptのサンプル

最後に、HTMLの要素を変更するJavaScriptのサンプルを書いておきます。

<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <script>
       function changeColor() {
           document.getElementById("sample").style.backgroundColor = "red";
       }
    </script>
  </head>
  <body>
    <button onclick="changeColor()">色を変える</button>
    <div id="sample" style="width: 200px; height: 200px; background-color: none;"></div>
    <script src="script.js"></script>
  </body>
</html>