今日の復習

チャプターの2の続きの続きの続き

代入演算子

•  基本型と参照型による代入の違い

基本型→値そのものを代入している

参照型→値を格納している参照先の情報を代入している

※変数について

→値の格納先（アドレス）に対してつけられた名札

分割代入　ES2015

→配列、オブジェクトを分解して要素、プロパティの値を

個々の変数に分解するための構文

• 配列

例1

→従来の記述

var data=[56,40,2,31,22,98,47,68,39,10];

var x0=data[0];

var x1=data[1];

var x2=data[2];

要素の数だけ列挙

例2

→ES2015

let data=[45,25,39,58,15,75,15,967,1,57,];

let[x0,x1,x2,x3,x4,x5,x6,x7,x8,x9]=data

console.log(x0)　　結果：45

console.log(x9)　　結果：57

例3

→...演算子を使用した場合

let data=[45,25,39,58,15,75,15,967,1,57,];

let[x0,x1,x2,...other]=data

console.log(x0);　　結果：45

console.log(x1);　　結果：25

console.log(other);　　結果：[58,15,75,15,967,1,57,]

• オブジェクト

→名前でプロパティを変数に分解。並び順は無視してもかまわない。

例1

let book ={title:'JavaScript本格入門',publish:'技術評論社',price:2680};

let{price,title,memo='なし'}=book;

console.log(title);　　結果：JavaScript本格入門

console.log(price);　　結果：2680

console.log(memo);　　結果：なし

例2

→ネスト構造を分解

let book ={title:'JavaScript本格入門',publish:'技術評論社',price:2680,

other{keyword:'ES2015',logo:'logo.jpg'}};

let{title,other,other:{keyword}}=book;

console.log(title);　　結果：JavaScript本格入門

console.log(other);　　結果：{keyword:'ES2015',logo:'logo.jpg'}

console.log(keyword);　　結果：ES2015

例3

→「変数名:別名」の形式でプロパティとは違う名前の変数を割り当てる

let book ={title:'JavaScript本格入門',publish:'技術評論社',price:2680};

let{title;name,publish:company}=book;

console.log(name);　　結果：JavaScript本格入門

console.log(company);　　結果：技術評論社

学習方法

チャプター2の続きの続き

演算子

• 算術演算子

インクリメント演算子とデクリメント演算子

前置演算

→オペランドの前に演算子を置くので「前置」演算

例

let x = 3;
let y = ++x;
console.log(x);　　結果:4
console.log(y);　　結果:4

処理の流れ

ｘに3を代入

↓

++xを処理

↓

yに結果を代入

後置演算

→オペランドの後ろに演算子を置くので「後置」演算

例

let x = 3;
let y = x++;
console.log(x);　　結果:4
console.log(y);　　結果:3

処理の流れ

xに3を代入

↓

ｙにｘを代入

↓

x++を処理

小数点を含む計算

例

console.log(0.2*3);　　結果//0.60000000000000001

→Javascriptが内部的に数値を2進数で演算しているためらしい。

例2

console.log(0.2*3===0.6);　　結果//false

→上の結果がそれの照明

例3

console.log(((0.2*10)*3)/10)

→では小数点を含む計算をどのように記述すればいいか。

1. 値をいったん整数にしてから演算
2. 1の結果を小数に戻す

今日の復習

チャプター2の続き

リテラル

データ型に格納できる値もしくは表現方法

• 数値リテラル

→ピンと来ないので簡単にまとめ

整数リテラルと浮動小数点リテラルがあり、整数リテラルには

10進数、16進数、8進数、2進数がある

• 文字列リテラル

→エスケープ処理について

 'He's dog?'←文字列の中にシンボルクォートが含まれているので×

"He's dog?"←文字列の中にシンボルクォートが含まれているがダブルクォートで囲っているの〇

  'He\'s dog?'←文字列の中にシンボルクォートが含まれているが直前にバックスラッシュをいれているので〇

 上のバックスラッシュのような文字をエスケープシーケンスという。

 ある文のなかで意味を持つ文字を一定のルールに基づき無効化することをエスケープ処理という。 

• テンプレート文字列

→できること

文字列への変数の埋め込み

複数行の文字列

${...}→...の部分に変数を埋める

例

let name = `鈴木`;
let str = `こんちわ、${name}さん。
今日も暑いですなあ！`;

• 配列リテラル

→配列内の個々のデータは「要素」

例

var data = ['JavaScript','Ajax','ASP>NET'];
console.log(data[0]);
結果//JavaScript

let data = ['JavaScript',['jQuery','prototype.js'],'Ajax'];
console.log(data[1][0]);

結果//jQuery

