動画を閲覧したきっかけ

最近、業務でフロントエンドに関わることになりました。
フロントエンドは全く経験ないし、HTMLもほとんど書いたことがないレベルなので、どこからキャッチアップしようと悩んでいたところ、MIXIさんの23卒技術研修の動画がyoutubeに上がっていたので、この動画で勉強しよと思ったのです。

講座での重要なテーマ

すべて(人間や機械など)のユーザーがコンテンツにアクセスできる
すべて(PD,スマホなど)のデバイスがコンテンツにアクセスできる
ユーザーに操作ストレスを与えない

すべてのユーザーがコンテンツにアクセスできるために

マークアップを正しく使用する -> タイトルにはタグを正しく使おうという感じかな?

HTMLとは

Webページのコンテンの構造を作るためのコード
DOM(Elementや文字列をノードとしたツリー構造)でコンテンツの構造を表示する
*ブラウザを開いてF12をすれば、デベロッパーツールが開かれる。デベロッパーツールの「要素」に書かれているのがDOM
ただ、すべての表現を<input>, <p>などのタグで実現できるわけではない。
それを解決するのがWAI-AREA

WAI-AREA

WAI-AREAの要素

Role
Property
State

アクセスビリティ

「年齢的・身体的条件に限定されずウェブにある情報にアクセスし利用できること」と定義されている
日本でのウェブアクセシビリティは、JIS X 8341-3:2016という規格がベースとなっている
具体的な項目としては以下の4つ

知覚可能の原則
操作可能の原則
理解可能の原則
堅ろう（牢）

JIS X 8341-3:2016

アクセスビリティレベル

項目の達成数において「A」、「AA」、「AAA」とレベルが与えられる

W3CがWCAGという達成すべきアクセスビリティレベルの基準を設けている

すべてのデバイスがコンテンツにアクセスできるために

PC、スマホ、タブレットの様々な画面サイズで閲覧されるため、色んな形のスクリーンサイズで閲覧できるようにする。

レスポンシブ対応

そもそも、レスポンシブとは？
-> デバイスの画面サイズに合わせて、自動的にレイアウトや表示方法を最適化することができるWebデザインの手法のこと
以下のようにスクリーンサイズによって、異なるCSSを適用することができる
・media query

@media screen and(min-width: 800px){
    .container{
         margin: 1em, 2em   
    }
}

レスポンシブなWebではグリッド状にコンテナを配置することが多い。
最近はContainer queryという、ページの幅ではなく親要素のサイズによって、スタイルを切り替える手法もある(同じコンポーネントを使います際に効果を発揮する)

ユーザーに操作ストレスを与えない

BBCの調査では、ページの読み込みにかかる時間が1秒増えるだけでページから離脱するユーザー数が10%増えることが分かった
読み込みという観点だけでいうと、ユーザーを極力待たすことのないWebコンテンツがよい。

非同期処理を使用しよう

javascriptはシングルスレッドで動作するため、順次実行しかできない
非同期処理をすることで、並列して処理が走るため、処理の終了時間を圧縮することができる

Promise

Promiseは非同期処理の完了の結果と、その値を返却する。
下のサイトが分かりやすく書かれています

layout shiftを防ぐ

ページが読見込まれから、ユーザーが意図しない位置にコンテンツの表示位置のずれが生じること。
ずれ幅が大きいほど、ユーザー操作を邪魔して操作ストレスを上げる

レイアウトシフト
クローラーが定期的に評価しているので、layout shiftが大きいと、そのWebページの検索結果が下の方になる可能性がある

ページを表示するまでの処理順番

ブラウザにアドレスを入力
DNSサーバーに問合せ
サーバーにHTMLファイルをリクエスト
ステータスコード200であった場合、HTMLファイルを返却する
HTMLファイルを取得
HTMLファイルをパース

HTMLファイルパースした後の動作

HTMLファイルをパース
CSSファイルとJSファイルの参照解析
DOMツリーを生成
CSSOMツリーを生成
スタイルをDOMに適用
JavaScriptのパース&実行

全工程を意識して、どの部分を最適化すればユーザーの待ち時間を削減できるかを考える必要がある。
単純にJavaScriptの実行速度だけに着目すればいいものではない。

SPA(Single Page Application)

ページ数に関わらず1つのHTMLファイルでページのコンテンツのすべてを管理して表示する開発方法。
history APIを活用することで、同じHTMLファイルを使用しながらブラウザの履歴情報を追加する事ができる。
ReactとかはSPAのフレームワーク
SPAはMPAと異なり、更新差分データのみを取得して。新データを反映したElementを生成して、DOMツリーに反映させることから、MPAより処理速度が早いと思われがちだが、条件によってはMPAが早くなることに留意すること。
SPAはJavaScriptファイルが肥大化しやすい。MPAとはトレードオフがある。

SPAの実現にポイントとなる要素

*すべてのSPAが上記のポイントを実現しているわけではない

React

宣言的なView -> 状態の更新を検知して、関連するコンポーネントだけを再描画できる
コンポーネント志向 -> Viewをコンポーネントとしてカプセル化できる
様々な場所で動作する

React Hooks

Reactが提供する機能群の名称。UIの状態を保持する機能・関数や計算コストの高いロジックの演算結果をキャッシュ(メモ化)する機能などを提供する。

Reactの再レンダリング

React再レンダリングガイド: 一度に全て理解する

キャッシュ戦略

Stale While Revalidate

ブラウザのキャッシュ戦略の一つ。「キャッシュを返しつつ、できるだけ最新の情報を参照する」状態を指す。ユーザーをロード状態で待たせることなく、できるだけ最新の情報を提供する。

SWR
React Query

上記のライブラリが存在する

動画と資料リンク