常連

## テーマ、知りたいこと

VSCode拡張機能でおすすめの拡張機能を教えてください！

## 背景、状況

普段VSCodeで開発をしています。
Japanese Language Packやindent-rainbowなど、いくつかの拡張機能を使っています。

他にも色々調べて、有名なやつは試してみたのですが、
もっともっと開発効率を上げたいなと考えています！

開発効率を上げるための、皆様のおすすめの拡張機能があればお聞きしたいです。

よろしくお願いいたします。

## 追記
言語は主にTypeScriptで開発しています。

VSCodeでおすすめの拡張機能を教えてください

### 実現したいこと
初学者です。webアプリの開発について知人に教わりながら、backendにPython、mysqlを使用してRESTなAPIを作り、frontendにNext.jsを用いて、簡易的なwebアプリを作りました。最近、Node.jsを使用するとbackendでもTypescriptを使用して、APIを設計できることを知ったのですが、Pythonとの使い分けに悩んでいます。

### 発生している問題・分からないこと
frontendをNext.jsとしたときに、backendにPythonを使うべきか、Typescriptを使うべきか、使い分けについてご教示いただけないでしょうか。frontendと共通の言語Typescriptを用いることで、学習コストが下がったり、エラーが少なくなったり、開発効率が上がることは理解しております。その他のメリット、デメリット、使い分け、使用されているプロダクトの事例などあればご教示いただけますと幸いです。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
Google検索をして調べてみましたが、いまいちピンときません。

### 補足
特になし

webアプリのbackendで使用する言語の使い分けについて

## テーマ、知りたいこと
JavaScriptの分割代入を必須化することのメリットは何ですか？

分割代入は、以下のように変数を個別定義するよりかは行数が減るというメリットを享受するために分割代入を利用して書くことができます。

```javascript
// これが
const obj = { a: 1, b: 2 }
const a = obj.a
const b = obj.b

// こうなる。1行省略できた。
const obj = { a: 1, b: 2 }
const { a, b } = obj
```

しかし、上記のように個別変数を定義することは正直なところメリットではない気がしています。
「objのaというプロパティ」の意味合いが消えてしまう事がよくないと思っています。

コーディング規約で「分割代入を必ずする」と必須化してしまうのは良くないと思います。
場合によって使い分ける程度で良いと思います。

そもそも、上記のような使い方で個別の変数に別けるメリットがわかりません。
変数にあえて別けたいときは以下のように何らかの計算した結果を代入する時ではないでしょうか？

```
const a = obj.a * 2
const b = obj.b * 2
```

または、あまりにもネストが深くて書くのが面倒になったときなどに使うのも可読性を上げるためにありだと思います。
```
// posiitonを取り出すために毎回a ~ g まで書かないといけないのが面倒
const x = obj.a.b.c.d.e.f.g.position.x
const y = obj.a.b.c.d.e.f.g.position.y

// この書き方はありだと思う
const { x: userPositionX, y: userPositionY } = obj.a.b.c.d.e.f.g.position
```

また、以下のように obj を合体させる時に使うのは分割代入を使うときの良い例だと思っています。
1つ1つ書くのは面倒ですから。
```javascript
const obj1 = { a: 1, b: 2 }
const obj2 = { c: 3, d: 4 }
const obj3 = { ...obj1, ...obj2 }
```

みなさんはJavaScriptの分割代入を必須化させる事についてどう思いますか？
ほとんどすべてのコードを分割代入で書かれたコードがあり、私はメリットが理解できない状態です。


JavaScriptの分割代入を必須化することのメリット

### 前提・実現したいこと

子コンポーネント(UI側)にデータを渡したいです。

### 発生している問題・エラーメッセージ
子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます
```
Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'.
  Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'
```
（7.11追記：↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。）

上記のように怒られます。
### 該当のソースコード
containers/Element/element.tsx側
```ここに言語名を入力
import React, { FC } from 'react';
import Element from '../../../components/pages/Element/element';
import dammyData, { dammyType } from '../../../seed/dammy';

const getData = (): dammyType[] => {
  //本来はデータをsortしてからreturnする処理が入る
  return dammyData;
}

const ElementContainer: FC = () => {
  const result = getData();

  return <Element result={result} />;
};

export default ElementContainer;

```
<Element result={result} />の「result={result}のresult=」に対して怒られています。

