JavaScript - コードラボJP

JavaScriptの構文とは、JavaScriptプログラムが構築されるルールのセットです：


// 変数の作成方法:
var x;
let y;

// 変数の使用方法:
x = 5;
y = 6;
let z = x + y;

JavaScriptの値

JavaScriptの構文では、2種類の値が定義されています：

固定値
変数値

固定値はリテラルと呼ばれます。

変数値は変数と呼ばれます。

JavaScriptのリテラル

固定値のための最も重要な構文ルールは次の通りです：

数値は小数点を含めても含めなくても書くことができます：
文字列はダブルクォートまたはシングルクォートで囲まれたテキストです：


10.50

1001

"John Doe"

'John Doe'

JavaScriptの変数

プログラミング言語では、変数はデータ値を格納するために使用されます。

JavaScriptでは、変数を宣言するためにキーワード var、let、const を使用します。

等号は変数に値を割り当てるために使用されます。


let x;
x = 6;

JavaScriptの演算子

JavaScriptは算術演算子（ + – * / ）を使用して値を計算します：


(5 + 6) * 10

JavaScriptは代入演算子（ = ）を使用して変数に値を割り当てます：


let x, y;
x = 5;
y = 6;

JavaScriptの式

式は値、変数、演算子の組み合わせで、値に計算されます。

計算自体は評価と呼ばれます。


5 * 10

x * 10

値は数値や文字列など、さまざまなタイプであることができます。


"John" + " " + "Doe"

JavaScriptのキーワード

JavaScriptのキーワードは実行するアクションを識別するために使用されます。

letキーワードはブラウザに変数を作成するよう指示します：


let x, y;
x = 5 + 6;
y = x * 10;

varキーワードもブラウザに変数を作成するよう指示します：


var x, y;
x = 5 + 6;
y = x * 10;

これらの例では、varまたはletを使用しても同じ結果が得られます。

varとletについてはこのチュートリアルの後で詳しく学びます。

JavaScriptのコメント

すべてのJavaScript文が「実行」されるわけではありません。

二重スラッシュ // または /* と */ の間にあるコードはコメントとして扱われます。

コメントは無視され、実行されません：


let x = 5;   // 実行されます

// x = 6;   実行されません

コメントについては後の章でさらに学びます。

JavaScriptの識別子 / 名前

識別子はJavaScriptの名前です。

識別子は変数、キーワード、および関数の名前を付けるために使用されます。

有効な名前のルールはほとんどのプログラミング言語で同じです。

JavaScriptの名前は次の文字で始まる必要があります：

文字（A-Zまたはa-z）
ドル記号（$）
アンダースコア（_）

後続の文字は文字、数字、アンダースコア、またはドル記号であることができます。

Note: 数字は名前の最初の文字として使用することはできません。

このようにしてJavaScriptは識別子を数値から簡単に区別することができます。

JavaScriptは大文字と小文字を区別します

すべてのJavaScriptの識別子は大文字と小文字を区別します。

lastNameとlastnameは2つの異なる変数です：


let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

JavaScriptはLETやLetをキーワードletとして解釈しません。

JavaScriptとキャメルケース

歴史的に、プログラマーは複数の単語を1つの変数名に結合するために異なる方法を使用してきました：

ハイフン：
アンダースコア：
アッパーキャメルケース（パスカルケース）：
ローワーキャメルケース：

JavaScriptのプログラマーは通常、小文字から始まるキャメルケースを使用します：


firstName, lastName, masterCard, interCity

JavaScriptの文字セット

JavaScriptはUnicode文字セットを使用しています。

Unicodeは世界中のほとんどの文字、句読点、および記号をカバーしています。

詳細については、完全なUnicodeリファレンスを参照してください。

例


let x, y, z;    // 文1
x = 5;          // 文2
y = 6;          // 文3
z = x + y;      // 文4

JavaScriptプログラム

コンピュータプログラムはコンピュータによって「実行」される「命令」のリストです。

プログラミング言語では、これらのプログラム命令を文と呼びます。

JavaScriptプログラムはプログラム文のリストです。

HTMLでは、JavaScriptプログラムはウェブブラウザによって実行されます。

JavaScript文

JavaScriptの文は次の要素で構成されています：

値、演算子、式、キーワード、コメント

この文は、ブラウザに対してid=”demo”のHTML要素に「Hello Dolly.」と書き込むよう指示します：


document.getElementById("demo").innerHTML = "Hello Dolly.";

ほとんどのJavaScriptプログラムには多くのJavaScript文が含まれています。

これらの文は書かれた順に1つずつ実行されます。

JavaScriptプログラム（およびJavaScript文）はしばしばJavaScriptコードと呼ばれます。

セミコロン ;

セミコロンはJavaScript文を区切ります。

