シンプルなTailwind環境構築を効率的に改革 Browsery Sync

今回は実際僕が、Tailwindで開発をする際に、入れているVisual Studio Codeのプラグインの紹介とBrowserSyncを使っての自動リロード（ホットリロード）での環境を構築したいと思います。

初めに

どもども平社員の龍ちゃんです。この記事は、前回の記事である「Tailwind環境構築をシンプルに」を補足した内容となっています。まだ読んでいなくて、Tailwindに興味がある方は是非ご一読ください。

さて、前回の内容を読んでいる前提で、環境におけるストレス部分を共有をします。第一の問題として、Tailwindで画面に変更を加えた際に、ブラウザをリロードしないと画面が更新されない問題ですね。Webデザインを作成中に更新するための手間は、ストレスを感じてしまいますね。第二の問題として、エディタを使っての開発ではないとストレスを感じてしまう点ですね。これは、開発者のほとんどが抱えている問題といっても過言ではありません。

今回は実際僕が、Tailwindで開発をする際に、入れているVisualStudioCodeのプラグインの紹介とBrowserSyncを使っての自動リロード（ホットリロード）での環境を構築したいと思います。

事前準備

今回は、前回の記事である「Tailwind環境構築をシンプルに」を前提としています。同じ環境を実現したい場合は、ページを参照してから戻ってきてください。環境だけ欲しい方はこちらのリポジトリからどうぞ。ちなみに、今回もBrowserSyncを使用した自動リロードとTailwindでの環境だけ欲しいという方は、こちらのリポジトリからCloneして使用してください。VisualStudioCodeのプラグイン情報だけ欲しい方は、VisualStudioCodeのプラグインまで読み飛ばしをお願いします。今回もNode.jsが必要になるのでNodeのバージョンを確認しましょう。

それでは、作業するディレクトリに移動してください。以下のコマンドを入力してください。バージョン情報が出たら問題ありません。

node -v

BrowserSync環境構築

それでは、BrowserSyncのインストールを開始しましょう。以下のコマンドを入力してください。

npm install -g browser-sync

インストールは以上です。

次に設定ファイルを作成します。画像を参考に「bs-config.js」を作成してください。

ファイルの中身は、以下のファイルを参考にしてください。

module.exports = {
files: ["./**/**/*.html", "./**/**/*.css", "./**/**/*.js"],
server: {
baseDir: "httpdocs",
},
startPath: "/public/test.html",
proxy: false,
port: 3000,
xip: false,
notify: true,
minify: true,
};

作成したファイルを保存して、以下のコマンドを実行してください。

browser-sync start --server --config=bs-config.js

ブラウザが立ち上がり、以下の画面が表示されれば成功です。

おめでとうございます。毎回コマンドを入力するには長いので、前回同様コマンドを省略しておきましょう。「package.json」を開いて、以下のコマンドから必要な部分をコピー＆ペーストしてください。

{
"name": "initializetailwind",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"tailwindcss": "^3.2.0"
},
"scripts": {
"build": "npx tailwindcss -i ./src/style.css -o ./public/style.css",
"watch": "npx tailwindcss -i ./src/style.css -o ./public/style.css --watch",
"browser": "browser-sync start --server --config=bs-config.js"
}
}

重要な部分はこちらです。

"browser": "browser-sync start --server --config=bs-config.js"

このファイルを変更したら、以下のコマンドを実行して無事起動できれば成功です。

npm run browser

試しにファイルを書き換えてみて、自動で画面が変わることを確認してください。

もし、class部分を書き換えても変更が反映されない場合は、Tailwindのコマンドを入力し忘れている可能性があるので、ターミナルを二つ開き、以下のコマンドを違うターミナルで実行してみてください。

npm run browser

npm run watch

もし解決しない場合は、あきらめて環境をCloneしましょう。楽しく、Tailwindを書きましょう。

Visual Studio Codeのプラグイン

ここからは、VisualStudioCodeのプラグインを紹介していきたいと思います。

Tailwind CSS Intellisense

Tailwindを開発する際は、必ず入れましょう。このプラグインをインストールすると、曖昧な知識でTailwindを書くことができます。書いているとそのうち覚えますので、あまりTailwindと仲良しだと思わない開発者は必ず入れましょう。

Tailwind Snippets

こちらも、同じ理由でインストールしましょう。具体的に役に立ったエピソードはないですが、とりあえずインストールしましょう。

Auto Rename Tag

こちらは、HTMLを書くときに役立ちます。無心でHTMLを書いているときに、Tagの構造を間違えるときがあります。そういったときは、Tagの属性ごと変換する場合もありますが、始まりのTagを変更すると対応するTagを自動的に合わせてくれます。

Auto Close Tag

こちらも、HTMLを書くときに役立ちます。HTMLのTagのはじめを書けば、対応する終了Tagを自動で作成してくれます。この辺はお好みですね。

Prettier

こちらは、コードを整形してくれます。これらは、設定方法などがいろいろあったりするので、どこかの記事に入信しましょう。ちなみに僕は、VisualStudioCodeの設定でファイルを保存した際に勝手にコード成型が走るようになっています。興味がある方は、楽ですので設定してみてください。僕は、こちらのサイトを見て設定しました。

終わりに

ここまで読んでいただき、ありがとうございます。今回は、環境構築から環境整備までの記事になっています。Tailwindを書く際には、一回整備しておくと楽になりますので是非トライしてみてください。

楽しくTailwindを書きましょう。

興味がある方はこちらのライトブログもご一読ください。

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube