JavaScriptの学習【いせ日記】

次のポートフォリオはインスタグラムのクローンアプリを作りたいなーと考えています。

インスタグラム のクローンを作りたいと思った理由は、まだjavascriptの学習をあまりしたことがなくて、javascriptを使ったポートフォリオを一つ作っておきたいと思ったからです🦸‍♂️

Youtubeとか見てても、フロントエンド出来ないと就職厳しいっていう意見がありますし。。

ということで、今日と明日でjavascriptを学んで、明後日からインスタグラム のクローンアプリに移りたいと思います！

まず、javascriptを何で学ぶのかですが、やはりprogateですよね。

理由としては、シンプルに説明がわかりやすいからですね。

図とかが直感的で見やすいので、やっていてストレスが少ないです。

それでは、今日はProgateでの学習について書いていきたいと思います！

こんな感じで今日もやっていきたいと思います！

ただ学習内容については話しても面白くないので、Rubyとの違いとかを交えながら書いていきます。

学習手順

javascript基本的な文法の学習

const rank = 5;

switch (rank) {
  case 1:
    console.log("金メダルです！");
    break;
  case 2:
    console.log("銀メダルです！");
    break;
  case 3:
    console.log("銅メダルです！");
    break;
  default:
    console.log("メダルはありません");
    break;
}

上記のはjavascriptのSwitch文っていうものです。

Rubyでいうとif文ですね！javascriptでもif文はありますが、Switch文の方がシンプルでわかりやすいですね。

コードを上から見ていくと、Rubyistならまずconstに目がいくはずです。constってナンジャ。。

constとは変数を定義するときに使い、再代入させたくない場合に使用します。上記で言うと、rankは5から変化しないということですね。

caseはRubyでいうとifやelsifにあたるものです。パッと見てわかりやすくて使いやすそうですよね。

console.logはputsやpにあたるものです。Rubyと比べると、いちいち長いな〜って思ってしまいますね。学習してて思いますが、javascriptの文は基本長いですね。。また、基本的に行末に；(セミコロン)が入ります。これもいちいちつけないとエラーが出るので、ちょっとめんどくさいです。。そう思うとRubyは楽だなって思います。

defaultはifのelseにあたる部分ですね。英語のin default of A(Ａがない場合には〜）というイディオムから来てるんだなって感じですね。

まぁここまでならRubyをやっている方なら簡単ですね。

次いってみましょう。

javascript繰り返し処理

const cafe = {
  name: "Progateカフェ",
  businessHours: { 
    opening: "10:00(AM)",
    closing: "8:00(PM)"
  },
  menus:['コーヒー','紅茶','チョコレートケーキ']
  
};

console.log(`店名: ${cafe.name}`);
console.log(`営業時間:${cafe.businessHours.opening}から${cafe.businessHours.closing}`);
console.log(`----------------------------`);
console.log("おすすめメニューはこちら");

#for文を用いて配列menusの中身を表示させてます。
for (let i = 0; i < cafe.menus.length; i ++){
  console.log(cafe.menus[i]);
}

コードを上からみていきます！上のコードは店名・営業時間・メニューを出力しようとしています。

cafeという定数にnameとbusinessHoursというプロパティがありますね。

上記のコードでは、cafeというオブジェクトのbusinessHoursプロパティに対応する値に、オブジェクトを用いています。つまり、cafeのプロパティにさらにプロパティを作れるってことですね。Rubyではみたことないですが、javascriptだとこんなこともできるんですね(自分の勉強不足で実はRubyにもあるかもしれないですが笑)。

また、オブジェクトの中にもmeunsの配列も作っています。

呼び出し方がまたRubyとは結構異なりますね。文字列に定数を含む場合、文字列全体をバッククォーテーション（`）で囲む必要があります。定数は上記のように${}で囲む必要があります。オブジェクトのnameを呼び出すには${オブジェクト名.プロパティ}で呼び、businessHoursを呼び出すには${オブジェクト名.プロパティ.プロパティ}で呼び出す必要があります。

オブジェクトmenusの配列を全て呼び出すには、for文を使ってfor (let i = 0; i < cafe.menus.length; i +1)で呼び出します。Rubyではeach文ですが、javascriptではfor文を使うそうです。やっぱりjavascript長いな〜。。

Rubyと比べると繰り返し分は若干複雑で長いですね笑

javascriptアロー関数

const number1 = 103;
const number2 = 72;
const number3 = 189;

#getMax関数を定義
const getMax = (a, b, c) => {
  let max = a;
  
  if (b > max) {
    max = b;
  }
  if (c > max) {
    max = c;
  }
  
  return max;
};

#出力
const max = getMax(number1, number2, number3);
console.log(`最大値は${max}です`);

アロー関数ってなんだってRubyistなら思いますよね。聞いたことがない。。

簡単にいうと、関数の定義の仕方がシンプルになった関数の書き方って感じですかね。ちなみに書き方は、const(let ) 関数名 = (引数) =>です。これをアロー関数というらしいです。

それでは上から見ていきましょう。上のコードはnumber1~3の最大値を出力しようとしています。

getMax関数を定義して、引数に(a,b,c)が入っていますね。Rubyにするとdef getMax(a,b,c)です。

関数の中身を見ていきます。

max変数を定義してaを代入、aよりbが大きいときbがmax変数に代入され、bよりcが大きいときmax変数にcが代入され、それ以外の時はaが代入されたmax変数が戻り値として出力されるようになります。

出力を見ていくと、getMax関数を使い、number1~number3の最大値を取得し、最大値がconsole.log(最大値は${max}です);で出力されています。

ここでは関数の定義の仕方が若干Rubyと比べると違うかなという感じですかね。Rubyをやっていればそんなに難しくはないと思いますが、初心者からするとちょっと複雑ですかね。コードがなんか直感的じゃないというただの個人的な感想です。

javascript クラス

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  info() {
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

class Dog extends Animal {
    constructor(name,age,breed){
      super(name,age);
      this.breed = breed;
    }
  
  info() {
    this.greet();
    console.log(`名前は${this.name}です`);
    // 「犬種は〇〇です」と出力してください
    console.log(`犬種は${this.breed}です`);
    
    console.log(`${this.age}歳です`);
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge}歳です`);
  }
  
  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("レオ", 4,'チワワ');
