現役フロントエンドエンジニアが気になるトピックとは！？ #1「ミツエーテックラジオ、はじめます！」

カンファレンスやイベントの開催が減少している今だからこそ、自分たちのナレッジを発信することで業界を盛り上げたい！そんな想いから本日、ミツエーリンクス公式Podcast「ミツエーテックラジオ」がスタートしました。

記念すべき第1回目は、Web Vitals・Riot.js・イチオシのCSSプロパティなどなど...今制作メンバーが気になっているWeb業界のトピックについて話しました。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

加藤
こんにちは。
古川・板垣・橋本
こんにちは。
加藤
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。本日の司会は設計チームの加藤が務めさせていただきます。今日のゲストは私と同じチームに所属する古川さん、板垣さん、橋本さんです。よろしくお願いします。
古川・板垣・橋本
よろしくお願いします。
加藤
今回は初回なので古川さんから軽く自己紹介してもらってもいいですか。
古川
はい。改めましてUI開発者の古川です。普段は主に弊社サイトの運用だったりだとかあとは社内で定期開催されているテックラウンジという勉強会の運営などに携わってます。よろしくお願いします。
加藤
よろしくお願いします。続いて板垣君お願いします。
板垣
はい。同じくUI開発者の板垣です。自分業務ではですね、WebサイトとWebアプリは半々くらいの割合で作っています。静的なものよりも動的なものの方が好きですね。はい、よろしくお願いします。
加藤
よろしくお願いします。では最後に橋本君お願いします。
橋本
はい。今年度コロナの影響でリモート新人研修を受けたりと時代の変わり目を感じる中、新卒で入りましたUI開発者の橋本です。よろしくお願いします。
加藤
はい、よろしくお願いします。やっぱこう、新卒が1番フレッシュな感じが出てますね笑
加藤
今日は第1回なので、このポッドキャストについて簡単にお話ししておこうと思います。皆さんご存知の通り人が1箇所に集まることが容易ではなくなっています。その影響を受けてですね、Web技術界隈でもカンファレンスが中止になったり延期になったりしてしまっています。オンラインで開催されているイベントもあるんですけども、やはり感覚的には絶対数が減ってるような気がしています。インプットとアウトプットをする機会は減ってしまうってことは業界的にも少なからず打撃があると思っていて、それはもちろんその変化が少ないという点においてもそうなんですけど個人的にはエンジニアのモチベーション的にもちょっと影響があるんじゃないかなと思っています。そこでこう気軽に視聴できるポッドキャストっていう環境を利用して少しでも私たちが持っているナレッジを織り交ぜながら少しでも業界に貢献したいという熱い想いを込めて発足したプロジェクトです。まぁ、このミツエーテックラジオはできるだけコンパクトにまとめてですね、気軽に聴ける内容にしようかなと思っていますので、朝支度をしながらとか通勤時間など空いた時間にでも聞いていただけると幸いです。
加藤
じゃあ早速なんですけど今日のテーマとしてはですね、リスナーの方々に私たちの人となりを知っていただこうという目的でスピーカーの皆さんが普段ウォッチしてる範囲の技術とかニュースとかを簡単に話してもらおうかなと思っています。では、トップバッターは古川さんからです。古川さんが最近気になってることは何ですか？
古川
自分はですねWeb Vitalsについて最近気になってます。
加藤
ほう。Web Vitalsとはなんでしょうか。
古川
このWeb Vitalsなんですけど、Webページにおけるユーザー体験の向上を目指したGoogleの取り組みです。その中でもCore Web Vitalsと呼ばれる3つの指標をGoogleが提唱していまして、このCore Web Vitalsって何かっていいますとWebページをユーザーが利用する際のユーザー体験についてその良し悪しを判断するための指標になります。このCore Web Vitalsをどんどん高めていこうっていう取り組みになってます。今後なりともそのGoogleの検索の順位に影響するっていう風にGoogleも言っているので目が離せないなっていうところです。
加藤
その今話にあったCore Web Vitalsと呼ばれる3つの指標ってのはどういうのがあるんですか。
古川
この3つの指標なんですけど、1つ目がLargest Contentful Paintといいます。これは画面内でもっとも大きな画像だったりとかテキストブロックが表示されるまでの時間を指していて、次にFirst Input Delayっていうものがあります。これはユーザーが最初にページを操作したときからブラウザーが実際に処理をするまでの時間を指してます。最後にCumulative Layout Shiftはユーザーが予期しないレイアウト変更が発生した時の影響度を数値化したものです。この3つがCore Web Vitalsの仕様といわれています。
加藤
今紹介してもらったCore Web Vitalsってのはどうやって計測していけばいいでしょうか。
古川
これを計測するためにさまざまなツールやAPIがGoogleからだったりだとか、あとブラウザから提供されてるんですけど、1つ目は1番簡単なのがGoogle Chromeの拡張機能にWeb Vitalsっていうものがあるのでそれをインストールしてもらえればすぐに閲覧しているページのCore Web Vitalsが測れますね。あとは、その他にもPageSpeed Insights APIだったりとか、Chrome UX Report APIだったりとか、あとはPerformance APIなどでも計測が可能です。これらのうちのいくつかはミツエーリンクスのフロントエンドBlogでご紹介させて頂いてますので是非こちらもご覧ください。
加藤
あくまでGoogleが提唱しているものっていう前提はあるんですけどやっぱり無視はできない感じありますよね。
古川
そうですね。
加藤
じゃあ今後も情報のアップデートを期待しています！古川さんありがとうございました。
古川
ありがとうございます。
加藤
では続いて、板垣君の気になってることを教えていただけますか？
板垣
はい、自分はRiot.jsですね。今回は知ってる人よりも知らない人の方がRiot.jsに関しては多いと思うので、Riot.jsについて簡単に概要を説明していこうかなと思っています。えーとRiot.jsなんですけど、一言で説明すると誰でも使えるWeb Componentsなんですよ。
加藤
誰でも使える！すごいですね。
板垣
はい。要は再現性の高い独自コンポーネントを簡単に作成できるライブラリっていうわけなんですけど、ただコンポーネントを作るだけじゃなくて色々他にも特徴があるので、私が独自に選んだ3つ挙げていこうかなと思っています。まず1つ目なんですけれども標準のカスタムエレメントと100%の互換性をもつという特徴があります。
加藤
100%…の互換性...？
板垣
はい、あのつまりですね、たとえばpropsの渡し方だとか要素のネストした時の挙動とかそういったものがRiot.js独自に定められてるものではなくて、標準のカスタムエレメントと同等の記述で動作するようになっていると。
加藤
ということは、Web ComponentsのライブラリであるPolymerとかを使ってる人は割と簡単にRiot.jsに移行しやすいっていう感じですかね。
板垣
そうですね。それで2つ目にサイズがとにかく小さいっていう特徴があります。
加藤
具体的にはどのくらい小さいんでしょうか？
板垣
これがですね、あの3大フレームワークのVue.js、React、Angularと比べるとですね、Vue.jsと比較すると3分の1、Reactと比較すると6分の1、Angularと比べると8分の1なんですよ。
加藤
8分の1か...。8分の1っていうと…？1MBだと125KBくらい？
板垣
ですかね？すぐには計算できないんですけど。
加藤
それはめちゃくちゃ小さいですね、確かに。
板垣
そうなんですよ。それで、なんでここまでRiot.jsが軽いのかっていうと、Riot.jsには必要最低限の機能のみしか備わっていないんですよ。他のフレームワークとかにはいろんなメソッドがたくさん入ってるわけなんですけど、それらって全部使うことってなかなか無いと思うんですよ。
加藤
そうですね。確かにルーターとかも標準で入ってたりするけど結局使いませんっていうパターンも結構ありますよね。
板垣
そうですよね。Riot.jsはそういった普段絶対に使うっていう機能以外はズバッと切り落としているので、こういった小さなサイズを維持できているというわけですね。これが2つ目の特徴です。最後3つ目なんですけど、3つ目の特徴はVue.jsライクなシンプルな構文というものがあります。
加藤
Vue.jsライク...。どの辺が似ているんですか？
板垣
そうですね、基本的な構文はfor文だとか、if文だとかそういったものはVue.jsの2系に結構近いですね。あとはVue.jsにライフサイクルがあると思うんですけど、名前はちょっと違うんですけどイベントが起こるタイミングとかそういったところはVue.jsに似ていますね。
加藤
そのライフサイクルってのはcreatedとかmountedとかそういうものですかね？
板垣
そうです。なのでデザインパターンに詳しくない人が使ってもある程度綺麗に書くことができるのかなと思っています。以上がRiot.jsの3つの特徴です。ぜひ使ってみてください！
加藤
はい、板垣君ありがとうございます。では、最後に橋本君お願いします。
橋本
はい。では自分からはCSSに関したものについてお話しします。1つ目はページ実装中に予期せぬ横スクロールが発生した際、原因の要素をCSSのoutlineで楽に検出できるというものです。サイト制作時に結構レスポンシブ対応などで予期せぬ横スクロールが発生してしまうみたいなWeb開発初心者あるある！みたいなものがあると思います。その原因を探るときに開発者ツールを使って要素1つ1つにマウスオーバーして確かめると思うんですが、それって結構手間じゃないですか。なので、それを楽に検出するためにCSSのoutlineっていうもので目立ちやすい赤色なんかをアスタリスクに指定してあげることで、要素ごとにoutlineがつくのではみ出た要素を視覚的に検出できます。
加藤
すごい具体的な内容ですね。ありがとうございます！ちなみにこれ今outlineっておっしゃったんですけどborderとかじゃダメなんですか？
橋本
そうですね、borderだとダメなんです。その理由としてborderはoutlineと違ってどうしても枠の部分がレイアウトに反映されちゃうのでちょっと崩れちゃうみたいな影響があるんですけど、outlineはレイアウトに影響しないので、デザインを崩さずにその赤枠を引くことができるというところで今回の検出に使えるってものになってます。
橋本
もう1つあるんですけど、2つ目がダークモード対応をお手軽に1行で対応させる方法というものです。
加藤
1行ですか？？
橋本
はい、1行でできちゃうってものなんですけど、これはよくWebサイトをダークモード対応させる時ってCSSにprefers-color-scheme: darkってものを指定してその中に記述を書いていくって感じなんですけど、そのdark内にfilter: invert(1)とhue-rotate(180deg)っていうものを指定してあげることで、ダークモード対応できるっていうものになってます。
加藤
そのinvertとhue-rotateってのは具体的に何をするものなんですか？
橋本
invertっていう指定は名前の通り反転みたいな意味で配色の反転をしてくれるものになっていて、hue-rotateってほうは英語の名前の通り色相環を回転させるもので今回180degっていうので180度回転させてるんですけど、こちらの意味としては全体のテーマカラーは変えずに単にその色だけを減衰させるものになるってことでこの指定になってます。ただ、1つ注意点的なもので画像の色とかも変わってしまうのでimgに同じ指定をして色を元に戻してあげる作業が必要だったり、あとはコントラスト比がちょっと高すぎて目に痛い配色になったりすることもあるのでその辺の調整や使い方には注意が必要です。
加藤
じゃあ1行で簡単に実装はできるけど、それだけで対応しちゃうと危ない場合があったりとか、また柔軟性には欠けるのでちょっと気をつける必要があるっていう感じですかね。ちなみにこれは今どのブラウザでも使えるんですか？
橋本
そうですね、今はIE11以外のモダンブラウザで対応されている状態です。
加藤
じゃあ、ガンガン使っていける感じですね。
橋本
はい、使ってください。
加藤
はい、ありがとうございます。
加藤
はい、というわけで今回のミツエーテックラジオでは設計チームのメンバーが最近気になっていることについてお聞きしました。聞いていただいた通りそれぞれ興味関心がバラバラでとてもおもしろいチームです。このPodcastも主にはこのメンバーでもう少し時事性のある内容を絡めていきながらお届けしたいと思っています。今後ともよろしくお願いいたします。
古川・板垣・橋本
よろしくお願いします。
加藤
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでぜひご覧ください。
加藤
では今日はこの辺で！ありがとうございました！
古川・板垣・橋本
ありがとうございました。