はじめに

　先日からTextAliveAppAPIの勉強をしており、APIの使い方まで分かるようになりました。しかし、実行環境がサンプルのままだったので、少し気持ち悪かったのです。そこで今回、自力で環境を構築しようと試み、苦戦し、理解したので記事にまとめたいと思います。

この記事の対象者

かなり初心者
nodeJSのインストールが完了している人
TextAliveAppAPIの開発環境を自前で作りたい人

　この記事は、nodeJSのインストールが完了しており、npmコマンドが使用できる方が対象です。また、ゼロからjavascriptの環境を構築する手順を書きます。かつ、TextAliveAppAPIのサンプルと同じ開発環境を整える手順で書きます。筆者の実行環境は、Windows10です。一応注意してください。

この記事から得られる事

javascriptのデバッグがタイムリー（保存→自動で反映）に行える

要約

　NodeJS上にparcelをインストールし、parcelからファイルを起動する。

parcelの「🔥 ホットモジュールリプレイスメント」

　実は、筆者はparcelについてあまり分かっていません((+_+))。しかし、parcelの公式ページには、以下のようなことが書いてあります。

Parcel は、開発時に変えた変更に応じてブラウザー上でモジュールを自動アップデートします。もちろん、設定不要です。

つまり、開発時の変更内容を自動でアップデートしてくれる、ということですね。例えば、chrome上で実行結果を確認していたとすると、javascript変更が即座にchromeへ反映される。感激ですね。

参考
※Parcel 驚くほど速く、設定不要なWebアプリケーションバンドラー

手順１．parcelをインストールする

　まずは、parcelをnodeJS上にインストールしましょう。以下のコードを打ち込むと、インストールできます。

npm install -g parcel-bundler　

参考
※PARCEL はじめに

手順２．nodeJSプロジェクトの初期化

　開発するディレクトリ上で、nodeJSプロジェクトの初期化を行いましょう。以下のコマンドを打ち込んでださい。package.jsonというファイルが出来ましたね。

npm init -y

参考
※PARCEL はじめに

手順３．必要最低限のファイルを作成する

　開発するディレクトリ上で、index.htmlとindex.jsファイルを作成してください。これはparcelでデバッグする上で必要最低限なファイルです。またindex.htmlでは、以下のように、必ずindex.jsファイルを呼び出すようにしてください。
　index.html上でindex.jsを呼び出す作業をしないと、自動更新＆反映が起動しないようです※２。

index.html

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

参考
※１PARCEL はじめに
※２Parcel does not live reload browser if index.html is the only file #2557

手順４．package.jsonのnpm scriptsを編集する

　正直、この手順はしなくてもいいですが、TextAliveAppAPIの開発環境に合わせるために取り上げました。
　nodeJSにはnpm run <hogehoge>というコマンドがあり、特定のコマンドを実行する機能があります。今回はこれを用いて、parcelを呼び出すようにしたいと思います。
　まず、package.jsonを開いて、scriptタグの内容を以下のように書き換えてください。

package.json->script

"scripts": {
  "dev": "parcel index.html"
},

参考
※フロントエンド開発の３ステップ（npmことはじめ）ビルドは npm run

手順５．デバッグしてみる

　準備完了です。以下のコマンドを打ち込み、実行してみましょう。おそらくデフォルトのサーバーであるhttp://local:1234 が立ち上がるので、chromeとかで開くことが出来ます。
　そして！index.htmlとかindex.jsとかを編集し、保存すると、ブラウザも自動的に更新されます！これで開発効率爆上がりですね。

npm run dev

おわりに

　nodeJSって何ぞや。。。ってところから10日もたってない筆者です。nodeJSを使って、index.htmlとかを編集するだけで、デバッグしたかったのです。そして、parcelを使うとこんなに楽だなんて知らなかったのです。
　また、この記事に間違いなどがあれば、コメントでご教授くださるとありがたいです。プロコンがんばります(/・ω・)/。それじゃ！

NodeJS+Parcelでjavascriptのタイムリーなデバッグを可能にする