ブログトップ

公開日:

更新日:

8 min read

技術革新

Astroで遭遇した謎の表示：開発環境の秘密を解明

Astro TailwindCSS レスポンシブデザイン ウェブ開発 NODE_ENV
Astroで遭遇した謎の表示：開発環境の秘密を解明のイメージ

静的サイトジェネレーター

ここ数年は、ずっとWordPressの案件を受託してきたのだが、最近はAstroを使うようになった。WordPressもいいのだが、プラグインが煩雑で管理が面倒臭い。おまけにやたらとサイバー攻撃を受けるので、そのたびにパニックになることもしばしば。サーバーは凍結される。開発中のページが消える。KUSANAGIに攻撃された時は、10件以上ものシステムが消滅した。

溜息しか出ない。

それで静的サイトジェネレーターを使ってみたのだが、

  • Hugo: 複雑すぎる。わけがわからない。おまけにGo言語で挫折。
  • Jekyll: シンプルなはずなのに、なぜかわけがわからない。Rubyは使ったこともないので、挫折。
  • Astro: シンプルで適当に設定しても動く。これはいい。

ということでAstroを使うようになった。AIをフル活用してカスタマイズ。これなら自分でテーマも作れるんじゃないかと思ったが、それは甘かった。TailwindCSSを使うのが初めて。というか、BootstrapだってMaterial Designだって知らなかったのだ。CSSはデザイナーが使うもので、プログラマには無関係だと思っていた。それが、AIのおかげでデザイナー要らず。自分でデザインできるようになった。ようやく私も時代の恩恵を受けられるようになったのだ。

しかし、そんなに甘くはなかった。とはいえ、自分でテーマを作ろうとしたので、いろいろと理解できた。さらにこれをCloudflareにデプロイして、Cloudflare Workersでお問い合わせメール送信も開発したので、前々から興味のあったNode.jsだのTypeScriptを使うようになったのが嬉しい。簡単なものだが、CloudflareとGitHubリポジトリを連携させて、初めてCI/CDパイプラインを構築できたのは、刺激的な経験であった。DockerやKubernetesも使ってみたかったが、サーバーレスの方がいろいろと便利なので、そちらに走ってみようかと思う。

謎の表示

さて、Astroでの開発を進めていく中で、ある日突然、ページの左上に謎の文字が表示されるようになった。

謎の表示

ページ左上に謎の文字が表記される。幅を変えると文字列も変化する。

正直なところ、かなり目障りだった。「何だこれは？バグか？」と最初は焦ったものだ。しかも、ブラウザの幅を変えると表示される文字も変わる。これには参った。

ブレイクポイントインジケーター

調べてみると、これは「ブレイクポイントインジケーター」と呼ばれるものだった。Astroプロジェクトで使用されているTailwind CSSやその他のレスポンシブデザインフレームワークのブレイクポイントを視覚的に確認するための開発ツールだ。

主な特徴は以下の通り:

  1. 現在のビューポートサイズに対応するブレイクポイントを表示する。
  2. ブラウザウィンドウのサイズを変更すると、表示が動的に更新される。
  3. 開発者がレスポンシブデザインを実装する際に、現在のブレイクポイントを即座に確認できる。
  4. 通常、本番環境では表示されず、開発環境でのみ有効になる。

つまり、この目障りだと思っていた表示は、実は開発中にのみ現れる便利なツールだったのだ。本番環境では表示されないので、気にする必要はない。

実装の詳細

実際の実装を見てみよう。以下はTwSizeIndicator.astroというファイルの内容だ：

   ---
// TwSizeIndicator.astro
---

{
	process.env.NODE_ENV === 'development' && (
		<div class='fixed top-0 left-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200'>
			<span class='block sm:hidden'>all</span>
			<span class='hidden sm:block md:hidden'>sm</span>
			<span class='hidden md:block lg:hidden'>md</span>
			<span class='hidden lg:block xl:hidden'>lg</span>
			<span class='hidden xl:block 2xl:hidden'>xl</span>
			<span class='hidden 2xl:block'>2xl</span>
		</div>
	)
}

このコードを見ると、いくつかの重要なポイントがわかる：

  1. process.env.NODE_ENV === 'development'の条件文により、開発環境でのみ表示される。
  2. Tailwind CSSのクラスを使用して、各ブレイクポイントで異なる背景色と表示テキストを設定している。
  3. hiddenとblockクラスを組み合わせて、現在のブレイクポイントに応じたテキストのみを表示している。

NODE_ENVの設定

では、なぜ開発環境でのみ表示されるのか？それはNODE_ENVという環境変数の設定によるものだ。

npm run devコマンドを実行すると、通常NODE_ENVは自動的にdevelopmentに設定される。これは多くのNode.jsフレームワークやツールの一般的な動作だ。

主なポイントは以下の通り：

  1. npm run devは開発用のコマンドとして広く使われている。
  2. 多くのフレームワークやツールは、devスクリプトを実行する際に自動的にNODE_ENVをdevelopmentに設定する。
  3. 一方、npm run buildやnpm run startなどの本番用コマンドでは、通常NODE_ENVはproductionに設定される。
  4. NODE_ENVの値に基づいて、アプリケーションの挙動を変更することができる。

つまり、npm run devを使用する開発環境ではNODE_ENVがdevelopmentに設定され、ブレイクポイントインジケーターが表示される。本番環境ではNODE_ENVがproductionに設定されるため、表示されないわけだ。

※wranglerでは、このように設定されないので注意!!

まとめ

Astroで開発をしていて遭遇した謎の表示は、実は非常に便利な「ブレイクポイントインジケーター」だった。最初は目障りに感じたこの表示だが、実はレスポンシブデザインの実装を助ける便利なツールだったのだ。

実装を見ると、Tailwind CSSとAstroの機能を巧みに組み合わせて、開発環境でのみ動作する仕組みになっていることがわかる。NODE_ENV環境変数を利用することで、開発環境と本番環境で異なる挙動を実現している点も興味深い。

この経験から、フレームワークやツールには開発者の効率を上げるための工夫が隠されていることがわかった。新しい技術に出会ったら、その仕組みを深く理解することで、より効果的に活用できるようになるだろう。