JavaScript プログラミングを始めよう

Pyxofy -

JavaScript とは

JavaScript (ジャバスクリプト)は、プログラミング言語です。

Mozilla Developer Network (MDN)によると：

ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js や Apache CouchDB や Adobe Acrobat などでも使用されています。

私たちが普段見ているウェブページの多くで、JavaScript が使われています。Pyxofy では、ウェブブラウザーで動く JavaScript について紹介します。

JavaScript で何ができる？

ウェブページ内に、クリックできるボタンを見たことがありませんか？画像が切り替わるスライドショーなども、よく見られますよね。このようなウェブページの動きの部分に使われているのが、JavaScript です。

💡
JavaScript：ウェブページの表示に動きをつけることができる、プログラミング言語

「Change color」というボタンをクリックすると、背景の色が変わります。

See the Pen Change bg color with button javascript by JustAlbertCode (@JustAlbertCode) on CodePen.

画面の左右にある「〈 」「 〉」をクリックすると、画像が変わります。

See the Pen slider image javascript by Edhy Prasetyo Wibowo (@edhyprasetyowibowo) on CodePen.

私たちがインターネットで様々なものを見たり検索するときに利用しているのが、ウェブブラウザーです。単に「ブラウザ」とも呼ばれます。（以下ブラウザ）

💡
ウェブブラウザー：ウェブページを表示するためのソフトウェア（Google Chrome、Safari、Firefox など）

JavaScript を使うと、ブラウザ上で遊べるゲームなども作ることができます。ウェブアプリやゲーム作りを目標にして JavaScript を学んでいくのもオススメです。

See the Pen Rock Paper Scissors game #100daysofcode #day20 by Mehdi Aoussiad (@MehdiAoussiad) on CodePen.

See the Pen TIC TAC TOE – pure HTML, CSS & JS by matikka96 (@matikka96) on CodePen.

See the Pen JavaScript Calculator by Vikas Lalwani (@lalwanivikas) on CodePen.

HTML と CSS を知っておこう

JavaScript を学んでいくためには、ウェブページを構成しているHTML（エイチティーエムエル）とCSS（シーエスエス）の知識も必要です。ここでは簡単に HTML と CSS について解説します。

HTML とは

HTML は、ウェブページのコンテンツ（内容）を記述し定義するものです。「ここからここまでは、見出しですよ。」「ここからここまでは、リンクですよ。」など、ブラウザ上に表示するウェブページの内容にタグ（目印）をつけるために使われます。プログラミング言語ではなく、マークアップ言語と呼ばれるものです。

💡
HTML (HyperText Markup Language) ：ブラウザ上に表示するコンテンツ（中身・内容）を作成するための、マークアップ言語

タグは角カッコ < > で表します。一般的に「 <p> と </p>」のようにペアで使われ、HTML の要素として表されます。HTML は様々な要素が集まってできているのです。

<!DOCTYPE html>
<html>
  <head>
    <title>タブに表示されるタイトル</title>
  </head>
  <body>
    <h1>一番大きい見出しです</h1>
    <p>ここは段落になります。</p>
  </body>
</html>

HTMLのサンプルコード

要素の例をひとつ見てみましょう。<h1>（エイチワン）タグは、ウェブページ内での一番重要な見出しを意味します。

  • 要素：開始タグから終了タグまでの範囲
  • 開始タグ：要素の開始を表す
  • コンテンツ：ブラウザ上に表示される内容
  • 終了タグ：要素の終了を表す
HTML構文

<h1> 要素は、次のように一番大きな見出しとして表示されます。

ブラウザ上での表示
ほとんどの要素には開始タグと終了タグが存在しますが、例外もあります。例えば、文中で改行するための <br> 要素や、画像を埋め込むための <img> 要素など、一部の要素は終了タグがなく開始タグのみで記述されます。

CSS とは

HTML で表示されたウェブページの内容の、レイアウトや見た目の装飾などのスタイルを指定するのが CSS です。

💡
CSS (Cascading Style Sheets) ：Webページのレイアウトや装飾など見た目を整えるための、スタイルシート言語

