プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

【基本を抑える_02】変数と配列

変数の基本

javaScriptで変数とは、値を保持するために使用します。

イメージとしては、変数という「箱」に入れたい値を入れるイメージです。

変数に入れる値としては、以下のような値を入れることができます。

数値

let sample = 159;

文字列

let sample = 'サンプル';

変数と定数

javaScriptでは、値の保持をするために、「変数」と「定数」を使います。

「変数」と「定数」は値を設定する回数が、1回のみであるかどうかで使い分けします。

値を1度だけ設定する場合は、以下のように「const」を使いましょう。

const text = 'Hello World !!';

alert(text);

値を何回も設定する可能性がある場合は、以下のように「let」を使いましょう。

let text = 'Hello World !!';

// このように値を変更することもできます。
text = 'New Text';

alert(text);

配列の基本

javaScriptで複数の値をまとめて保持する時に配列を使用します。

例えば、「赤」「青」「黄」という文字を1つの配列に入れるとこのようになります。

// 3つの値を配列に入れる例
let sample = ['赤', '青', '黄'];

1つの配列に複数の値を入れ、その値を取り出してみます。

// 3つの値を配列に入れる
const sample = ['赤', '青', '黄'];

// 配列から「赤」という文字を取得
alert(sample[0]);

配列に値を追加することもできます。

// 3つの値を配列に入れる
const sample = ['赤', '青', '黄'];

// 配列に「緑」という文字を追加
sample.push('緑');

// 配列から「緑」という文字を取得
alert(sample[3]);

連想配列のきほん

javaScriptでは、連想配列と呼ばれる配列の設定方法があります。

配列の要素の1つに対して、「複数」の値をもたせたい場合に使います。

赤/青/黄に関する連想配列を作ってみましょう。

例えば、

  • 赤: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入門」

のサイトに記載があるので、

そちらを参考にしてください。

初心者向けピックアップ

初心者にオススメ