昨年、Web開発者を震撼させた、新しいブラウザが登場しました。
その名も、Blisk。
このブラウザは、モバイルとデスクトップの両方のレイアウトをリアルタイムで確認でき、テストやバグの修正まで行えるので、開発者にとってはありがたい存在でした。

一般のユーザーが普通のブラウザでネットサーフィンをするのとは違って、開発者はブラウザに別の機能を求めています。
ユーザーエージェントを簡単に切り替えたり、ハッキングしてさまざまなパーツをテストしたり、デバッグを行ったり、パフォーマンスを確認したり、CSSを書き換えたり。
こうした一連の作業を、一つの統合されたツールで行えるとしたら、どうでしょうか。

それを可能にしたのが、この度リリースされたFirefox Developer Edition(別名Firefox Quantum)です。
このブラウザは開発者向けに最適化されているので、開発者であれば使わない理由がありません。

そこで今回は、新しい次世代のCSSレンダリングエンジンを搭載したFirefox Developer Editionについて、その概要からダウンロード、基本的な操作方法までを、ご紹介します。

開発者向けに作られた、蒼い狐のFirefoxブラウザ

bluefox.png

Firefoxのロゴと言えば黄色い狐のマークが印象的ですが、今回蒼あおい狐のFirefoxブラウザが登場しました。
それが、Firefox Developer Editionです。

この開発者向けブラウザは、別名Firefox Quantumとも呼ばれ、全く新しいCSSエンジンであるQuantum CSS(量子CSS、Styloとも言う)を搭載しています。

通常、CSSのレンダリングは、DOMのパース→CSSとHTMLの整合性一致→レイアウト確認→描画→配置という工程を順番に行なっていますが、このQuantum CSSではこうした工程を同時に行なってしまうので、これまでとは比べものにならないほどのスピードで表示することができるようになります。

デザイン、コーディング、テスト、ブラッシュアップまで、すべてAll in One

Firefox Developer Editionは新レンダリングエンジンも注目に値しますが、それ以外にも開発者を支えるツールが多く搭載されています。
新たなツールに革新的な機能が揃っており、最新のWeb制作環境にも対応しています。

圧倒的に便利な開発ツール


スクリーンショット：2017年10月

Firefox Developer Editionで新たに搭載されたツールは、まさに開発者が開発者のために開発した、強力で柔軟なツールです。

自分のサイトかどうかに関係なく、さまざまなハッキングを行なって処理を確認することができるだけでなく、複数のブラウザエンジンを搭載しており、ブラウザごとに切り替えを行わなくともブラウザごとの見え方を確認することもできます。

何よりフロントエンドエンジニアにとって嬉しいのが、ReactやEmberなど、人気のフレームワーク向けのツールも統合されており、プラグインなど必要のない万能なJavaScriptデバッガーを搭載しています。
もちろん、デザイナー向けに従来のインスペクターはこれまで通り利用することができます。

CSSグリッドでのデザインを支援する唯一のブラウザ


スクリーンショット：2017年10月

Firefox Developer Editionのもう一つの目玉は、CSSグリッドによるデザイン専用に開発されたインスペクター機能です。

このツールを活用すれば、グリッドを視覚化したり、関連エリア名を表示したり、グリッド上でさまざまな挙動の確認をプレビューすることができます。

さらに、アニメーションや要素の整列、パディングの微調整など、デザインに関わる多くの問題は、Firefox Developer Editionを使うことでほとんど解決できると言っても過言ではないでしょう。

ブラウザからJavaScriptとCSSを編集できるスクラッチパッド＆スタイルエディター

06.png
スクリーンショット：2017年10月

従来、ブラウザといえば、Webサイトの確認を行うツールに過ぎませんでした。
しかし、Firefox Developer Editionは、開発者のことだけを考えて作られたツールです。
単にブラウジングだけを行うというツールにはしませんでした。

このブラウザに搭載された機能に、スクラットパッドとスタイルエディターがあります。
スクラッチパッドは、JavaScriptをリアルタイムに編集したり、記述・実行・確認まで行うことができる優れものです。
一方のスタイルエディターも、ブラウザ内ですべてのCSSスタイルシートを編集し、管理することができます。

こうしたツールのおかげで、Web担当者はテキストエディターとブラウザを行ったり来たりしなくとも、開発を簡単に行うことができるようになります。

加えて、レスポンシブデザインモードも搭載されています。
この機能を有効化すれば、ブラウザ上でエミュレーションを行うことができ、各モバイル端末での見え方を確認することも可能です。