codecademyで学習＃第2話

前回に続き本日第二回目のプログラミングの記事になります。

夏真っ盛りの暑い中額に汗をかきせっせとプログラミングをするのは疲れました、、、

さすがに暑いのでアイス食べました。やはりアイスって最高の発明ですね！

techhot.hatenablog.com

前回は条件分岐ゲームを作りました。とても単純だったので覚えてます。

しかし今回はレベルが上がりオブジェクト指向の勉強に入りました。

オブジェクト指向はＣ言語を学んだ時に身についていたのでjavascriptではこう表現するのかとＣ言語を照らし合わせながら勉強していきました。

そして17個の学習要素のある大ボリュームとなってます。

「Arrays and Objects in JS」1/17

私が今回学んだ分野はオブジェクト指向と配列の分野です。

~Arrays and Objects in JS~Javascriptで配列とオブジェクトをやろうって感じですね。

まずは1/17です。

You know this!

You already know about arrays, so we won't spend a lot of time going over them. Go ahead and check out the past exercises on arrays if you need a refresher.

配列について学んできたのでこれ以上、配列について説明はしません。
もし配列について学びなおしたいなら過去の勉強を振り返りましょう。

大丈夫だったら先にすすんでいいよお。

って感じでこの章は始まります。

問題は、複数の要素を持つlistと呼ばれる配列を作ってくださいって内容だったので、

var list=["NEET","NEET2","NEET3"];

ニート３兄弟を配列で定義しました。

「Arrays and Objects in JS」2/17

ここでは配列の一部を出力するするところです。配列の復習ですね。

Access by offset

Good! Do you remember how to access an element of an array by offset (with the [] notation)? Check the Hint if you need help.

要素にアクセスする方法を思い出してね。と言っているので

var languages = ["HTML", "CSS", "JavaScript", "Python", "Ruby"];
console.log(languages[2])

このように宣言しました。
問題には、３つ目の要素を出力しろとあったので上記のように書きました。

「Arrays and Objects in JS」3/17

Array properties

Good work! If you remember, arrays have a property in common with strings: they can both use .length. When you call .length on an array, it returns the number of elements that array has.

また復習になります。ここまでしっかり復習の問題がでてくるのはありがたいのですが今のところ３つ目の問題まで復習なので正直しつこいわぁって思っちゃいます。

でもどんな人にもわかりやすい内容になっているからいいのかな？

まあどうでもいいです。

上記の英文の内容ですが配列の長さの出力方法を覚えているかい？って言ってます。

var languages = ["HTML", "CSS", "JavaScript", "Python", "Ruby"];
console.log(languages[2]);
console.log(languages.length);

こんな感じで宣言しました。あぁハーゲンダッツが食べたい...

「Arrays and Objects in JS」4/17

配列の添字分の繰り返しの復習するところです。

Iterating over an array

By combining all these ideas with a for loop, you can iterate over the languages array and print out each element in turn!

問題には配列の要素を繰り返し構文で出力してください。と記入してあったので、

var languages = ["HTML", "CSS", "JavaScript", "Python", "Ruby"];
for(var i=0;i<languages.length;i++){
    console.log(languages[i]);
    }

languages配列の中にある要素の数が5個なのでlanguages.lengthで5回分になるわけですね。

「Arrays and Objects in JS」5/17

Heterogeneous arrays

Now that we've reviewed some array basics, it's time to cover a little new ground.

First, it's not necessary for you to put the same type of data in an array! For instance, you don't have to have

var pronouns = ["I", "you", "we"];
var numbers = [1, 2, 3];

You can have a heterogeneous array, which means a mixture of data types, like so:

var mix = [42, true, "towel"];

タイトルにHeterogeneous arrays（異なる種類の配列）って書いてあるとおり、配列の中に入るものが数字、文字、演算子に固定しなくてもそれぞれのものが混ざり合った配列にしてもいいといった内容です。

var myArray=[1,true,"money"];

数字、演算子、文字を配列に格納しました。

「Arrays and Objects in JS」6/17

Arrays of arrays

Good! The next thing to know is that not only can you put a mixture of types in an array, you can even put other arrays inside arrays. You can make a two-dimensional array by nesting arrays one layer deep, like so:

