JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript変数

JavaScript変数を宣言する4つの方法:

  • 使用するvar
  • 使用するlet
  • 使用するconst
  • 何も使わない

変数とは何ですか?

変数は、データを格納する(データ値を格納する)ためのコンテナーです。

この例ではx、、、yおよびz、は変数であり、次のvarキーワードで宣言されています。

var x = 5;
var y = 6;
var z = x + y;

この例ではx、、、yおよびz、は変数であり、次のletキーワードで宣言されています。

let x = 5;
let y = 6;
let z = x + y;

この例でxは、、、、yおよびzは宣言されていない変数です。

x = 5;
y = 6;
z = x + y;

上記のすべての例から、次のように推測できます。

  • xは値5を格納します
  • yは値6を格納します
  • zは値11を格​​納します

JavaScript変数を使用する場合

JavaScript変数はvar、常に、、、letまたはで宣言してconstください。

このvarキーワードは、1995年から2015年までのすべてのJavaScriptコードで使用されています。

letおよびconstキーワードは、2015年にJavaScriptに追加されました

コードを古いブラウザで実行する場合は、を使用する必要がありますvar


JavaScript constをいつ使用するのですか?

一般的なルールが必要な場合:常に変数を。で宣言しますconst

変数の値が変わる可能性があると思われる場合は、を使用してletください。

この例ではprice1、、、price2およびtotal、は変数です。

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

2つの変数price1price2constキーワードで宣言されます。

これらは定数値であり、変更できません。

変数totalletキーワードで宣言されています。

これは変更可能な値です。


代数のように

代数と同じように、変数は値を保持します。

let x = 5;
let y = 6;

代数と同じように、変数は式で使用されます。

let z = x + y;

上記の例から、合計は11と計算されていると推測できます。

ノート

変数は、値を格納するためのコンテナーです。



JavaScript識別子

すべてのJavaScript変数は、一意の名前で識別する必要があり ます

これらの一意の名前は識別子と呼ばれます。

識別子は、短い名前(xやyなど)またはよりわかりやすい名前(age、sum、totalVolume)にすることができます。

変数(一意の識別子)の名前を作成するための一般的な規則は次のとおりです。

  • 名前には、文字、数字、アンダースコア、ドル記号を含めることができます。
  • 名前は文字で始まる必要があります
  • 名前は$と_で始めることもできます(ただし、このチュートリアルでは使用しません)
  • 名前では大文字と小文字が区別されます(yとYは異なる変数です)
  • 予約語(JavaScriptキーワードなど)を名前として使用することはできません

ノート

JavaScript識別子では大文字と小文字が区別されます。


代入演算子

JavaScriptでは、等号(=)は「代入」演算子であり、「等しい」演算子ではありません。

これは代数とは異なります。以下は代数では意味がありません。

x = x + 5

ただし、JavaScriptでは、これは完全に理にかなっています。つまり、x +5の値をxに割り当てます。

(x + 5の値を計算し、その結果をxに入れます。xの値は5ずつ増加します。)

ノート

「等しい」演算子は==JavaScriptのように書かれています。


JavaScriptデータ型

JavaScript変数は、100のような数値と、「JohnDoe」のようなテキスト値を保持できます。

プログラミングでは、テキスト値はテキスト文字列と呼ばれます。

JavaScriptは多くの種類のデータを処理できますが、今のところ、数字と文字列について考えてみてください。

文字列は二重引用符または一重引用符で囲まれています。数字は引用符なしで書かれています。

数字を引用符で囲むと、テキスト文字列として扱われます。

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

JavaScript変数の宣言

JavaScriptで変数を作成することを、変数の「宣言」と呼びます。

varまたはletキーワードを使用してJavaScript変数を宣言します。

var carName;
また:
let carName;

宣言後、変数には値がありません(技術的には値がありますundefined)。

変数に値を割り当てるには、等号を使用します。

carName = "Volvo";

変数を宣言するときに、変数に値を割り当てることもできます。

let carName = "Volvo";

以下の例では、という変数を作成し、carNameそれに値「Volvo」を割り当てます。

次に、id = "demo"を使用してHTML段落内の値を「出力」します。

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

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

ノート

スクリプトの最初にすべての変数を宣言することは、プログラミングの良い習慣です。


1つのステートメント、多くの変数

1つのステートメントで多くの変数を宣言できます。

ステートメントをで開始しvar、変数をコンマで区切ります。

let person = "John Doe", carName = "Volvo", price = 200;

宣言は複数行にまたがることができます。

let person = "John Doe",
carName = "Volvo",
price = 200;

値=未定義

コンピュータプログラムでは、変数は値なしで宣言されることがよくあります。値は、計算する必要のあるものでも、ユーザー入力のように後で提供されるものでもかまいません。

値なしで宣言された変数は、値を持ちます undefined

変数carNameは、undefined次のステートメントの実行後に値を持ちます。

let carName;

JavaScript変数の再宣言

で宣言されたJavaScript変数を再宣言してvarも、その値は失われません。

これらのステートメントの実行後も、変数carNameの値は「Volvo」のままです。

var carName = "Volvo";
var carName;

ノート

letまたはで宣言された変数を再宣言することはできませんconst

これは機能しません:

let carName = "Volvo";
let carName;

JavaScript算術

=代数と同様に、JavaScript変数を使用して、次のような演算子を使用して算術演算を実行できます+

let x = 5 + 2 + 3;

文字列を追加することもできますが、文字列は連結されます。

let x = "John" + " " + "Doe";

また、これを試してください:

let x = "5" + 2 + 3;

ノート

数値を引用符で囲むと、残りの数値は文字列として扱われ、連結されます。

今これを試してみてください:

let x = 2 + 3 + "5";

JavaScriptドル記号$

JavaScriptはドル記号を文字として扱うため、$を含む識別子は有効な変数名です。

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

ドル記号の使用はJavaScriptではあまり一般的ではありませんが、プロのプログラマーは、JavaScriptライブラリのメイン関数のエイリアスとしてドル記号を使用することがよくあります。

たとえば、JavaScriptライブラリjQueryでは、main関数 $を使用してHTML要素を選択します。jQuery$("p");では、「すべてのp要素を選択する」という意味です。


JavaScriptアンダースコア(_)

JavaScriptはアンダースコアを文字として扱うため、_を含む識別子は有効な変数名です。

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

JavaScriptではアンダースコアを使用することはあまり一般的ではありませんが、プロのプログラマーの間では、アンダースコアを「プライベート(非表示)」変数のエイリアスとして使用するのが一般的です。


エクササイズで自分をテストする

エクササイズ:

という変数を作成し、carNameそれに値を割り当てますVolvo

var  = "";