JavaScriptを触ってみる

• とりあえず、環境について
  • Ubuntu(on Docker(Xなどのウィンドウなし、完全にUbuntuのものだけ))
  • node.jsでやってみる
  • httpサーバを立ち上げる
• モジュール管理について
  • Electron
  • React
    • ReactNative
  • Vue
    • VueNative 非推奨となった
  • WebGL
  • カメラ/マイクアクセス
  • FireFox拡張機能
• グラフ系ライブラリまとめ(HighChart/c3)
• HighChartを触ってみる
  • sample

• Jest 単体試験モジュール

• デバッグについて
• Hello World兼Json <–> str変換
• クラス定義
• 関数定義とlambda式について
• let/varの違い
• 非同期処理(async/await)を使ってみる
  • クリティカルリージョンについて

• yieldについて

• モジュール作成
• 演算子のオーバーロードについて

---

---

環境構築

# 🚨 aptやっぱダメだわ(笑) 
# Microsoftのやつを参考にcurlでinstallシェルとってきた方が安全かも
# nodejs,npmをinstall
apt install -y nodejs npm

# n packeageをglobalにインストール
npm install n -g

# n package を使って node をインストール
n lts

### npmの更新　###############

# npm
npm info npm version

# 最新の npmに更新
sudo npm install -g npm
sudo npm update -g npm

• nってなんだ？ -> node.jsのバージョン管理パッケージっぽい n ls,n listでインストール済みのバージョンを確認したり バージョン切り替えに使うっぽい

• npm: パッケージ管理ツールみたい(Dockerのubuntuでなんかエラー吐いてる。。) とりあえず、今回は導入できればいいのでエラーの調査はしない！

---

---

実行方法(Hello world)

1. 適当なファイルに以下を書き込む

    console.log('Hello World!');
   
    // string <--> json 変換 //
    // string -> json
    var jdata = JSON.parse("{\"data1\":data2}");
   
    // json -> string
    var str = JSON.stringify(
      {"count":count,"Now":new Date()});
   

2. node <ファイル名.js>で実行

3. 以上 クラスとかメイン関数とか気にしないで試せるのは楽かも？

---

---

nodeでhttpサーバを立ち上げる

# これでhttp-serverを実行できる
npm install -g http-server

# これを叩くことでhttpサーバが起動する
http-server

---

---

Debugについて

• とりあえず、これでできる。 (ツール(ChromeDevTools)を使うことでGUIでのデバッグも可) chrome://inspect で開いてOpen dedicated DevTools for Nodeへ行くことでデバッグできるようになるらしい。

• breakpointはソースにdebugger;と追記する。。。 (微妙すぎる。。)

node inspect <対象ファイル>

# 👇これでChromeDevToolsを使えるようになる
node –inspect-brk app.js

---

---

クラス定義について

• とりあえず特徴的っぽいとこをあげる。
  • newをつけてインスタンスを作成する。
  • constructorは複数定義できなさそう。。

class Animal{
    constructor (baw) {
         this.baw = baw;
         this.baw2 = "non";
        }
    // コンストラクタは2つは作れないっぽい(知らんけど、)
    /*constructor (baw,baw2) {
        this.baw = baw;
        this.baw2 = baw2;
   }*/
   say (){
        console.log(this.baw+ " " + this.baw2);
    }
}

// new をつけないとコンストラクタが動かないらしい
cat = new Animal("mew mew");
// dog = new Animal("baw","wow");

cat.say();
//dog.say();

// 🌟継承はこんな感じ
class fish extends Animal{
    constructor(name)
    { 
        //🌟親クラスのコンストラクタはこんな感じ
        super("I`m fish!");
        super.baw2 ="";
    }

    talk(){
        // 🌟親クラスの関数を実行する。
        super.say();
    }
}

jerryfihs = new fish("");
jerryfihs.talk();

---

---

関数定義とlambda式

Pythonみたいに関数をクラス一つとして扱っているっぽい

// 通常の宣言
function hello(name){
    console.log("hello "+ name);
};

// lambda式(無名関数)
const f = function(name){
    console.log("hello "+ name+ "!");
};

// lambda式(arrow)
// (上記の変数f同様に関数クラスのように扱うこともできる。)
(num) => {
  return num * 2
}

// asyncなlambdaもできるみたい、
const temp = async () => {
  const cameraPermission = await Camera.getCameraPermissionStatus()
  const microphonePermission = await Camera.getMicrophonePermissionStatus()
}
temp();

---

let/var/constの違い

違いは再宣言可能か再代入可能かスコープに違いが出る

*	再代入	再宣言	スコープ
var	可能	可能	ある関数内でvarを用いて宣言した変数は、その変数をどこからでも呼び出すことが可能
let	可能	不可	同じ関数内であってもブロックの外側からは変数を呼び出せません。
const	不可	不可	同じ関数内であってもブロックの外側からは変数を呼び出せません。

varでスコープを抜けても呼び出せることから察せるように、デストラクタがないらしい、、

つまり、リソースの使い方には注意してコーディングする必要がある。

非同期処理(async/await)を使ってみる

1. パッケージをインストールする 　　(パッケージもあるが、デフォでPromise型が使える) asyncパッケージでの使い方はそのうち

npm install async

// 標準の async/awaitを使う(パッケージ入れなくてもOK)
function myPromise(num) {
    return new Promise(
        // 🚨resolveを引数に設定し、
        function(resolve) {
            setTimeout(function() {
                // 🚨resolveに結果を渡す。 戻り値は見てない
                resolve(num * num + 1);
                return 101; 
        }, 
        3000)
    })
}

// asyncの関数である宣言が必要みたい(C#と同じっぽい🤗)
async function myAsync() {
     
    var prom = myPromise(20);
    console.log("Waitting .. process")
 
    // 色々処理やった後で、awaitで取り出せばOK
    // C#とほぼ同じっぽい
    var result = await prom;
    console.log(result);
 
}
 
myAsync();

非同期処理におけるクリティカルリージョンについて

jsにはmutexなどはないらしい、結論としてクリティカルリージョンは以下で実装が必要

1. ロック用の変数用意して自分で排他処理しないとダメ
2. 想定外のコード実行が行われないように、Arrayをタスクキューとして使って、そこに期待した順番でタスクを並べてごにょごにょすれば良い

---

モジュール作成

class Animal{};

// require('hello-world-script')でclassを作成できるようにする
module.exports = Animal;

// import xxx from 'hello-world-script'できるようにする
module.exports.default = Animal;

---

JavaScriptにおけるオーバーロードについて

• StackOverflowの回答

JavaScript doesn't support operator overloading.らしい。。。
しかし、valueOf,toStringをいじることで近い機能を実装することができる (仕様的にオブジェクト指向としてどうなんだ？)

---

yieldについて

JavaScriptにおけるyieldは関数の処理を一時的に呼び出し元に譲って、 関数の処理は待機しておくという意味 nextで処理を再開することができる

// yieldが含まれるジェネレータ関数には、functionの最後にアスタリスクをつける必要があります。
function* funcA() {
    yield "Hello";
    yield "JavaScript";
    return "!!";
}

f1 = funcA();
// valueはyieldに指定した戻り値で、doneはジェネレータ関数が終了したかどうかを表す真偽値
console.log(f1.next()); // -> { value: 'Hello', done: false }
console.log(f1.next()); // -> { value: 'JavaScript', done: false }
console.log(f1.next()); // -> { value: '!!', done: true }
console.log(f1.next()); // -> { value: undefined, done: true }