TypeScriptとJavaScriptどっちから勉強すべきなのか問題

始めに

まんじです〜

今回はTypeScriptとJavaScript、どっちから勉強すべきか、について書いていきます。

ついでに「ぶっちゃけどっちがいいん？」ってところも書いていきます。

結論から言ってしまうと 「ほとんどのケースでTypeScriptのほうが良い」 です。ただ、TypeScriptのほうがJavaScriptより最初はちょい難しいです。

TypeScriptのほうが難しい理由は、だいたいこのへん。

• 初期設定や環境構築がちょい必要（tsconfigなど）
• JavaScriptに型がついてる分、最初の学習ハードルが上がる
  • 型ってのは const text: string = "warota"; の string のところ

TypeScriptから始めると、JavaScript ＋アルファの周辺知識が必要になる、みたいなイメージですね。

なので「どっちからやればいいの？」って点で言うと、

とにかく挫折せず始めたい（orプログラミング入門） ⇒ JavaScript 最初からゴリゴリ勉強する人 ⇒ TypeScript

って感じの結論に落ち着くかなーと思います。

ちなみにTypeScriptが書けるようになればJavaScriptも書けるので、TypeScriptから勉強しちゃうほうが効率いい感は多少あります。

が、、、JavaScriptを書けるようになってからTypeScriptを始めても理解しやすいので、結局どっちからでもよくね、っていうのもあります。

（どっちだよ）

もうちょい具体的に書いていきます。

そもそもTypeScriptとはなんぞや？

TypeScriptは、JavaScriptに型がついてるJavaScriptです。

具体例を出すとこんな感じ。

• JavaScript

const add = (x, y) => {
  return x + y;
}

• TypeScript

const add = (x: number, y: number): number => {
  return x + y;
}

見比べると、xとyの横にnumberって表記があって、アロー関数の右のほうにもnumberって書かれてます。

すごくざっくり言うと、この型を書くかどうかがJavaScriptとTypeScriptの違いです。

厳密には、型を書いて型チェックがされるかどうか、が違いですね。

「型なしで書けるほうが簡単じゃね？いちいち型書くのだるいだろ！」って昔のぼくは思ってたんですけど、軽めのコードなら確かにその通りで、JavaScriptのほうが簡単に書けます。

でも、いわゆる実務って言われる複数人で書くコードとか、個人開発でもそれなりに複雑で量のあるコードになってくると、この型が輝き始めます。

こういうメソッドとかで、型が補完されて表示されると、パッと見で処理も戻り値も理解しやすくなります。

const result = await this.repository.getRawDomainsWithCompany();

「ふむ、resultは結果、、、関数名を見ると、、、生のカンパニーと一緒のドメインズ？？」 「どんな値が入ってるんだろう・・・」

プログラミングしてると、こういう状況によくなります。

これがJavaScriptだと、まじで意味不明でconsole.logを打ち込んだりデバッガーで中身を見たり、コードを完璧に把握する必要があります。つらいです。

一方でTypeScriptだと、resultのところをエディタでホバーしてあげると、どういう型の値が入ってるのかが分かります。

関数名は上とちょい違うけど、こういうイメージ。

あとは、ヌルポってちょい古い言葉があるんですけど、オブジェクト型のプロパティを参照しようとしたら、nullのプロパティを参照してエラーが出る、みたいなやつがプログラミングにはあります。

ブラウザのConsoleタブを開くと、こんな感じでヌルポが再現できます。

この例だけ見ると「そんなんやらんやろ」って思うかもですが、複雑なコードや複数人で書いてると結構発生します。

しかもこのエラーが出ると、フロントエンドなら画面が真っ白になったり、バックエンドだとエラーでアプリケーションサーバーが落ちたり、みたいな感じになります。

なので、そういうバグを避けるって意味でも、型が大事になってきます。

だいぶ脱線しちゃったんですが、要は「TypeScriptだとJavaScriptに型がついてて安全だよ❤️」っていう、よくある表現に落ち着きます。

安全というか、そこそこ規模がでかいコードになると、TypeScriptのほうがシンプルに書きやすいというか、逆にJavaScriptのほうがむずくね？って感じになります。

型以外の文法は、JavaScriptとほぼ同じです。（同じだよね・・・？）

JavaScriptはTypeScriptの下位互換だから不要なのか

ここまでの話だと、「JavaScriptってTypeScriptの下位互換だし、いらなくね？」って思うかもしれません。

ただ、1つJavaScriptにも良いところがあります。

それが何かっていうと、「こざかしい設定なしにすぐ書ける・動く」 ってやつです。

TypeScriptを実行しようとすると、多少の環境構築が必要になります。

なんで環境構築が必要かというと、TypeScriptはそのまま実行されずに、一度JavaScriptに変換されてから（トランスパイルされてから）実行されるので、その準備がいるからです。

