JavaScript とは

この記事ではJavaScriptがプログラミングの中でどのように使われているのかを紹介していきます。

JavaScript とは？

JavaScriptはウェブページで複雑な機能を実装できるプログラミング言語です。JavaScriptとよく使われる技術はHTMLとCSSがあります。

JavaScriptを学ぼう

変数について

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

簡単な例を見てみましょう！

<button>押してください</button>

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('あなたの名前は何ですか？');
  alert('こんにちは、' + name + 'さん、初めまして！');
}

 

この例では、ボタンを押すと「あなたの名前は何ですか？」の入力ボックスが表示されます。入力値を入力すると、入力した値で表示されます。

例えば「くまなつ」を入力すると、「こんにちは、くまなつさん、初めまして！」とアラートが出現します。

変数ってなに？

変数に値を入れると先ほど説明しました。変数は値を保持するもので、値そのものではありません。変数は値を入れる箱のようなものです。

変数を宣言する

変数を使用するためには、「宣言」が必要になります。宣言は変数を作ることです。

宣言したい名前の前にver, let, constをつけることで変数を宣言することができます。

varは少し前の宣言方法です。新しくコードを書く場合はletかconstを使用しましょう。

letとconstの違いは後ほど説明します。

var myName;
let myAge;
const myHeight;

変数を初期化する

変数を宣言したら、値を入れて初期化できます。

初期化するには、「変数名 = 初期化したい値」とします。

myName = 'kumanathu';
myAge = 20;
myHeight = 170;

これで変数を初期化することができました。

myName; => 'kumanathu'
myAge;  => 20
myHeight; => 170

コンソールで変数を入力すると、変数に設定した値が戻ってくることが確認できます。

変数の宣言と初期を一度におこなうこともできます。

let myCat = 'cat';

 

変数の値を変更する

初期化した変数に、もう一度値を入れることで、変数の値を変更することができます。

myName = 'superKumanathu';
myAge = 21;
myHeight = 175;

変数の名前付けのルール

変数には基本的にどんな名前をつけることもできます。一般的にはアルファベットと数字(0-9, a-z, A-Z)やアンダースコア(_)を使用します。

良い名前の例

age
myAge
backgroundColor

 

悪い名前の例

1
a
_20

変数のデータ型

変数に格納できる値にはいくつかの種類があります。これまでの例では数値型と文字列の２つがでていました。

数値側

数値は30のような整数値や、1.23のような実数値(浮動小数点)が存在します。

let myAge = 20;

文字列型

文字列とは文字が連なったもののことです。変数には文字列値を設定する場合、シングルクォーテーション(')またはダブルクォーテーション(”)で文字を囲みます。

let singleQuote = 'シングルクォーテーションだよ'
let doubleQuote = "ダブルクォーテーションだよ"

真偽値

真偽値はtrueとfalseの二つだけの値を持ちます。

trueかfalseを直接入れることもできます。演算子の結果を入れることもできます。

let isKumanathu = true;
let isBig = 10 > 1;

配列

配列は複数の値を格納できるオブジェクトです。

let sports = ['Baseball', 'Football', 'Tennis'];

配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。配列の最初の要素は0になります。

sports[0]; => 'Baseball'

オブジェクト

オブジェクトはkeyとvalueの組み合わせた値を複数格納できる構造です。

let writer = { name: kumanathu,age: 20, height: 170 }

以下のようにすることで、オブジェクトに格納された値を取得できます。

writer.name => 'kumanathu'

 

JavaScriptの定数

定数は一度宣言すると変更できない値です。「const」を使用することで定数を宣言することができます。

const myAge = 20;
const myHeight = 170;

constはletと全く同じように動作しますが、constを新しい値で変換することはできません。

const myAge = 22;
myHeight = 171;