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

先日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)います。これはなんともすごいですね。

まとめ

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