Progate JavaScript

Progate

JavaScript I

  • console.log
  • コメントと文末の;
  • 数値, 文字列
  • 四則演算と%
  • let, const と変数の命名
  • テンプレートリテラルと ${var} による変数の埋め込み
  • if, else, else if, 真偽値, 比較演算子, &&, ||
  • switch, case, break, default

JavaScript II

  • while, for, ++, --
  • 配列, length, オブジェクト, 入れ子
  • 存在しないindexやプロパティにアクセスすると, undefined が得られる
for (let i = 0; i < array.length; i++) {}

JavaScript III

  • 関数, 引数
const func_1 = function(){};
const func_2 = () => {};
  • {}によるスコープ

Javascript IV

  • オブジェクトのプロパティの値として関数を指定することもできる。
  • クラス, 継承
class Hoge {
    constructor(x) {
        console.log("constructed"); // インスタンス生成直後に実行される
        this.var1 = 0; //下で, hoge.var1 としてアクセス可能。
        this.var2 = x;
    }
    get_var2() { // メソッドの定義。括弧必須
        console.log(this.var2);
    }
    get_var2_wrapper() {
        this.get_var2(); // メソッド内で他のメソッドを呼べる
    }
}
const hoge = new Hoge("fuga"); // インスタンスの生成
hoge.get_var2(); // -> "fuga"

class HogeHoge extends Hoge { // Hoge クラスの継承
    // 未指定のメソッドやコンストラクタは継承される。
    constructor(x, y) {
        super(x); // 親クラスの constructor(x) が実行される
        this.y = y; // 追加で実行
    }
    add_new_method() { // メソッドの追加
        return this.var1; // メソッドの戻り値はreturn
    }
    get_var2(){ // メソッドのオーバーライド。こちらが呼び出される。
        console.log(this.var2);
        console.log(this.y);
    }
    get_var2_wrapper() {
        super.get_var2_wrapper(); // 追加的にオーバーライドするとき
        this.get_var2();
    }
}
const hogehoge = new Hoge("fugafuga",2);

JavaScript V

デフォルト export

  • 呼び出される側のファイル
    • export default は1つのみ。
    • クラス以外の変数や関数も同様に export, import 可能
class Hoge {}
export default Hoge; // これで他のファイルから Hoge クラスが使用可能になる。
//
  • 呼び出す側のファイル
    • default を使って export したとき限定で, import Hoge from "ファイルパス" の Hoge は異なる識別子でもよい。
    • ファイルパスの拡張子.jsは省略可能
    • ファイルパスを相対パスとするときは, import するファイルから見た, export したファイルのパス
import Hoge from "ファイルパス";

名前付き export

  • 呼び出される側のファイル
class Hoge {}
const hoge = 3;
const fuga = "fuga";
export {Hoge, hoge, fuga};
  • 呼び出す側のファイル
import {Hoge, hoge} from "ファイルパス";

外部パッケージの呼び出し

  • モジュールによってエクスポートの方法が異なり, それに伴い呼び出し方が異なるらしい。以下はデフォルトエクスポートの場合。
import fs from 'fs'; // var fs = require('fs'); と同じ(はず)。
import readlineSync from "readline-sync"
const str = readlineSync.question("標準入力にこのコメントをつけて文字列を受け取り, その値を返す: ");
const num = readlineSync.questionInt("整数を入力: ");

JavaScript VI

  • 配列操作メソッド
    • push : python の append
    • forEach: array.forEach((num) => {console.log(num);});
      • 配列の中の要素を1つずつ取り出して, それを実引数とする callback 関数を全ての要素に繰り返し行う。何も返さない。
    • find: 上同様のコールバック関数を引数とする。その戻り値が true である最初の配列要素を返す。
    • filter: 上同様で, 戻り値が true である配列要素からなる配列を生成して返す。
    • map: forEach 同様で, callbackの戻り値から新しい配列を作成して返す。

JavaScript VII

  • コールバック関数とは引数として渡される関数である。

ES6の開発環境を用意しよう！

macOS

  • 環境構築
# Homebrew のインストール
brew -v
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew -v

# nodebrew のインストール
brew install nodebrew
nodebrew -v

# nodejs のインストール
## パスの追加
echo $SHELL
#### echo $SHELL の結果が /bin/bash のとき
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
#### echo $SHELL の結果が /bin/zsh のとき
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
## 安定版のインストール
nodebrew setup
nodebrew install-binary stable
nodebrew use stable
node -v
  • 必要に応じて
## npm init
npm init -y

# babel (新しい規格で記述されたコードを古い規格に書き換えるパッケージ)のインストール
npm install --save @babel/core @babel/cli @babel/preset-env # --save-dev でいい気がする
vi babel.config.js

# コンパイル ( package.json の scripts に "build" とかで登録しておくと楽 )
./node_modules/.bin/babel src --out-dir dist # src はコンパイル元ファイルのディレクトリ, dist はコンパイル先ディレクトリ
  • babel.config.js の中身
const presets = [
  [
    "@babel/env",
  ],
];

module.exports = { presets };

windowsOS(macOSとの差分)

https://github.com/nullivex/nodist/releases で nodest (NodistSetup-v0.9.1.exe ) をインストール

nodist -v
nodist + 10.13.0 # node のバージョンを指定してインストール
nodist global 10.13.0 # そのバージョンを有効化する
node -v

npmパッケージを使ってみよう！

  • npm で --save をつけずにインストールすると, package.json に追加されないままnode_modules内にインストールされる。