CSS は、スタイルを設定したい HTML 要素を指定してから、波カッコ { } の中にスタイルを指定します。

h1 {
 color: red;
}

CSSのサンプルコード

例えば、一番大きな見出しを赤い文字で表示したい場合、CSS で次のように指定します。

  • セレクタ：スタイルを設定したい HTML 要素を指定する
  • プロパティ：どのようなスタイルを設定するのかを指定する
  • 値：設定するプロパティ値
CSS構文

スタイルを指定された <h1> 要素は、次のように赤色で表示されます。

ブラウザ上での表示

このように、ウェブページを作成するためには HTML と CSS が必要になります。JavaScript を学ぶ際は、HTML と CSS の基礎は抑えておきましょう。

HTML、CSS、JavaScript の関係

HTML や CSS は、一度ブラウザに読み込まれたら変化はしません。ブラウザ上に表示されたウェブページの内容に動きをつけるために、JavaScript を使って HTML や CSS を操作します。

HTML、CSS、JavaScript はどのように関係しているのでしょうか。「ボタンがクリックされたときにメッセージを表示する」サンプルで、確認してみましょう。

HTML で内容を書く

HTML でウェブページの内容を書きます。

<!DOCTYPE html>
<html>
  <head>
    <title>メッセージを表示するサンプル</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <button type="button">ボタン</button>
  </body>
</html>

HTMLコード

HTML をブラウザで表示します。ブラウザ上に表示されるのは、<body> タグで囲まれた範囲です。<button> タグを使っているので、ボタンが表示されました。

ブラウザ上での表示

CSS で装飾する

CSS で <button> 要素にスタイルを設定します。

button {
 padding: 10px 50px;
 background: #0D7DF5;
 color: white;
 font-size: 20px;
 border-radius: 50px;
}

CSSコード

ボタンが装飾されました。ここまででは見た目が変わっただけで、ボタンをクリックすることはできません。

ブラウザ上での表示

JavaScript で動きをつける

ボタンをクリックできるようにするために使うのが、JavaScript です。クリックされたときに、「こんにちは！」というメッセージを表示してみましょう。

document.querySelector('button').addEventListener('click', hello);

function hello() {
 alert ('こんにちは！');
}

JavaScriptコード

ボタンをクリックしたときに、ポップアップ画面でメッセージが表示されるようになりました。

ブラウザ上での表示

CodePen の Pyxofy ページ で、「ボタンがクリックされたときにメッセージを表示する」動きを、実際に試してみることができます。

See the Pen JavaScript alert box by Pyxofy (@pyxofy) on CodePen.

まとめ

ここまで、JavaScript について簡単に紹介しました。

JavaScript を使うと、ブラウザ上に表示されたコンテンツ（内容）に動きをつけたり、ユーザーの操作に応じてコンテンツを変更したりすることができるようになります。あなたも JavaScript を学んで、ウェブサイトやウェブアプリなどを作ってみませんか？

最後まで読んでいただき、ありがとうございます。記事に関するコメントはこちらにお寄せください。Twitter @pyxofy・LinkedIn・Mastodon・ Facebook

この記事をシェアしてくれると嬉しいです！

ツイート！

関連記事

JavaScript - プログラミングをする環境を整えよう
JavaScript を学んでいくために必要なツールを紹介します。インターネットに接続されたパソコンを用意して、プログラミングをするための環境を整えていきましょう。
PyxofyPyxofy
JavaScript - コードを書くときの基本的なルール【初心者向け】
JavaScript コードの基本的な書き方や、守らなければいけない記述ルールについて紹介します。プログラミング初心者の方は、こちらの記事を読んでから JavaScript でのコーディングを初めましょう。
PyxofyPyxofy
JavaScript - コードを書いてブラウザで動かすまでの手順
初心者の方向けに、JavaScript を記述して実行する手順をひとつずつ解説します。簡単なコードを書いて動かしてみることからプログラミングに挑戦してみましょう。
PyxofyPyxofy