「Google Chrome 74」が正式リリース!開発者向けの機能をさらに強化!!

アメリカのgoogle社は4月23日(現地時間)にデスクトップ版「Google Chrome 74」を正式リリースしました!パチパチパチッ!!!というわけで今回は主にどこが変わったのかをご紹介していきますね!!

はじめに

今回のリリースはJavaScriptの仕様であったり、CSSの新たなプロパティなどが追加になりました!

また、Windows 10でブラウザの色を変更する「ダークモード」実装されましたが、、、すべてのWindow 10でサポートされているわけではないみたいですね。。

現時点でサポートされているのは「Windows 10 バージョン 1903」になるみたいです。ちなみに僕のPCは「Windows 10 バージョン 1803」でした(;ω;')

具体的に何が変わったの???

それでは、具体的に何が変わったのかを紹介していきます!

今回紹介するのは一部なので全量を確認したい方はこちらからご確認ください!

新しいメディアクエリ「prefers-reduced-motion」の追加

おそらく一番大きいのは「prefers-reduced-motion」の登場だと思います。

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

ちょっと分かりづらいので具体例を出していきます。

例えば、こんなアニメーションがあったとします。

See the Pen xNxBQy by カノト (@kanoto) on CodePen.

左右にゆらゆら揺れているだけの要素です。

あるユーザからしてみれば「すげーー!!」ってなるかもしれないですが、別のユーザからしてみれば「酔いそう...(ウップ)」となるかもしれません。

これをユーザ設定で動かなく出来れば便利ですよね!!

このメディアクエリはこういった問題をクリアするために使用できます!

JavaScriptでプライベートなフィールドを宣言できるようになった

JavaScriptでもプライベート宣言をできるようになりました!!

はい、素晴らし~~ぃ パチパチパチッ!!

ここでは、詳しくは説明しませんが、簡単に言うと、「特定のクラスのみで扱える変数を宣言することができる」 ようになりました。

javaやC#など、オブジェクト指向言語と呼ばれるプログラミング言語には当たり前のように実装されていますが、JavaScriptでは実装されていませんでした・・・。

記述方法は簡単で、変数の頭に「#」を付けるだけです!

ちなみに頭に「_(アンダースコア)」を付けるとパブリック宣言なります。

	class SampleClass {
		// パブリック宣言
		_hoge = "public";
		// プライベート宣言
		#foo = "private";
	}

Feature Policyでどの権限が与えられているか確認するためのAPI

ブラウザにはユーザの位置情報などのアクセス権を付与することができます。

さらに、付与した権限をそのサイト内にあるiframe内でも同様に付与できるようにするシステムが「Feature Policy」になります。

このFeature Policyでどの権限が与えられているのかを確認するためのAPIが登場しました!!

記述方法は下記のとおりです!

	// 現在のドメインで許可されている権限一覧
	document.featurePolicy.allowedFeatures();
	// 指定した権限が許可されているかどうか
	document.featurePolicy.allowsFeature('{権限名}');
	// 指定した権限が許可されていて現在のページで使われているドメインリスト
	document.featurePolicy.getAllowlistForFeature();

例えば、この権限があればこのiframeを出力的な実装ができそうですね!!

まだまだ、セキュリティ面とかアップグレードされているっぽいので興味のある人は調べてみてください!!

最後までありがとうございました!!