Angular2 WEB WEBフロントエンド開発

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

投稿日:2017年4月10日 更新日:

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。現在のWEBフロントエンドの開発については様々なツールを組み合わせて1つの開発環境を自分なりにカスタマイズして構築するため、非常に複雑です。また、各ツールの移り変わりが激しいことも特徴だと思います。そのため、各ツールが発生した歴史的経過や背景を正確に捉えないと、疑問に感じる事が多かったり、うまく使いこなせなかったりする事があるようにも感じます。

 

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築(angular-cli)』を参考にして下さい。

  • OS : Windows 7 Home Premium
  • Node.js : V6.9.4
  • npm : V3.10.10

また、記載したコード等をコピー&ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。 『円マークとバックスラッシュ』を参考にして下さい。

 

 

1.使用するパッケージの説明

(1)TypeScript

TypeScriptのパッケージです。

 

(2)lite-server

軽量のローカルWEBサーバです。BrowserSyncが内蔵されており、js、html、cssなどのソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

 

(3)concurrently

concurrentlyを使用すると、複数のnpm-scriptコマンドを同時に実行することが可能になります。使い方は、concurrentlyの引数に、同時に実行したいコマンドをダブルクオーテーションでくくって列挙するだけです。

 

 

2.プロジェクトディレクトリの作成

最初にプロジェクトで使用するディレクトリを作成します。今回は「c:\ng2test\easy01」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダも作成して下さい。

 

 

3.package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのpackage.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

 

 

4.パッケージのインストール

typescript、lite-server、concurrentlyのパッケージをローカルインストールします。[--save-dev]オプションを付けて、パッケージ情報をdevDependenciesにバージョン付きでpackage.jsonに書き込みます(開発時のみに利用するライブラリのバージョンを管理します)。

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

 

 

5.TypeScriptのコンパイル環境を構築

以下の手順に従い、TypeScriptのコンパイル環境を構築します。

(1)最初にsrc\tsconfig.jsonを作成します。tsconfig.jsonはTypeScriptのコンパイル方法の指定やTypeScriptコード同士の依存関係を解決します。

(2)次にsrc\sample.tsを新規作成します。Dogクラスを格納するTypeScriptファイルです。ファイルはUTF-8で作成して下さい。

(3)コンパイルをテスト実行してみます。src\sample.jsが作成されると成功となります。

(4)今度はファイル監視&コンパイルの実行を行います。[-p]オプションはディレクトリを指定してコンパイルを実行します。指定したディレクトリ内のtsconifg.jsonの設定でコンパイルを実行します。[-w]オプションは常駐してtsファイルの変更を監視し、tsファイルの変更が発生すると自動でコンパイル処理を実行します。

コマンド実行後にsample.tsファイルを変更保存してみて下さい。コマンドプロンプト画面を観察ていると、実行プログラムが常駐しており、tsファイルの変更保存で再コンパイルが自動実行される様子を確認する事ができます。 生成されたjsファイルの中身を確認してもtsファイルの変更で再コンパイルが実行され、jsファイルが再生成された事が認識できると思います。 CTRL+Cキーで常駐を停止します。

 

 

6.lite-serverの環境を構築

以下の手順に従い、lite-serveの実行環境を構築します。

(1)最初にルートとなるsrc\index.htmlを作成します。<script>タグで前項でコンパイルした結果のsample.jsを指定しています。ファイルはUTF-8で作成して下さい。

(2)bs-config.jsonを新規作成します。lite-serverの[-c]オプションで、bs-config.jsonを指定する事によって、実行時の動作オプションを指定する事が出来ます。

(3)次にlite-serverをテスト実行します。コマンドの実行で標準ブラウザが起動して、http://localhost:3000にアクセスされます。sample.tsのDocクラスのnameプロパティが表示されればOKです。

(4)最後にlite-serverのファイル変更監視によるブラウザのリロードを確認します。src\index.htmlの<body>タグ内に適当な文字『WEBフロントエンド開発』を追加して、ファイル保存をしてみて下さい。自動的にブラウザ画面がリロードを行い、追加した文字が表示されます。コマンドプロンプト画面を観察ていると、自動的にリロードされる様子を確認する事ができます。

上記のテスト時に、IEだとリロードが発生しない場合がありました。FireFoxやChromeだと問題がありませんでした。

 

 

7.開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

開発実行時はコマンドプロンプトから「npm run start」を実行することで開発を行う事ができます。srcディレクトリ以下のjs、html、cssなどのソースファイル変更を監視し、自動的にTypeScriptのコンパイルが実行されブラウザのリロードを行ってくれます。

 

 

8.ファイル構成

最終的に以下のようなファイル構成になります。

ディレクトリ ファイル 説明
easy01 package.json プロジェクト定義ファイル
easy01 bs-config.json Lite-Serverの動作設定
easy01\src tsconfig.json TypeScriptのコンパイル設定
easy01\src sample.ts TypeScriptソースファイル
easy01\src sample.js sample.tsのコンパイル結果
easy01\src sample.js.map sample.tsのコンパイル結果
easy01\src index.html  
easy01\node_modules   インストールされたパッケージ

 

以下、参考にさせて頂いたページです。ありがとうございました。

 

スポンサーリンク

スポンサーリンク

-Angular2, WEB, WEBフロントエンド開発

執筆者:

関連記事

npmについて

コマンドについて ・コマンド コマンド 説明 npm init 対話形式で項目を入力してpackage.jsonを作成します。 npm init -y デフォルト値でpackage.jsonを作成しま ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...