Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Learn_web_development/Core/Scripting/Variables below:

å¿…è¦ãªæƒ…å ±ã‚’ä¿ç®¡ã™ã‚‹ — 変数 - ウェブ開発のå¦ç¿’

• 前のページ
• 次のページ

前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他のウェブの技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。

• 変数とは何か、そしてなぜそれらがそれほど重要なのか。
• 変数を let で宣言し、値で初期化し、新しい値で再代入すること。
• const による定数の作成。
• 変数と定数の違い、そしてそれぞれの使い分けについて。
• 変数名の命名に関する最善の手法。
• 変数に格納できるさまざまな値の種類 — 文字列、数値、論理値、配列、オブジェクト。

この記事を通じて、理解した内容を確認するために、コードを入力してもらうことがあるでしょう。デスクトップを使用しているのなら、JavaScript のサンプルコードを打ち込むのに最適なのは、ブラウザーの JavaScript コンソールでしょう（詳しくはブラウザーの開発者ツールとはをご覧ください）。

変数は値の入れものです。数を合計したり、ある文章の一部を格納するのに使用します。変数が特別なのは、変数が持っている値を変更できることにあります。

例を見てみましょう。

<button id="button_A">押してください</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector("#button_A");
const headingA = document.querySelector("#heading_A");

let count = 1;

buttonA.onclick = () => {
  buttonA.textContent = "もう一度！";
  headingA.textContent = `${count} 回クリックしました`;
  count += 1;
};

この例では、ボタンを押すとちょっとした コードが実行されます。まず、ボタン自体のテキストを変更します。次に、ボタンが押された回数のメッセージを表示します。この回数は変数に格納されています。ユーザーがボタンを押すたびに、変数の数字が1ずつ増えていきます。

なぜこれが便利なのかを理解するためには、回数を格納する変数を使用せずにこの例と同じことをするためにはどのようにすればよいのか考えてみましょう。恐らく次のようになるでしょう。

<button id="button_B">押してください</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector("#button_B");
const headingB = document.querySelector("#heading_B");

buttonB.onclick = () => {
  buttonB.textContent = "もう一度！";
  headingB.textContent = "1 回クリックしました";
};

使っている構文を（まだ！）完全には理解していないかもしれませんが、イメージはつかめるはずです。変数がなければ、ボタンが何回クリックされたかを知る方法がありません。情報が記憶されないと、ユーザーへのメッセージはすぐに無意味なものになってしまいます。

変数というのはとても合理的です。 JavaScript に慣れていけばとても自然なものに感じられるでしょう。

変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。

メモ: 変数に値を「格納する」と言いました。これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。

変数を使用するためには、まずは変数を作らなければなりません。より正確には、「宣言する」といいます。そのためには let キーワードに続けて変数名を書きます。

ここでは 2 つの変数 myName と myAge を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。続けて、好きな名前で変数を作ってみましょう。

メモ: JavaScript では、命令の行末ごとにセミコロン (;) を書かなければなりません。1 行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。

今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、

これらの変数は現在、値を保持しておらず、空です。変数の名前を入力すると、undefined という値が表示されるでしょう。もし変数自体が存在していない場合はエラーメッセージが表示されます。以下の変数を入力してみてください。

メモ: 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。

変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (=) を入力し、変数に入れたい値を渡します。例えば次のようにします。

myName = "Chris";
myAge = 37;

コンソールに戻って上の行を入力してみてください。コンソール上に、変数に設定した値がその都度戻ってくることが確認できるでしょう。先ほど言ったように、変数の名前をコンソールに入力することで、その値が確認できます。もう一度、やってみましょう。

変数の宣言と初期化を一度にすることもできます。

2 つの操作を別個の行で行うより早いので、おそらくほとんどの場合、この方法で書くでしょう。

おそらく、var キーワードを使用した異なる方法で変数を宣言しているのも目にすることがあるでしょう。

JavaScript が最初に開発されたときには、これが変数を宣言する唯一の方法でした。var の設計は混乱しやすく、エラーを引き起こしやすいものです。そこで、let が現代の JavaScript で導入されました。これは、var とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。

一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります（今すぐ読みたい場合は、let のリファレンスページを参照してください）。

はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を var で宣言することができます。例えば次のようになります。

myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;

メモ: ウェブコンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1 行ずつ入力してもうまくいきません。

これは巻き上げが行われるため、動作します。件名に関する詳細については var の巻き上げを読んでください。

巻き上げは let では動作しなくなりました。上記の例で var を let に変更すると、エラーで失敗します。これは良いことです。変数を初期化した後に宣言すると混乱しやすくなり、コードを理解するのが難しくなります。

第二に、var を使用すると、好きなだけ同じ変数を何度でも宣言することができます、しかし let ではできません。次の例は動作します。

var myName = "Chris";
var myName = "Bob";

しかし、次のようにすると 2 行目でエラーが発生します。

let myName = "Chris";
let myName = "Bob";

代わりにこうしなければならないでしょう。

let myName = "Chris";
myName = "Bob";

繰り返しますが、これは言語の賢明な決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。

これらとそれ以外の理由から、コードでは var よりも let を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが let に対応しているため、var を使用する理由はなくなりました。

メモ: このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。Chrome のコンソールの機能には、let と const による変数の再宣言が許可されているものがあります。

> let myName = "Chris";
  let myName = "Bob";
// 1 回の入力: SyntaxError: Identifier 'myName' has already been declared

> let myName = "Chris";
> let myName = "Bob";
// 2 回の入力: 両方とも成功

