非同期メソッドにて外部ファイルを読み込む場合の参照について

ここは非正確な可能性が高いです…

仮に

パターン１

class LoadExample{
  constructor(){
    // なんかする
  }
  load( filename: string , callback: () => void ): void{
    axios.get( filename ).then(res: any){
      // なんかする
    }
  }
}

const loadExample = new LoadExample();
loadExample.load('hogehoge.file' , () => {
  // なんかする
});

パターン２

class LoadExample{
  constructor( filename: string , callback: () => void ){
    // なんかする
    this.load(filename);
  }
  load( filename: string ): void{
    axios.get( filename ).then(res: any){
      // なんかする
    }
  }
}

const loadExample = new LoadExample();
loadExample.load('hogehoge.file' , () => {
  // なんかする
});

という２つのケースが有ったとして、どちらがよいのだろうか？

上の方は、一度生成してから、それからロードしなくはならないため、ある意味手間がかかる。

でも、その分、callback無いとかでもインスタンスの中の内容をしっかりと把握できそうである。

一方の下の方は、一度インスタンスを生成すればよいので造り手が楽であると思う。

その分、thisの扱いとか、内部データへのアクセスが面倒くさそうである。

また、例えば、カメラのインスタンスの実態だけを作ってから、あとでごにょごにょするような場合のケースを考えるなら、一気にやらないほうがよいと思う。

はっきりとどっちがよいとは言えないと思うけども、コールバックを挟むのであれば、instanceの実体と、callbackは別にしておいたほうが取り回しが良い気がする。

仮に、Promiseやasyncで非同期処理を管理するにしても、実体は外だしして、非同期部分だけそういった非同期管理の中に入れることも考えられる。

そういった感じにしたほうがいいかもしれん。

configファイルについて

最近のJavaScriptはとにかく、設定ファイルがありえないくらい多いのでどうしても管理が難しくなってしまうので、ちゃんとメモとか取っておかないとなぁという感じだ。

.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "env": { "browser": true , "node": true, "es6": true },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
  }
}

ESLint用のファイルはこんな感じで、ベースはeslint:recommendedを使用しています。

ただ、本当はairbnbなどのような厳し目のものを使用したほうがコードの質は上がるのかなと思う。

あとで切り替えてもいいのかもしれないね。

eslint:recommendedは

このページが詳しく説明してくれていたので読んでおきたいね。

何を制限されているのかわからないままやっていてもあまり意味がないし…。

また、parserOptions.projectはパフォーマンスが下がるみたいなので、できれば使わないほうが良いのかもしれない。

eslintが動いてないとき

ESLintがvscodeでいまいち動いてなくて、困っていたのだけども、このブログの記事を読んだら、なるほど！という感じで、ログを追っていったら治ったので良かった。

どうやらnpmのパッケージが足りていなかったみたいだった。

ありがたいですね。

pluginsとextendsの違い

正直、どっちがどっちなのか？という感じなのだけども、この記事をよめばわかるかもしれない…。

うーーん、とにかくJSは設定が複雑ですよね…。

その点、prettierは設定が簡潔になるように作られているので、ありがたいですね。