codecademyで学習#第3話

毎週日曜日にプログラミングと報告をしているのですが忙しいのもあり報告することができませんでした。

なので少し遅めの報告になります。

今回は前回のオブジェクト指向の続きでオブジェクトの中身を出力する方法をやりました。

<a href="http://techhot.hatenablog.com/entry/codecademy2">codecademyで学習＃第2話 - TECH HOT</a>techhot.hatenablog.com

今回はContact Listと言うタイトルでした。

ある人の連絡先や名字、姓をオブジェクトの中にまとめてその中から要素を抽出する内容です。

Contact List1/8

ここではまず始めるにあたっていずれ作るであろうコードを見せられました。

What you'll be building

In this project, we'll combine our knowledge of objects and arrays to create a simple contact list. Then, using functions, we'll be able to log the entries in our contact list to the console, as well as search for a particular entry.

文字検索やその他のオブジェクトの知識をつけ以下のものが作れるようになるそうです。



var list = function(obj) {
  for(var prop in friends) {
    console.log(prop);
  }
};
var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
};
var search = function(name) {
  for(var prop in friends) {
    if(friends[prop].firstName === name) {
      console.log(friends[prop]);
      return friends[prop];
    }
  }
};

list(friends);
search("Steve");

最初見たときは、「は？」ってなりましたね。

Contact List2/8

まずは簡単な空のオブジェクトを作るコーナーです。

Creating your contact object

First, we need to start with an object to hold our friends.

問題ではfriendsオブジェクトをコンストラクタまたは、リテラル定義で作成してくださいとあったので、

var friends={};

簡単な宣言にしました。

Contact List3/8

次はオブジェクトの中にオブジェクトを配置する変態的なプログラムです。

Adding your friends

Good! Now let's add some friends to our friends object.
Each friend will need a name, phone number, and so on. We will use a new object for each friend so that we can remember their information! That's right, we'll have objects within objects!

friendsの中に空のオブジェクトを作りました。

var friends={
    bill:{},
    steve:{}
    };

Contact List4/8

ここからオブジェクトのなかに要素を追加していきました。

Adding properties

Next, let's add some properties to our friends. We'll want them to have a firstName, a lastName, and a number.

この説明にはfirstName,lastName,numberを持たせることができると記述されているので宣言はもちろんbill,steveの要素がそれになるんだろうなと予想して問題を見ていきました。

案の定firstName,lastName,nunmberをbill,steveに追加する内容だったのでサクサクコーディングできました。

var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
};

Contact List5/8

先ほどの要素に住所を追加していく問題です。

Tossing in an array

Let's add another property to each of our friends and set it equal to an array. Give each of your friends an address property, and break up their address into an array

address配列をオブジェクトの中に配置することを示準してますね。

var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
};

なるほど、だんだんわかってきました。

Contact List6/8

List 'em all!

Great work! Now let's add a couple of functions to help us go through our contacts.
The first function we'll create will be called list, and it will print out all the entries we have in our friends object. To do this, we'll want to use a bit of new syntax: a for/in loop.

はい！でました！！新しい関数for/in！！

また新しいのかよって一瞬なりましたが、for/inをforだけで表しにくい繰り返しを楽にする覚えておいて損はないものだったのでいやいやだがクリアしました。

var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']


};

var list = function(obj) {
  for(var prop in obj) {
    console.log(prop);
  }
};

list(friends);

ここで言うkeyはfor文で言うfor(i=1;i"<"M;i++){}のi=1とi++の部分の合わさったところなので

keyはオブジェクトの要素数まで加算されていくことになります。

なのでpropは変数ということになり別にpropの代わりにpantsにしてもいいいってことですね。

そしてobjはfriendsオブジェクトを指しています。

つまり、friendsオブジェクトの中のオブジェクト名を要素数まで順次出力していくってことですね。

bill,steveはそれぞれ4つの要素を持っているので出力にはbill,steve,bill,steveとなるわけです。

Contact List7/8

Search for a friend

The second function we'll add will be called search, and it will take a first name as an argument. It will try to match the first name it receives to any of the first names in our friends contact list. If it finds a match, it will log our friend's contact information (firstName, lastName, number, address) to the console.

オブジェクトの中にあるものを探せって言ってますね。

いや、でもどうやってやるねん？そうなる方もいるでしょう。そのような方のためにちゃんと書いてありました。

search関数を使うことで検索ができるそうです。

var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
};

var list = function(obj) {
  for(var prop in friends) {
    console.log(prop);
  }
};

var search = function(name) {
  for(var prop in friends) {
    if(friends[prop].firstName === name) {
      console.log(friends[prop]);
      return friends[prop];
    }
  }
};

list(friends);
search("Steve");

searchの使い方は上記のような感じになります。

そしてfor/inをうまく活用することで、オブジェクトの中身の検索をできてます。

search("Steve")でSteveを探すことを決め、friendsオブジェクトの中身のサブオブジェクトsteve.firstNmaeが検索のSteveと同じとき、そのfirstNameを持つfriendsオブジェクトを出力する流れになってます。

search関数が少々難しく感じそうです。

出力は

bill
steve
{ firstName: 'Steve',
  lastName: 'Jobs',
  number: '(408) 555-5555',
  address: [ '1 Infinite Loop', 'Cupertino', 'CA', '95014' ] }
{"firstName":"Steve","lastName":"Jobs","number":"(408) 555-5555","address":["1 Infinite Loop","Cupertino","CA","95014"]}