先日FRP+Reactという技術を布教したくて、アドベントカレンダーにてこんな記事を書きました。
TLで反応を観測したところ、「JavaScriptわからない」「JSわからないのに、TypeScriptわかるか」とのフィードバックを得ました。そして考えを巡らせた結果、開発環境が無い(わかりづらい)ことが一番の原因では無いかと思いつきました。そこで、自分が普段使っている3つの開発用テンプレートを公開することで、布教を捗らせていきたいと思っています。
なぜTypeScriptか
TypeScriptは、マイクロソフトによって開発されたプログラミング言語で、JavaScriptに対して、静的型付けとクラスベースのオブジェクト指向を加えたスーパーセットとなっています。しかし、今ではES2015(JavaScriptの現在主流なバージョン)にて逆輸入され、差分は静的型付けのみとなっております。それでもなお、初学者からの観点からしても型から自分がどのようなコードを書けるか限定出来るのは素晴らしい事だと思っています。もう少し詳しく言うと、関数にどのような型の値を渡せるか確認できたり、インターフェース等を定義してドキュメンテーションを付ける習慣をつけたりと言った具合ですね。また、Visual Studio Codeによるエディタのサポートも厚いです。驚くべきは、今でも多くの仕様がバージョンアップにより導入されドンドン便利になっている(私自身も学習が追いついていません・・・)のも魅力的ですね。
デメリットは、サードパーティライブラリの追従に大きくバラツキがある点です。TypeScriptを便利に使うには、ソースコードに加えて型定義ファイルが必要となります。ライブラリ毎に型定義ファイルが用意されていても、不十分だったり、そもそも用意されていないということが多いのが現状です。
そこで私の取った対策は、なるべくミニマルな依存の少ない環境を用意することでした。それでは、3つの開発テンプレートについての説明をしていきましょう。
3つの開発テンプレート
私はTypeScriptを開発する際には、以下の３つのテンプレートを使い分けています。
TypeScriptテンプレート
ブラウザ(HTMLやCSS)に依存せずNode.js上でTypeScriptの機能のみを試すときに使うテンプレート。最低限のコンソール出力と単体テストが行える。
Reactテンプレート
TypeScript上でReactを開発出来る環境。webpack dev serverを利用して、ローカルサーバを立てブラウザで見た目を見ながらアプリケーションが検証できる。Hot Module Replacementという機能で、サーバを再起動することなくストレスフリーな開発が行える。
FRP+Reactテンプレート
Bacon.jsというFRPライブラリを使い、Flux環境を独自に実装している(詳しくはこちらの記事へ)。Reactがシンプルなフローで記述することが出来る。
本当にTypeScript初学者は、上から順番に辿って行くと良いと思います。
事前準備
開発をする前の事前準備ですが、このテンプレートを使用するには2つだけ依存してものがあります。
一つは、Node.jsとYarnです。
まずNode.jsは、ブラウザに依存しないようなコード(コンソール上で動く)を実行するためのJavaScriptエンジンです。フロントエンドJSと違い、OSのファイルシステムにアクセスすることが出来たり、サーバサイドJSに使われたりします。今回のフロントエンド開発では、TypeScriptのコンパイラを実行したり、ライブラリを管理したり、最終的な成果物(フロントエンドのためのJavaScript)をまとめ上げたり、ミニファイしたり非常に様々なことを実行するために使われます(TypeScriptを使用しないとしても必要です)。Node.jsを導入するには、直接入れたりnodebrewを使ったりして入れてください。お好みでどうぞ。
もう一つは、Yarnと呼ばれるパッケージ管理ツールです。少し前は、npm(node package manager)と呼ばれるNode.js公式のパッケージ管理ツールを使うことが主流でしたが、Yarnを使用した方が以前落としてきたパッケージをキャッシュしていたりするので、非常に高速です。
使い方
それぞれのテンプレートの使い方は、ほとんど共通しています。まず、使いたいテンプレートをgitで取得した後、yarnコマンドにより必要パッケージをインストールします。
$ yarn
もし、新しいパッケージをインストールしたい場合は、yarn add [package]という具合に使いましょう。詳しくは、Yarnドキュメントを参照してください。
単体テストを実行したい場合には、以下のコマンドを使用します。
$ yarn test
これらのコマンドはyarnに元々定義されているものの他に自分でpackage.jsonファイルのscripts以下にオブジェクトとして追記することが出来ます。定義したコマンドは、yarn run [command]として実行することができますが、物によってはrunを省略出来たり出来なかったりします(ここの仕様が曖昧です・・・。基本省略出来ると思います)。testを見ると、Jestと呼ばれるテストツールが使われているのがわかると思います。非常に高性能なフルスタックテストフレームワークで、Reactのコンポーネントのテストなんかもすることが出来ます。
package.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)います。これはなんともすごいですね。
まとめ
この記事では、すごい便利な環境を提供・・・ではなく、すぐさまコーディングに集中するために用途ごとに合わせたテンプレートを紹介しました。それぞれに使用されている環境やツールの詳細は、思考の妨げになると思い最小限にしか行っていません。もし、テンプレートに不満が出てきた場合には、自分なりの環境を作り上げてください。そのためにもテンプレートはミニマルを意識して作られています。最後に皆さんが良いフロントエンド開発が出来ますように。