Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@chorei

JavaScriptに挫折しかけてTypeScriptと出会った話

More than 1 year has passed since last update.

社会人1年目&初投稿なので、温かく見守ってください。

はじめに

JavaScriptの勉強をしているのですが、書き方が人によってまちまちで難しい。
さらに動的型付けなので変数の理解に時間がかかってしまう。
英単語がわかっていないのに、文法の勉強をしている気分です。
そんな時、静的型付けができるTypeScriptのことを知り、触ってみると面白かったので書いてみました。

TypeScriptとは

Microsoftが開発したオープンソースのプログラミング言語です。
AltJS(Alternative JavaScript)の一種で、JavaScriptの書き方にルールをつけて開発の効率化や保守性の向上を図っています。
実行する際はJavaScriptにコンパイルされて動作します。

使うための準備

今回はNode.jsのnpmコマンドを使ってインストールしました。

npm install -g typescript

静的型付け

実際にTypeScriptを知るきっかけとなった静的型付けで変数を宣言してみます。

// JavaScript
var message = "Hello World!!";
var num = 1;
// TypeScript
var message: string = "Hello World!!";
var num: number = 1;

見た目上はほとんど変わりませんが、違う型の値を入れると以下のようにコンパイルエラーが発生します。
※ 使っているのは、Visual Studio Codeというエディタです。
image.png

ちなみに、型にanyを指定するか何も型を指定しないと、動的型付けの変数になります。

JavaScriptだと変数名やロジック部分を読んでどんな型の数値が入れたいのか把握しないといけませんが、TypeScriptだと変数名の宣言時に明言されているのでとても分かりやすい。

classの作成

JavaScriptでclassっぽい書き方ができるのを知っていましたが、functionやthisの使い方が複雑で理解しづらい。
TypeScriptだとclassが書きやすいとのこと。

というわけで、Carクラスを作ってみました。

car.ts
// TypeScript
class Car {

  name:string;
  speed:number;

  constructor(name: string, speed: number) {
    this.name = name
    this.speed = speed
  }

  public acceleration() {
    this.speed = this.speed + 10
  }
}

ほとんどJavaみたいなもんですね。(筆者はJava経験者なので、とても読みやすいです)
これをコンパイルしてJavaScriptにして見てみます。

// コンパイル方法
tsc car.ts
car.js
// JavaScript
var Car = (function () {
    function Car(name, speed) {
        this.name = name;
        this.speed = speed;
    }
    Car.prototype.acceleration = function () {
        this.speed = this.speed + 10;
    };
    return Car;
}());

うーん。やっぱりJavaScriptだとゴチャゴチャしているように感じてしまいます。(主にfunctionのせい)

その他TypeScriptでできること

  • アクセス修飾子
  • インターフェース
  • enum
  • ジェネリックス

などなど。他にもオブジェクト指向よりの機能が多くあります。

注意

JavaScriptに比べわかりやすいTypeScriptですが、
あくまでJavaScriptがベースなので、JavaScriptを全く触ったことがない人がTypeScriptをいきなり触るのはよくないです。
自分も、JavaScriptの理解度が低い状態でTypeScriptに手を出していますが、
コンパイルしてみてどのようなコードになっているかを確認する、
といったJavaScriptの学習補助的に触っているので許してください。

最後に

まだ触りだしたばかりですが、なかなか言語的におもしろく、JavaScriptに比べコードが書きやすかったり保守性に優れたりしているので、いい言語だなあと思います。
ただ、書きやすくなっているということは、その分自由度が減っているということなので、
TypeScriptではなくJavaScriptじゃないと書きづらいこともあるかもしれません。
JavaScriptの学習は続けつつ、今後のエンジニア人生の中でどんな言語が必要になってくるかわからないので、よさそうな言語探しをしていきたいと思います。

ひとまずTypeScriptで何ができるのかもう少し詳しく調べてみたいと思います。
JavaScriptの学習はどうした

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
chorei
rakus
「IT技術で中小企業を強くします!」というミッションを掲げ、中小企業の業務効率化に貢献する複数のクラウドサービスを提供しているIT企業です。「楽楽精算」「メールディーラー」など、国内トップシェアを誇る複数のサービスを開発し、累計導入社数は5万社を超えています。次の時代の"楽"を創るための、まだ見ぬサービスや機能を生み出す取り組みは、今日も続いています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?