var twoDimensional = [[1, 1], [1, 1]];

This array is two-dimensional because it has two rows that each contain two items. If you were to put a new line between the two rows, you could log a 2D object—a square—to the console, like so:

[1, 1]
[1, 1]

配列の中に配列を入れることをしてみようのコーナーです。

つまり二次元配列のことを言ってます。

この章を勉強して知ったのですがtwo-dimensional arrayって2次元配列のことなんですね。なんかかっこいいです。

単純に2次元配列を作るだけなので簡単でした。

var newArray=[[1,2,3],[4,5,6],[7,8,9]]

「Arrays and Objects in JS」7/17

Jagged arrays

Great work! That's a fine-looking multidimensional array you've got there. (Yours is nested once, so it's a two-dimensional array, but if you really wanted, you could put arrays inside arrays inside arrays for even more dimensions.)

Sometimes you want arrays that aren't as nice and even as your 3 x 3 two-dimensional array: you may have three elements in the first row, one element in the second row, and two elements in the third row. JavaScript allows those, and they're called jagged arrays.

この章では配列要素の数が違っても配列は成り立つことをレクチャーしてくれました。

例えば[1,2][3]といった2行目の配列が１つしか要素がなくても成り立つということです。

var jagged=[[1,2],[4]]; 
}

こんな感じで宣言しました。

てかタイトルがJugged arrays（ギザギザ配列）って面白いな（笑）

「Arrays and Objects in JS」8/17

ここでは休憩です。半分の章が終わったので休みます。

「Arrays and Objects in JS」9/17

Nouns and verbs together

Let's go back to the analogy of computer languages being like regular spoken languages. In English, you have nouns (which you can think of as "things") and verbs (which you can think of as "actions"). Until now, our nouns (data, such as numbers, strings, or variables) and verbs (functions) have been separate.

No longer!

Using objects, we can put our information and the functions that use that information in the same place.

You can also think of objects as combinations of key-value pairs (like arrays), only their keys don't have to be numbers like 0, 1, or 2: they can be strings and variables.

やっとオブジェクト指向に入ってきました。

オブジェクトを作る際キーと値のセットで考えていく段階になります。

キーは０、１はダメなのでしっかり文章で書くようにと念を押してます。

コードはあらかじめ右のところに入力されているのでそのコードを見ながら説明も見るとわかりやすいのではないでしょうか

var phonebookEntry = {};

phonebookEntry.name = 'Oxnard Montalvo';
phonebookEntry.number = '(555) 555-5555';
phonebookEntry.phone = function() {
  console.log('Calling ' + this.name + ' at ' + this.number + '...');
};

phonebookEntry.phone();

このようなコードが右に記入されているので説明も理解しやすいです。

「Arrays and Objects in JS」10/17

Object syntax

Did you see that? The phonebookEntry object handled data (a name and a telephone number) as well as a procedure (the function that printed who it was calling).

In that example, we gave the key name the value 'Oxnard Montalvo' and the key number the value '(555) 555-5555'. An object is like an array in this way, except its keys can be variables and strings, not just numbers.

Objects are just collections of information (keys and values) between curly braces, like this:

var myObject = {
    key: value,
    key: value,
    key: value
};

先ほどのコードで確認すると「キー」が「name」の場合、「値」が「'Oxnard Montalvo'」になると記述されてます。

つまり、nameが変数名で値が中の物ってことですね。

問題にはmeというオブジェクトを作れとあったので

var me={};

me.name='yamaga mitsumasa';
me.age=19;

と宣言しました。

またvar me=();とありますがこれはオブジェクト指向では基底クラス、その下にある宣言は全部派生クラスだと考えて問題ないようです。

「Arrays and Objects in JS」11/17

Creating a new object

Great work! You just created your very first object.

There are two ways to create an object: using object literal notation (which is what you just did) and using the object constructor.

Literal notation is just creating an object with curly braces, like this:

var myObj = {
    type: 'fancy',
    disposition: 'sunny'
};

var emptyObj = {};

When you use the constructor, the syntax looks like this:

var myObj = new Object();

This tells JavaScript: "I want you to make me a new thing, and I want that thing to be an Object.

