Webフロントエンドを勉強したいあなたへ 開発環境詰め合わせ

先日FRP+Reactという技術を布教したくて、アドベントカレンダーにて[こんな記事](http://qiita.com/ababup1192/items/bf6d25845a4556a9e0ca)を書きました。

TLで反応を観測したところ、「JavaScriptわからない」「JSわからないのに、TypeScriptわかるか」とのフィードバックを得ました。そして考えを巡らせた結果、開発環境が無い(わかりづらい)ことが一番の原因では無いかと思いつきました。そこで、自分が普段使っている3つの開発用テンプレートを公開することで、布教を捗らせていきたいと思っています。

# なぜTypeScriptか

[TypeScript](https://www.typescriptlang.org)は、マイクロソフトによって開発されたプログラミング言語で、JavaScriptに対して、静的型付けとクラスベースのオブジェクト指向を加えたスーパーセットとなっています。しかし、今ではES2015(JavaScriptの現在主流なバージョン)にて逆輸入され、差分は静的型付けのみとなっております。それでもなお、初学者からの観点からしても型から自分がどのようなコードを書けるか限定出来るのは素晴らしい事だと思っています。もう少し詳しく言うと、関数にどのような型の値を渡せるか確認できたり、インターフェース等を定義してドキュメンテーションを付ける習慣をつけたりと言った具合ですね。また、[Visual Studio Code](http://code.visualstudio.com)によるエディタのサポートも厚いです。驚くべきは、今でも多くの仕様がバージョンアップにより導入されドンドン便利になっている(私自身も学習が追いついていません・・・)のも魅力的ですね。

デメリットは、サードパーティライブラリの追従に大きくバラツキがある点です。TypeScriptを便利に使うには、ソースコードに加えて[型定義ファイル](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)が必要となります。ライブラリ毎に型定義ファイルが用意されていても、不十分だったり、そもそも用意されていないということが多いのが現状です。

そこで私の取った対策は、なるべくミニマルな依存の少ない環境を用意することでした。それでは、3つの開発テンプレートについての説明をしていきましょう。

# 3つの開発テンプレート

私はTypeScriptを開発する際には、以下の３つのテンプレートを使い分けています。

## [TypeScriptテンプレート](https://github.com/ababup1192/typescript-template)

ブラウザ(HTMLやCSS)に依存せずNode.js上でTypeScriptの機能のみを試すときに使うテンプレート。最低限のコンソール出力と単体テストが行える。

## [Reactテンプレート](https://github.com/ababup1192/react-template)

TypeScript上でReactを開発出来る環境。[webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html)を利用して、ローカルサーバを立てブラウザで見た目を見ながらアプリケーションが検証できる。[Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html)という機能で、サーバを再起動することなくストレスフリーな開発が行える。

## [FRP+Reactテンプレート](https://github.com/ababup1192/frp-react-template)

[Bacon.js](https://baconjs.github.io)というFRPライブラリを使い、Flux環境を独自に実装している(詳しくはこちらの[記事](http://qiita.com/ababup1192/items/bf6d25845a4556a9e0ca)へ)。Reactがシンプルなフローで記述することが出来る。

本当にTypeScript初学者は、上から順番に辿って行くと良いと思います。

# 事前準備

開発をする前の事前準備ですが、このテンプレートを使用するには2つだけ依存してものがあります。
一つは、Node.jsと[Yarn](https://yarnpkg.com)です。

まずNode.jsは、ブラウザに依存しないようなコード(コンソール上で動く)を実行するためのJavaScriptエンジンです。フロントエンドJSと違い、OSのファイルシステムにアクセスすることが出来たり、サーバサイドJSに使われたりします。今回のフロントエンド開発では、TypeScriptのコンパイラを実行したり、ライブラリを管理したり、最終的な成果物(フロントエンドのためのJavaScript)をまとめ上げたり、ミニファイしたり非常に様々なことを実行するために使われます(TypeScriptを使用しないとしても必要です)。Node.jsを導入するには、直接入れたり[nodebrew](https://github.com/hokaccha/nodebrew)を使ったりして入れてください。お好みでどうぞ。

もう一つは、[Yarn](https://yarnpkg.com)と呼ばれるパッケージ管理ツールです。少し前は、npm(node package manager)と呼ばれるNode.js公式のパッケージ管理ツールを使うことが主流でしたが、Yarnを使用した方が以前落としてきたパッケージをキャッシュしていたりするので、非常に高速です。

# 使い方

それぞれのテンプレートの使い方は、ほとんど共通しています。まず、使いたいテンプレートをgitで取得した後、yarnコマンドにより必要パッケージをインストールします。

```
$ yarn
```

もし、新しいパッケージをインストールしたい場合は、```yarn add [package]```という具合に使いましょう。詳しくは、[Yarnドキュメント](https://yarnpkg.com/en/docs/)を参照してください。

単体テストを実行したい場合には、以下のコマンドを使用します。

```
$ yarn test
```

これらのコマンドはyarnに元々定義されているものの他に自分でpackage.jsonファイルの*scripts*以下にオブジェクトとして追記することが出来ます。定義したコマンドは、```yarn run [command]```として実行することができますが、物によってはrunを省略出来たり出来なかったりします(ここの仕様が曖昧です・・・。基本省略出来ると思います)。testを見ると、[Jest](https://facebook.github.io/jest/)と呼ばれるテストツールが使われているのがわかると思います。非常に高性能なフルスタックテストフレームワークで、Reactのコンポーネントのテストなんかもすることが出来ます。

package.json

```json
{
  "name": "typescript-template",
  "version": "0.1.0",
  "main": "index.ts",
  "license": "MIT",
  "scripts": {
    "test": "jest",
    "build": "webpack",
    "buildRun": "webpack && node build/bundle.js"
  },
...
```

TypeScriptテンプレートの場合はコンソールで実行するため、以下のコマンドを使用します。

```
$ yarn buildRun
```

やっていることは、webpackコマンドにより実行ファイル(bundle.js)を生成して、nodeコマンドを使用し、 build/bundle.js を実行しているだけです。

Reactを使用するテンプレートの場合は、サーバを起動するために以下のコマンドを使用します。

```
$ yarn start
```

サーバが立ち上がった場合は、http://localhost:8080/webpack-dev-server/ へアクセスしてください。http://localhost:8080/ にアクセスした場合でも、アプリケーションの挙動を確認することは出来ますがソースコードを変更したときに、ホットリロードしなくなってしまいます。注意しましょう。

最後に、成果物を生成する場合のコマンドです。

```
$ yarn build
```

これで、build/ に(Reactの場合は)index.htmlとbundle.jsが生成されて、ブラウザで開くかnodeコマンドを実行することでアプリケーションの挙動が確認出来るはずです。ライブラリやCSSは、なんと全てbundle.jsにまとめあげられて(bundle)います。これはなんともすごいですね。

# まとめ

この記事では、すごい便利な環境を提供・・・ではなく、すぐさまコーディングに集中するために用途ごとに合わせたテンプレートを紹介しました。それぞれに使用されている環境やツールの詳細は、思考の妨げになると思い最小限にしか行っていません。もし、テンプレートに不満が出てきた場合には、自分なりの環境を作り上げてください。そのためにもテンプレートはミニマルを意識して作られています。最後に皆さんが良いフロントエンド開発が出来ますように。