Google

TECHHOT

色々書いてます。プログラミングのことも使えるかなと思ったら書きます。個人でブログとは関係なく運営しているワークショップのことについてもいずれはまとめて書いていきます。

スポンサーリンク

codecademyで学習#第3話

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

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

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

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"]} 

になりました。

※*Contact List8/8は確認して終わりなので記載なし。

まとめ

今回学んだ大事なところはfor/inとsearch関数です。

この使い方を忘れるとオブジェクトの中身を出力できなくなるので欠かせないアイテムでしょう。


以上で終わりになります。今回は毎週日曜日報告するはずだったものが少し遅れてしまう形になってしまいました。

自分で決めたことをしっかり守れなかったことがつらく感じます。

次からは気をつけます!同じようなことはしないようもっと時間に余裕を持って先に先に行動していきたいですね。


この記事が面白いと思ったスターかブックマークをしてください。コメントも受け付けてます。

グラフ理論入門 基本とアルゴリズム

グラフ理論入門 基本とアルゴリズム

広告を非表示にする