【基本を抑える_02】変数と配列
変数の基本
javaScriptで変数とは、値を保持するために使用します。
イメージとしては、変数という「箱」に入れたい値を入れるイメージです。
変数に入れる値としては、以下のような値を入れることができます。
数値
let sample = 159;文字列
let sample = 'サンプル';変数と定数
javaScriptでは、値の保持をするために、「変数」と「定数」を使います。
「変数」と「定数」は値を設定する回数が、１回のみであるかどうかで使い分けします。
値を１度だけ設定する場合は、以下のように「const」を使いましょう。
const text = 'Hello World !!';
alert(text);値を何回も設定する可能性がある場合は、以下のように「let」を使いましょう。
let text = 'Hello World !!';
// このように値を変更することもできます。
text = 'New Text';
alert(text);配列の基本
javaScriptで複数の値をまとめて保持する時に配列を使用します。
例えば、「赤」「青」「黄」という文字を１つの配列に入れるとこのようになります。
// 3つの値を配列に入れる例
let sample = ['赤', '青', '黄'];１つの配列に複数の値を入れ、その値を取り出してみます。
// 3つの値を配列に入れる
const sample = ['赤', '青', '黄'];
// 配列から「赤」という文字を取得
alert(sample[0]);配列に値を追加することもできます。
// 3つの値を配列に入れる
const sample = ['赤', '青', '黄'];
// 配列に「緑」という文字を追加
sample.push('緑');
// 配列から「緑」という文字を取得
alert(sample[3]);連想配列のきほん
javaScriptでは、連想配列と呼ばれる配列の設定方法があります。
配列の要素の１つに対して、「複数」の値をもたせたい場合に使います。
赤／青／黄に関する連想配列を作ってみましょう。
例えば、
- 赤：nameが「赤」、valueが「red」
- 青：nameが「青」、valueが「blue」
- 黄：nameが「黄」、valueが「yellow」
の値を持つ、連想配列を作る場合、
このようなイメージの連想配列になります。
// 3つの値を配列に入れる例
let sample = [
{ name:'赤', value: 'red'},
{ name:'青', value: 'blue'},
{ name:'黄', value: 'yellow'}
];先程の例の連想配列から、その値を取り出してみます。
// 3つの値を配列に入れる例
let sample = [
{ name:'赤', value: 'red'},
{ name:'青', value: 'blue'},
{ name:'黄', value: 'yellow'}
];
//「red」という値の取り出し
alert(sample[0]['value']);実際に取り出す書き方は、
sample[0]['value']この書き方だけでなく以下のように書くことができます。
sample[0].valueこのように「console.log」で設定した内容が確認できます。
オブジェクトの基本
「{」と「}」に囲まれたものを「オブジェクト」と言います。
オブジェクトは、値を複数持たせるために使用します。
赤／青／黄に関する、それぞれのオブジェクトを作ってみましょう。
例えば、
- 赤：nameが「赤」、valueが「red」
- 青：nameが「青」、valueが「blue」
- 黄：nameが「黄」、valueが「yellow」
の値を持つ、オブジェクトを作る場合、
このようなイメージになります。
この時のjavaScriptのコードはこちらです。
// 赤に関するオブジェクト
let objectRed = { name:'赤', value: 'red'};
// 青に関するオブジェクト
let objectBlue = { name:'青', value: 'blue'};
// 黄に関するオブジェクト
let objectYellow = { name:'黄', value: 'yellow'};参考サイト
この記事の内容は、
「初心者のためのWeb入門」
のサイトに記載があるので、
そちらを参考にしてください。
初心者向けピックアップ
