投稿先: https://noratetsu.blogspot.com/2023/02/NTA-DIY-1-1.html
NTA-DIY:1ヶ月目①~どうせならTypeScriptを覚えればいいんじゃね~
さあJavaScriptの勉強を始めよう。
そう思った時に、プログラミングのプの字もわかっていない状態で「どうせならTypeScriptというやつから入ったらいいんじゃないか?」と考えました。今ならはっきり言えますが、無謀です。
無謀ですが、それが必ずしも悪い考え方だったというわけではありませんでした。そのことについては後述します。
どうしていきなりTypeScriptなるものを召喚してしまったのか。それは、「JavaScriptってどんなものなの」ということを調べた時に、「型を指定できないのが良くないところだ」というのを何度か見かけたのが理由です。TypeScriptっていうのはそういうJavaScriptの弱点をカバーしたスーパーセット(完全上位互換)ですごいんだぞ、ということを知りました。
ほほう、そうなのか、と思って調べてみると、「TypeScriptで学ぶJavaScript入門」という連載があるじゃないですか。自分のためにあるような記事だと思い、最初はそれで勉強しました。つまるところ単にJavaScriptの勉強をしたことになるわけですが、この中に登場して知ったPlayGround(ブラウザ上でTypeScriptを実行できる環境)が大変に便利で、思いついたことをあれこれ試しながら順調に覚えることができました。その当時は「オンラインで実行できる」ということ自体がよくわかっていなかったので、素朴に感動しました。
プログラミング言語を学ぶ時に最初に困るのが、「書くはいいけど、書いたものはどうしたらいいの?」ということではないかと思います。実行環境なるものがわからないのです。既に何か言語を習得していれば他の言語を勉強する時にも「実行環境はこれなわけね、了解了解」と思えるでしょうが、最初の一歩では実行環境という言葉の意味自体よくわからないので、何をどう調べたら良いのかもわからないわけです。入門サイトや入門アプリではオンラインで実行できる環境に繋いでくれるので、初学者of初学者な人はそういう手厚いサポートとともに一通り学べる場所を探すのがよかろうと思います。
さて、TypeScriptから入るのは無謀だと書きました。というのも、TypeScriptというのは「JavaScriptライクな別言語」とかではなく「JavaScript+型付け」なので、TypeScriptを学ぶというのは「JavaScriptを学ぶ」と「JavaScriptに型を付ける方法を学ぶ」を同時にやることになります。知っている人にとっては「そりゃそう」な話ですね。明らかに大変です。
JavaScriptのメソッドを調べて試す時、最初はどの部分が何の意味なのかもあやふやな状態なので、そこに型をどう付ければいいかなんてことはわかりません。学習の最初は「コピペして、ちょっといじる」の繰り返しになるので、JavaScriptのコードをコピーしたらそのままJavaScriptの状態で試すのが自然です。
そもそも、TypeScriptはJavaScriptをわかっている人が正確にコーディングすべく書き方を工夫するためにあるものでしょう。本腰を入れて開発する人には必須であっても、個人でちょこっと何百行かのプログラムを作ってみるという程度ならTypeScriptまで習得しなくとも用は足ります。そういうことが、JavaScript自体を十分知らない身にはよくわからなかったわけです。型を付けられるということのどこがありがたいのかもわからないわけですから。
更に、TypeScriptで書いたコードを実際に使うにはJavaScriptに変換(=コンパイル)する必要があります。コマンドラインとNode.jsのことがわかっていないと何がなんだかわからないので、ここにもハードルがあります。
しかしながら、いきなりTypeScriptを齧ったことが悪手だったかというと、そうは思いません。なんとも愚かしい流れでTypeScriptに挑んでしまったのは確かですが、「手を付けておく」というのはその後結構有効に働いたと思っています。
なにしろ、例えばGitHubにある世の開発者たちのコードは多くがTypeScriptで書かれていて、jsファイルではなくtsファイルになっています(あるいはReactを使ったtsxファイル)。フレームワークを利用したなんとかかんとかみたいな話でもTypeScriptで説明されていることがしばしばあります。今どき素のJavaScriptで書いてないよね?という印象をそこかしこで受けるのです。
そういう時に、TypeScriptを全然知らない状態では「JavaScriptより更に上層にあるなんか難しいやつ」というような認識になってしまって、必要以上にハードルが高く感じられる可能性もあると思います。TypeScriptは本当の初学者には高等過ぎるとは思いますが、乱暴に言うとJavaScriptに型をつけただけのようなものなので、そこまで距離が遠いものではないわけです。そうわかれば、tsとかtsxとかいう謎の拡張子を見ても、「そのうちわかるやつだな」と余裕を持って構えることができるでしょう。
また、今は結局TypeScriptで書いているのですが、JavaScriptで書いている間に「インテリセンス(=VSCodeの入力補助機能)とエラーチェックがもっとちゃんと働いてくれたら…!!」と感じた時に「こんな時のためにあるのがあのTypeScriptだ」と思ったので、TypeScriptの本格的な導入には苦労しませんでした。(なおJavaScriptのままJSDoc+@ts-checkでチェックするという手もあるわけですが、それは後から知りました。連載のかなり後の方で触れることになるでしょう。)
完全なる独学ゆえに発生した回り道ですが、「正規の道」ではないところを探検してもいいのが独学の面白さとも思います。RPGをやっていて「次はここへ行きなさい」にすんなり従わず他に行けそうなところを探さずにはいられない身には、結果的に非効率であったとしてもそういう迷走の自由を感じられたほうが楽しいのです。(今回の場合は大局的にはそう非効率でもなかったのだと思います。)
今から始める人には普通にJavaScriptの入門サイトやアプリの利用を勧めますが、一通りやってそこそこわかったら、早いうちにTypeScriptの書き方をさらっと調べておくと後々楽なんじゃないかなと思っています。実際にTypeScriptで書くのはずっと後になるとしても、全くの未知の領域が減れば随分気が楽になると思います。
Backlinks
関連度が高いかもしれない記事
- よくわかるNoratetsu Lab(2023年版)1月~3月
- NTA-DIY:糸口②~環境を整えよう~
- 2022/12/11 ―― 「アウトライン」問題/TypeScriptを使い始めた
- JavaScript日誌:一歩進んだら十回足踏みせよ
- プログラミングに抱く「得体のしれなさ」問題
「ノートテイキングアプリDIY体験記」シリーズの記事
- NTA-DIY:何をどう書いたらいいか考え直す
- NTA-DIY:2ヶ月目④~よくわからん三銃士~
- NTA-DIY:糸口②~環境を整えよう~
- NTA-DIY:なんでこれを書いているのか考え直す
- NTA-DIY:2ヶ月目③~付箋ツールを自作してみる-後編-~
- NTA-DIY:2ヶ月目②~付箋ツールを自作してみる-前編-~
- NTA-DIY:糸口①~結局何をどうしたら動くのさ~
- NTA-DIY:2ヶ月目①~アウトライナーを自作してみる~
- NTA-DIY:前日譚④~VBScriptの感動~
- NTA-DIY:余談①~ScrapboxとGitの貢献~
- NTA-DIY:1ヶ月目⑩~初めてのノートテイキングアプリDIY~
- NTA-DIY:前日譚③~Excelの拡張としてのデジタルDIY~
- NTA-DIY:1ヶ月目⑨~ブックマーク管理ツールを作ってみる~
- NTA-DIY:1ヶ月目⑧~ScrapboxのUserScriptを作ってみる~
- NTA-DIY:1ヶ月目⑦~DOMとAmazonブックマークレット~
- NTA-DIY:1ヶ月目⑥~実作:簡単なブックマークレット~
- NTA-DIY:1ヶ月目⑤~小さいチャレンジ集~
- NTA-DIY:1ヶ月目④~for文を解らないまま使う~
- NTA-DIY:1ヶ月目③~おみくじいろいろ~
- NTA-DIY:前日譚②~JavaScriptを書けると何が嬉しいの?~
- NTA-DIY:1ヶ月目②~感動したもの勝ち~
- NTA-DIY:前日譚①~カスタマイズできる人ずるい!~
- NTA-DIY:まえがき