質問までの経緯

web制作の勉強を本格的に開始してから約1か月がたちました。

htmlとcssの学習はある程度終えてコードの意味は8割程度分かるようになりました。

なので今日からjavascriptを学び始めようかなと思い、javascriptについてググってみたところ、javascriptの進化版といわれるtypescriptの存在を知りました。

進化版だし、これでもjavascriptのことが学べると書いてあるし、typescriptからでいいんじゃね？と思い、今回の質問をさせていただきました。

回答よろしくお願いします

行動規範の内容に同意します

回答2件

ベストアンサー

基本の回答内容は、m.ts10806さんの回答が全てかと思います。

TypeScript（以下TS）はだいたいの場合は、最終的にJavaScript（以下JS）にコンパイルするため、
基本のJSを理解し書けることはとても重要になります。
その上で、なぜ先にJSにすべきなのかを、JSとTSの違いという点から列挙していきます。

確かにスーパーセットな言語だが、そもそもの仕様がまるで違う

TSはクラスベース、JSはプロトタイプベースとなります。
そのためある仕様の違いが、両者の大きな差異になってます。
静的型付けなのか、動的型付けなのかです。
たとえば、JSでは下記のようなことが可能です。

javascript
1let hoge = 'hogehoge'; // hogeは文字列型の変数となる
2hoge = 25; // 異型の再代入だが、動的型付けのため、特に気にせず行える

型が動的なため、異型の値を再代入しても、特にエラーなどがおきません。
対してTSだと、上記のような異型の再代入は基本的にできません。
TSは名前に冠している通り、Type（型）が厳密（静的型付け）のためです。
しかし、そうやって、型を厳密に扱うことによって、大規模な開発が非常にしやすくなります。
（これは使ってみないとわからないため、割愛）
どうでしょう、この話の時点で既に混乱してませんか？
であるならば、TSが、プログラム初学者にとっていかにハードルが高いかおわかりかと思います。
なぜなら、この型に関しての理解がないと、TSの入り口に立つことすら難しいからです。
だんなら、まずは動的型付けのJSからプログラムの世界に入っていった方がいいかと思いますよ。

TSそのままで動く環境が、少なくともWebブラウザではない

これが、最大の理由です。
今現在では、TSそのままで動くWebブラウザはありません。
対して、JSはどのブラウザでも動きます。
結果、TSはJSにコンパイルすること前提の言語でもあります。
他の環境では動く環境もあるかもしれないし、今後は変わるかもしれませんが、今現在は、公式として、
糖衣言語であることと、JSにコンパイルする機能も常に搭載されております。
だったら、まずJSを学ぶべきということがお分かりになるかと。
特に、Webでやっていくなら尚更です。

同じ構文でも書き方が違う

変数の定義や基本の計算などはほとんど同じなのですが、
一番に挙げたことも含め、書き方などがかなり違ってきます。
インターフェースや列挙型など、TSは他のクラスベース言語と同じような使用感での記載が可能になっていますが、
JSはそもそもの書き方などが、今他の言語に寄せている途中といった具合です。
ですが、その分、Webのような常に変化が大きいものに対しては柔軟に対応できたことも事実あると思います。
（これは個人的な主観なので間違ってるかもしれない）
どこらへんが具体的に違うかというと、クラス構文が代表的かと思います。

javascript
1// クラスの継承はJSでも可
2class Test extends Hoge {
3  #hoge; // 後から出てきたプライベートメンバの記述方法
4  mog; // 宣言子はつけない。パブリックとなる。
5  
6  constructor(hogeV, mogV) {
7    this.hoge = hogeV;
8    this.mog = mogV;
9  }
10  
11  // メソッドは常にパブリックになる。（プライベートメソッドを擬似的に実装することはできる）
12  publicFunc() {
13    // 処理
14  }
15  // メソッドはスタティックを宣言できる。
16  static testFunc(){
17  }
18}

typescript
1class Test extends Hoge {
2  private hoge: string; // 他の言語同様な記載方法でプライベートメンバを定義できる
3  static public mog: number = 100; // スタティックメンバも定義可能
4  
5  constructor(hogeV: string) {
6    this.hoge = hogeV;
7  }
8  
9  // メソッドももちろん、スタティック、プライベート、パブリックも全部宣言可能
10  private privateFunc(def: number): boolean {
11    // 処理
12    return def > 15;
13  }
14  // メソッドはスタティックを宣言できる。
15  static public testFunc(): void {
16    // 処理
17  }
18}