メインコンテンツまでスキップ

JavaScript

JavaScript とは​

HTML や CSS を使って様々なコンテンツを表現することができました。しかし、動きを持った表現をすることはできませんでした。 プログラミング言語である JavaScript を用いることで、Web サイトで動きのある表現をすることができるようになります。

はじめての JavaScript​

実際に JavaScript を使ってみましょう。以下が JavaScript の Hello World! です。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./script.js"></script>
  </body>
</html>
script.js
document.write("Hello World!");

上のようなコードを index.html というファイルと script.js というファイルに貼り付けてください。2 つのファイルは、フォルダの同じ階層に入れてください。もしくは、このサイトの JavaScript のプレイグラウンドから編集することもできます。

ライブエディター
Loading...
結果
http://localhost:3000

index.html で変わったところは、<script src="./script.js"></script> というところだけです。これは、同じ階層にある script.js というファイルを読み込むという命令です。

次に、script.js ファイルを見ておきましょう。次のようなコードが書いてありますね。

script.js
document.write("Hello World!");

これは、画面上に Hello World! と表示するという命令です。

では、JavaScript の基本文法を簡単に見ていきましょう。プログラミング言語は、どれも基本的な考え方は同じなので Python を勉強していれば、すぐに理解できます。

JavaScript の基本文法​

では、JavaScript の基本文法を見ていきましょう。

JavaScript はなかなか奥が深くここで説明しきれないので、紹介するのは概要だけにします。 Web の技術について詳しいことは、こちらにまとまっています。

document.write​

document.write("hoge"); とすることで、画面上に任意の文字を表示することができます。一つ注意点としては、これはすでに書かれている HTML タグなどをすべて消してしまいます。そのため、この命令は実際にはあまり使われません。

script.js
document.write("Hello World!");
ライブエディター
Loading...
結果
http://localhost:3000

コメント​

コメントは、次のようにします。

script.js
// コメントを書けます。
ライブエディター
Loading...
結果
http://localhost:3000

演算​

様々な計算をすることができます。

script.js
document.write((1 + 1) * 2);
ライブエディター
Loading...
結果
http://localhost:3000

変数​

変数も使えます。

script.js
let a = 1;
document.write(a);
ライブエディター
Loading...
結果
http://localhost:3000

条件分岐​

条件分岐もできます。

script.js
let age = 19;
if (age >= 20) {
  document.write("飲酒可能です。");
} else {
  document.write("お酒は二十歳になってから！");
}
ライブエディター
Loading...
結果
http://localhost:3000

繰り返し​

繰り返し処理もできます。

script.js
let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
document.write(sum);
ライブエディター
Loading...
結果
http://localhost:3000

関数​

関数も使えます。

script.js
function factorial(n) {
  product = 1;
  for (let i = 1; i <= n; i++) {
    product *= i;
  }
  return product;
}
document.write(factorial(6));
ライブエディター
Loading...
結果
http://localhost:3000

DOM​

JavaScript には HTML を制御する仕組みがあります。

document.getElementById("hoge") のようにして、hoge という id を持つ要素のオブジェクトを取得することができます。これを使うと次のようなことができます。

index.html
<div id="greeting"></div>
script.js
const greeting = document.getElementById("greeting");
greeting.textContent = "Hello Dom";
ライブエディター
Loading...
結果
http://localhost:3000

JavaScript を使った例​

JavaScript を使うと次のようなカウンタを作ることも簡単にできます。

ライブエディター
Loading...
結果
http://localhost:3000

ここでは、JavaScript の機能のほんの一部しか紹介していません。 JavaScript についてさらに詳しいことは、こちらで学んでください。