JavaScript

console.log();

例
console.log("りー");     表示結果→りー
console.log(15);         表示結果→15

  //一行 または/*複数行*/

例
//一行コメントアウト

/*
こうすると複数行
コメントアウト
*/

+,-,*,/,%
+= 1 ⇒ ++
-= 1 ⇒ -- 
number + 10   ⇒number += 10 

例
console.log(1+5);     →6
console.log("1+5");   →1+5

例2
150円の物を12個、13個買ったとき（税込み）の計算式
const price = 150;
const rate = 1.1;  ←税額
console.log(price * 12 * rate +"円");  ←1980円
console.log(price * 13 * rate +"円");  ←2145円

"○○" + "○○"

例
console.log("日本の" + "東京");  →日本の東京

console.log("日本の" + "東京");  →日本の東京

let 変数名 = "代入する値";

例
let name = "Ariel";
let number = 15;

例2
let price;

console.log(変数名);

例
let name = "Ariel";
console.log(name);  →Ariel

変数名 + "○○";

例
let name = "Rii";
console.log(name + "さん");  →Riiさん

例2
let number = 2;
console.log(number + 5);     → 7

変数名 = "新しい値";

例
let name = "Rii";
console.log(name);    →Rii
name = "Ariel";       ←値を更新した
console.log(name);    →Ariel

const 定数名 = 値;

例
const language="フランス語";

console.log(定数名);

例
const language="フランス語";
console.log(language);              →フランス
console.log(language+"を話せます");  →フランス語を話せます

`${name}`

例
const name = "たける";
const age = 14;
console.log(`${name}は${age}歳です`);  →たけるは14歳です

例2
console.log(`～～を～～個買うと${price*quantity}円です`);

if(条件式){
  条件が成り立つ時に実行させる処理;
}

例
const number = 12;
if(number > 10){
  console.log(`${number}は10より大きいです`);    →12は10より大きいです
}

true
false

a<b
a<=b
a>b
a>=b

a == b    →true
a != b    →false

例
const number = 12;の時に
console.log(number ==12);と
console.log(number =="12");は同じ認識になってしまう

a === b    →true
a !== b    →false

例
const number = 12;の時に
console.log(number ==12);と
console.log(number =="12");は違う認識になる

if(条件式){
  条件が「true」の時の処理
}else{
  条件が「false」の時の処理
}

例
const number =7;
if(nuber >10){
   console.log("numberは10より大きいです");
}else{
   console.log("numberは10以下です");        →numberは10以下です
}

if(条件式１){
    条件式1が「true」の時の処理
}else if(条件式２){
    条件式1が「false」、条件式2が「true」の時の処理
}else{
    どの条件式も「false」の時の処理
}

例
const number = 7;
if(number >10){
    console.log("numberは10より大きいです");
}else if(number >5){
    console.log("numberは5より大きいです");    →numberは5より大きいです
}else{
    console.log("numberは5以下です");
}

x>10 && x<30      →true
x>10 && x<20      →false

x<10 || x<30　　→true
x<10 || x>30　　→false

例
const number = 31;
if(number >= 10 && number < 100){
  console.log("numberは2桁です");   →numberは2桁です
} 

const color = "赤";
switch(color){
case"赤":
    console.log("ストップ");  →ストッ プ
break;
case"青":
    console.log("進む");
break;
}
case"黄":
    console.log("要注意");
break;
}

const color = "黒";
switch (color) {
    case "赤":
        処理
    break;
    case "黄":
        処理
    break;
    default:
        console.log("在庫の準備がありません");  →在庫の準備がありません
    break;
}

while(条件式){
  処理
}

例
let number = 1;
while(number <= 100){
  console.log(number);
  number += 1;
}

for(変数の定義;条件式;変数の更新){
  処理
}

例
for(let number =1; number <= 100; number++){
 console.log(number);
}

