#事のはじまり
後輩「サークルで何かウェブサービスの実装、運営したくないですか？」

僕「いいけど、何で作る？」

後輩「TypeScript」僕「Scala」

Scalaを触ったことのない後輩「......」 TypeScriptを触ったことのない僕「......」

困ったら開発は流行に乗るのが良さそう？

というわけで、ゼロからはじめるTypeScriptによるWebアプリ開発がスタートしました。

※この記事はTypeScriptを通して開発を学ぶ初心者のお話です。過度な期待は止めようね。

#TypeScriptって何？
TypeScriptはJavaScriptをベースにMicroSoftに開発された言語であり、JavaScriptのスーパーセットです。TypeScriptはコンパイルすることでJavaScriptコードを生成します。MicroSoftに開発されてるということはMicrosoft Visual Studio， Visual CodeのようなIDEにサポートされているということです（最初は全くサポートされてなかったらしいですけど）。
JavaScriptはECMAScriptという標準を持ち、ECMAScript6とともにTypeScriptが登場しました。その時に追加された機能にはクラスやlet、constなど開発の大規模化に伴って必要とされる便利な機能やTypeScript独自の機能が存在しました。

以下、独自にTypeScriptに追加された機能。

静的型付け
型推論
列挙型
インタフェース

など

#環境を作る(windows)
はじめにNode.jsをインストールします。Node.jsはサーバーサイドのJavaScript実行環境です。詳しくは別記事として書こうと思うので、今はこれがあればJavScriptが動くぞということだけ覚えてください。
インストールは公式サイトから行います。特に問題が無ければ推奨版(LTS)を導入しましょう。今回はwindowsのみの紹介ですが、macOS版インストーラやLinux版のバイナリも置かれています。インストールはデフォルトであれば迷うことはないと思います。

node -v

上記コマンドでバージョンの確認ができれば、次にTypeScriptの環境を作ります。
導入は簡単で、Node.jsのパッケージ管理ツールのnpm(Node Package Manager)を使います。
今回はTypeScriptの導入に使いますが、他にWebフレームワーク(Express)の導入にも使います。

npm install -g typescript

上記コマンドでTypeScriptが導入されるので、以下のコマンドで確認しましょう。
ローカルでtypescriptが使いたい場合は -g オプションを省略してください。

tsc -v

Hello,world!

hello.ts


function main() {
    const greet : String = "Hello, world!"
    console.log(greet)
}

main()

tsc hello.ts
node hello.js

おわりに

この記事はサークル内での情報共有を目的としたものであるため、「分からないこと」や「知っておかないといけないこと」などを開発とともに順次内容を増やしていく予定です。そのため、内容が飛んでいることや間違っていることがあるかもしれませんのでご注意ください。また、この記事ではHello,World!の出力を最後に行い、Web開発の基本にはこれから触れていきます。今後は簡単なWebアプリを開発することでExpressなどのフレームワークやORマッパーの使い方をまとめていきたいと思います。

TypeScriptをはじめよう 2