TypeScript書きましょう！ はいじゃあ10秒で実行してくださーい！

みたいなのはやりにくいんですけど、JavaScriptならできます。

JavaScript書きましょう！ はいじゃあ10秒で実行してくださーい！

って言われたら、ブラウザのConsoleを開いて10秒かからず書き始められます。

あとは、ほんとにちょっとした操作や小規模なコードだと型が不要なケースも多いので、そういうときもJavaScriptが便利です。

それ以外だと、強いて言うなら、TypeScriptよりJavaScriptのほうがプログラミング入門（文法学習のとき）には向いてます。

入門の最初は、とにかくハードルが低いほうがいいからですね。

ちなみに、最終的にTypeScriptをやることになっても、JavaScriptを書いた時間は無駄にならないので、いわゆる駆け出しシーズンは結局どっちからでもいい、っていうのは間違いないです。

ぼくは最近React × TypeScriptでフリーランスエンジニアをやってるんですけど、プログラミング入門時にjQuery × JavaScriptをやった時間が無駄になったかというと、特に無駄だったとは思わないですね。

JavaScriptを書いてたからこそ、TypeScriptの良さを比較して分かる、みたいな側面もありますし、実際は文法そのものより「その文法で表現できる部分」が学べることが大事だからです。

特にTypeScriptとJavaScriptは型以外の文法がほぼ同じなので、どっちからやっても効率はほぼ変わらないかなと思います。

文法の入門シーズンだけJavaScriptで、何かアプリを作り始める時期になったらTypeScript、でいいんじゃないかなと思います。

もし自分がプログラミング入門時に戻るとしたら

すでにTypeScriptがそれなりに書ける脳みそなので「もし入門者だったら」って言うのは微妙なんですけど、多分最初はJavaScriptで簡単な文法だけやって、2週間〜1ヶ月後くらいからTypeScriptに移行するかなーと思います。

入門時は文法自体はJavaScriptのほうが勉強しやすいので、最初はJavaScript。

文法の学習がちょい終わってきたら、TypeScriptを使ってアプリとかを作りながらTypeScriptを勉強していく、みたいな流れですね。

TypeScriptは最初こそ環境構築が難しく思えてめんどいんですけど、1回できたらそれ以降は簡単です。

あと、Reactをやる場合はTypeScriptからになると思うのと、Next.jsとか使えばtsconfig含めて勝手にTypeScriptが設定されるので、そのへんを使うといいのかもしれません。

ReactをJavaScriptでやるのはめんどいし、基本的にPropsを大量に渡しまくるので、型ありのTypeScriptのほうが書きやすいです。

あと、JavaScriptでReactを書く場合でも、propsの型はどうせ何かライブラリを入れて書くのが定番なので、それならTypeScriptのほうがよくね、って感じ。

JS（JavaScript）vs TS（TypeScript）の結論としては、こんな感じかなーと思います。

プログラミング入門時期: JavaScript（TypeScriptより簡単だし設定も簡単なので） 多少慣れてきてから: TypeScript（明らかにJSより便利だし実務で使われるので）

補足: 自分がプログラミング言語的に辿ってきたケース

Python ⇒ JavaScript ⇒ TypeScript

この流れで来たんですけど、どの言語をやったから時間の無駄だった、みたいなのはない気がします。

例えばPythonは最近まったく使わないんですけど、Pythonを書いてた頃に学んだループ処理とか分岐処理の慣れは、当然ながら次の言語をやるときの土台になってました。

なので、JavaScriptでもTypeScriptでも、どっちから始めても問題なさげって感じです。

TypeScriptはバックエンドもフロントエンドも書けるし、仕事的な側面で言うと、言語はTypeScriptだけできて周辺のフレームワークを使っていけば仕事になるので（フリーランス案件も豊富なので）、そういう意味だと最初からTypeScriptで始めて書きまくるのは普通に効率がいいと思います。

設定さえできてしまえば、最初はanyで型エラーを黙らせまくればJavaScriptとほぼ同じように書けますし、最近だとAIに型のエラーをつっこめば分かりやすく解説してくれます。

まとめ

最終的にはTypeScriptになるので、できればTypeScriptがいい。けど入門にはJavaScriptのほうが、環境構築的にも型的にも簡単かもしれない！っていう内容でした。

ぶっちゃけそこまで変わらないというか、JavaScriptがそれなりに書ければTypeScriptもすぐ書けるようになるので、あんまり気にせず直近でやることをこなしていけばいいと思います。

どっちからやったかで効率がめちゃくちゃ変わる、みたいなことは基本ないです。

ただ、できればTypeScriptを早めに始められると、どうせ将来的に使うことになるので、いいのかなーと個人的には思っちゃいますね。

終わりです〜。