MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！④

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！④

広告
Web制作

つるぴよ
つるぴよ
もりけん塾に入塾しました！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

[blogcard url=”https://tsurupiyoblog.com/moriken-javascript-3″]

目次

マンガJavaScript第８話　配列

プログラムでは「ループ処理」のように同じ処理を何度も繰り返すことが多いです。
そこで「配列」を使うことでシンプルに書くことができ、リスト化して何度も使うことができるようになります。

配列の基礎

つるぴよ
つるぴよ
「配列」とは「変数」が入った引き出しのようなものだよ！
＼配列の基礎知識／

「配列」の内部の変数のことを「要素」といいます。
①「new Array(内部の変数の個数)」という命令文で「配列」を作ります。
②「配列の変数名[参照する変数の番号]」というように指定すると、その配列の要素に値を格納したり取り出したりすることができる。
③「配列名変数.length」とすることで、配列の要素数を知ることができる
[〜]内に指定した数字のことを「配列の添え字」といいます。

①、②を実際に書いてみると以下のような感じです。

 //①
 var nameArray = new Array(3);
 //②
nameArray[0] = "りんご";
//③
nameArray.length;

 

配列の作り方

つるぴよ
つるぴよ
例えばくだもの屋さんで商品管理をするとします！

配列名を「fruits」にして商品名で「要素」を作っていきます。

 <script>
   var fruits = new Array(3);
   fruits[0]="りんご";
   fruits[1]="みかん";
   fruits[2]="ぶどう";
 </script>

その他にも以下のような作り方があります。

var fruits = new Array("りんご","みかん","ぶどう");

 var fruits = ["りんご","みかん","ぶどう"];

var fruits = [] //中身が空の配列を作る
fruits[0] = "りんご";
fruits[1] = "みかん";
fruits[2] = "ぶどう";

別の方法では「.split( )」という命令を使って配列を作る方法もあります。

var name="りんご,みかん,ぶどう";
var fruits = name.split(","); //「,」で分割して配列に

初期化サイズよりも大きな配列の指定

JavaScriptでは、初期化した配列の大きさよりも、大きな数字を指定した場合自動でそのサイズまで配列が大きくなります。

var fruits = new Array(3);
document.write(fruits.length); //3と表示

 fruits[5] = "バナナ"; 
 document.write(fruits.length) //6と表示 (0〜5までの「要素」があるので)

「fruits」と言う配列にはもともと「３」までしか要素がありません。
そこで要素の５番目にバナナという要素を加えると、新しく「fruits」と言う配列に５番目までの要素が作られるようになります。

 

多次元配列の作り方

つるぴよ
つるぴよ
「多次元配列」とは「配列」の中に別の「配列」を入れ子にすることだよ

「多次元配列」の作り方

var frits = new Array(2);

frits[0] = new Array(3);
frits[0][0] = "もも";
frits[0][1] = "ブルーベリー";
frits[0][2] = "パイナップル";

frits[1] = new Array(3);
frits[1][0] = "さくらんぼ";
frits[1][1] = "キウイ";
frits[1][2] = "なし";

配列の入れ子が1つの「多次元配列」は「２次元配列」と言い、以下のようにも書き換えられます。

var frits = [["もも","ブルーベリー","パイナップル"],["さくらんぼ","キウイ","なし"]];

「多次元配列」の値にアクセスする際には「frits[0][0]」のように[ ]を並べて書きます。

var frits = [["もも","ブルーベリー","パイナップル"],["さくらんぼ","キウイ","なし"]];
document.write(frits[1][2]);
結果　なし

配列の操作について

つるぴよ
つるぴよ
配列の操作の中でよく使うものを表にしました！
var a = ["aa","bb"];
var b = ["EE","FF"];
var c = [1,5,7,3];

表の説明に出てくるa、b、cは上記のものとします。

式 意味 使い方 説明
.length 配列の要素の個数 x = a.length; 変数「X」に「2」が入る
.push(array) 配列の末尾に追加 a.push(b); 変数「a」が「”aa”,”bb”,”EE”,”FF”」になる
.push(値) 値を末尾に追加 a.push(“cc”); 変数「a」が「”aa”,”bb”,”cc”」になる
.unshift(array) 配列を先頭に挿入 a.unshift(b); 変数「a」が「”EE”,”FF”,”aa”,”bb”」になる
.unshift(値) 値を先頭に挿入 a.unshift(“cc”); 変数「a」が「”cc”,”aa”,”bb”」になる
.pop() 末尾の要素を削除 a.pop() 変数「a」が「”aa”」になる
.shift() 先頭の要素を削除 a.shift() 変数「a」が「”bb”」になる
.concat(array) 連結した配列 X = a.concat(b); 変数「X」に「”aa”,”bb”,”EE”,”FF”」が入る
.sort() 小さい順に並び替える c.sort(); 変数「c」が「1,3,5,7」になる
.reverse() 逆向きに並び替える c.reverse(); 変数「c」が「3,7,5,1」になる
.join(“文字列”) 配列を文字列で連結 x = a.join(“/”); 変数「x」に「aa/bb」が入る
.toString() 配列を文字列にする x = a.toString(); 変数「x」に「aa,bb」が入る

 

マンガJavaScript第９話　オブジェクト

第８話では「配列」について学びました。
「オブジェクト」は「配列」に似ていて、簡単に説明するとその違いは添え字が「数字」か「文字列」かと言う部分です。

つるぴよ
つるぴよ
「配列」はarray[0]などと書いて数値にアクセスしたけど、「オブジェクト」はobject[“string”]を使ってアクセスするよ！

また「オブジェクト」では.lengthを使って要素の数を知ることができません。

オブジェクトのループ処理

「オブジェクト」でループ処理をする時は「for」ではなく「for in」を使います。
以下にいくつかの「オブジェクト」の書き方例を挙げます。

 var score = new Object();
 score["yamada"] = 65;
 score["tanaka"] = 78;
 score["suzuki"] = 87;
var score = {}; //中身が空のオブジェクトを作る
score["yamada"] = 65;
score["tanaka"] = 78; 
score["suzuki"] = 87;
 var score = {"yamada":65,"tanaka":78,"suzuki":87};

3番目の方法で「オブジェクト」を作るときに、要素名が「変数名に使える文字列」の場合は「””」を省略して以下のようにもかけます。

var score = {yamada:65,tanaka:78,suzuki:87};

 var s =score["yamada"] + "," + score.tanaka
 document.write(s);

各要素を利用する際は①[“〜”]を利用する方法と② [.〜]を利用する方法の２通りあります。
②を利用する場合はその要素が「変数名に使える文字列」である必要があります。
上記のように書いた場合出力結果は以下のようになります。

結果　65,78

入れ子

配列が「多次元配列」を作れたように、オブジェクトも入れ子のオブジェクトを作れます。
配列の中にオブジェクトを入れたり、オブジェクトの中に配列を入れたりすることもできます。
いくつかの例を書いていきます。

その①

var test = {};
test.yamada = {kokugo:65,suugaku:72};
test.tanaka = {kokugo:87,suugaku:77};
console.log(JSON.stringify(test,null,""));
consoleの結果（Google Chromeの検証で表示）
{
　”yamada”:{
　　”kokugo”:65,”suugaku”:72
　},
　”tanaka”:{
　　”kokugo”:87,”suugaku”:77
　}
}
その②
var test = {yamada:{kokugo:65,suugaku:72},tanaka:{kokugo:87,suugaku:77}};
console.log(JSON.stringify(test,null,""));
consoleの結果（Google Chromeの検証で表示）
{
　”yamada”:{
　　”kokugo”:65,”suugaku”:72
　},
　”tanaka”:{
　　”kokugo”:87,”suugaku”:77
　}
}
その③
var test = {};
test[0] = {name:"yamada",kokugo:65,suugaku:72};
test[1] = {name:"tanaka",kokugo:87,suugaku:77};
console.log(JSON.stringify(test,null,""));
consoleの結果（Google Chromeの検証で表示）
{
 “0”:{
   “name”:”yamada”,”kokugo”:65,”suugaku”:72
  },
“1”:{
   “name”:”tanaka”,”kokugo”:87,”suugaku”:77
 }
}

JSONとは

つるぴよ
つるぴよ
「JSON」は「JavaScript Object Notation」の略だよ

JSONの命令文でできること

命令文 できること
JSON.parse(文字列 ) 文字列からJavaScriptのブログラムで使うオブジェクトを作れる
JSON.stringify(オブジェクト ) オブジェクトから文字列を作ることができる

「JSON.stringify(オブジェクト)」を使ってできた文字列は人間には読みにくいものが作成されます。

var test = {};
test.yamada = {kokugo:65,suugaku:72};
test.tanaka = {kokugo:87,suugaku:77};
console.log(JSON.stringify(test));
consoleの結果（Google Chromeの検証で表示）
{“yamada”:{“kokugo”:65,”suugaku”:72 },“tanaka”:{“kokugo”:87,”suugaku”:77}}
「JSON.stringify(オブジェクト,null,”インデントに使う文字列”)」とすることで人間が読みにくい文字列にすることができます。

consoleとは

つるぴよ
つるぴよ
F12ボタンで開発者ツールからプログラムの出力結果をみることができるよ！

プログラム中に「console.log（文字列）」と書くことで、コンソール欄に情報を出力できます。
「console.log(文字列１, 文字列２, 文字列３)のように「,」で区切ると複数の情報を出力できます。

console.log(1);
console.log("2.文字列","3.文字列","4.文字列");
console.log("配列",[5,6,7]);
console.log("オブジェクト",{a: 8,b: 9,c: 10});
出力結果
1
2.文字列 3.文字列 4.文字列
配列 (3) [5, 6, 7]
オブジェクト {a: 8, b: 9, c: 10}

for in文とは

つるぴよ
つるぴよ
「for in」文と「for」の違いをみていこう！

①「for」文の基本形

for (変数の初期値; 継続の条件; 変数の増減) {
 //ループ処理（何度も実行する処理）
 }

②「for in」文の基本形

 for(要素名を取得する変数 in オブジェクト) {
   //ループ処理（何度も実行する処理）
 }

「for in」文では「（〜）」の中に以下の2つを書きます
①オブジェクト
②オブジェクトの「要素名」を取得する変数

ループが１回行われるごとに「要素名」を取得する変数に、「要素名」が1つずつ代入されていきます。
全ての「要素名」を処理し終えた後ループを抜けます。

「要素名」は「キー」とも呼ぶので、「要素名」を「key」という「変数」で受け取ったりします。

＼実例／

var score = {"山田":65,"田中":78,"鈴木":87};
for(var key in score) {
  document.write(key + "" +score[key] + "<br>");
 }
結果
山田65
田中78
鈴木87
変数「key」に、オブジェクト「score」の「キー」が1つずつ代入されていきます。
そしてループ処理内で「score[key]」として、オブジェクトの要素の値を取得していきます。

例）テストの平均点を出す処理

学校のクラスのテストの平均点を出す処理を「for in」文で書いてみましょう！
山田さん：８０点、田中さん：７８点、鈴木さん：８３点、前田さん：８４点、木村さん：９２点とします。*小数点以下は切り捨てます

var score = {"山田":80,"田中":78,"鈴木":83,"前田":84,"木村":92};
var sum = 0;
var member = 0;
 for (var key in score) {
  sum +=score[key];
  member ++;
 }
var average = sum/member;
 document.write(Math.floor(average));
結果
８３

マンガJavaScript８話〜９話まとめ

ここまでで学んだことをまとめます

・配列について
・オブジェクトについて
・for in文について

Progateやドットインストールでも学んではいたけれど、こちらのマンガでは基礎的な部分から教えてもらえるので頭に入りやすかったです！

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次