はじめに
先日から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を呼び出す作業をしないと、自動更新＆反映が起動しないようです※２。
<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タグの内容を以下のように書き換えてください。
"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を使うとこんなに楽だなんて知らなかったのです。
また、この記事に間違いなどがあれば、コメントでご教授くださるとありがたいです。プロコンがんばります(/・ω・)/。それじゃ！