Frontend Developer 面接の質問と回答

質問 1. Explain the purpose of the 'rem' unit in CSS and how it differs from 'em'.

'rem' (root em) is relative to the font-size of the root element, while 'em' is relative to the font-size of the nearest parent element with a font-size. 'rem' is not affected by the parent element's font-size.

Example:

```css
html {
  font-size: 16px;
}

body {
  font-size: 1.5rem; /* 24px */
}
```

質問 2. What is the purpose of the 'requestAnimationFrame' function in JavaScript?

'requestAnimationFrame' is a method that tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

Example:

```javascript
function animate() {
  // Animation logic goes here
  requestAnimationFrame(animate);
}

// Start the animation
animate();
```

質問 3. Explain the difference between 'cookie', 'sessionStorage', and 'localStorage'.

'cookie' is a small piece of data stored on the client's computer, 'sessionStorage' stores data for the duration of a page session, and 'localStorage' persists data even after the browser is closed.

質問 4. What is the purpose of the 'pointer-events' property in CSS?

The 'pointer-events' property controls under what circumstances an element can become the target of pointer events. It is used to make elements non-interactive or to allow pointer events to pass through an element.

Example:

```css
/* Make the element non-interactive */
.non-interactive {
  pointer-events: none;
}```

質問 5. Explain the 'callback hell' phenomenon in JavaScript and how to mitigate it.

'Callback hell' occurs when multiple nested callbacks make the code hard to read and maintain. Mitigate it by using named functions, promises, or async/await syntax to improve code readability and maintainability.