Java Script 基本文法 - てみブログ

コンソール出力

console.log("Hello World");

// で1行コメントアウト  
/* 範囲コメントアウト */

文字列はシングルクオート、ダブルクオートどちらで囲んでもOK

変数定義

・変数定義

let name = "hogehoge";
console.log(name + "です");

> hogehogeです

・定数定義

const name = "fugafuga";
//上書き不能（上書きしようとするとエラーになる）

テンプレートリテラル

文字列の中に変数を埋め込む記法

const name="hogehoge"
let age = 20
console.log(`${name}は${age}です`);

Point
・全体をバッククオートで囲む。
・変数、定数を${}で参照する。

条件分岐（IF）

if (number === 10){
    console.log("10です");
} else if (number > 10) {
    console.log("10より大きい");
} else {
    console.log("10より小さい");
}

演算子

//比較演算子
== あいまい一致 ※
=== 厳密一致 ※
!== 不一致
>、<、>=、<= 比較
※厳密一致では型の違いを許容しない。
例）
　5=='5' //true
　5==='5' //false

&& And条件
|| OR条件

//演算

number = number + 1;
number += 1;
number++;

Switch文

switch (rand){
 case 0:
    console.log("グー");
    break;
 case 1:
    console.log("チョキ");
    break;
 case 2:
    console.log("パー");
    break;
 default:
    console.log("エラー");
    break;
}

While文

let number  = 1;

while (number <=10){
  console.log(number);
  number += 1;
}

For文

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

配列

let animals = ["dog","cat","mouse"];

for (let i=0; i<animals.length; i++){
    console.log(animals[i]);
}
//forEachによる再起呼び出し
animals.forEach(( (animal) => {
  console.log(animal);
};

オブジェクト

let profile={name:"hoge", age:20};
console.log(profile.name);

関数定義

const myFunc = function(引数){
    console.log("処理”);
    return 戻り値;
}
//呼び出し
myFunc(引数);

//関数定義は以下記述も可能（アローファンクション）
const myFunc = (引数) =>{
}

//引数を複数指定する場合はカンマで区切る

クラス

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

const animal = new Animal("ポチ",3);
animal.info();

>こんにちは
>名前はポチです
>3歳です

・クラスの継承

//Animalクラスを継承したDogクラスを作成する
class Dog extends Animal{
  //コンストラクタをオーバーライド
  constructor(name,age,breed)}
    //親クラスのコンストラクタを継承（スーパークラス）
    super(name,age);
    this.breed = breed;
  }
  //Dogクラスのみで定義するメソッド（人間換算年齢を返す）
  getHumanAge{
    return this.age * 7;
  }
  //親クラスにもあるメソッドをオーバーライド
  info(){
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`犬種は${this.breed}です`);
    console.log(`${this.age}歳です`);
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge}歳です`);
  }
}

const dog = new Dog("ポチ",4, "柴犬");
dog.info();


>こんにちは
>名前はポチです
>犬種は柴犬です
>4歳です
>人間年齢で28歳です

モジュール分割（クラス）

別ファイルに分けた場合の関連付け「script.js」「dog.js」「animal.js」
[animal.js]

class Animal{
}
//デフォルトエクスポート（1ファイルに1つだけ）
export defalut Animal;

[dog.js]

import Animal from "./animal";
//デフォルトエクスポートされたクラス、値、関数などを、
//任意の名前でインポート（名前はAnimalでなくても良い）

名前付きエクスポート

[dog.js]

const dog1 = new Dog("ポチ", 4, "柴犬")
//名前付きエクスポート（複数可）
export {dog1, dog2, ...};

[script.js]

import {dog1, dog2} from "./dog".

ファイル参照について
"./dog" 同じディレクトリ内のdog.jsを参照
"./data/dog" dataフォルダ内のdog.jsを参照
"../dog" 一つ上の階層のdog.jsを参照

パッケージのインポート

import chalk form "chalk";

なお、chalkは文字色を変えることができる

console.log(chalk.yellow("test"));  //黄色文字
console.log(chalk.byCyan("test"));  //シアン背景

入力値を読み取る場合はreadline-syncパッケージを使う

import readlineSync from "readline-sync";
const name = readlineSync.question("名前を入力してください: ");
console.log(`名前は${this.name}です`);

モジュール分割（関数）

子モジュール側でexportsを指定し、親側でimportする。

子：module.js

exports.test_func = function() {
  console.log("Test Print");
}

親：app.js

var test_module = import('./module.js');

app.get('/', (req, res) => {
  test_module.test_func();
}

コールバック関数

//関数定義
const PRINTTEXT = () =>{
  console.log("テキスト出力");
}
//コールバック関数定義
const CALL = (CALLBACK) => {
  console.log("コールバック関数を呼び出します。")
  CALLBACK();
}
//呼び出し
CALL(PRINTTEXT);

※大文字部は任意に命名した関数名

引数で関数を定義する

//コールバック関数定義
const CALL = (CALLBACK) => {
  console.log("コールバック関数を呼び出します。")
  CALLBACK();
}
//呼び出し
CALL(
  () =>{
    console.log("テキスト出力");
  }
);

コールバック関数に引数を渡す

//コールバック関数定義
const CALL = (CALLBACK) => {
  CALLBACK("トム","勝ち");
}
//呼び出し
CALL(
  (name,result) =>{
    console.log(`${name}の${result}です。`);
  }
);

>トムの勝ちです。