# チャプター 1 トモとキー君のボイコード Voicyエンジニアの声と出会えるチャンネル、ボイコード このチャンネルでは、Voicyエンジニアの日々の活動をお届けしています。 ということで、今週の平日版のボイコードを収録していきます。 今日はせんちゃんもお休みで、 マサさんも体調の不良で、 今日はピンチヒッターでキー君に来ていただきました。 急遽。ありがとうございます。 平日会、初参加。 全然、レギュラー外に来てください。いつでも。 僕は前回、エディターの話をちょっとしたんですけど、 やっぱり人のこだわりを聞きたいんですよね。 なんで、みんなが何を思っているのかな、みたいな話とか聞けるの楽しんで。 何回でもこすれるんで、この話。 定期的に聞いていこうかなと思うんですけど。 今日は技術ワードトーク。 毎回、どういうタイトルだったっけってのをいつも思うんですけど、 今日はタイプスクリプトで話していきたいと思います。 タイプスクリプト、僕はあんまり、ちょこっとウェブの実装で触ったくらいなのであんま詳しくないですけど、 タイプスクリプトってどんな言語ですか? タイプスクリプトってどんな言語か。 言語というか、JavaScriptのスーパーセットって感じではありますけど、 トランスファイルできるような感じですよね。 画期的ですよね。 僕なんかは、静的片付け言語から入ってるんで、それが当たり前というか、むしろそれ以外の言語の方がちょっと違和感あるんですけど、 きーくんの場合は、一番最初はやっぱりJavaScriptからっていう感じだったと思うんですよね。 JavaScriptと比べてタイプスクリプトになってどう変わったんですか? タイプスクリプトはtsconfigっていうので、コンフィグファイルがあって、そこで色々微調整ができるんですけど、 そこで、結構JavaScriptに静的な型を付けるのって難しいというか、そもそも移行が難しいんですよ。 移行っていうのは何を具体的にやっていくイメージなんですか? JavaScriptで書いてあるプログラムをあれとしたら、それはタイプスクリプトにしていくわけなんですけど、 普通に静的型付けタイプスクリプトが、先から言うとstrict trueっていうコンフィグ設定パラメータがあるんですけど、 それを設定すると全部タイプスクリプトの設定になるんですけど、 なるほど。 それをしないと、塗るを許容するとか色々あるんですけど、 そういう移行をしやすくする、いい感じの形にしたのが僕はいいかなと思ってました、タイプスクリプトの良いところ。 いい感じにしてある、なるほど。 そうですね、普通にJavaScriptを書いている人たちにタイプスクリプトを入れますって言って、 最初これガチガチにしたら多分入れられないんですよ。移行が大変すぎて。 そういうことですよね。 徐々に適応できるように、strict trueのパラメータをフォローしにすれば、 実際にはstrict trueは7つぐらいあるオプションをまとめた。 これは必須だよねみたいな。 なるほど、じゃあ完全にタイプスクリプトにするためにはstrictをtrueにしなきゃいけないっていう感じだけど、 多分それをいっぺんにやろうと思うと、もともと型がないっていうか、 曖昧に定義できちゃう、使えちゃうところがJavaScriptは良くも悪くもあるから、 それでいきなりやろうとすると、全部型に縛られるっていう地獄になるってことですよね。 今はAIがあるんで、割と多分できるんですけど、 私は全部にタイプスクリプトの書き方にしないといけない。 型をつけないといけない。 確かに。 それが大変なところを、コンフィグでいけるようにしたみたいなのは。 なるほど。 それによって多分いろんな書を採用しようってなった。 なるほど。 取り込まれたっていうのがあると思います。 なるほど。 そっか、じゃあ型がついたことのメリットもそうだけど、 いこのしやすさみたいなところも結構タイプスクリプトは良かったみたいな感じだったってことですね。 そうですね。 Alt.jsっていって、タイプスクリプト以外にもそういう試みにチャレンジしたプロジェクトが何個かあったんですね。 そうだったんだ。 Facebookで使われてるやつがあるんですけど、ちょっと忘れちゃいました。 Flow? こんなのがあるんですね。なるほど。 メタか。 それが主流になるのも、 のは割と大変そうで、 そうなんだ。移行が。 タイプスクリプトがみんなに受け入れられたっていう経緯があります。 いろんなのが出てたんですけど。 移行しやすさと、 柔軟なオプションとかあったのかなと思いますね。 正義の話になっちゃいましたけど。 確かに、言語も全然違うパラダイムのように感じるんで、 そこを移行するってなるとどうしてもちょっと大変というか、 段階的に移行できないと結構厳しい、採用するの厳しいよねってなりますよね。 なるほど。 タイプスクリプトを書き始めるというか、書けるようになった時に、 書き心地としてはどうなんですか? 本当に快適ですよね。 すげえ、なんか不礼そうな顔でしゃべるから、本当に快適なんだろうなって。 僕が初めて書いたウェブサイトみたいなのがあるんですけど、 アニメーションとかいっぱい使ってて、 ジャバスクリプトじゃないとできないこととか結構やってるんですけど、 それを書いた時に、 どう書いても初心者学校なんで、めちゃめちゃになるわけですよ。 まあまあ、混ざるはしょうがないね。 全部グローバルに変更できる変数を置いて、 どっからでも変な変数を置いておいて、 お手本だ。 いっぱい関数作って、HTML側からそれを読むみたいな感じで、 わけわかんなくなりすぎて。 それはでも型があったら意外とまだマシな形になるっていうことなんだ。 そこからジャバスクリプトにしたら割とマシになりますね。 そもそもHTMLとかで使えるAPIというか、 キャンバスとか、ウェブ上、サイト上にいろんな図形とか、 画像とかをうまいこと表示するみたいなのがあるんですけど、キャンバスAPI。 それの型とかも付けられるというか、 ライブラリがあって、そこからインポートすればその型が付くので、 自分で設定しなくてもいいメリットもあります。 ちょっとわからなかったんですけど、 さっきのグローバルな可変の変数があるカオスの状態が、 型を付けることによって何か緩和されるんですか? 一旦どういう型が入るかっていうのは、 文字列が入るかもわからなくなる。 しかもそれがグローバルでたくさんあるから。 文字列なのかナンバーなのかもないし、 JavaScriptって文字列と数値の計算ができるんで。 それはちょっと辛みありますね。 じゃあ一旦次のチャプターに行きますか。 # チャプター 2 確かになんかあの僕は普通にグローバル変数を 静的カラス系言語の世界で考えてたんですけどそもそもそっかもうそこが何でも入っちゃう みたいな感じだとそういう混乱もあるのか 様々なグローバル変数が良くないというのはあるけど それに肩がないことによってもっと良くない状況になって めっちゃおもろい それはやばいなぁ確かにちょっと考えたくない そうなんですよ キャンタリングするに肩がないとまず辛いんで 確かにそっかじゃあそれはもう肩ついただけでもだいぶ違うみたいな だいぶやりやすくはない あーなるほど なんかそれ以外だとなんか感じる部分はあるんですか そうですね なんだろう でもなんかそのタイプスクリプトがあることによって 他も聞きやすいってのありますね あーはいはいはいはい 肩による予測 そうですね 候補が出てきたりとかっていう 確かに あんまり最近書いてない そうだよね 最近はねもうなんか我々が何かコードを入力することがほぼなくなってしまったから まあなんかAIが勝手に書いてくれるけど まあでもなんか諸説ありますけど なんか成績片付け言語の方がなんかAIにとっていいのか悪いのかみたいな話とかはあって まあやっぱりコンパイルで落とせるのは結構いいかもしれないですね あとその型定義ファイルがあるんですけど キャンタリングスクリプトも作れるんですけど そこに定義書いておけばそれスキンマンみたいな感じで認識してくれたりするんで あーはいはいはいはい うーん確かにそこはなんか うーんやっぱなんかAIで挙動って まあなんか確実性がないというか確率的なものだから まあなんかそこをなんか一点ちょっとコントロールしたいってなった時に まあ全部をコントロールするのは難しいかもしれないけど まあせめて型とかのなんかコンパイルで落とせるようにしたいよねみたいな気持ちとかはなんか うーんありそうだなって気がするから まあ何が最適かはちょっとわかんないけど まあなんか人にとってはちょっとやっぱコンパイルがあることの安心感は なんかあるから ちょっとそれない言語ちょっと辛いですね 僕はちょっとできる気がしないですね ゆとり教育なんだよ なるほど 実行してみないとわからないんだ そんなバカなみたいな 何でもありってそんなことあるみたいな いやーちょっと勝たないとみたいな感じで なんか エラー出ない時もありますから 実行時エラーで エラーじゃない時もあるんで普通に あそうなんだへー 実行時エラーが出てくれればまだ一方ですね その文字列と数値の計算は その動的に勝手に解釈される そのまま置いてされる エラーとして出てくれればまだ100ポイント出てマシだけど 何かよくわかんない 意図してないものになっちゃう可能性があるっていう そこは確かにちょっと今時辛いですよね多分 そうですね タイプスクリプトっていつ頃でしたっけ出たのって 確か2013年頃 あーじゃあ結構早かったのか 出たの 13年だったら割り返し早いイメージ リアクトとかもその辺 そっかそっかじゃあ結構もうあれですかね 言語的にも結構成熟してきてる感じですか そうですね なるほどなるほど ちなみになんか 僕の友達になんか以前聞かれて キー君にこれは聞きたいなと思ってて聞き忘れてたんですけど なんか今から例えば web新しく勉強し始めますみたいな人って ジャバスクリプトから入るべきなのか タイプスクリプトから入るべきなのかっていうところで言うと どっちの方がなんか良さそうなのかなみたいなの なんかあったりします? でもタイプスクリプトの方がいいと思う 基本的には 今のおよく開発はもう バンドラというか 何か ジャバスクリプトの元となるものがあって それをトランスファイルコンプリして 実際の本番環境にそれを上げるっていう感じが主流なので あった方が良いと思います そうなんだ なんかこう 結局最終的にはなんかジャバスクリプトとして 変換されるイメージなのかなと思うんですけど なんか変化されるから なんか知っといた方がいいよね はやっぱ一定あるけどみたいな感じなんですか そうですね でもその スクリプトを学ぶってことは ジャバスクリプトを学ぶってことになるかな まあ最終的に なるほど そっかじゃあ最初はそんな意識しなくても別に なんかジャバスクリプトの細かいところまで知ってなくても っていうイメージではあるんだ そうですね 結局その APIとか ウェブ上で使えるAPIとかは変わらないので ジャバスクリプトよりもタイプスクリプト それに型が付くかどうかなんで 型が付いたほうが分かりやすい まあそうね確かに それこそその ウェブAPIさっき言ったキャンバスとかも 辿っていくことができるんですよね型を 型があると キャンバスの 一名キャンバスエレメントっていう 要素の型があるんですけど それってどういうのが プロパティとしてあるか あるかとか あるんで型があると もしかして型のない世界 型のないというか 静的型付けじゃないと見に行けないの はい そっか確かにそっか だってあれだもんね なんかその 平成とかで何かの型を インスタンス化宣言として書いたときって 当然型があるから 飛べるのは当たり前だなと思ったけど ないと飛ぶもの何もないのか そっかやべえ 怖いよ Vscrollとかだと そこら辺もちゃんと JavaScriptだけど 飛べるみたいな 読んでくれたりしてるんですけど 賢いね そっかそっか でも型があるほうが そこは安定感は少なくとも あるよね なるほど そっか なんか 僕はまだ動的な言語を ほぼ触ったことがないんで 怯えながら いやちょっと怖えなとかと思いながら なんか触る日が来たら ちょっと怖いなっていう 気持ちしかなかったですけど いややっぱ想像以上に大変なんですね やっぱ 戦績片付け言語で 当たり前にできてることが できないのか こんなに そうなんですよね なるほどな 大変ではありません なるほど まあでもじゃあ いい時代になりましたね いい時代になりました 進化して なるほどな JQueryとか JavaScript前世紀のデバイスとか 本当に大変です あーはいはいはい なんか聞いたことだけはあるな なんかJQueryって 勝手にその変数浮気されてんのかよ みたいな どうやってデバックすんだ っていう感じの つらみあるな そっかそっか 小さいコンソールが しかも いやつれえな 言う話を聞きます なるほど 確かに しかもね 当時 多分AIない 全然時代ですもんね そんな中ね あの よく 予期せぬ変更というか 変更が加えられてたら ちょっと探すのきつい っていう なるほど じゃあだいぶ もうウェブも かなり楽になってきたというか そうですね いい環境になってきたって感じなんですね 確かになんか 今なんかあんまり 生のJavaScript書く機会 多分減ってますよね相当 そうですね あんまり HTML ワンページぐらい あまあ わざわざ入れることじゃないか みたいなやつで書くのは あるけど 確かに 実際の開発で だとあれですもんね 結構 もうタイプスクリプト って感じですもんね 確かに ちなみにタイプスクリプトって 確かバックエンドも いけるんでしたっけ そうですね ノートJS そうですよね タイプスクリプト ですよね だからなんか そこらへんなんか やっぱバックエンドも 一個の言語でいける っていうのは結構 強いから なんか それで採用してる会社とかも 結構いるな みたいな イメージはあったんで そうですよね なんか 最近ようやく 慣れてきたんですけど やっぱ言語のスイッチ 結構きついなっていう 感じは なくはないんで 確かに 2つぐらいまでは まあまあまあ って感じですけど 3つよってなってくると ちょっと 少なくとも 習熟はあんましなさそうだな みたいな イメージがあったから ありがとうございます はい ありがとうございます じゃあ 今週はこんなところで はい ありがとうございます じゃあ 次はどの声と繋がりますか 引き続き Voicyでお楽しみください