JavaScriptの学習２日目！【いせ日記】

今日もJavaScriptの学習をしていきたいと思います！

学習内容は下記の通りです。

昨日で結構進めたので、今日はなんか寂しいですね笑

学習手順

複数ファイルの扱い方とnpmパッケージ

最初に４つのファイルがあり、それぞれが連結している状態からはじめます。

コードの内容自体は昨日のクラスの部分とほとんど変わりません。

import { dog1, dog2 } from "./data/dogData";

console.log("---------");
dog1.info();
console.log("---------");
dog2.info();

上記のファイルでは、dat/dogData.js(一番したのファイル)からdog1とdog2の定数を渡されて、出力しています。

import { } from "./ファイル名"で他のファイルから複数の定数やクラスを受け取ることができます。

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}歳です`);
  }
}

export default Animal;

上記のファイルではクラスAnimalを定義していますね。ここは昨日の部分でやったので、説明を省きます。

注目のポイントは最後の一行ですね。

export default Animal;の部分です。

ここはAnimalクラスを他のファイルに渡す前に、JavaScriptではあらかじめexportする必要があります。

構文は　export default クラス;　となります。

この部分はRubyにはないものなので、正直めんどくさいです笑

import chalk from "chalk";
import Animal from "./animal";

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }

  info() {
    this.greet();
    console.log(chalk.yellow(`名前は${this.name}です`));
    console.log(chalk.bgCyan(`犬種は${this.breed}です`));
    console.log(`${this.age}歳です`);
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge}歳です`);
  }

  getHumanAge() {
    return this.age * 7;
  }
}

export default Dog;

上記のファイルでは、AnimalクラスをDogクラスが継承しているファイルです。この部分も昨日のクラスの部分でやったので、途中省きます。

注目する部分は、下の３つですね。

import chalk from "chalk";　

console.log(chalk.yellow(`名前は${this.name}です`));　

console.log(chalk.bgCyan(`犬種は${this.breed}です`));

これはchalkという誰かが作ったパッケージをimportしたものです。Rubyのgemみたいなものですね。

chalkは文字に色がつけられるパッケージです。

パッケージをimportする時は import 定数名　from "パッケージ名"; の入力が必要です。

出力するときには上記のように、console.log(chalk.色("文字列")); で出力ができます。

あとは先ほどのAnimalクラスをimport Animal from "./animal";でクラスを渡されていますね。

そのほかは昨日の部分と同じです。

import readlineSync from "readline-sync";
import Dog from "../class/dog";

const dog1 = new Dog("レオ", 4, "チワワ");

const name = readlineSync.question("名前を入力してください: ");;

const age = readlineSync.questionInt("年齢を入力してください: ");

const breed = readlineSync.question("犬種を入力してください: ");

const dog2 = new Dog(name, age, breed);

export { dog1, dog2 };

このファイルではDogクラスを継承していますね。

ただ、importの部分で一つだけ違う部分があります。

import Dog from "../class/dog"; の ../の部分ですね。

これはDogファイルがdata.Dogファイルとは違うフォルダからきているため、こうなっています。

下記の図がわかりやすく説明されています。

つまり、違うフォルダからクラスや定数が渡される場合は上記のようなコードになるということです。

readlineSyncはコンソールから値を入力できるようにするためのパッケージです。

下の動画を見るとわかるように、質問に対し入力された値が最終的に出力されるようになるパッケージです。

構文はreadlineSync.question("質問文");です。

ageの部分だけ少し違いますね。

readlineSync.questionInt("質問文");です。

これは年齢のように整数だけ入力して欲しい時だけ、最後にIntを入れます。

コードを実行すると下記の画像のようになりますね。

これでこのコースは終わりです！

配列を操作するメソッド

const numbers = [1, 2, 3, 4];

 #定数numbersにmapメソッドを使って配列を作り、定数doubledNumbersに代入
const doubledNumbers = numbers.map((number) => {
  return number*2;
});

　#定数doubledNumbersを出力
console.log(doubledNumbers);


const names = [
  {firstName: "Kate", lastName: "Jones"},
	{firstName: "John", lastName: "Smith"},
	{firstName: "Denis", lastName: "Williams"},
	{firstName: "David", lastName: "Black"}
];

 #定数namesにmapメソッドを使って新しい配列を作り、定数fullNamesに代入
const fullNames = names.map((name) => {
  return name.firstName + name.lastName;
});

　#定数fullNamesを出力
console.log(fullNames);

上記のコードでは、mapメソッドについてやっていきます。

mapメソッドとは、配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッドです。

Rubyとかでもよく使うので、新しい視点から復讐できますね。

構文は、　const 定数 = 配列の定数.map((引数) => {処理;});　というふうになります。

オブジェクト要素の場合は、 const 定数 = 配列の定数.map((オブジェクト) => {オブジェクトのプロパティ;});って感じですね。

上のdoubledNumbersでは、numberを引数にして配列を2倍にしたものを出力していますね。

下のfullNamesでは、mapでfirstNameプロパティとlastNameプロパティを繋げる処理をしていますね。

最後はどちらとも定数を出力してあげることで、以下のように出力されます。

これでJavaScriptの学習は終了です！！

まとめ【いせ日記】

以上で、ProgateでのJavaScriptの学習は終了です！

まぁ全体的に、Rubyよりもいろいろと書かないといけないコードが多いので、若干手間がかかるっていうのが個人的な感想です。

ただ、Rubyを一通り学んでからJavaScriptをやってみると、Rubyの復讐にもなるなと思いましたね！

二つをくらべながら学習すると両方の理解度が上がるので、比べて学習するのがおすすめです。

明日からはVue.jsの開発環境の構築を始めていきたいと思います。

Vue.jsに関しては全く触ったことがないので、出来るかどうか不安です。。笑

明日もこうして学習内容をアップしますので、明日もよろしくお願いします！

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