JavaScript入門

[yuyuyuriko78]

JSの基本的な文法

基本中の基本

• 文末に「;」つけるのはJavaといっしょ
• 出力は「console.log(~~~);」

変数　

let (変数名) = "~~~"; var (変数名) = "~~~";

• letとvarどちらもほとんど一緒だが、唯一の違いは、「varでは同じ名前の変数を再定義できてしまう」ということ。勝手に上書きされてしまう。
• 変数はあとから中身を変更することができる

  定数　

  const (定数名) = "~~~";

• 定数はあとから中身を変更することができない →予期せぬ更新を防ぐことができる

テンプレートリテラル

• console.logの中の文字列は「`」(バッククオーテーション)で囲む
• 定数も変数も埋め込める
• ${変数/定数名}で埋める

• const name = "Taro";
  console.log(`こんにちは、${name}さん`);

• undefined
  • 値が割り当てられないこと　var value1 = undefined;

[Atsuhiko]

コメントは、// ですよね。

[yuyuyuriko78]

関数

定義

定義方法１：function

• そのまま定義する function 関数名(引数){処理;}
• 変数や定数に格納する const 定数名 = function 関数名( 引数 ){ 処理 ;}

  定義方法２：アロー関数

  const 定数名 = ( 引数 ) => { 処理 ;}

コールバック関数

• 他の関数の引数として渡される関数
• 引数として記述するときは、（）はつけない。関数名だけ

[yuyuyuriko78]

オブジェクト

オブジェクトとはなにか

• 辞書みたいな感じ、pythonでいう「キーと値の対」。JSでは「プロパティと値の対」。

---	(英語)	(日本語)
Py	キー	値
JS	プロパティ	値

const user = {name: "にんじゃわんこ", age: 14};
console.log(user.age);

「値」に関数を入れることができる

const animal = {
  name: "太郎",
  age: 3,
  greet: () => {
    console.log("こんにちは");
  }
};

console.log(animal.name);
animal.greet();

[yuyuyuriko78]

クラス

クラスの定義

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;

• メソッドはメソッド名だけでいい。def とかも不要
• コンストラクタは「constructor」と書くのでわかりやすい。
• export しないと他のファイルで使えないので注意。

継承

// 他のファイルで定義されているクラスをインポートする
import Animal from "./animal.js";

// Animalクラスを継承したDogクラスを定義
class Dog extends Animal {
  //コンストラクタのオーバーライド
  constructor(name, age, breed){
    super(name, age);
    this.breed = breed;
  }
  //infoメソッドのオーバーライド
  info(){
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`年齢は${this.age}歳です`);
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge)}歳です`);
    console.log(`犬種は${this.breed}です`);
  }
  getHumanAge(){
    return this.age * 7;
  }
}
//他のファイルでもこのクラスを使えるようにする
export default Dog;

インスタンス生成

import Dog from "./dog.js";
const dog = new Animal("コリン", 9, "シェルティ");
dog.info();

[yuyuyuriko78]

Strictモード

• 'use strict'; と先頭に記述
• より的確なエラーチェック機能が動作
• バグを起こしやすいコードを事前に検出し構文エラーとする

[yuyuyuriko78]

配列など、複数はいるやつ

配列

• var 変数名 = ["--" , "--", "--" ];

• const 定数名 = ["--" , "--", "--" ];

  • 定数名は複数形にする（ex: animals）

    const animals = ["dog", "bear", "cat"];
    
    for(let i=0; i < animals.length; i++){
      console.log(animals);
    }

オブジェクト

• Pythonでいうところの辞書。オブジェクト指向とはまったく別物。中括弧{ }

• const 定数名 = {プロパティ1: 値1 , プロパティ2: 値2, ...};

• プロパティ＝キー、値＝値

  const item = {name: "チョコ", price: 200};
  console.log(item.name);  //>チョコ

• 応用１：オブジェクトを要素に持つ配列

  const items = [
    {name: "チョコ", price: 200},  //←インデックス番号：０
    {name: "せんべい", price: 300} //←インデックス番号：１
  ];
  console.log(items[1].price);  //>300

  const people = [
    {name: "一郎", age: 22},
    {name: "次郎", age: 23}
  ]
  for(let i=0; i < people.length; i++){
    const person = people[i];
    console.log(person.name+"と申します");
    console.log(person.age+"歳です");
  }

• 応用２：オブジェクトの中のプロパティにオブジェクトがはいる

  const person = {
      name: "masa",
      age: 29,
      favorite: {
          foods: "ペヤング",
          sports: "弓道",
          color: "黒",
      }
  }
  console.log(person.favorite.food);  >ペヤング

[yuyuyuriko78]

条件分岐

if文

• javaとほとんどいっしょ
• if( 条件式 ){ 処理 };
• else if も、else if まんま

条件

• 等しい、異なる a === b a !== b ぜんぶで3文字になる
• 複数条件 かつ：　&&　両辺がtrueのときtrue、そうでない場合false または： ||　どちらかが少なくともtrueのときtrue、どちらもfalseのときfalse
• 否定 ! で、真偽値を反転 console.log(!true)

switch文

switch(判定する変数){
        case 値１ :
            処理１;
            break;
        case 値２:
            処理２;
            break;
        ...
        default:
            どれでもなかったときの処理;
            break;
}

switch(color){
    case "red":
        console.log("赤です");
        break;
    case "blue":
        console.log("青です");
        break;
    default:
        console.log("赤でも青でもありません");
        break;
}

三項演算子

条件 ? true の場合の処理 : false の場合の処理 ; var name === "Hanako" ? "Welcome!" : "Bye."

[yuyuyuriko78]

繰り返し処理

while文、for文

• javaといっしょ

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

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

[yuyuyuriko78]

型変換

• 文字列への変換

  var int1 = 10;
  var string1 =value1.toString();

• 数値への変換 parseInt(変換したい文字列, 底)

  • 底は、10進数なら10
  • 底：２～３６

    var string2 = "10";
    var int2 = parseint(string2, 10);

[yuyuyuriko78]

真偽値

• 次の値はfalsyと呼ばれ、falseに変換される undefined null NaN 0 空文字

• 次の値はtruthyと呼ばれ、trueに変換される オブジェクト、配列、０NaN以外の数値、空文字以外の文字列