ほとんどの場合、JavaScript アプリケーションは情報を操作する必要があります。以下に 2 つの例を示します。
オンライン ショップ – 情報には、販売されている商品やショッピング カートが含まれる場合があります。
チャット アプリケーション – 情報にはユーザー、メッセージなどが含まれる場合があります。
この情報を保存するには変数が使用されます。
変数はデータの「名前付きストレージ」です。変数を使用して、グッズ、訪問者、その他のデータを保存できます。
JavaScript で変数を作成するには、 letキーワードを使用します。
以下のステートメントは、「message」という名前の変数を作成 (つまり、宣言) します。
メッセージを送りましょう。
ここで、代入演算子=を使用して、それにデータを入れることができます。
メッセージを送りましょう。 メッセージ = 'こんにちは'; // 文字列「Hello」を message という名前の変数に格納します
これで、文字列が変数に関連付けられたメモリ領域に保存されました。変数名を使用してアクセスできます。
メッセージを送りましょう。 メッセージ = 'こんにちは!'; アラート(メッセージ); // 変数の内容を表示します
簡潔にするために、変数の宣言と代入を 1 行にまとめることができます。
let message = 'こんにちは!'; // 変数を定義して値を代入する アラート(メッセージ); // こんにちは！
複数の変数を 1 行で宣言することもできます。
ユーザー = 'ジョン'、年齢 = 25、メッセージ = 'こんにちは' とします。
短いように思えるかもしれませんが、お勧めしません。読みやすくするために、変数ごとに 1 行を使用してください。
複数行のバリアントは少し長くなりますが、読みやすくなっています。
ユーザー = 'ジョン' にします。 年齢 = 25 としましょう。 let message = 'こんにちは';
この複数行スタイルで複数の変数を定義する人もいます。
ユーザー = 'ジョン' とします。 年齢 = 25、 メッセージ = 'こんにちは';
…または、「カンマ先頭」スタイルでも次のようになります。
ユーザー = 'ジョン' にします 、年齢 = 25 、メッセージ = 'こんにちは';
技術的には、これらの亜種はすべて同じことを行います。したがって、それは個人の好みと美学の問題です。
letの代わりにvar
古いスクリプトでは、 let代わりに別のキーワードvar見つかる場合もあります。
var message = 'こんにちは';
varキーワードはletとほぼ同じです。また、変数も宣言しますが、その方法は少し異なり、「昔ながらの」方法です。
letとvarの間には微妙な違いがありますが、私たちにとってはまだ重要ではありません。これらについては、「古い「var」」の章で詳しく説明します。
「変数」の概念は、ユニークな名前のシールが貼られたデータの「箱」と考えると容易に理解できます。
たとえば、変数message 、値"Hello!"を持つ"message"ラベルが付いているボックスとして想像できます。その中で:
ボックスには任意の値を入れることができます。
必要に応じて何度でも変更することもできます。
メッセージを送りましょう。 メッセージ = 'こんにちは!'; メッセージ = '世界!'; // 値が変更されました アラート(メッセージ);
値が変更されると、古いデータが変数から削除されます。
2 つの変数を宣言して、一方の変数からもう一方の変数にデータをコピーすることもできます。
let hello = 'Hello world!'; メッセージを送りましょう。 // hello から「Hello world」をメッセージにコピーします メッセージ = こんにちは。 // 2 つの変数が同じデータを保持するようになりました アラート(こんにちは); // こんにちは世界！ アラート(メッセージ); // こんにちは世界！
2 回宣言するとエラーが発生する
変数は 1 回だけ宣言する必要があります。
同じ変数を繰り返し宣言するとエラーになります。
let message = "これ"; // 'let' を繰り返すとエラーが発生します let message = "それ"; // SyntaxError: 'message' はすでに宣言されています
したがって、変数を一度宣言してから、 let使用せずにそれを参照する必要があります。
関数型言語
Haskell など、変数値の変更を禁止するいわゆる純粋関数型プログラミング言語が存在することに注目するのは興味深いことです。
このような言語では、値が「ボックスに」保存されると、永久にそこに残ります。他に何かを保存する必要がある場合、言語は新しいボックスを作成する (新しい変数を宣言する) ことを強制します。古いものを再利用することはできません。
一見すると少し奇妙に思えるかもしれませんが、これらの言語は本格的な開発が可能です。それ以上に、並列計算など、この制限によって一定の利点が得られる領域があります。
JavaScript の変数名には 2 つの制限があります。
名前には文字、数字、または記号$と_のみを含める必要があります。
最初の文字は数字であってはなりません。
有効な名前の例:
ユーザー名を許可します。 test123 にしましょう。
名前に複数の単語が含まれる場合は、キャメルケースが一般的に使用されます。つまり、最初に大文字で始まるmyVeryLongNameを除いて、単語が次々に続きます。
興味深いことに、ドル記号'$'とアンダースコア'_'も名前に使用できます。これらは文字と同じように通常の記号であり、特別な意味はありません。
これらの名前は有効です。
$ = 1 とします。 // "$" という名前の変数を宣言します _ = 2 とします。 // これで、「_」という名前の変数が作成されました アラート($ + _); // 3
間違った変数名の例:
1aとしましょう。 // 数字で始めることはできません 私の名前を教えてください。 // 名前にハイフン「-」は使用できません
事件に関する事項
appleとAPPLEという名前の変数は、2 つの異なる変数です。
非ラテン文字も使用できますが、推奨されません
次のように、キリル文字、中国語の表語文字などを含む任意の言語を使用できます。
let имя = '...'; 我 = '...' とします。
技術的には、ここにエラーはありません。このような名前は許可されていますが、変数名には英語を使用するという国際規約があります。たとえ小さな脚本を書いているとしても、それは長い人生を歩むことになるかもしれません。他の国の人もいつか読む必要があるかもしれません。
予約された名前
予約語のリストがありますが、言語自体で使用されるため、変数名として使用することはできません。
例: let 、 class 、 return 、およびfunction予約されています。
以下のコードでは構文エラーが発生します。
レット = 5; // 変数に "let" という名前を付けることはできません。エラーです。 リターン = 5 にします。 // また、「return」という名前を付けることもできません。エラーです。
use strictない代入
通常、変数を使用する前に定義する必要があります。しかし、昔はlet使わずに単に値を代入するだけで変数を作成することが技術的に可能でした。古いスクリプトとの互換性を維持するためにスクリプトにuse strict入れなければ、これは今でも機能します。
// 注: この例では「use strict」はありません 数値 = 5; // 変数「num」が存在しない場合は作成されます アラート(番号); // 5
これは悪い習慣であり、厳密モードではエラーが発生します。
"厳密な使用"; 数値 = 5; // エラー: num が定義されていません
定数 (不変) 変数を宣言するには、 letの代わりにconstを使用します。
const myBirthday = '18.04.1982';
const使って宣言された変数を「定数」と呼びます。再割り当てすることはできません。そうしようとすると、エラーが発生します。
const myBirthday = '18.04.1982'; myBirthday = '2001.01.01'; // エラー。定数を再割り当てできません。
プログラマは、変数が決して変更されないと確信している場合、その変数をconstで宣言して、その事実を保証し、全員に伝えることができます。
実行前にわかっている、覚えにくい値のエイリアスとして定数を使用する慣行が広く行われています。
このような定数は、大文字とアンダースコアを使用して名前が付けられます。
たとえば、いわゆる「ウェブ」(16 進数) 形式で色の定数を作成してみましょう。
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...色を選択する必要がある場合 カラー = COLOR_ORANGE にします。 アラート(色); // #FF7F00
利点：
COLOR_ORANGEは"#FF7F00"よりもはるかに覚えやすいです。
"#FF7F00"は、 COLOR_ORANGEよりも入力ミスしやすいです。
コードを読むとき、 COLOR_ORANGE #FF7F00よりもはるかに意味があります。
定数に大文字を使用する必要があるのはどのような場合であり、通常、定数に名前を付ける必要があるのはどのような場合ですか?それを明確にしましょう。
「定数」とは、変数の値が決して変わらないことを意味します。ただし、一部の定数 (赤の 16 進値など) は実行前にわかっており、一部の定数は実行時や実行中に計算されますが、最初の割り当て後には変更されません。
例えば：
const pageLoadTime = /* Web ページの読み込みにかかる時間 */;
pageLoadTimeの値はページが読み込まれる前には分からないため、通常どおりに名前が付けられます。しかし、それは割り当てられた後も変わらないため、依然として一定です。
言い換えれば、大文字の名前が付いた定数は、「ハードコードされた」値のエイリアスとしてのみ使用されます。
変数について言えば、非常に重要なことがもう 1 つあります。
変数名には、格納されるデータを説明する明確で明白な意味が必要です。
変数の命名は、プログラミングにおいて最も重要かつ複雑なスキルの 1 つです。変数名を一目見ると、どのコードが初心者と経験豊富な開発者によって書かれたのかがわかります。
実際のプロジェクトでは、完全に別のものを最初から作成するのではなく、既存のコード ベースの変更と拡張にほとんどの時間が費やされます。しばらく他の作業を行った後にコードに戻ると、適切にラベル付けされた情報を見つけるのがはるかに簡単になります。言い換えれば、変数に適切な名前が付いている場合です。
変数を宣言する前に、変数の正しい名前を時間をかけて考えてください。そうすれば、十分な恩返しができるでしょう。
従うべきルールとしては次のようなものがあります。
userNameやshoppingCartなど、人間が判読できる名前を使用します。
何をしようとしているのかわからない場合は、 a 、 b 、 cなどの略語や短い名前を使用しないでください。
名前はできるだけ説明的かつ簡潔なものにしてください。不正な名前の例としては、 dataやvalueがあります。そのような名前は何も言いません。コードのコンテキストにより、変数がどのデータまたは値を参照しているかが非常に明らかな場合にのみ、これらを使用しても問題ありません。
チーム内および心の中で条件に同意します。サイト訪問者が「ユーザー」と呼ばれる場合は、関連する変数にcurrentVisitorまたはnewManInTownの代わりにcurrentUserまたはnewUser名前を付ける必要があります。
簡単そうに思えますか？確かにその通りですが、実際には説明的で簡潔な変数名を作成することはできません。頑張れ。
再利用しますか、それとも作成しますか?
そして最後のメモ。新しい変数を宣言する代わりに、既存の変数を再利用する傾向がある怠惰なプログラマもいます。
結果として、それらの変数は、人々がステッカーを変更せずにさまざまなものを投入する箱のようなものになります。今箱の中には何が入っているでしょうか？知るか？近づいて確認する必要があります。
このようなプログラマは、変数宣言で少し節約できますが、デバッグでは 10 倍以上の損失が生じます。
追加の変数は悪ではなく善です。
最新の JavaScript ミニファイアーとブラウザーはコードを十分に最適化するため、パフォーマンスの問題は発生しません。異なる値に異なる変数を使用すると、エンジンによるコードの最適化にも役立ちます。
var 、 let 、またはconstキーワードを使用して、データを保存する変数を宣言できます。
let – は現代的な変数宣言です。
var – は昔ながらの変数宣言です。通常はまったく使用しませんが、必要な場合に備えて、古い「var」の章でletとの微妙な違いについて説明します。
const – letに似ていますが、変数の値は変更できません。
変数には、その中に何が入っているかを簡単に理解できるような名前を付ける必要があります。
重要性: 2
adminとname 2 つの変数を宣言します。
nameに値"John"割り当てます。
値をnameからadminにコピーします。
alertを使用してadminの値を表示します (「John」を出力する必要があります)。
以下のコードでは、各行がタスク リストの項目に対応しています。
管理者に名前を付けてください。 // 2 つの変数を同時に宣言できます 名前 = "ジョン"; 管理者 = 名前; アラート(管理者); // 「ジョン」
重要性: 3
私たちの惑星の名前を含む変数を作成します。このような変数にはどのように名前を付けますか?
Web サイトへの現在の訪問者の名前を保存する変数を作成します。その変数にどのような名前を付けますか?
それは簡単です:
ourPlanetName = "地球" にしましょう。
短い名前のplanet使用することもできますが、それがどの惑星を指すのかが明らかではない可能性があることに注意してください。もっと冗長になると良いです。少なくとも変数がNotTooLongになるまでは。
currentUserName = "ジョン" にします。
繰り返しますが、ユーザーが現在のユーザーであることが確実にわかっている場合は、それをuserNameに短縮できます。
最新のエディターとオートコンプリートを使用すると、長い変数名を簡単に作成できます。節約しないでください。 3文字以内の名前でも大丈夫です。
また、エディタに適切なオートコンプリートがない場合は、新しいものを入手してください。
重要度: 4
次のコードを調べてください。
const 誕生日 = '18.04.1982'; const age = someCode(誕生日);
ここでは、日付のbirthdayが定数であり、 ageも定数です。
age someCode()使用してbirthdayから計算されます。これは、まだ説明していない関数呼び出しを意味します (すぐに説明します!) が、ここでは詳細は重要ではありません。重要なのは、 age何らかの方法で誕生日に基づいて計算されるということです。 birthday 。
birthdayには大文字を使用するのが正しいでしょうか? age的に？それとも両方でも？
const BIRTHDAY = '18.04.1982'; // 誕生日を大文字にしますか? const AGE = someCode(BIRTHDAY); // 年齢を大文字にしますか?
通常、「ハードコードされた」定数には大文字を使用します。言い換えれば、値が実行前にわかっており、コードに直接書き込まれた場合です。
このコードでは、 birthdayがまさにそのとおりです。したがって、大文字を使用できます。
対照的に、 age実行時に評価されます。今日、私たちは 1 つの年齢を迎えましたが、1 年後には別の年齢が生まれます。これは、コードの実行を通じて変化しないという意味で一定です。しかし、これはbirthdayよりも少し「定数ではありません」。計算されるので、小文字のままにしておく必要があります。