00:01
日本最大級のエンジニアコミュニティ、Qiita プロダクトマネージャーの木尾の俊文です。
この番組では、日本で活躍するエンジニアをゲストに迎え、キャリアやモチベーションの話を深掘りしながら、エンジニアの皆さんに役立つヒントを発信していきます。
今回のテーマは、実務で使えるTypeScriptです。
実際、僕自身も実務で使っているので、とても興味深いテーマになっています。
ゲストには、前回に続いて、TypeScript入門書、サバイバルTypeScript執筆者の一人で、株式会社クラフトマンソフトウェア取締役CTOのスウィンさんにお越しいただきます。
スウィンさんにTypeScriptのお話、ぜひいろいろお伺いしてみたいなと思います。
それでは、本日のゲストをご紹介します。
6社3万人のTypeScript入門書、サバイバルTypeScriptを公開中のスウィンさんです。スウィンさん、よろしくお願いします。
皆さん、こんにちは。スウィンです。よろしくお願いします。
よろしくお願いします。前回は、スウィンさんのキャリアやTypeScriptの魅力についてお話しいただきました。
今回は、サバイバルTypeScriptのお話を中心に、TypeScriptの特徴や歴史、業務で使えるTipsなどをお話しできればなと思っています。
というところで、TypeScriptのお話、いろいろお伺いしていきたいんですが、TypeScriptの特徴みたいなところですね。
まず、お伺いできればありがたいです。
TypeScriptの特徴は、主に二つあると思っていまして、一つ目がスケールするJavaScriptっていうところですね。
二つ目が型がある。名前にTypeっていう風な型っていう言葉が入っている通り、型があるっていうのが二つ目の大きな特徴かなという風に思います。
一つ目のスケールするJavaScriptとは何ぞやっていうところなんですけれども、TypeScriptっていうのは大規模なウェブアプリケーションの開発を想定して作られたプログラミング言語でして、
大きなウェブアプリケーションを作るのにすごく向いているっていうのが特徴になります。
どのくらいの規模から大規模っていうのかっていうところがあると思うんですけれども、
僕の感覚だと50秒も超えてくると、TypeScriptで書いた方がJavaScriptで書くよりもいいのかなという感想ですね。
TypeScriptの面白い特徴に、プログラミング言語を新しく作るっていう風になると、全く新しい言語をゼロから作るっていうようなことが一般的かなって思うんですけれども、
TypeScriptはJavaScriptをベースにしたプログラミング言語でして、JavaScriptの文法にTypeScriptの文法を新たに加えることで、TypeScriptっていうようなものになっているっていうような言語です。
なので、JavaScriptを知っていると、TypeScriptを学ぶハードルがすごく下がるんですね。
03:05
1から関数の書き方を学ぶとか、クラスの書き方を学ぶってことはなくて、関数とかクラスの書き方はJavaScriptの書き方とほぼ一緒で、
それプラスTypeScriptの固有の文法だったりとか、そういったものを学べばいいっていうようなことで、
JavaScriptをこれまでちょっとやったことあるみたいな人は、他の言語を学ぶよりもTypeScriptを学んだ方がすぐに学べるのかなというふうに思います。
2つ目の特徴の型があるっていうところなんですけども、型があると何がいいのかっていうところで、
一つは安全性が高まるっていうところですね。型があるので、機械がやってくれるんですね。
チェックをやってくれる機械のことをコンパイラーって言うんですけども、コンパイラーが明らかにおかしいコードっていうのを指摘してくれるんで、
変なバグを生みにくくなるっていうのが型がある恩恵の一つですね。
2つ目のメリットが、ドキュメンテーション性っていうふうなものがありまして、型があると、
例えば引数ABCっていうようなものが3つあったときに、型がないとそのABCにどんな値を渡したらいいのかっていうのが、
コードからはパッと読み取れないんですけども、型が書いてあると、Aは文字列を渡せばいいんだなとか、
Bは数値を渡せばいいんだなっていうことがコードに現れているので、そういったコードを読むことで関数の使い方だったりとか、
どういうふうに使ったらいいのかっていうのが読み取れるっていうようなメリットがあります。
3つ目のメリットが保守性ですね。主にリファクタリングのしやすさといってもいいと思うんですけども、
新規にコードを書くっていうことよりも、書かれたコードを直すっていうことの方が意外と多いのかなというふうに思っているんですけども、
コードを直すとやっぱりバグを生みやすくなってしまう、バグを生む機会を作ってしまうっていうことがあると思うんですけども、
タイプスクリプトで方があると、コードを直したときにコンパイラーがプログラムの明らかにおかしいところを自動でチェックしてくれるので、
結構安心してリファクタリングをしていけるっていうところがタイプスクリプトのメリットかなというふうに思います。
ありがとうございます。まさに今お話しあった通り、
タイプスクリプトって本当にJavaScriptにいわゆるトランスファイルされるので、
JavaScriptが動くところにすぐ導入できるっていうのと、
あるいは型あるので実際書いてみると本当に読みやすいなっていうのは僕自身もいつも感じているところです。
ただその一方で結構世の中で、
これって別にタイプスクリプト、JavaScriptだけの問題というか議論ではないと思うんですけど、
06:01
型って書くの手間かどうかみたいな話ってあると思うんですよね。
型なんて書かずに、スクリプト処理だったらどんどん書いていけばいいじゃんみたいなものもあれば、
しっかり書いていこうよって考え方もある気がしていて。
ここら辺なんかスインさんどういうお考えを持ってますか。
確かに型を書くのは手間とか面倒という気持ちすごくよくわかって、
何でかというと僕ももともとPHPの方が長くて、
PHPも型を書くことは最近できるんですけども、
型を書かなくても動くっていう動的片付け言語からの僕も出身なんで、
静的片付け言語とか型を書くっていうことに最初ちょっとアレルギーは、
正直なところアレルギーはありました。
その上で実際にやってみて、案外そんな悪いものじゃないぞっていうところに気づいてきて、
それは何でかっていうとタイプスクリプトの場合なんですけども、
型推論っていう仕組みがありまして、
型を書くことを極力省略できるっていうような仕組みがあります。
型を書かないとどうやって型を判別するんだっていう問題が出てくると思うんですけども、
それはコンパイラーの方が賢くて、
値が数値だったらこれ数値型でしょみたいなことを推測してくるんですね。
それによって本来型を書かないといけないような変数に値を代入するような宣言文でも型を書かないで済むんで、
書き味としては本当にRubyとかPHPと結構近いところがあるんじゃないかなっていうふうに思っています。
型を書くことを手間と考えるのか投資と考えるのかっていうところがありまして、
確かに書いているときは手間なんですけども、
1回書いておくとそこの部分はコンパイラーがチェックしてくれるんで、
後々直すときだとか、
読み返してどういう値がそこの変数に入るのかっていうことを読み取るときとかに、
型があることでチェックの手間を省けたりだとか、
コードリーディングが進んだりとかするので、後々自分にとってリターンがあるので、
手間と考えずに投資だと思って型を書いていくっていうのも、
一つの考え方としていいのかなというふうに思っています。
ありがとうございます。
本当にプログラミングあるあるですけど、
アプリケーションとかを書けば書くほど単位時間あたりの書ける量とか機能って減っていくみたいな話ある気がしていて、
周りの仕様とかをちゃんと把握していかないといけないとか、
変更がどこまで影響するかをちゃんと調べないといけないみたいな、
コストみたいなところがかかっていくと思うので、
そこをできるだけタイプスクリプトを使うと抑えられることができるっていうことで言うと、
本当にまさに投資っていう考え方で、
最初書くときはちょっと時間かかるかもしれないけど、
09:03
全体的なプロダクト開発にかけた総時間を考えると、
意外とむしろできること増えたよねみたいな感じがなるのかなっていうのはお話聞いてて感じました。
ちなみになんですけど、タイプスクリプト、
TranspireしJavaScriptにしてっていうのがあると思うんですけど、
そこって開発体系にどんぐらい影響してくるかとかって、
スインさんの体感であったりしますか。
コンパイラーがあるっていうふうに聞くと、
やっぱりPHPとかRubyとかそういったスクリプトを書いて、
直で動かせるっていう言語と比べると、
なんかワンステップあるようで、
そこがちょっと開発体験として良くないのかなっていうふうに、
僕も最初そういうふうに思っていたんですけども、
タイプスクリプトに関しては、
コンパイラーのコンパイル速度も実はそんなに遅くないんですよね。
どちらかというと早い方じゃないかなっていうふうに、
他の静的片付け言語と比べると、
結構早い部類に入るんじゃないかなっていうのが僕の感想で、
開発体験としてもコンパイル速度はそんなに悪くないというふうに思いますね。
あと、フロントエンドの開発に関しては、
タイプスクリプトが来る以前から、
コンパイルのようなステップがあったと思うんですよね。
それ何かっていうと、Webpackですね。
はい。
Webpackはコンパイラーではなくて、
バンドラーと言われるツールで、
いくつかのJavaScriptのファイルを一個に束ねるっていうツールだと思うんですけども、
そのバンドルのステップにタイプスクリプトのコンパイルっていうステップが
混ぜ込まれるっていうのが現状のフロントエンドの開発なので、
今までWebpackを使ってきて、
バンドルやってるよっていう現場だったら、
そこにタイプスクリプトが入ってきたとて、
あまり開発体験は変わらないのかなっていうふうに思います。
はい、なるほど。ありがとうございます。
確かにWebpackでもビルドしているなら、
そこに一個ステップ入ろうが入らないが、
あんま変わらないよねっていうのは確かに、
お話し聞いていたら思いました。
はい、ありがとうございます。
IT、インターネット業界に強い転職アプリGreenは、
今話題のテック企業、プロダクト開発、DX案件など、
Greenだけの良質な求人を数多く揃えています。
正式オープン前に企業の中の人とカジュアル面談ができるので、
仕事内容やメンバーのことをしっかり理解した後に
先行に進めます。
カジュアルに始める転職活動にGreenをご活用ください。
はい、では今タイプスクリプトの魅力みたいなところ、
いろいろお話を伺ったと思うんですけど、
タイプスクリプトこういう場面だと便利だよみたいなのを
12:00
もうちょっと詳しくお伺いしたいなと思っていて、
本当に今ってJavaScriptってフロントエンドの
ウェブの開発だけじゃなくて、
いろんな場面で使えるようになってきていると思うので、
特にタイプスクリプトこういうところも便利みたいなのがあったら
ぜひお伺いしたいです。
タイプスクリプトの特徴の一つが、
やっぱりそのJavaScriptにコンパイルするっていうところだと思うんですよね。
となると、JavaScriptが動くところなら
どこでもタイプスクリプト使えるぞっていう
応用範囲の広さっていうのがタイプスクリプトには
あるんじゃないかなというふうに僕は思っています。
もちろんフロントエンドは
JavaScriptの独断上だと思うんで、
そこにタイプスクリプトを導入するっていうのが
一番王道な使い方だというふうに思います。
やっぱりこれからのフロントエンド、これからというか
フロントエンドにおいてはタイプスクリプト
必要不可欠なツールになってきていて、
今後もしばらくはタイプスクリプトが使われていくんじゃないかな
というふうに思うんですけれども、
今後はバックエンドとかにもタイプスクリプトが
使われていくシーンが増えていくんじゃないかなというふうに
思っています。
周りのタイプスクリプトエンジニアの知り合いとかの
話を聞いてますと、フロントエンドもタイプスクリプトだし、
バックエンドもタイプスクリプトだよっていう現場が
いろいろ増えてきていて、バックエンドだと
PHPだったりRubyだったり
他にもいろいろ選択肢はあると思うんですけども、
そこでわざわざタイプスクリプトを使う
メリットは何なのかなというふうに考えてみたんですけれども、
やっぱり一つの言語を使うことで
フロントエンドとバックエンドで
同じコードを共有したりというのが一個利点として
あると思うんですね。
あるあるの悩みで、
同じようなオブジェクトを
フロントエンドではタイプスクリプトで実装して、
バックエンドでは他の言語で実装するみたいな、
移植するみたいなのが多々あると思うんです。
ありますね。
片方更新したらもう一方のフロントエンドとバックエンドの型を
更新したらフロントエンドの型もそれに追従させるみたいな
そういう手間があったりすると思うんですけども、
フロントエンドもバックエンドもタイプスクリプトだったら
そういった手間はなくて、一個のモジュールを共有して
同じ型を使いましょうみたいなことがしやすいのかな
というふうに思います。
チームでバックエンドの人とフロントエンドの人で
一つの言語を使っているので
タイプスクリプトの理解とかノウハウとかいったものを
全社的に共有できるのかなというところがあったりだとか、
それに伴ってチームの学びのパフォーマンスも
最大化できるのかなというふうに思います。
なるほど。
最近っていわゆるBFFみたいな話も
15:00
トピックとしてよく語られることが多い気がしているんですけど
そもそもバックエンドとフロントエンドが
一気通貫でいろいろなものが置き渡しできるなら
そもそもそれでいいじゃんというのは
確かにすごい真っ当なアプローチな気がするので
今聞いててなるほどなというふうに感じました。
スインさんにちょっとまたお伺いしたいんですけど
バックエンド以外にこういうところでも使えるみたいなので
事例ベースでもいいので
もしあったらお伺いしてみたいです。
タイプスクリプトが動くところっていうのは
実は意外と幅広くて
まずデスクトップアプリケーションでも使えますと
例えばVisual Studio Codeはタイプスクリプトで
作られていたりとかして
JavaScriptを使ってデスクトップアプリケーションを作れるので
そこにもタイプスクリプトが生きてきますし
モバイルアプリなんかも
リアクトネイティブがあったりだとか
CLIのアプリケーションももちろん
Node.jsをベースとして作れますし
最近だとサーバレス
ファンクションアザーサービスの部分でも
AWS LambdaとかGoogle Cloud Functionsだとか
クラウドフレアワーカーズとか
そういったCDN上でJSを実行できるという風な
ファースト化にもJavaScriptが使えるので
タイプスクリプトで書いて
それをJavaScriptにコンパリしてデプロイするとかもできます
あと面白いのが
インフラの領域にも手が出せるっていうところで
インフラの構成管理ツール
AWS CDKだったりとか
プルミって言われるツールが
タイプスクリプトに対応していて
タイプスクリプトで例えば
EC2のサーバー何台とか
RDSをこういう風な設定で
配置してみたいなことをタイプスクリプトで書いて
その通りにインフラ構築を自動化するっていう風な
こともできたりします
あとは様々なアプリケーションの拡張に
JavaScriptが使えるっていうところがあって
Googleスプレッドシートの拡張に
Google Apps Scriptを書いたりとか
ChromeとかFirefoxのブラウザ拡張に
JavaScriptが使えるので
そこでJavaScriptではなくてタイプスクリプトで書く
みたいなこともできます
なるほど ありがとうございます
本当に全部できる感じですね
今聞いている感じだと
本当にタイプスクリプトの汎用性の高さみたいなのを
改めて今お話聞いていて感じました
続いてなんですけど 今までいろいろタイプスクリプトの魅力
いっぱい伺ってきたので
タイプスクリプト改めていい言語だなって思っているんですけど
逆にタイプスクリプトが得意じゃないこととか
こういうところはあんまり向いてないかもみたいなのがあったら
18:02
ぜひお伺いしてみたいです
得意というかよくある誤解があるかなっていうところが
一つありまして
タイプスクリプトを使うと
JavaScriptよりも実行速度が落ちるっていう風な
意見があったりだとか
タイプスクリプトを使うとJavaScriptよりも逆に
速く動くぞみたいな意見があったりするんですけども
これはちょっと誤解だなという風に
僕は思ってまして
タイプスクリプトってJavaScriptにコンパイルしてから
実行するツールなので
タイプスクリプトで書こうが
JavaScriptで書こうが
実行速度ってそのJavaScriptの実行速度に
依存してくることになるので
理論上その実行速度は同じになるはずなんですね
タイプスクリプトは
実はランタイムがなくて
そうなんですね
Denoっていうサーバーサイドの
タイプスクリプトが直接実行できるツールがあるんですけども
それも内部的には1回JavaScriptに変換して
それを実行しているので
結局はJavaScriptを実行しているんですね
あとタイプスクリプトのコンパイラって
コンパイル時にコードの最適化を行わないんですね
そうなんですね
他の言語だと
実行時に速くなるようにコンパイル時に
処理をちょっと書き換えたりとかして
定数にできる部分は定数にしたりとか
あらかじめ計算しておける部分は計算してそれを
コンパイルしたりとかするんですけども
タイプスクリプトは一切そういうことをやらなくて
書いたコードはそのままJavaScriptにそのまま
コピーするみたいな形で
コンパイルされるんで
コンパイル時の最適化もないんで
速度が速い遅いっていうのは理論上
あまり出てこないのかなというふうに思います
なるほどありがとうございます
そういう意味で言うとJavaScriptで動くところでは
タイプスクリプトはもちろん動くし
逆に言うとJavaScriptでできないことは
タイプスクリプトでもできないというか
そこが向いてる向いてないというよりも
そういう性質はあるよねという感じなんですかね
ありがとうございます
ここまでいろいろお伺いしてきた中で
リスナーの皆さんの中にも
ぜひタイプスクリプトここから勉強していきたい
みたいな気持ちになってらっしゃる方も多分いると思うので
そういうまずタイプスクリプトを気になったら
どういうところから始めて
みたいなところもお伺いしてみたいです
タイプスクリプトが気になったら
僕たちが書いてあるサバイバルタイプスクリプトを
ぜひ読んでいただければなというふうに思います
21:01
他にもタイプスクリプトの入門書っていうの
いいものがいくつか出てまして
個人的におすすめなのがプロを目指す人のための
タイプスクリプト入門っていう
ウヒョさんという方が書かれている本ですね
ちょっと前に出た本だと思うんですけども
結構体系的に書かれていておすすめかなというふうに
思います あと最近
動画でプログラミングを学ぶ
っていう方が増えてると思うんですけども
そういった方に個人的におすすめなのが
YouTubeでトラゼミっていう方がやっている
フロントエンドエンジニア向けの
チャンネルがありましてそこでもタイプスクリプト
は使っていて結構わかりやすく
解説されたりしているので
そういった情報も参考にされるといいかなというふうに思います
あとはもうYYタイプスクリプトのところでの
発信だったりとかまずそこにむしろ参加してみる
みたいなところから始めてみたりも
するといいですかね
YYタイプスクリプトは今やってないとか
そうなんですね 執筆会しかやってなくて
そこに参加してもあんまり
学ぶって感じじゃないかもしれません
じゃあむしろそのYYタイプスクリプトに
参加されている方たちがアウトプットとして出している
サバイバルタイプスクリプトのところを
読んでいくっていうのが良さそうって感じですかね
ありがとうございます
スインさん今回もありがとうございました
まだまだお話足りないので次回もスインさんとお送りできればと思います
今日 本当にタイプスクリプトに関して
魅力だったりとかどう使うといいみたいなところ
いろいろお伺いできたので僕も早速
使っていきたいなと思っています
スインさんとタイプスクリプトとエンジニアキャリアについて
お話しした前回のエピソードもぜひお聞きください
さて この番組では感想や質問
リクエストなどお待ちしております
番組詳細欄にあるリンクよりお気軽にご投稿ください
ツイッターではハッシュタグ
エンジニアストーリーをつけてツイートしてください
そしてApple PodcastやSpotifyのPodcastではレビューもできますので
こちらにも感想書いてもらえると嬉しいです
Kiita株式会社は
エンジニアを最高に幸せにするというミッションの下
エンジニアに関する知識を記録 共有するためのサービスKiita
エンジニアと企業のマッチングサービスKiitaJobs
社内向け情報共有サービスKiitaチームを運営しています
ぜひカタカナでKiitaと検索してチェックしてみてください
お相手はKiitaプロダクトマネージャーの
清野俊文でした
