【完結】Rails初心者がRails4でTypeScriptを使えるようにするまでのお話

# はじめに

こんにちは！TypeScript好きですか！？僕はTypeScript大好きです！
RailsはCoffeeScriptが主流ですよね、TypeScript使いたいですよね？使いましょう！

Railsのバージョンは4.1です。Rails4で使いたいですよね！
ちなみに僕はRailsは初心者です。よくわかっていません。

# 整えたい環境

- Rails v=4.1
- TypeScript使いたい

# とりあえずググってみた

とりあえずいろいろググってみたら下記のような参考記事が出てきました。

[Rails で TypeScript を動かそうとして失敗した記録](http://tkawachi.github.io/blog/2012/12/09/trying-typescript-rails-out/)
[RailsでTypeScript、再び](http://tkawachi.github.io/blog/2013/04/25/typescript-and-rails-again/)

1年以上前の記事なのでちょっと古いのですが、`typescript-rails` というgemがあることはわかりました。
とりあえず動いたっぽいということなので参考までに導入してみましょう。

# とりあえず typescript-rails を試す

公式はこちらです。
[github.com/kgz/typescript-rails](https://github.com/kgz/typescript-rails)

READMEに気になる一文が…。

```
Looking for a new maintainer: Since I am no longer working with TS in my day to day life, and there are some major changes coming up, I'm looking for someone who wants to take over development of this gem
```

もうメンテされてないようです…。とりあえずインストールだけでもしてみましょう。
Gemfileに`gem "typescript-rails"`を追記して`bundle install`してみましょう。

## setup

```zsh
% cd /path/to/rails4-project/
% vim Gemfile
gem "typescript-rails"

% bundle install
```

インストールできたらtsファイルを書いてみましょう。
ファイル名は`*.js.ts`の形式で書きます。

```zsh
% vim app/assets/javascripts/app.js.ts

console.log(0);
```

## 動作確認

それでは動かしてみましょう。

```zsh
% rails s
```

「へんじがない、ただのしかばねのようだ」

やっぱ動かないのかなーと思ってレンダリングされたソースをみてみました。

```html
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/javascripts/app.js.ts.js"></script>
<script src="/assets/application.js?body=1"></script>
```

なんかパスおかしい…。Rails4に対応していないようです…。

# Rails4に対応したプルリクがないか調べてみる

とりあえず[github.com/kgz/typescript-rails](https://github.com/kgz/typescript-rails)のプルリクやissueをみてみると、同じ問題にぶちあたっている人がいました。

> Rails 4 support
https://github.com/kgz/typescript-rails/issues/10

どうやら別の人がRails4対応してプルリクを投げていたようですが、ここのやり取りを見ればわかる通り、もうメンテはされないっぽいです…。

> Updated with two fixes for Rails 4 and Ruby 2.0.
https://github.com/kgz/typescript-rails/pull/11

# Rails4に対応されたリポジトリをForkして使ってみる

とりあえずRails4に対応したForkされたリポジトリがあるのでそれをForkして使えるようにしてみます。

> Rails4に対応したプルリクを投げていたリポジトリ
[github.com/brainling/typescript-rails](https://github.com/brainling/typescript-rails)

上記リポジトリをForkして使ってみましょう。ForkしたらGemfileを更新して`bundle install`します。

```zsh
% vim Gemfile
gem "typescript-rails", '>= 0.1.3', git: "https://github.com/funnythingz/typescript-rails.git"

% bundle install
```

## 動作確認

```zsh
% rails s
```

さてどうでしょう…？

```html
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/app.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
```

ファイルも参照できますね！やりましたね！

# TypeScriptを書いてみる

ここまでできたらTypeScriptを書いてみましょう！

```zsh
% vim app/assets/javascripts/app.js.ts
```

とりあえず`module`と`class`をつかってみます。

```ts
module Rails {

    export class Application {
        constructor() {
            console.log('Typescript ready.');
        }
    }

    new Application();

}
```

## 動作確認

```js
var Rails;
(function (Rails) {
    var Application = (function () {
        function Application() {
            console.log('Typescript ready.');
        }
        return Application;
    })();
    Rails.Application = Application;

    new Application();
})(Rails || (Rails = {}));
```

「なんということでしょう。」

ちゃんとTypeScriptがコンパイルされてJavaScriptになっているではありませんか！やりました！

# Rails4でTypeScriptが動いた！

細かいことはいろいろまだ試していませんが、これからがっつり試してみたいと思います。

さよならCoffeeScript！こんにちはTypeScript！

> 参考リポジトリ
[github.com/funnythingz/rails-typescript-example](https://github.com/funnythingz/rails-typescript-example)

# 【追記】typescript-railsにメンテナー登場！【朗報】

TypeScript及びRailsファンの皆様、朗報です！typescript-railsのメンテナーに[gfx](https://github.com/gfx)さんが登場しました！これは嬉しい、嬉しすぎる！

> [Now a new maintainer, FUJI Goro, comes here](https://github.com/typescript-ruby/typescript-rails/commit/0a79136557a1524f45fa804e01f9a6e64dc2ea71)

## 今すぐGemfileを更新しよう

```shell-session
% vim Gemfile

gem "typescript-rails", '~> 0.3.0'
```

タッタターン！

```shell-session
% bundle install
```

確認してみましょう。

```shell-session
% gem list | grep 'typescript'
typescript-node (1.1.0)
typescript-rails (0.3.0)
typescript-src (1.0.1.2)
```

やりましたね！これでガクブルすることなく安心してRailsでTypeScriptを使うことができるようになると思います。
日々メンテナーの方に感謝しながらプログラミングしていきたいと思う今日このごろでした。

おしまい。