実行可能な各文の最後にセミコロンを追加してください：


let a, b, c;  // 3つの変数を宣言
a = 5;        // aに値5を代入
b = 6;        // bに値6を代入
c = a + b;    // aとbの合計をcに代入

セミコロンで区切られた複数の文を1行にまとめることもできます：


a = 5; b = 6; c = a + b;

ウェブ上では、セミコロンを省略した例も見かけるかもしれません。

文の最後にセミコロンをつけるのは必須ではありませんが、強く推奨されます。

JavaScriptの空白

JavaScriptは複数のスペースを無視します。スクリプトをより読みやすくするために空白を追加することができます。

次の行は等価です：


let person = "Hege";
let person="Hege";

良い習慣としては、演算子（= + – * /）の周りにスペースを置くことです：


let x = y + z;

JavaScriptの行の長さと改行

最良の読みやすさのために、プログラマーは通常、80文字を超えるコード行を避ける傾向があります。

JavaScript文が1行に収まらない場合、最適な改行位置は演算子の後です：


document.getElementById("demo").innerHTML =
"Hello Dolly!";

JavaScriptのコードブロック

JavaScriptの文は中括弧 {…} 内のコードブロックにグループ化することができます。

コードブロックの目的は、一緒に実行する文を定義することです。

文が関数内でグループ化されるブロックの例として、以下があります：


function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

このチュートリアルでは、コードブロックにはインデントにスペース2つを使用します。

関数については後のチュートリアルで詳しく学びます。

JavaScriptのキーワード

JavaScriptの文は、通常、実行するJavaScriptアクションを識別するキーワードで始まります。

「予約語リファレンス」にはすべてのJavaScriptキーワードがリストされています。

このチュートリアルで学ぶいくつかのキーワードのリストを以下に示します：

キーワード	説明
var	変数を宣言する
let	ブロックスコープの変数を宣言する
const	ブロックスコープの定数を宣言する
if	条件に基づいて実行する文のブロックをマークする
switch	異なるケースで実行する文のブロックをマークする
for	ループで実行する文のブロックをマークする
function	関数を宣言する
return	関数から退出する
try	エラーハンドリングを実装する

JavaScriptのキーワードは予約語です。予約語は変数の名前として使用できません。

JavaScriptの表示方法

JavaScriptはさまざまな方法でデータを「表示」できます：

innerHTMLを使用してHTML要素に書き込む。
document.write()を使用してHTML出力に書き込む。
window.alert()を使用してアラートボックスに書き込む。
console.log()を使用してブラウザコンソールに書き込む。

innerHTMLの使用

HTML要素にアクセスするには、JavaScriptはdocument.getElementById(id)メソッドを使用できます。

id属性はHTML要素を定義し、innerHTMLプロパティはHTMLコンテンツを定義します：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

HTML要素のinnerHTMLプロパティを変更することは、HTMLでデータを表示する一般的な方法です。

document.write()の使用

テスト目的であれば、document.write()を使用するのが便利です：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

HTMLドキュメントの読み込み後にdocument.write()を使用すると、既存のHTMLがすべて削除されます：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<button type="button" onclick="document.write(5 + 6)">試してみる</button>

</body>
</html>

document.write()メソッドはテスト目的のみに使用すべきです。

`<script>`タグ

HTMLでは、JavaScriptコードは<script>タグと</script>タグの間に挿入されます。

以下の例では、idが”demo”のHTML要素を見つけて、その要素の内容（innerHTML）を”My First JavaScript”に変更します。


<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

古いJavaScriptの例では、type属性を使用することがあります：<script type="text/javascript">。

type属性は必須ではありません。JavaScriptはHTMLのデフォルトのスクリプト言語です。

JavaScriptの関数とイベント

JavaScriptの関数はJavaScriptコードのブロックであり、”呼び出される”と実行されることがあります。

たとえば、ユーザーがボタンをクリックしたときなどのイベントが発生したときに関数が呼び出されることがあります。

関数とイベントについては後の章で詳しく学びます。

`<head>`または`<body>`内のJavaScript

HTML文書には任意の数のスクリプトを配置できます。

スクリプトはHTMLページの<body>内、または<head>セクション内、あるいは両方に配置できます。

`<head>`内のJavaScript

この例では、JavaScript関数がHTMLページの<head>セクションに配置されています。

この関数はボタンがクリックされたときに呼び出されます：


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>ヘッド内のJavaScriptデモ</h2>

<p id="demo">段落</p>
<button type="button" onclick="myFunction()">試してみる</button>

</body>
</html>

`<body>`内のJavaScript

この例では、JavaScript関数がHTMLページの<body>セクションに配置されています。

この関数はボタンがクリックされたときに呼び出されます：


<!DOCTYPE html>
<html>
<body>

<h2>ボディ内のJavaScriptデモ</h2>