You can add keys to your object after you've created it in two ways:

myObj["name"] = "Charlie";
myObj.name = "Charlie";

Both are correct, and the second is shorthand for the first. See how this is sort of similar to arrays?

新しいオブジェクト作る方法が記述されてます。

オブジェクト指向にはリテラルオブジェクトとコンストラクトオブジェクトがあるそうです。

ここでリテラルオブジェクトは

var myObj = {
    type: 'fancy',
    disposition: 'sunny'
};

var emptyObj = {};

このように宣言できて

コンストラクトオブジェクトは

var myObj = new Object();

と宣言できるそうです。

別に片方だけわかっているだけでもいいけど、宣言方法は人によって違うのでそこは臨機応変に対応できるよう両方やっとこうねってスタンスです。

私は正直リテラルオブジェクトのほうがやりやすかったです。

コンストラクトオブジェクトに比べてキーを何度も宣言しなくてもいいので楽です。

なんせ、値だけを書くだけでいので。

var me=new Object();

me["name"]="yamaga mitsumasa";
me["age"]=19;

ここではコンストラクトで宣言しました。

「Arrays and Objects in JS」12/17

ここでは実戦形式でオブジェクトを体感していきます。

Practice makes perfect

Great work! Let's make a few more objects, just for practice.

練習問題なのでさほど難しくありませんでした。

var object1=new Object();
object1.name="an";
var object2=new Object();
object2.name="mitu";
var object3=new Object();
object3.name="desu";

このように宣言。

「Arrays and Objects in JS」13/17

ここでは

～オブジェクト指向は何なのか理解
～オブジェクト構文
～オブジェクトを作る方法

をしっかり理解したか確認してくれているところです。

ただの確認ページなので次に進みましょう。

「Arrays and Objects in JS」14/17

Heterogeneous arrays

Let's warm up with some arrays! Let's make an array that's a veritable potpourri of data types.

配列の中にオブジェクトを挿入してみようかのコーナーです。

var object={
    name:"mitu",
    number:19
    };
var myArray=[1,true,"an",object];

こんな感じで宣言して終わり。ちょっと適当にかいちゃったぜ

「Arrays and Objects in JS」15/17

Multidimensional arrays

Good! Now let's create a 2D array. Not only that, but a 2D array that's jagged. Remember, that means it's an array of arrays, and its nested arrays aren't all the same length! For example:

異なる種類の配列第二弾になります。

ここでは前回やった配列のなかに数字、演算子、文字をランダムにいれても別に問題はないといったのではなく。

今回は、配列の中にオブジェクトをさりげなくほかのと混ぜて入れてみるやり方を学んでいきます。

異なる配列にオブジェクトまで混ぜてしまうなんて、まるで料理のできない女の子の発想のようですね。

冗談です...

var name=new Object();
var newArray=[[2,2,5],[name]];

配列にオブジェクトを入れる意味はこのコードからはまだわかりませんが、

たぶん次回やる分野でオブジェクトの中身を出力する方法レクチャーされると思うのでそこで改めて配列にオブジェクトを入れる意味が分かりそうです。

「Arrays and Objects in JS」16/17

Editing an existing object

Nice work! Now let's do a little work with objects. We'll start by modifying an existing one.

ここではオブジェクトの中に配列を混ぜてみる方法をやりました。

先ほどは配列の中にオブジェクトを入れるものでしたが今回は逆です。

var myObject = {
  name: 'Eduardo',
  type: 'Most excellent',
  interests: [1,"mitu"]
};

またもこれだけではまったく意味の分からないコードになってますね。次回の分野に期待です。

「Arrays and Objects in JS」17/17

ラストです。この章では自分で考えたオブジェクトを自由にコーディングができました。

Creating your own objects

You're almost there! Last step: forge your very own object in the fires of Mount JavaScript.

var myOwnObject={
    name:"anmitu",
    description:"I'm a human"
    }

上記の説明：名前anmitu
概要私は人間です。

やっぱり相変わらずのキ〇ガイコードだなと実感しますね。

また自由にコーディングできるのは楽しいです。

もっと、素晴らしいコード書けるよう勉強ですね！！

銀座プレミアムアイス