フロントエンドエンジニアは単にサイトの見た目を作るだけではなく、以下のような幅広い知識が求められます。
・HTML,CSS,Javascriptに関する知識
・React.js,Anglar.js,Vue.jsなどのフレームワークに関する知識
・オブジェクト指向に関する知識
・SEOに関する基本的な知識
・テストやデバッグの知識
・クロスブラウザの互換性、バージョン管理、非同期処理などに関する知識
・リクエストハンドラに関する知識
当記事では一部ですがフロントエンドの知識を習得するために、質問形式で知識を整理してみます。
cookiesとsession storageとlocal strageはどのように使い分けるべきか
Cookies: 認証情報やトラッキングデータなど、サーバーと共有する必要がある情報を保存する場合に使用する。
Session Storage: ブラウザを閉じると不要になる短期間のデータ（例: ページ間の一時的な状態）を保存する場合に使用する。
Local Storage: ユーザー設定やキャッシュなど、長期間保存するデータを扱う場合に使用する。
| 項目 | Cookies | Session Storage | Local Storage |
|---|---|---|---|
| データの保存場所 | クライアント + サーバー | クライアントのみ | クライアントのみ |
| サイズ制限 | 約4KB | 5MB程度 | 5MB程度 |
| 有効期限 | 設定次第 | セッション（タブを閉じるまで） | 永続的 |
| HTTPリクエストとの関係 | リクエストごとに送信 | 送信されない | 送信されない |
| 用途 | 認証情報、トラッキング | 一時的なデータ保存 | 永続的なデータ保存 |
RESTとRESTの代替とは何か
RESTは、ネットワークを通じてデータをやり取りするための設計スタイルのこと。(Web APIを設計する際によく使われる)RESTはHTTP(web通信の基本プロトコル)を活用して、クライアント（例：ブラウザやアプリ）とサーバーがやり取りを行う。
RESTの特徴
1. ステートレス（状態を持たない）通信
2. データがリソースとして扱われる
3. HTTPメソッドを使用
4. JSONやXMLなどデータ形式が多様
5. フロントエンドとバックエンドを独立して操作することができる
REST以外にAPI設計やデータ通信に使われる技術の例
1. GraphQL
• Facebookが開発したAPIクエリ言語。クライアントが必要なデータだけを取得できる。
• 例: GitHub APIで採用。
2. Webhooks
• 特定のイベントが発生したとき、リアルタイムで通知を送る仕組み。
• 例: Sendgrid（メール送信ステータス通知）。
3. gRPC
• Googleが開発した高速通信プロトコル。軽量でリアルタイム性が高い。
• 例: Google Cloudの内部通信。
Webサイトの動きが遅い場合、どのような改善策があるか
サイトの読み込み速度が遅い原因は多岐にわたる。
改善例として以下のようなものが挙げられる。
1. クライアント側とサーバー側でキャッシュを有効にする
2. プラグインやアドオンを削除する
3. 画像サイズを最適化する
4. コードを最小化する（不要なスペースやコメントを削除）
5. コンテンツ配信ネットワーク（CDN）を使用する
診断ツールとして、Google PageSpeed InsightsやGoogle Tag Managerを利用すると良い
ブラウザごとのスタイルの互換性の問題にどのように対処するか
ブラウザ互換性の問題を解決する最も簡単な方法は、HTMLのheadタグに条件付きステートメント（conditional statement）を追加することです。
1.コードのバリデーション
コード（HTMLやCSS）が正しく記述されているかを検証すること。
2.デザインの簡素化
複雑なデザインを避け、シンプルなレイアウトを採用すること。
3.コンポーネントの再利用
再利用可能なコンポーネントを作成して、コードの重複や複雑さを減らすこと。
4.開発中のリアルタイムテスト
開発中に異なるブラウザで動作や表示をリアルタイムでテストすること。
5.Modernizrを用いたブラウザ検出の置き換え
ユーザーのブラウザで利用可能な機能を検出するために、Modernizr（機能検出ライブラリ）を使用すること。
6.ベンダー固有の関数の追加
特定のブラウザで必要なベンダープリフィックスや関数を追加すること。
Webpackとはなにか
Webpackは、JavaScriptアプリケーションのモジュールバンドラー（Module Bundler）です。主に、プロジェクト内の複数のファイル（JavaScript、CSS、画像など）を1つまたは複数のバンドル（bundle）にまとめるために使用されます。
deferとasyncの違いは
- 共通点
どちらも非同期にスクリプトを読み込む
通常のスクリプトの場合、読み込みと実行が同期的に行われ、HTMLパースが一時停止しますが、deferやasyncを使用するとこれを回避できます。
2.違い
defer: スクリプトをHTML全体のパースが終わった後に順序通りに実行。
async: スクリプトを読み込み次第、順序に関係なく即座に実行。