var data = ['JavaScript','Ajax',[React,[HTML5,CSS3],node.js];

console.log(data[3][2][1]);

結果//HTML5

• オブジェクトリテラル

→連想配列、ハッシュとも呼ばれる。

オブジェクト内の個々のデータは「プロパティ」

関数が格納されたデータは「メソッド」

例

let obj = {x:1,y:2,z:3};
console.log(obj.x);←ドット演算子を使用してプロパティにアクセス

結果//1
console.log(obj['x']);←ブラケット構文を使用してプロパティにアクセス

結果//1

今日の復習

チャプター２

ここからは実際にコードを書きつつ補足した内容を

コピペしてまとめていきます。他には覚えておきたい内容も。

使用エディターというかIDEはAWSのcloud9を使用します。

aws.amazon.com

識別子の命名規則

1. 1文字目は英字、アンダースコア、ドル記号のいずれか。
2. ２文字目以降は１文字目に使用できる文字、もしくは数字を使用する。
3. 英字の大文字と小文字は区別される。
4. JavaScriptで意味をもつ予約語でないこと。

 

定数宣言

単なる数値はだれにとっても理解できものではないということ。

命名規則としては大文字で且つ単語はアンダースコアで区切る。

例

const TAX = 1.08;
let price = 100;
console.log(price*TAX);

データ型

大別して２種類あり、違いは値を変数に格納する方法

基本型

• 数値型　　　　いわゆる数字
• 文字列型　　　シングルクォート、ダブルクォートで囲まれた0個以上の文字の集合
• 真偽型　　　　true、false
• シンボル型　　シンボル　ES2015から
• 特殊型　　　　null、undefined

参照型

• 配列　　　　　データの集合（各要素にはインデックス番号でアクセス）
• オブジェクト　データの集合（各要素には名前でアクセス）
• 関数　　　　　一連の処理の集合

今日の復習

チャプター2まで終了したので、復習方法も変えたことも含めて随時更新します。

チャプター1

JavaScriptの趨勢を語るときの技術キーワード

• Ajax(Asynchronous JavaScript+XML)

• API(Application Programming Interface)

• SPA(Single Page Application)

言語の特徴

• スクリプト言語

→同じスクリプト言語であれば他の言語も学びやすい

• インタープリター言語

→コードを書いてすぐ動くのはこのおかげらしい

• 色々な環境で使える

 →汎用性が高いので他のことに興味が移っても挑みやすい

ES2015

最新のバージョンらしいがその部分の開設も掲載されている

ことがこの書籍を選んだ理由でもある

デベロッパーツール

ブラウザはchromeを使用中なのでまとめておく

• Elements

→HTMLとCSSのソースを確認

• Network

→ブラウザ上で発生した通信の確認　Ajax使用に役に立つらしい

• Sources

→スクリプトのデバック。基本構文も怪しい自分にとっては生命線

• Application

→ファイル構成の確認、ストレージ、クッキーの確認

• Console

→エラーメッセージ、ログの確認。対話的なコードの実行

今日の復習

記法について

識別子の命名規則についていろいろ書き方があるなあとは思っていたがちゃんと名前がついていた。複数の意味をもつ文字の集合に対しては基本的につなげて書く。

記法とは意味の区切りを何で表すかで分ける書き方。

CamelCase記法→ThisIsAPen.

Snakecase記法→this_is_a_pen.

大きく分けてこの2種類。

リテラルについて

英語にするとliteral,、意味は「文字通りの」とか「言葉本来の」ということ。

つまり

let str = "こんちわ";

console.log(str);

ってあった場合、書いたことがそのまま表記される、別の意味、（変数宣言とか）を持たないのはこんちわ、だけなのでこれがリテラルと呼ばれる。

エスケープシーケンス

"(ダブルクォート)とか{}(中括弧)とかそのまま勝手に別の意味を持っちゃう記号や文字なんかをリテラルとして扱える。

テンプレート文字列

文字列に変数も埋め込むことができるようになる。

改行するのにｎをつかわずに表記通りに改行できる。

undefinedとnull

まだわかっていないので、そのまま引用する「意図した空を表すのはnull、そうでなければundefined」

今日の復習

1. 変数宣言
2. 識別子

1について、変数名をJavascriptに登録すること。値を入れる領域をメモリ上に確保すること。メモリという言葉が出てきたことで変数というものがふわふわしたイメージから頭の中でしっかりしたイメージになった。

2について、自分の中で「アレ」の総称がわかりホッとした。書籍を使うメリットを感じた瞬間だった。色々な「アレ」がまだまだあるのだがまわりに一緒に学習する人間がいない＆尋ねる技術が不十分なせいでなかなか「アレ」の名前を調べることができないのが現状だ。