例2
1から100の数字を出力し、3の倍数の時は「3の倍数です」と出力してください。
for (let number=1; number<=100;number++) {
　if(number % 3===0){
 　   console.log("3の倍数です");
　}else{
    　console.log(number);
　}
}

例：1から100の数字を出力し、3の倍数の時は「3の倍数です」と出力してください。
for (let number=1; number<=100;number++) {
　if(number % 3===0){
 　   console.log("3の倍数です");
　}else{
    　console.log(number);
　}
}

[値１,値２,値３]

例
["apple","banana","orange"]
[32,43,65]

console.log(定数名)

例
const fruits = ["apple","banana","orange"];
console.log(fruits);             →  ["apple","banana","orange"]

配列[インデックス番号]

例
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);  →  apple

定数名[インデックス番号] = "新しい値"

例
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);  　→  apple

fruits[0] = "grape";　　　　←値を更新した
console.log(fruits[0]);    →grape

const fruits = ["apple","banana","orange"];
for(let i=0;i<3;i++){
    console.log(fruits[i]);
}　　　　　　　　　　　　　　　　→apple
   　　　　　　　　　　　　　　　 banana
　　　　　　　　　　　　　　　    orange

const fruits = ["apple","banana","orange"];
for(let i=0; i<fruits.length ;i++){
    console.log(fruits[i]);                 →apple banana orange
}

{プロパティ名１:値1,プロパティ名2:値2,プロパティ名3:値3}

例
{name: "手裏剣", price: 300};

console.log(オブジェクトを代入した定数名.プロパティ名)

例
const item = {name: "手裏剣", price: 300};
console.log(item.name);  →  手裏剣

オブジェクトを代入した定数名.プロパティ名 = 新しい値

例
const item = {name: "手裏剣", price: 300};
item.price=500;
console.log(item.price);  →  500

const items =[
    {name: "手裏剣", price: 300},
    {name: "まきびし", price: 600}
];
console.log(items[0]);  →   {name: "手裏剣", price: 300}
console.log(items[0].price);  →  300

const characters = [
    {name: "村人A", age: 14},
    {name: "村人B", age: 100},
    {name: "村人C", age: 5},
];
for (let i = 0; i < characters.length; i++) {
    console.log("--------------------");
    const character = characters[i];
    console.log(`${character.name}です`);
    console.log(`年齢は${character.age}歳です`);
}      →ーーーーーーーーーーーーーーーー
      村人Aです
      年齢は１４歳です
      ーーーーーーーーーーーーーーーー
      村人Bです
      年齢は１００歳です
      ーーーーーーーーーーーーーーーー
      村人Cです
      年齢は５歳です

