Web開発者必見！高速でCSSレンダリングが可能なFirefox Developer Editionとは？

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

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

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

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

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

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 を編集できるスクラッチパッド＆スタイルエディター

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

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

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

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

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

Firefox Developer Editionを使ってみよう

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

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

ダウンロード方法

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

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

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

Web開発 ツール の場所

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

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

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

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

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

便利な機能が満載

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

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

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

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

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

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

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

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

まとめ

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

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

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