MIXI 23新卒技術研修 フロントエンド研修 まとめ

動画を閲覧したきっかけ

最近、業務でフロントエンドに関わることになりました。
フロントエンドは全く経験ないし、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は非同期処理の完了の結果と、その値を返却する。
下のサイトが分かりやすく書かれています

• MDN
• 初心者向け

layout shiftを防ぐ

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

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

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

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

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

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

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

SPA(Single Page Application)

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

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

• 宣言的UI -> 最終的に構築するUIを宣言的に表現することでViewの可読性を担保する(人間が理解しやすい)
• 仮想DOM -> 実際のDOMにアクセスするのは処理として重いので、DOMの状態をJavaScriptで保持して、最後の最後に対象の部分だけDOMを更新する
• 差分検知 -> 異なる参照オブジェクト同士で差分比較を行う手法(再描画の範囲を最小限にして、パフォーマンスを向上させる)

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

React

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

React Hooks

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

Reactの再レンダリング

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

キャッシュ戦略

Stale While Revalidate

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

• SWR
• React Query

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

動画と資料リンク

• 講義動画
• 講義資料