if (定数名.プロパティ === undefined) {～

例
const characters = [
    {name: "村人A", age: 14},
    {name: "村人B", age: 100},
    {name: "村人C", age: 5},
    {name: "村人D"}
];
for (let i = 0; i < characters.length; i++) {
    console.log("--------------------");
    const character = characters[i];
    console.log(`${character.name}です`);
    if (character.age === undefined) {
        console.log("年齢は秘密です");
    } else {
        console.log(`年齢は${character.age}歳です`);
    }
}
     →ーーーーーーーーーーーーーーーー
      村人Aです
      年齢は１４歳です
      ーーーーーーーーーーーーーーーー
      村人Bです
      年齢は１００歳です
      ーーーーーーーーーーーーーーーー
      村人Cです
      年齢は５歳です
     ーーーーーーーーーーーーーーーー
      村人Dです
      年齢は秘密です

const character ={
    name:"村人A",
    age:14,
    favorite:{
        food:"ラーメン",
        sports:"卓球",
        color:"青"
    }
}

const character ={
    name:"にんじゃわんこ",
    favorite:{
        food:"ラーメン",
        sports:"卓球",
        color:"青"
    }
}
console.log(character.favorite);        →{food:"ラーメン"}
console.log(character.favorite.food);   →ラーメン

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

function 関数名(){
  まとめたい処理
};

例
const introduce = function(){
    console.log("こんにちは");
    console.log("私はりーです");
};

関数名();

例
const introduce = function(){
    console.log("こんにちは");
    console.log("私はりーです");
};
introduce();      →こんにちは  私はりーです

() =>

例
const introduce = function(){
    ↓
const introduce = ()=>{

const 定数名 = (第一引数名,第二引数名)=>{
  処理
};

例
const introduce = (name,age)=>{
  console.log(`私は${name}です`);
  console.log(`私は${age}歳です`);
};

関数を代入された定数名(引数に代入する値);

例
const introduce = (name,age)=>{
  console.log(`私は${name}です`);
  console.log(`私は${age}歳です`);
};
introduce("りー",20);  →私はりーです
                        私は20歳です

return 戻したい値;

例
const add = (a,b)=>{
  return a + b;
};	
const sum = add(1,3);
console.log(sum);   →４

例２
const add = (a,b)=>{
  return a + b;                ←実行され、処理はここで終了する。
  console.log("計算しました");  ←ここまでは実行されない
};

const introduce = ()=>{
  const name="りー";
  console.log(name);  ←ここは関数内だから実行される
};
introduce();
console.log(name);    ←ここは関数外だから実行されない

例
class Menu{
　constructor(name,price,comment){
　　this.name=name,
　　this.price=price,
　　this.comment=comment,
　}
  greet() {
    console.log("いらっしゃいませ！");
    console.log("${this.name}をぜひご注文下さい！");
  }
　info(){
    this.greet();
    console.log(`メニュー名: ${this.name}`);
    console.log(`価格: ${this.price}`円); 
    console.log(`一言: ${this.comment}`です！);
  }
}
const menu1 = new Menu("カルボナーラ",700,"濃厚クリームと卵");    ←定数menuにMenuインスタンスを代入（インスタンス化）
const menu2 = new Menu("ウニいくら乗せパスタ",1200,"贅沢なウニといくら"); 

console.log(`メニュー名: ${menu1.name}`);  　　 →メニュー名:カルボナーラ
console.log(`価格: ${menu1.price}`円);    　　　→価格:700円
console.log(`一言: ${menu1.comment}`です！);    →一言:濃厚クリームと卵です！
menu.greet();　　　　　　　　　　　　　　　　　　　→いらっしゃいませ！
　　　　　　　　　　　　　　　　　　　　　　　　　　　カルボナーラをぜひご注文下さい！
console.log(`メニュー名: ${menu2.name}`);  　　 →メニュー名:ウニいくら乗せパスタ
console.log(`価格: ${menu2.price}`円);    　　　→価格:1200円
console.log(`一言: ${menu2.comment}`です！);    →一言:贅沢なウニといくらです！
menu.greet();　　　　　　　　　　　　　　　　　　　→いらっしゃいませ！
　　　　　　　　　　　　　　　　　　　　　　　　　　　ウニいくら乗せパスタをぜひご注文下さい！
--
menu.info();                                   →いらっしゃいませ！
　　　　　　　　　　　　　　　　　　　　　　　　    カルボナーラをぜひご注文下さい！
　　　　　　　　　　　　　　　　　　　　　　　　　　メニュー名:カルボナーラ
　　　　　　　　　　　　　　　　　　　　　　　　　　価格:700円
　　　　　　　　　　　　　　　　　　　　　　　　　　一言:濃厚クリームと卵です！

class クラス名{
　まとめたいデータ構造
}

例
class Menu{
　
}

new クラス名(クラスに投げる引数、引数、、、)

例
const menu1 = new Menu("カルボナーラ",700,"濃厚クリームと卵");    ←定数menuにMenuインスタンスを代入（インスタンス化）
const menu2 = new Menu("ウニいくら乗せパスタ",1200,"贅沢なウニといくら"); 

constructor(受け取って使用する引数,引数,,){
　　インスタンス（クラスを使って作ったオブジェクト）生成時に実行させる処理
}

例
constructor(name,price,comment){
　　this.name=name,
　　this.price=price,
　　this.comment=comment,
}

constructor(name,price,comment){
　　this.name=name,
　　this.price=price,
　　this.comment=comment,
}

console.log(`メニュー名: ${menu1.name}`);  　　 →メニュー名:カルボナーラ
console.log(`価格: ${menu1.price}`円);    　　　→価格:700円
console.log(`一言: ${menu1.comment}`です！);    →一言:濃厚クリームと卵です！
console.log(`メニュー名: ${menu2.name}`);  　　 →メニュー名:ウニいくら乗せパスタ
console.log(`価格: ${menu2.price}`円);    　　　→価格:1200円
console.log(`一言: ${menu2.comment}`です！);    →一言:贅沢なウニといくらです！

メソッド名() {
　行いたい処理
}

例
greet() {
    console.log("いらっしゃいませ！");
    console.log("${this.name}をぜひご注文下さい！");
  }

プロパティ呼び出し
console.log(インスタンスが代入された変数名.呼び出したいプロパティ名)

メソッド呼び出し
インスタンス.メソッド名()

例
console.log(`メニュー名: ${menu1.name}`); 　　　　　→カルボナーラ
menu.greet();　　　　　　　　　　　　　　　　　 　　　→いらっしゃいませ！
　　　　　　　　　　　　　　　　　　　　　　　　　　　　カルボナーラをぜひご注文ください！

class Menu{
　constructor(name,price,comment){
　　this.name=name,
　　this.price=price,
　　this.comment=comment,
　}
  greet() {
    console.log("いらっしゃいませ！");
    console.log("${this.name}をぜひご注文下さい！");
  }
　info(){
    this.greet();
    console.log(`メニュー名: ${this.name}`);
    console.log(`価格: ${this.price}`円); 
    console.log(`一言: ${this.comment}`です！);
  }
}
const menu1 = new Menu("カルボナーラ",700,"濃厚クリームと卵");
menu.info();                                   →いらっしゃいませ！
　　　　　　　　　　　　　　　　　　　　　　　　    カルボナーラをぜひご注文下さい！
　　　　　　　　　　　　　　　　　　　　　　　　　　メニュー名:カルボナーラ
　　　　　　　　　　　　　　　　　　　　　　　　　　価格:700円
　　　　　　　　　　　　　　　　　　　　　　　　　　一言:濃厚クリームと卵です！

class 作りたいクラス名 extends 継承したいクラス名{
}

例
class Dog extends Animal{
    ←Animalクラスを継承
}

例２
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 {
}
const animal = new Animal("レオ", 3);
animal.info();　　　　→こんにちは
　　　　　　　　　　　　名前はレオです
　　　　　　　　　　　　３歳です

例
class Dog extends Animal{
	getHumanAge(){   
	 return this.age *7;
	}
}
const dog =new Dog("レオ",4);
const humanAge = dog.getHumanAge();
console.log(humanAge);    →２８

例
class Dog extends Animal{
	getHumanAge(){   
	 return this.age `7;
	}
}
const animal =new Animal("レオ",4);
const humanAge = animal.getHumanAge();   ←この場合、getHumanAgeメソッドはDogクラスにしかないのでエラーになる


例？？
例
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 {
  getHumanAge() {
    return this.age * 7;
  }
}
const dog = new Dog("レオ", 4);
dog.info();

// 定数humanAgeを定義し、定数dogに対してgetHumanAgeメソッドを呼び出した値を代入してください
const humanAge = dog.getHumanAge();

// 「人間年齢で〇〇歳です」と出力してください
console.log(`人間年齢で${humanAge}歳です`);


→こんにちは
名前はレオです
４歳です
人間年齢で２８歳です

例
const dog = new Dog("レオ", 4);
dog.info();

class Animal{
  info(){      ←こっちではなく、、
  }
}
class Dog extends Animal{
	info(){       ←こっち（子クラス）のinfoメソッドが呼び出される
	}
}

class 子クラス extends 親クラス {
	constructor(){
	  super()        ←1行目にsuperが必要
		子クラスのコンストラクタ処理
	}
}

(animal.js内↓）
class Animal{
}
export default Animal;     ←Animalクラスを他ファイルでも使用可能にする設定

(dog.js内↓）
import Animal from "./animal"; 

例
(sample1.js内↓）
const text="Hello World";
export default text;       ←textをsample2にエクスポートする記述

(sample2.js内↓)
import text from "./sample1";
console.log(text);         →Hello World

例
(script.js内）
変更前
  import Dog from "./dog";
  const dog = new Dog("レオ",4,"チワワ");
  dog.info();

↓  ↓

変更後
(dogData.js内）
  import Dog from "./dog";
  const dog = new Dog("レオ",4,"チワワ");
  export default dog;

(script.js内）
import dog from "./dogData";
dog.info();

(dogData.js)
const dog = new Dog("レオ",4,"チワワ");
export default dog;               ←dogをエクスポート

(script.js)
import doggy from "./dogData";    ←doggyとdogがエクスポート・インポートで名前が違くてもOK
doggy.info();

(dogData.js)
const dog1 = new Dog("レオ",4,"チワワ");
export{dog1};

(script.js)
import {dog1} from "./dogData";
dog1.info();

(dogData.js)
const dog1 = new Dog("レオ",4,"チワワ");
const dog2 = new Dog("ベン",2,"プードル");
export{dog1,dog2};

(script.js)
import {dog1,dog2} from "./dogData";
dog1.info();
dog2.info();

(script.js内）
import 定数名 from "パッケージ名";

例
import chalk from "chalk";

import readlineSync from "readline-sync";
readlineSync.question("名前を入力してください");  →名前を入力してください

import readlineSync from "readline-sync";
const name=readlineSync.question("名前を入力してください→");
console.log(`${name}と入力されました`);
  →名前を入力してください→アリエル
  →アリエルと入力されました

const name=readlineSync.question("名前を入力してください→");
const age=readlineSync.questionInt("年齢を入力してください→");

例
(dogData.js)
// readline-syncをインポートしてください
import readlineSync from "readline-sync";

import Dog from "../class/dog";

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

// readlineSync.questionを使って書き換えてください
const name = readlineSync.question("名前を入力してください: ");

// readlineSync.questionIntを使って書き換えてください
const age = readlineSync.questionInt("年齢を入力してください: ");

// readlineSync.questionを使って書き換えてください
const breed = readlineSync.question("犬種を入力してください: ");

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

export { dog1, dog2 };


→名前を入力してください:
  （入力したら次の質問が表示される）
→年齢を入力してください:
  （入力したら次の質問が表示される（数字出ないとエラー表示される）
→犬種を入力してください: 
  入力したら下記が表示される
  こんにちは
  名前はaです
  犬種はaです
  １歳です
  人間年齢で７歳です
（ちなみに他ファイルは下記な感じ）
(script.js)
import { dog1, dog2 } from "./data/dogData";

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

(script.js)
import { dog1, dog2 } from "./data/dogData";

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

(dog.js)
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.js)
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;

const numbers = [1,2,3];
console.log(numbers);      → [1,2,3]
numbers.push(45);
console.log(numbers);      → [1,2,3,45]

const numbers = [1,2,3];
numbers.forEach((number)=>{
  console.log(number);
});    → 1 2 3

const numbers = [1,3,5,7];
const foundNumber=numbers.find((number)=>{
	return number>3;
});
console.log(foundNumber);	→５

const numbers = [1,3,5,7];
const filteredNumbers=numbers.filter((number)=>{
	return number>3;
});
console.log(filteredNumbers);	→[5,7]

const numbers=[1,2,3];

const doubledNumbers=numbers.map((number)=>{
	return number*2;
});
console.log(doubledNumbers);      →[2,4,6]        ←配列numberの全ての要素を2倍を実行し、2倍された新しい配列が作成され、定数doubledNumbersに代入したのが表示された

const printWanko = () => {
  console.log("にんじゃわんこ");
};
const printHitsuji = () => {
  console.log("ひつじ仙人");
};
const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};
call(printHitsuji);    →コールバック関数を呼び出します。
                        ひつじ仙人

const a = ()=>{      ←関数a
  処理
}
const b =(引数名)=>{   ←関数b
  処理
}
b(a);                ←関数bを呼び出す際、
                      関数bの引数に関数a（別の関数）を渡す
                      この時、引数に渡される関数(関数a)を
                      「コールバック関数」と言う
                        関数は、関数名の後に()を付けると関数を呼び出し、
                        ()を付けないと関数そのものをさすことになる。
                        そのため、コールバック関数で関数まるごと渡すときは()を付けない(b(a);)。

              例
              const a = () => {             ←関数aを定義
                console.log("あいうえお");
              };
              const b = (callback) => {    ←関数bを定義し、コールバック関数で来た関数aをcallbackという引数名に変換して関数b内で関数aを使用している。
                console.log("かきくけこ");
                callback();
              };
              b(a);                        ←関数bを呼出すが、関数bの引数に関数aを渡して関数b内で使用させる。
                      →かきくけこ
                      あいうえお

    関数を呼ぶ()内に、呼ぶ関数内で使いたい関数を
    その場で書いて渡して使用させちゃう。
    
    const call(callback)=>{              ←関数callを定義（引数で何かを受ける準備をcallback名でしてある）
      console.log("あいうえお");
      callback();
    }
    call(()=>{                           ←関数callを呼出す。その時に、呼出す()内に関数call内で使わせたい関数を書いちゃう。
      console.log("かきくけこ");
      });
                                          →あいうえお
                                          かきくけこ

関数を渡した先の関数内で出力させるのではなく、
渡した関数を、渡した元（呼び出し元）で出力させることも可能。
複数引数でそれらをさせることも可能（複数の時はその引数の数を合わせることに注意）。

const call = (callback) => {
  callback("にんじゃわんこ", 14);
};
call((name, age) => {                       ←関数callを呼び出し、引数を渡すが、
  console.log(`${name}は${age}歳です。`);    渡し先の関数から利用したい値分の引数を、
});                                          呼び出し元の引数に数を合わせて入れ、渡し、戻させ、
                                              呼び出し元の関数でそれを出力させている。
  →にんじゃわんこは14歳です。  

事前に定義した関数
const printWanko = () => {
  console.log("にんじゃわんこ");
};
const printHitsuji = () => {
  console.log("ひつじ仙人");
};
const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};
call(printHitsuji);    →コールバック関数を呼び出します。
                        ひつじ仙人


直接引数の中で定義した関数
const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};
call()=>{
  console.log("にんじゃわんこ");
});

例
const printWanko = () => {
  console.log("にんじゃわんこ");
};
const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};
call(printWanko);
call(() => {
  console.log("ひつじ仙人");
});

普通の関数の場合
const introduce = (name) => {
  console.log(name);
};
introduce("わんこ");      →わんこ

コールバック関数の場合
const introduce = (callback) => {
  callback("わんこ");
};
introduce(name)=>{
  console.log(name);
});                       →わんこ

普通の関数の場合
const introduce = (name,age) => {
  console.log(`${name}は${age}歳です`);
};
introduce("わんこ",25);      →わんこは25歳です

コールバック関数の場合
const introduce = (callback) => {
  callback("わんこ",25);
};
introduce(name,age)=>{
  console.log(`${name}は${age}歳です`);
});                           →わんこは25歳です