昨年、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担当者はテキストエディターとブラウザを行ったり来たりしなくとも、開発を簡単に行うことができるようになります。

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

Firefox Developer Editionを使ってみよう

ここまでで、Firefox Developer Editionが、開発者にとっていかに魅力的かご理解いただけたのではないでしょうか。

ここからは、ダウンロードから簡単な操作方法までをご紹介していきます。

ダウンロード方法

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

ダウンロードの方法は、極めて簡単です。
Firefox Developer Editionのページにアクセスして、中央にあるダウンロードボタンをクリックするだけです。

OSに最適な形のファイルが自動的にダウンロードされるので、指示に従ってインストールまでを行いましょう。

Web開発ツールの場所

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

基本的な外見は、ダークなUIを採用した、一般的なFirefoxと変わりがないように見えるかもしれません。
確かに、そのままでも使うことはできますし、Quantumエンジンを搭載しているという点では一般ユーザーでもその表示速度に驚くでしょう。

しかし、Developer Editionの醍醐味は開発ツールです。

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

この開発ツールは、右上のハンバーガーメニューをクリックし、「ウェブ開発」と書かれたメニューをクリックすることで、各種ツールにアクセスすることができます。

便利な機能が満載

「ウェブ開発」の各種ツールには、Web開発者が本当に欲しかった機能が一通り揃っています。

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

例えば、レスポンシブデザインモードにアクセスすると、このような新しい画面に切り替わります。
タップしたり、スクリーンショットを撮ったりすることも可能です。

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

また、スポイトツールを使って、色を調べることもできます。
確認したいところでマウスを動かすと、その色を16進数で表示し、またクリックすることでその色のカラーコードをクリップボードに保存します。

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

インスペクターも従来以上に使いやすくなっています。
カーソルを合わせた部分の要素名・クラス名・ID名を表示し、その領域の大きさも自動で表示してくれます。
その領域がCSSグリッドであれば、領域上のグリッドを視覚化することも可能です。

他にも、Web Audio APIやService Workerなど、実験的な機能にもいち早く対応しています。

まとめ

インスペクター、コンソール、デバッガー、レスポンシブデザインモード、スクラッチパッド、スタイルエディターと、開発者であれば揃っているとありがたい機能が揃っているFirefox Developer Edition。
表示速度も高速で、まさにあなたが求めていたブラウザなのではないでしょうか。

独立系ブラウザとしての強みを生かそうと、2017年、Firefoxはさまざまな試みをしています。
開発者でない人でも、テストパイロットプログラムに参加することで、別の形で貢献を行うこともできるので、ぜひこちらも使ってみてはいかがでしょうか。

参考：
Firefoxの新機能をいち早く体験！Mozillaの「テストパイロットプログラム」を使ってみよう