JavaScript プログラミング — 入門

第6章 No.1 ／ 「Hello World」をブラウザで動かす

この章について

もとは Java プログラミング として書かれていた章を、現代では Web ブラウザでそのまま動く JavaScript に置き換えました。Java はインストールが必要な言語ですが、JavaScript は あなたのブラウザの中 ですぐに動かせます。

JavaScript の特徴

JavaScript は最初は Web ブラウザを動かすために作られた言語ですが、現在では Node.js を使えばサーバーサイドでも動きます。Java と同じく オブジェクト指向 を取り入れていますが、Java よりずっと「気軽に」始められます。

最初のプログラム — Hello World

以下のプログラムを書いて、F12 キー を押してブラウザの「コンソール」タブを開き、貼り付けて Enter を押してみよう。

console.log("Hello World!");

たったこれだけ。Java では：

// Java の Hello World — 比較のため
class Start {
  public static void main(String args[]) {
    System.out.println("Hello World!");
  }
}
// $ javac Start.java
// $ java Start
// Hello World!

JavaScript のほうが簡潔だとわかる。コンパイラもクラスの宣言も不要。

このページの中で実行してみよう

下の入力欄にコードを書いて「実行」を押すと、ブラウザがその場でコードを動かして結果を表示する。

Live JavaScript REPLLive
出力

        

      


      
変数・演算・制御構造


      
// 変数
let x = 10;             // 再代入できる変数
const PI = 3.14159;     // 定数

// 条件分岐
if (x > 5) {
  console.log("x は 5 より大きい");
} else {
  console.log("x は 5 以下");
}

// 繰り返し
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 関数
function add(a, b) { return a + b; }
const mul = (a, b) => a * b;  // アロー関数


      
HTML を JavaScript で動かす


      
HTML の要素をマウスでクリックすると、その情報を JavaScript で受け取って画面を変えることができる。


      
// ボタンクリックを監視
document.getElementById("my-btn").addEventListener("click", () => {
  document.getElementById("output").textContent = "クリックされた!";
});


      

        
Click CounterLive

        

          
0

          

            
            
            
          

        

      


      
次のステップ


      
第3章 (CG) や 第4章 (スレッド) で見たデモは、すべて JavaScript で書かれています。それぞれ samples.js で実装を読むことができます。