TypescriptとJavascriptのどちらを勉強するかで迷ったら
記事IT・テクノロジー
TypescriptとJavascriptのどちらを勉強するかで迷ったら
最近は、少し規模の大きな Web 開発になると Typescript を利用するケースが増えています。 特に、グループで開発する際には有利なことも多いので採用するケースが増えているようです。 Web 開発の技術を勉強する場合、基本は HTML・CSS・Javascript ですが、Typescript を勉強した方が良いのか迷ってしまうことも多いと思います。
そんな時はどうしたら良いのかを書いてみました。
Typescript は Javascript の拡張
Web アプリのプログラムを書く上で厳密に Typescript で書く場合は、Javascript より多少面倒に感じます。理由は、Typescript は Javascript は Javascript より変数の型を厳密に管理するプログラミング言語だからです。
逆にいうと、この型を厳格に管理するので、コンパイル事に型のチェックを行うことができるのでコードの品質が高くなるのが Typescript を利用する最大のメリットです。
ご存知の方も多いと思いますが、Typescript のコードはコンパイルされた後は Javascript です。実際に Web ブラウザで実行されるのは Javascript なので性能などは殆ど変わりません。結局、型を静的に管理して厳格に扱う事で、コンパイル時に変数の型や初期化、関数へ渡す値の型をチェックをできるようにしたのが Typescript です。
Typescript 自体の書き方自体は、フレキシブルで Javascript とほぼ同じ書き方をしても使うことはできます。しかし、この使い方では、Typescript のメリットを余り利用できないことになってしまいます。
Typescript は難しいのか？
結論から書いてしまえば、Javascript と比べて Typescript は難しくはありません。ところが Javascript に慣れてしまっている場合、面倒に感じるだけです。つまり、基本的に慣れの問題です。従って、これから Javascript を学習しようとしている方には、「最初から Typescript で書く」ことをお勧めですします。
Typescript に慣れてしまった方が、品質の高いコードを書くことができます！
もともと、C 言語や Java などは型を厳格に管理するプログラミング言語なので、最初にこうした言語を学習された方には特に問題はないといえます。後から出てきた言語は、Javascript や Python のように動的に型を割り当てる事が可能な言語が多いので、Typescript 自体は時代に逆行するような部分がありますが、規模の大きなプログラムでは、型を静的に管理した方がバグが少ないコードを書きやすくなります。
という事で、「迷ったら Typescript を学習する」方をお勧めします！
面倒だったら Javascript に戻れば良いだけ！
Typescript が面倒に感じる場合、シンプルに Javascript に戻れば良いだけです。まずはやって見ることをお勧めします。
Typescript を学習する一番の意味は、「変数の型と初期化を意識する」これにつきます。 Javascript でプログラムを書く場合でも、基本的にこれは変わりません。
プログラミング言語の仕様で「強制される」か「自主的にやるか」の違いだけです。 実際に、Javascript で書く場合でも、変数の方などをコメントに入れておくだけでコードの品質は格段に上がります。変数を宣言する時や、関数（メソッド）を定義する際にコメントを入れておくだけで、後からコードを読む際に役立ちます。
開発中は頭の中にある程度変数の方なども覚えているので大きな問題ではありませんが、開発後にデバッグや手直しでコードをみる場合などは、忘れていることが多いのでコメントがあると助かります。
型を意識して書いていれば、Typescript の「制限」もさほど面倒には感じない物です。 いずれにしても、コメントも入れないで思いつきで書いているとバグの多いプログラムになりやすいので、個人的には最初から Typescript で書いてしまえば全て解決と考えています。
結局は、いずれにせよ型を意識して詳しいコメントを入れて書くのか、Typescript で書くかの違いです。Typescript で書いてある場合、コメントの少ない他人の書いたコードでもある程度読むことは簡単です。
Typescript で書いた方がコードの理解が深まる！
別のメリットは、Typescript で書くと型を意識する必要があるので、外部のモジュールを利用する際も、ドキュメントをしっかりみて型を確認しながら書く癖がつくので外部のモジュールを利用しても、データの流れを把握しやすくなりますし、誤解も少なくなります。
逆に面倒な部分は、外部のモジュールを利用する場合、型の定義がよくわからない場合も多いので Typescript で厳密にコードを書くのが面倒になリます。実は、自分のコードよりこうした外部のモジュールを利用する場合の型を意識するのが Typescript でコードを書く場合に一番面倒なところです。全てのモジュールのドキュメントが分かりやすく書かれているわけではないので、ちょっと面倒なところです。
しかし、最近のエディタは頭が良くなっているので、カーソル位置の変数の型を表示してくれたりなど、サポートする機能も充実しているので以前よりは楽に書けるようになっています。H
フレームワークを使う場合は書き方が変わる場合があります
Typescript 自体は余り難しい物ではないのですが、Web 開発でよく利用するフレームワークである、React や Vue を使った場合は若干書き方のスタイルが違う場合があります。
例えば、React をクラス形式のコンポーネントで書いた場合、Javascript では
import * as React from "react";
class Sample extends React.Component {
super(props);
this.state = {
a: 0,
}
test(param) {
const a = this.state.a + param;
this.setState({
a: a
})
}
}
のように書きます。これを Typescript で書く場合ちょっと書き方が違います。
import * as React from "react";
interface IProps {
prop_a:number;
}
interface IState {
a: number;
}
class Sample extends React.Component<IProps, IState> {
super(props:IProps);
this.state = {
a: 0,
}
test(param:number): void {
const a: number = this.state.a + param
this.setState({
a: a
})
}
}
のように書きます。ステートやプロパティの型を宣言するためにこのような書き方をしますが、知らないと上手くコンポーネントに値を渡せなかったりエラーになったりします。
Vue の場合も書き方が違います。Javascript の場合、「script」の部分は、以下のようにかきます。
<script>
export default {
name:"Sample",
props:["prop_a"],
data() {
return{
a: 0,
}
},
methods: {
test(param) {
this.a = this.a + this.prop_a;
}
}
}
</script>
Typescript で書くと少し違います。
<script>
import Vue from "Vue";
export default Vue.extend({
name: "Test",
props:["prop_a"],
data() {
return {
a: 0,
}
}
methods:{
test(param:number):void {
this.a = this.a + param;
}
}
})
</script>
のようになります。書き方自体は大差はありませんが知っているかどうかが問題です。
こうしたちょっとしたことで、エラーになったり上手く動作しなかったりするので面倒になって諦めてしまう場合が多いと思います。
実際は、殆どのこうしたケースは Google 検索すると、書き方や解決方法が見つかる場合が殆どです。最初は知らない事の方が多いので面倒ですが、慣れてしまえば書き方もわかるので、それほど９ではなくなります。
外部モジュールを使う場合も注意
npm などで外部モジュールを取り込んで利用する場合にもちょっとしたコツがあります。 全てのモジュールというわけではありませんが、多くの既存のモジュールでは Typescript 用の型を定義したモジュールも必要な場合があります。
例えば、React でよく利用する React Router を Typescript で使う場合です。
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "./home";
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact>
<Home />
</Route>
</Switch>
</BrowserRouter>
);
}
のように記述します。Javascript の場合は React Router (react-router-dom)をインストールしてあれば問題ありませんが、Typescript の場合、追加で「＠types/react-router-dom」をインストールしないとエラーになります。
従って、Typescript で使う場合は、
$ npm install react-router-dom
$ npm install ＠type/react-router-dom --save-dev
のようにインストールします。「--save-dev」にする理由は、このモジュールは Typescript をコンパイルする時に必要なモジュールで実行時には、Javascript で実行するので必要ないため、通常の依存関係のリストに入れないためです。
実際に、Typescript でコーディングを始めると細かい点で色々出てきますが、一つのプロジェクトを乗り切ると後はそれほど面倒ではなくなります。
まとめ
Typescript は面倒に感じる方も多いと思いますが、学習するかどうか迷ったらトライすることを絶対お勧めします。迷うということは、「何か気になる」という事です。 どちらかというと、Typescript の学習は「やった方が良い事」に分類されるため、後でいいやと思ってしまうのが普通です。しかし、何かきっかけがあった場合は、先のことを考えると学習しておいて絶対に損のない物だと思います。
最初は少し面倒ですが、実は「慣れ」の問題です。慣れてしまえば手間ではなくなりますし、コンパイル時にチェックできる項目やコードの品質や読みやすさを考えるとできることなら利用した方が良い技術です。
やった方が良い事の一つですが、思い立ったらやるがお勧めです！