dog.info();

最後にクラスについてやっていきます！最後は長いですね。

コードを上から見ていきます。上記のコードはクラスAnimalを作りDogクラス(子クラス)を定義し、infoメソッドを上書きして犬の名前と年齢と犬種を出力するようにしています。

クラスにはコンストラクタ(constructor)と呼ばれる機能が用意されています。コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能です。クラスの中括弧 { } 内に「constructor() { }」と記述され使用されます。ここに書いた処理はインスタンスが生成されたら実行されます。上でいうと、new Dog("レオ", 4,'チワワ');ここで実行されるということですね。

上記の親クラスに関してはここではあまり触れず子クラス(Dogクラス)について触れていきます。

class Dog extends Animal {}では親クラスから子クラスへ機能を継承します。Rubyではclass クラス名 < 継承したいクラス名のように記述しますが、javascriptではclass クラス名 extends 継承したいクラス名となります。やっぱりjavascriptはRubyよりも多く文字が入りますね。

コンストラクタの引数としてname,age,breedが順に受けられるようにしてあります。superでは親クラスのコンストラクタを呼び出し、引数name,ageが渡されます。Dogクラスのコンストラクタ中では親クラスに引数breedがないため、this.breedに引数breedを代入しています。ここでthisとはRubyでいうselfが入ります。つまり、this.breedのthisにはDogが入るということです。

infoメソッドではAnimalクラスのメソッドを子クラスが上書きするようになっています。そのため、子クラスのメソッドが優先されて実行されるようになります。

const dog = new Dog("レオ", 4,'チワワ');
dog.info();

この部分はDogインスタンスに新しくチワワ(breed)を渡している部分ですね。そして、下記のinfoメソッドでname,age,breedの３つのプロパティが出力されていますね。

info() {
this.greet();
console.log(`名前は${this.name}です`);
// 「犬種は〇〇です」と出力してください
console.log(`犬種は${this.breed}です`);

console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}

クラスなどはRubyをやっていれば、ほとんど同じだなと思いますが、やっぱりコードの量がRubyより多いですね笑

また、継承がファイルを分けなくてもできるというのも違いですね。　ファイルを分けなくてもRubyも継承できますね笑

まとめ【いせ日記】

以上が今日の学習内容です。

今回javascriptを学び始めて思ったのが、Rubyを学んだ時よりもスラスラ頭に入ってきました。

ほとんどやっていることはRubyと変わらないので、明日には一通りコースを終えることが出来そうです。

エンジニアのYoutubeの動画とかよく見させていただいていますが、ほとんどの方が一つの言語をある程度習得すれば、あとの言語の習得は簡単だという意見が多くあります。今回の学習で、その意味が実感出来た感じがします。Ruby頑張ってよかったです☀️

最後まで読んでいただきありがとうございました🙇‍♂️

また明日もよろしくお願いします！