Bloomark 採用面接インタビュー用ページ

■ Q1 セマンティックHTML

以下のHTMLコードは会社概要を表示するページの一部です。
ほとんどが <div> タグで作られています。 セマンティックHTMLに書き換えるとすれば、どのタグをどのように置き換えるべきか説明してください。
※置き換えるにあたり、タグ位置の変更や削除・追加していただいても構いません。

html

<main>

  <div class="company-section">
    <div class="title">会社概要</div>

    <div class="company-info">
      <div>
        <div>会社名</div>
        <div>株式会社〇〇</div>
      </div>
      <div>
        <div>法人番号</div>
        <div>0000000000000</div>
      </div>
      <div>
        <div>設立</div>
        <div>2020年1月1日</div>
      </div>
      <div>
        <div>資本金</div>
        <div>1,000万円</div>
      </div>
      <div>
        <div>所在地</div>
        <div>
          東京本社<br>
          〒000-0000<br>
          東京都江東区〇〇1-4-6
        </div>
      </div>
    </div>

    <div class="img-chart">
      <img src="/images/chart.jpg" alt="組織図">
    </div>
    <p class="img-chart-txt">2025年4月1日付</p>
  </div>

</main>
完成図見本（指示があるまで開かないでください）完成図見本

■ Q2 レスポンシブレイアウト

以下のコードはPCとSPの両方に対応するためのレイアウトを実現することが目的です。
このコードの課題点と改善点を説明してください。
また、PCとSPのスタイルを分ける代表的な技術について説明してください。

html

<div class="container">
  <aside class="sidebar">
    <nav>
      <h2>目次</h2>
      <ul>
        <li><a href="#">1. はじめに</a></li>
        <li><a href="#">2. 本編</a></li>
        <li><a href="#">3. おわりに</a></li>
      </ul>
    </nav>
  </aside>

  <main class="contents">
    メインコンテンツ
  </main>
</div>

scss

.container {
  display: flex;
  gap: 40px;
  .sidebar {
    flex-basis: 240px;
  }
  .contents {
    flex-grow: 1;
  }
}
完成図見本（指示があるまで開かないでください）
【PC】完成図見本
【SP】完成図見本

■ Q3 SCSSのスコープ

以下のコードは簡単なカードレイアウトに関するスタイルの一部です。
このSCSSコードのスコープ設計について、どのような改善点がありますか？スコープの影響範囲や保守性の観点から説明してください。

html

<div class="card">
  <h3 class="title">記事タイトル</h3>
  <img src="/images/card.jpg" alt="記事画像">
  <button class="button text-center">続きを読む</button>
</div>

scss

.card {
  $card-color: blue;

  width: 50%;
  padding: 20px;
  border-radius: 10px;
  border: solid 1px currentcolor;
}
.title {
  margin-block-end: 24px;
  font-size: 24px;
  font-weight: bold;
  color: $card-color;
}
.button {
  width: 60%;
  margin-inline: auto;
  margin-block-start: 24px;
  padding: 8px 16px;
  background-color: $card-color;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  display: block;
}
img {
  width: 100%;
  height: auto;
}
.text-center {
  text-align: center;
}
完成図見本（指示があるまで開かないでください）完成図見本

■ Q4 HTML構造の把握

以下のHTMLはユーザーのプロフィールを表示する単純なHTMLの例です。
現状のコードでも間違いではありませんが、構造的な分け方（グルーピング）や今後の拡張性を考慮し改善するとしたらどのような構造に変更するのが良いでしょうか。
不自然な点や改善の余地があれば具体的に指摘してください。

html

<ul>
  <li class="profile">
    <h2>プロフィールについて</h2>

    <div class="info">
      <div class="avatar">
        <img src="user.jpg" alt="ユーザー画像" />
      </div>
      <div class="name">田中 太郎</div>
      <div class="birthday">1990年1月1日生まれ</div>
      <div class="gender">男性</div>
      <div class="bio">WEBデザイナー歴5年。</div>
      <div class="hobby">趣味は登山とカメラ。</div>
      <div class="email">メールアドレス：tanaka@example.com</div>
      <div class="tel">電話番号：080-1234-5678</div>
      <div class="address">住所：東京都渋谷区0-0-0</div>
      <ul class="sns">
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </div>
  </li>