<p id="demo">段落</p>

<button type="button" onclick="myFunction()">試してみる</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

<body>要素の最下部にスクリプトを配置すると、表示速度が向上します。スクリプトの解釈が表示を遅くするためです。

外部JavaScript

スクリプトは外部ファイルにも配置できます：

外部ファイル：myScript.js


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

同じコードを多くの異なるWebページで使用する場合、外部スクリプトは実用的です。

JavaScriptファイルの拡張子は.jsです。

外部スクリプトを使用するには、<script>タグのsrc（ソース）属性にスクリプトファイルの名前を記述します。

外部JavaScriptの利点

スクリプトを外部ファイルに配置することにはいくつかの利点があります：

HTMLとコードを分離できること
HTMLとJavaScriptを読みやすく保つことができること
キャッシュされたJavaScriptファイルがページの読み込みを高速化できること

1つのページに複数のスクリプトファイルを追加するには、複数の<script>タグを使用します：


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

外部参照

外部スクリプトは3つの異なる方法で参照できます：

完全なURL（完全なWebアドレス）を使用して

ファイルパス（例：/js/）を使用して

パスを使用しない

この例では、myScript.jsへのリンクに完全なURLを使用しています：


<script src="https://www.w3schools.com/js/myScript.js"></script>

この例では、myScript.jsへのリンクにファイルパスを使用しています：


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

この例では、myScript.jsへのリンクにパスを使用していません：


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

JavaScriptでHTMLのコンテンツを変更する

JavaScriptの多くのHTMLメソッドの1つにgetElementById()があります。

以下の例では、idが”demo”のHTML要素を”見つけて”、その要素の内容（innerHTML）を”Hello JavaScript”に変更します。


document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScriptはダブルクォートとシングルクォートの両方を受け入れます：


document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScriptでHTMLスタイル（CSS）を変更する

HTML要素のスタイルを変更するには、HTML属性を変更する方法の一つです：


document.getElementById("demo").style.fontSize = "35px";

JavaScriptでHTML要素を非表示にする

HTML要素を非表示にするには、表示スタイルを変更します：


document.getElementById("demo").style.display = "none";

JavaScriptでHTML要素を表示する

非表示にされたHTML要素を表示するには、表示スタイルを変更します：


document.getElementById("demo").style.display = "block";

知っていますか？

JavaScriptとJavaはコンセプトとデザインの両面で完全に異なる言語です。

JavaScriptは1995年にBrendan Eichによって発明され、1997年にECMA標準になりました。

ECMA-262が公式な標準の名前です。ECMAScriptが言語の公式名です。

JavaScriptは世界で最も人気のあるプログラミング言語です。

JavaScriptはWebのプログラミング言語です。

JavaScriptは学びやすい言語です。

このチュートリアルでは、基本から上級までJavaScriptを学びます。

なぜJavaScriptを学ぶのか？

JavaScriptは全てのWeb開発者が学ぶ必要のある3つの言語のうちの1つです：

HTML：Webページのコンテンツを定義するための言語
CSS：Webページのレイアウトを指定するための言語
JavaScript：Webページの振る舞いをプログラムするための言語

よくある質問

JavaScriptはどうやって取得するのですか？

JavaScriptを取得したりダウンロードする必要はありません。

JavaScriptをどこでダウンロードできますか？

JavaScriptはすでにあなたのブラウザ、コンピュータ、タブレット、スマートフォンで実行されています。

JavaScriptは無料ですか？

JavaScriptは全ての人に無料で利用可能です。

JavaScriptの値

JavaScriptのリテラル

JavaScriptの変数

JavaScriptの演算子

JavaScriptの式

JavaScriptのキーワード

JavaScriptのコメント

JavaScriptの識別子 / 名前

JavaScriptは大文字と小文字を区別します

JavaScriptとキャメルケース

JavaScriptの文字セット

例

JavaScriptプログラム

JavaScript文

セミコロン ;

JavaScriptの空白

JavaScriptの行の長さと改行

JavaScriptのコードブロック

JavaScriptのキーワード

JavaScriptの表示方法

innerHTMLの使用

document.write()の使用

<script>タグ

JavaScriptの関数とイベント

<head>または<body>内のJavaScript

<head>内のJavaScript

<body>内のJavaScript

外部JavaScript

外部JavaScriptの利点

外部参照

JavaScriptでHTMLのコンテンツを変更する

JavaScriptでHTMLスタイル（CSS）を変更する

JavaScriptでHTML要素を非表示にする

JavaScriptでHTML要素を表示する

知っていますか？

なぜJavaScriptを学ぶのか？

よくある質問

`<script>`タグ

`<head>`または`<body>`内のJavaScript

`<head>`内のJavaScript

`<body>`内のJavaScript