dammyData と { dammyType } ファイル中身は以下の通りです
```
const dammyData = [
    {
      FoodGroup: 1,
      FoodNumber: '01001',
      id: 1,
    },
    {
      FoodGroup: 2,
      FoodNumber: '01002',
      id: 2,
    },
];

export interface dammyType {
  FoodGroup: number,
  FoodNumber: string,
  id: number
}

export default dammyData;
```
必要でない情報とは思いますが実際には２０００個以上の４０要素ずつのデータが格納されたものを扱う予定です。まずは簡易化して動かそうとしています。

### 試したこと
データのボリュームが大きくて分からなかったため簡易的なdammyデータで試しています。

### 補足情報（FW/ツールのバージョンなど）
React+TypeScriptです。
cssはEmotion
バックエンドはFirebaseを利用します

追記：Reactの型に"@types/react": "^16.9.0"を使っています。

### 追記１：<Element />側のソースコード
components/Element/element.tsx側
```
/** @jsx jsx */
import { Fragment, FC } from 'react';
import { css, jsx } from '@emotion/core';

import Header from '../../common/templates/header';
import Footer from '../../common/templates/footer';
import SocialBtn from '../../common/parts/button/social';
import StuffFilter from '../../common/parts/filter/stuffFilter';

import { Font } from 'components/common/styles/CssValue';
import { dammyType } from '../../../seed/dammy';

//cssの記述を省略

const Element: FC<dammyType[]> = ({result}) => (
  <Fragment>
    <Header />
    <div css={content}>
      <div css={titleH1}>
        //titleのテキスト
      </div>
      <div css={socialSpace}>
        <SocialBtn />
      </div>
      <div css={article}>
        <p>
　　　　　　//記事のテキスト
        </p>
      </div>
      <div>
        //孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい
        {result}
      </div>
    </div>
    <Footer />
  </Fragment>
);

export default Element;

```
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
追記：props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。
```
Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.
```

### 追記２：App.tsx側のソースコード追加
App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。
```
Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
```

```Appソース
/** @jsx jsx */
import { FC } from 'react';
import { css, jsx } from '@emotion/core';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Font, Color } from './components/common/styles/CssValue';

import './components/common/styles/ress.css';
import Home from './components/pages/Home/home';
import ElementContainer from './containers/pages/Element/element';

//cssの省略

const App: FC = () => (
  <div css={Global}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/elm">
          <ElementContainer />
        </Route>
      </Switch>
    </BrowserRouter>
  </div>
);
export default App;

```

【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

### 実現したいこと
Chromeではデバッグできるので、VSCode上でもブレークポイントを使ってデバッグできるようにしたい。

### 発生している問題・分からないこと
VSCodeではsouceMapが読み込めずVSCodeでデバッグができない。どうやらsouceMapとトランスパイルされたjsが別のコンテンツと判定されている…？

### エラーメッセージ
```error
[Debug Diagnostics:]


✅ This breakpoint was initially set in:

D:\Dropbox\Job\Engineering\uetax\src\scripts\module\CsvFileReader.ts line 37 column 1
❓ We couldn't find a corresponding source location, and didn't find any source with the name CsvFileReader.ts.
How did you expect this file to be loaded? (If you have a compilation step, you should pick 'sourcemap')

---

http://localhost:9223/weekReport.bundle.js
sourceReference: 1966746525
absolutePath:
absolutePath verified? ❌ Disk verification failed (does not exist or different content)
sourcemap children: None (does not have a sourcemap)
referenced from sourcemap: None (not from a sourcemap)
```

### 該当のソースコード

```webpack.config.ts

const config: Configuration = {
    devtool: "source-map",
    entry: {
        weekReport: "./src/index.ts",
    },

    output: {
        path: path.join(__dirname, "dist"),
    },

    module: {
        rules: [
            {
                // 拡張子 .ts の場合
                test: /\.tsx?$/,
                // TypeScript をコンパイルする
                use: {
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        configFile: "tsconfig.json",
                    },
                },
            },
    ],
};
// 設定をデフォルトエクスポート
export default config;

```

```launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch development server",
            "url": "http://localhost:9223",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "dev",
            "skipFiles": ["<node_internals>/**"],
            "trace": true,
            "sourceMaps": true,
            "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack://./src/*": "${webRoot}/src/*"
            }
        }
    ]
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
- launch.jsonに "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],を追加してみる
- sourceMapPathOverridesを変えてみる等

### 補足
フォルダー階層：
/proj
   ├─ .vscode
   │  ├─ lanch.json
   │  ├─ task.json
   │  └─ www.code-wokspace
   ├─ dist
   │  ├─ proj.bundle.js
   │  ├─ proj.bundle.js.map
   │  └─ index.html
   ├─ src
   │  └─ ...
   ├─ package.json
   ├─ tsconfig.json
   └─ webpack.config.ts

Typescript + Webpack + VSCodeな環境でChromeではsouceMapが読み込まれているのに、VSCodeでは読み込めずVSCodeでブレークポイントが使えない

### 背景
勿論雇用者当人に確認するのが一番ですが、良ければ他の方の意見も是非お伺いしたいです。

ITインターンに期待することは？

初歩的な質問で恐縮ですが
typscriptの以下コードのusersの箇所で「プロパティ 'users' は型 '[]' に存在しません。ts(2339)」が出るのですが、実際にはusersで値が正しく取得できています。
-----------------------------------
  useEffect(() => {
    // 仮
    axios.get('http://localhost:5000/sample/')
    .then((res: AxiosResponse<[]>) => {
        console.log(res.data.users); 　←usersで上記メッセージが出ます
    })
    .catch(error => {
      console.log(error)
    });
  }, []);
-----------------------------------
  

取得しているjsonオブジェクトが以下のような形式なので上記となっております
----------------------------------------
{
    "users": [
        {
            id:"名前"
            name:"名前"
        }
    ],
    "message": "aaa",
    "result": true
}
----------------------------------------


vscodeでコーディングをしていて、上記エラーを出さないtypescriptでの正しいやり方を教えていただけないでしょうか。


プロパティ〇〇は型△△に存在しません

### 実現したいこと
今百人一首の下の句を覚えるアプリを作成しています。
純粋にクイズをやる部分と、復習パート（クイズ部分に☆マークを付け、それが押下されたものを復習パートに持っていく）に別れています。

### 発生している問題・分からないこと
復習対象にマークを付ける機能、そして、マークの表示更新のincludesのところでエラーが発生しています。

### エラーメッセージ
```error
app.ts:20:35 - error TS2550: Property 'includes' does not exist on type 'number[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.
20             isFavorite: favorites.includes(k.number) // お気に入りフラグを設定
app.ts:101:19 - error TS2550: Property 'includes' does not exist on type 'number[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.
101     if (favorites.includes(currentKaruta.number)) {
```

### 該当のソースコード

```TypeScript
// ページ読み込み時にJSONデータを取得
fetch('karuta.json')
    .then(response => response.json())
    .then((data: Karuta[]) => {
        karutaList = data.map(k => ({
            ...k,
            isFavorite: favorites.includes(k.number) // お気に入りフラグを設定
        }));
        nextQuestion();
    });

function updateFavoriteButton() {
    const favoriteButton = document.getElementById('favoriteButton')!;
    if (!currentKaruta) return;

    if (favorites.includes(currentKaruta.number)) {
        favoriteButton.textContent = '★';
        favoriteButton.style.color = 'gold';
    } else {
        favoriteButton.textContent = '☆';
        favoriteButton.style.color = 'gray';
    }
}
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
moduleとlibのバージョンの問題であることが読み取れたため、tsconfig.jsonをES2020に修正していますが、それでもエラーが出続けます。
それともmoduleとlibのバージョンの問題ではないのでしょうか？どなたかお知恵を拝借願いたいです。


### 補足
## TypeScriptのバージョン
- 5.8.2

## Node.jsのバージョン
- 18.14.0