</ul>

■ Q5 パス指定の基礎

次のようなディレクトリ構成のWebサイトがあります：

plaintext

project-root/
├── index.html
├── about/
│   └── index.html
├── css/
│   └── style.css
└── img/
    └── logo.png

①

about/index.html から logo.png を読み込むには、以下のうちどのパスが正しいですか？
正しいものを選び、また各パスが「相対パス」「絶対パス（ルート相対）」のどちらに該当するかも説明してください。

  1. img/logo.png
  2. ../img/logo.png
  3. /img/logo.png
  4. ../../img/logo.png

②

index.html から css/style.css を読み込むために使用できる適切なパスをすべて選んでください。

  1. css/style.css
  2. /css/style.css
  3. ./css/style.css
  4. ../css/style.css

③

以下のようにCSSで背景画像を指定したとき、style.css 内でのパス指定として正しいものを選んでください。

css

body {
  background-image: url(???);
}
  1. img/logo.png
  2. ../img/logo.png
  3. /img/logo.png
  4. ./img/logo.png

※前提：CSSは css/style.css に保存されているものとします。

■ Q6 基本的なLinuxコマンド

次のコマンドによる操作を説明してください。

console

$ pwd
$ cd xxxxx
$ ls -al
$ rm -rf ~/*

その他に自分がよく使うと思うコマンドがあれば教えてください。

■ Q7 gitコマンド

次のコマンドによる操作を説明してください。

console

$ git add .
$ git pull origin main
$ git checkout -b xxxxxxxxx
$ git stash
$ git merge branch_A branch_B

■ Q8 javascript (1)

以下のコードを見て、設問に答えてください。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カウントボタン</title>
</head>
<body>
    <button id="btn">カウント</button>
    <p>クリック回数: <span id="count">0</span></p>


<script>
    let count = 0;
    document.addEventListener("DOMContentLoaded", () => {
        const button = document.getElementById("btn");
        const countDisplay = document.getElementById("count");


        button.addEventListener("click", function () {
        count++;
        countDisplay.textContent = count;
        });
    });
</script>
</body>
</html>
  1. DOMContentLoaded が使われている目的は何ですか？
  2. count++ という記述は何をしていますか？
  3. textContent は何を参照していますか？
  4. countのスコープはどこに属していますか？他の場所から変更可能ですか？
  5. document.getElementById()は他のメソッドで代用できますか？

■ Q9 javascript (2)

以下のコードを見て、設問に答えてください。

javascript

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const result = factorial(5);
console.log(result);
  1. factorial 関数の処理内容を説明してください。
  2. 再帰処理とは何か、簡潔に説明してください。
  3. n === 0 の条件はなぜ必要ですか？

■ Q10 javascript (3)

以下のコードを見て、設問に答えてください。

javascript

const items = ["Apple", "Banana", "Cherry"];
const list = document.getElementById("list");

for (var i = 0; i < items.length; i++) {
    const li = document.createElement("li");
    li.textContent = items[i];
    li.addEventListener("click", function () {
        alert("あなたがクリックしたのは: " + items[i]);
    });
    list.appendChild(li);
}
  1. このコードにはどのようなバグがありますか？それはなぜ起こりますか？
  2. 解決方法を挙げてください。

■ Q11 フロントエンドの知識とトレンド

下記の項目について、わかる範囲でご回答ください。すべてに答えられる必要はありません。

  1. Node.js とは何ですか？また、どのような場面で使われるものですか？
  2. npm とは何ですか？また、代替となるツールがあれば教えてください。
  3. 仮想DOM とは何ですか？通常のDOMとどのような違いがありますか？
  4. 仮想DOMを使う代表的なフレームワークやライブラリにはどのようなものがありますか？
  5. CSR（Client Side Rendering）、SSR（Server Side Rendering）、SSG（Static Site Generation）の違いを説明できますか？
  6. ビルドツールを使用したことはありますか？あればその名称と役割を教えてください。また、その設定をカスタマイズしたことはありますか？
  7. 最近（ここ１〜２年程度で）話題になったフロントエンドの技術やライブラリで、気になるものがあれば教えてください。