変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更（または更新）することができます。次の行を入力してみてください。

myName = "Bob";
myAge = 40;

変数には制限はあるものの、大体どんな名前を付けることができます。ただし、一般的に、アルファベットと数字 (0-9, a-z, A-Z) やアンダースコアだけを使用すべきでしょう。

• 上記以外の文字を使用するのはやめましょう。環境によってはエラーとなったり、他の国の人々にとって理解しがたいものとなります。
• 変数名の先頭にアンダースコアは使用してはいけません。これは特定の JavaScript 構文で特定の意味を表すために使用されるため、混乱を招く可能性があります。
• 変数名の先頭に数字を使用してはいけませんこれは許可されておらず、エラーになります。
• 複数の単語をつなげる場合は、小文字で始まるキャメルケースと呼ばれる書き方に従いましょう。最初の単語を全て小文字で書いて、その後に続く単語の最初の文字を大文字にする記法です。この記事ではこの書き方を採用しています。
• 保持するデータを説明する、分かりやすい名前を付けましょう。1 つの文字・数字や、長すぎる命名はしないようにしましょう。
• 変数名は大文字・小文字を区別します。myage と myAge は違うものになります。
• 最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。var、function、let、for 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。

メモ: 避けるべき予約語の一覧は字句文法 — キーワードにあります。

良い名前の例：

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

悪い名前の例：

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

さらにいくつかの変数を作成してみましょう。上記の内容をしっかりと覚えてください。

変数に保持する値にはいくつかの種類があります。このセクションでは、その種類について簡単に解説します。さらに詳細については、もっと先の記事で紹介します。

変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値（浮動小数点数とも呼ばれます）が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、引用符は付けてはいけません。

文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、単一引用符 (') または二重引用符 (") で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。

let dolphinGoodbye = "So long and thanks for all the fish";

論理型は真偽値です。 true と false の 2 つの値を持ちます。どちらのコードを実行するべきかといった、条件を判定するためによく使います。例として、簡単なコードは以下のようなものです。

実際には以下のように使われます。

これは「小なり」演算子 (<) を使用して 6 が 3 より小さいかどうかを判定しています。想像の通り、6 は 3 より小さくないためにこれは false となります。このような演算子はまた今度じっくりと紹介します。

配列とは角括弧 ([]) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。次のように入力してみましょう。

myNameArray[0]; // 'Chris' と表示されます
myNumberArray[2]; // 40 と表示されます

角括弧で表示したい値の位置に応じた添字を指定します。気づいたかもしれませんが JavaScript の配列は 0 から始まり、最初の要素の添字が 0 となります。

プログラミングにおいて、オブジェクトとは現実のもの（オブジェクト）をモデルとしたコードの構造です。幅と長さについての情報をもつ駐車場を表す単純なオブジェクトもあれば、名前や身長、体重、話す言葉やあいさつもすることもできる、人を表すオブジェクトも作ることができます。

次の行をコンソールに入力してみましょう。

let dog = { name: "ポチ", breed: "ダルメシアン" };

オブジェクトに格納された情報を取得するには、以下のような書き方をします。

JavaScript は他の言語と異なり、「動的型付け言語」という、格納するデータ型 (数値や文字列や配列など ) を変数に対して指定する必要のない言語です。

たとえば、もし変数を宣言して、引用符で囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。

それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。

let myNumber = "500"; // おっと、これはまだ文字列です
typeof myNumber;
myNumber = 500; // はるかに良い — これで数値になりました
typeof myNumber;

上の 4 行をコンソールに一つずつ入力して、結果を見てみてください。typeof という演算子に気づきましたか？これは渡した変数のその時点でのデータ型を返します。最初に使用したとき、myNumber には '500' という文字列が入っているため、string と返ってきます。2 回目に呼んだときに何が返ってくるかを見てみましょう。

変数と同様に、定数も宣言することができます。これらは、以下の点を除けば、変数と同じです。

• 宣言した時点で初期化する必要がある。
• 初期化した後、新しい値を割り当てることはできない。

例えば、 let を使用すると、変数を初期化せずに宣言することができます。

これを const を使用して行おうとすると、エラーが表示されます。

同様に、 let で変数を初期化し、新しい値を割り当てることができます（これは変数を再代入するとも呼ばれます）。

let count = 1;
count = 2;

これを const を使用して行おうとすると、エラーが表示されます。

const count = 1;
count = 2;

JavaScript で定数は、常に同じ値に名前を付けなければなりませんが、名前を付けた値の内容は変更することができることに注意してください。これは、数値や論理値のような単純な型では有益な違いではありませんが、オブジェクトを考えてみてください。

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

オブジェクトの内容が変わっても、定数は同じオブジェクトを指しているので、const を使って宣言したオブジェクトのプロパティを更新したり、追加したり、削除したりすることができます。

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

もし const で let と同じことができないのであれば、なぜ let よりも const を使用した方がいいのでしょうか？実際、constはとても有益なものです。もし const を使用して値に名前をつけると、コードを見ている人に、この名前は決して異なる値に割り当てることができないことを指示します。この名前を見た人は、その名前が何を参照しているのかがいつでもわかるようになるのです。

このコースの中では、いつ let を使用し、いつ const を使用するかについて、以下の原則を採用しています。

可能であれば const を使用し、必要ならば let を使用する。

つまり、宣言時に変数を初期化でき、後で再代入する必要がない場合は、その変数を定数にします。

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。スキルテスト: 変数を見てください。

ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。

• 前のページ
• 次のページ

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4