Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

JavaScript サイト構築

【Javascript】変数や条件分岐について

投稿日:2017年6月2日 更新日:

                                                                                                                                 

変数とは

変数とはデータにつけるラベルのことです。
ラベル名は自分で決めることができます。
たとえば「こんちには!」は”x”というラベルにするときは

var x;
x = "こんにちは!"

とすればxは「こんにちは!」のラベルとして定義されます。

varというのが出てきましたが、varこれから変数宣言をするぞ!というのを表しています。
なので var x はこれからxというラベル名について書いていくぞ!!!ということになります。

上では2行で書いていますが、

var x = "こんにちは!"

というかんじで1行にして書くことも可能です。

ちなみにカンマで区切ることで一度に複数の変数宣言をすることができます。

var x = "こんにちは!",
	y = "さようなら。。。",
	z = "おはよう〜";

データ型について

さっきは変数に文字を指定しましたが、それ以外のものを変数として定義することができます。

  • 文字列
  • 数値
  • 真偽値(true / false)
  • オブジェクト
  • undefined
  • null

上から順番に説明していきます。

文字列

文字列の場合は先ほどから書いているようにダブルクォーテーションもしくはシングルクォーテーションで文字を囲むことで文字列として処理されます。

var x = "こんにちは!",
	y = 'さようなら';

また、特殊文字というのが用意されています。
これは改行したいときや変数のなかでシングルクォーテーションを使いたいときなどに使います。
エスケープシーケンスとも呼ばれていて、調べ物をしているとエスケープさせましょうという文章をよく見かけます。


実際の例を見ていきましょう

var x = 'It's a small world'

シングルクォーテーションで文字列を囲んでいる場合、文字列を指定している途中でシングルクォーテーションを使ってしまうと
その後の文字列は文字列として定義されません。
この場合だとxはItと定義されていることになり、「s a small world」は何でもない存在になってしまうのです。
これを回避するためには文字列のなかで使いたいシングルクォーテーションの前に「/」を入れます。

var x = 'It/'s a small world'

こうすることでエスケープされ(使ってみたかった)It’s a small worldと書き出されるようになります。


下は特殊文字の一覧です。

/b バックスペース
/t 水平タブ
/v 垂直タブ
/n 改行
/r 復帰
/f 改ページ
/’ シングルクオーテーション
/” ダブルクオーテーション
¥文字
/0 NULL文字

数値

数値の場合はダブルクォーテーションなどで囲わないでそのままかきます。

var x = 50

扱える数値は整数値(1、2、3)、実数値(0.5、2.5、3.4)、マイナス値(-1、-2、-3)があります。

演算子

記号の意味を下の表にまとめました。

+ 足し算
引き算
* 掛け算
/ 割り算
% 割り算した余りを表示
+= 代入を伴う演算子
++ 1足す
1引く



%以下について少し説明していきます。

var x = 5;
x % 3;

%は割り算をして余りを表示させる記号です。
この場合はxを3で割り算した時の余りを表示させましょうという意味なので2が書き出されます。

var x = 5;
x += 4;
/* x = x + 5; と同じ意味 */

+=のようにイコールの前に四則演算子がついているものは代入を伴う計算になります。
この場合だと5+4なので9が書き出されます。
掛け算の場合は+のところを*に変えます。


var x = 5;
x ++;

++のように+が二回連続で出てきたら1を足すという計算になります。
5+1なので6が書き出されます。

var x = 5;
x --;

–のように-が二回連続で出てきたら1を引くという計算になります。
5-1なので4が書き出されます。

++とか–とか普段の生活では見ないので最初は何かと思いましたが、よく出てくるので覚えるようにしましょう。

条件分岐

きました、条件分岐。
もし○○だったら▲▲そうじゃなければ■■っていうやつです。
これもよく出てきます。
さっそく基本の構文を見ていきましょう。

if(条件){
真だった場合の処理
} else {
義だった場合の処理
}

という形になります。

var score = 80;
if(score > 70){ 
 console.log("合格!");
} else </div>{
 console.log("不合格");
}

scoreが70より大きかったら合格という文字列をコンソールツールに書き出す、それ以外だったら不合格という文字列をコンソールツールに書き出すという意味になります。
もっと条件を追加することも出来ます。

if(条件){
真だった場合の処理
} else if (付け加えたい条件){
付け加えたい条件が真だった場合の処理
} else{
義だった場合の処理
}

とelse if(付け加えたい条件)というのを追加します。

v</div>ar score = 80;
if(score > 70){ 
 console.log("合格!");
} else if(score > 60){
 console.log("もうちょっと!");
} else {
 console.log("不合格");
}

これで70より大きければ合格!、60より大きければもうちょっと!、60以下であれば不合格と書き出されます。


ちなみにですが、>や<は比較演算子と呼ばれるものでいくつか種類があるので見ていきます。

> よりも大きい
< よりも小さい
>= 以上
<= 以下
=== / == 等しい
!== / != 等しくない

また、条件を組み合わせる論理演算子と言うものもあります。

&& AかつBのかつを意味する
|| AもしくはBのもしくはを意味する
Aではないを意味する

score > 70 && score < 80 こう書かれていたら70より大きいかつ80より小さいという意味になります。

その他のデータ型

nullは何もないという意味です。
undefinedは定義されていないという意味です。
オブジェクトに関してはまた改めて詳しく書いていきたいと思います。

今回は個々までです。
せば。

-JavaScript, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

コーディング時の注意点

こんにちは! 今日はより効率的にコーディングするにはどうすればいいか ということについて書いていきたいと思います。 ちなみにまだ試してないので、 こうすればコーディングが早くなるんじゃないか になりま …

Retinaディスプレイと対策

こんにちは! 今日はRetinaディスプレイについて書いていきたいと思います。 Retinaディスプレイって何者なの?? Retinaディスプレイについて考えるとき、解像度の話が必ず出てきます。 ・解 …

WordPress オリジナルテーマ ウィジェットを追加する

オリジナルテーマを作っていて、ウィジェットが出てこなかったのでその解決方法。 functions.phpに以下のソースを追加するとwordpress管理画面>外観の中にウィジェットが表示されるようにな …

no image

CSS応用編 vol.01

CSSで三角形を作る 今日はCSSで三角形を作る方法についてみていきます。 三角形を作ることは結構あるんですが、その度にいちいち調べて書いてたので、 本質を理解する+それでも忘れちゃった時用の備忘録と …

no image

【Javascript】ダイヤルボックス

alert pcやスマホを使っているとダイヤルボックスが出てきて確認を求められることがしばしばあります。 今日はそのダイヤルボックスの出し方について書いていきます。 最初はアラートについてです。 &l …