はじめまして！フロントエンドエンジニアのあまんちゅです。
初投稿です！ぜひ最後まで読んでもらえると嬉しいです。
今回は、先日のインターンシップで行われたフロントエンドのバトルクリエイティブについて紹介したいと思います。（ちなみにアイキャッチ画像は、デザイナーさんのバトルで作成されたロゴの1つを使って作っています。）
お題「JSONから表を作ろう」
ルール・ポイント
- 制限時間：30分
- 評価者：東京のフロントエンドメンバー
- 言語：JavaScriptもしくはPHP
- ポイント：仕事だと思え
- JSONファイル含め必要なファイルは用意されている
- ChatGPTなどAIの使用OK
用意されているファイルは「index.html」「index.php」「movie.json」「style.css」「script.js」です。
- ※「index.html」「index.php」のファイルにはプログラムする前の状態まで記述されている状態
映画や本の情報がJSONファイルに記述されているので、JavaScriptもしくはPHPを使って表に出力するという内容です。
さらに条件として、「ジャンルが同じ項目はセルをまとめる」「ジャンルごとに発売日順に並べる」の2点がありました。
Chat GPTを使った場合
私は、JSONを業務でまだ使用したことが無く、「いや、30分じゃ無理でしょ」と正直心の中で思いましたが、もちろんやらないわけにはいきません。少しググった後に、記事を読むのに時間がかかって間に合わない！と思いました。
これはAIに頼るしかない！と思い、まずは普段使っている「Github Copilot」のチャットで聞きましたが、うまく返してくれませんでした（泣）私のプロンプトが悪かったんだと思います。
焦りながらも、今度はChat GPTに聞きました。（ちなみにバージョンは3.5です）
すると、なかなかいい回答を返してくれたので、Chat GPTと会話して作っていきました。
Chat GPTとの会話
Chat GPTと一緒にお題を進めた私ですが、Chat GPTへやりたいことを詳しく伝えないと欲しい回答をくれない、それがAIです。試行錯誤したやり取りは、以下URLよりご覧ください。（会話が雑なのは急いでいたからだと言い訳させてください・・・。）
コード内容
最終的に以下のコードを提出しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリエイティブバトル</title>
<link href="./style.css" rel="stylesheet">
<style>
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto 100px;
display: block;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>クリエイティブバトル</h2>
<p>movie.jsonを使用してテーブルを作成する<br>ジャンルが同じものはまとめる。<br>ジャンル別に発売日順に並べる</p>
<table>
<tr>
<th>ジャンル</th>
<th>タイプ</th>
<th>タイトル</th>
<th>発売年</th>
<th>監督/著者</th>
</tr>
<?php
// JSONファイルを読み込む
$json_file = file_get_contents('./movie.json');
$movies = json_decode($json_file, true);
// ジャンルごとに映画をグループ化する
$grouped_movies = array();
foreach ($movies as $movie) {
$genre = $movie['genre'];
if (!array_key_exists($genre, $grouped_movies)) {
$grouped_movies[$genre] = array();
}
$grouped_movies[$genre][] = $movie;
}
// 各ジャンルごとに映画情報を発売年でソートして表示する
foreach ($grouped_movies as $genre => $movies) {
// 発売年で映画をソートする
usort($movies, function($a, $b) {
return $a['year'] <=> $b['year'];
});
// ジャンル名を最初の行に表示する
$first_movie = reset($movies);
echo "<tr><td rowspan='" . count($movies) . "'>$genre</td>";
// 各映画の情報を表示する
foreach ($movies as $index => $movie) {
if ($index != 0) {
echo "<tr>";
}
echo "<td>" . $movie['type'] . "</td>";
echo "<td>" . $movie['title'] . "</td>";
echo "<td>" . $movie['year'] . "</td>";
echo "<td>" . $movie['creator'] . "</td>";
echo "</tr>";
}
}
?>
</table>
</body>
</html>
ちなみにJSONのファイルの内容はこちら
[
{"type": "映画", "title": "インセプション", "genre": "SF", "year": 2010, "creator": "クリストファー・ノーラン"},
{"type": "本", "title": "ハリー・ポッターと賢者の石", "genre": "ファンタジー", "year": 1997, "creator": "J.K.ローリング"},
{"type": "映画", "title": "マトリックス", "genre": "SF", "year": 1999, "creator": "ウォシャウスキー姉弟"},
{"type": "本", "title": "指輪物語", "genre": "ファンタジー", "year": 1954, "creator": "J.R.R.トールキン"},
{"type": "映画", "title": "アバター", "genre": "SF", "year": 2009, "creator": "ジェームズ・キャメロン"},
{"type": "本", "title": "ゲーム・オブ・スローンズ", "genre": "ファンタジー", "year": 1996, "creator": "ジョージ・R.R. マーティン"},
{"type": "映画", "title": "ブレードランナー 2049", "genre": "SF", "year": 2017, "creator": "ドゥニ・ヴィルヌーヴ"},
{"type": "本", "title": "ナルニア国物語", "genre": "ファンタジー", "year": 1950, "creator": "C.S.ルイス"},
{"type": "映画", "title": "エイリアン", "genre": "SF", "year": 1979, "creator": "リドリー・スコット"},
{"type": "本", "title": "ホビットの冒険", "genre": "ファンタジー", "year": 1937, "creator": "J.R.R.トールキン"},
{"type": "映画", "title": "スター・ウォーズ", "genre": "SF", "year": 1977, "creator": "ジョージ・ルーカス"},
{"type": "本", "title": "アーシュラ・K. ル=グウィンの左手の闇", "genre": "SF", "year": 1969, "creator": "アーシュラ・K. ル=グウィン"},
{"type": "映画", "title": "ターミネーター", "genre": "SF", "year": 1984, "creator": "ジェームズ・キャメロン"},
{"type": "本", "title": "エンダーのゲーム", "genre": "SF", "year": 1985, "creator": "オースン・スコット・カード"},
{"type": "映画", "title": "ジュラシック・パーク", "genre": "アクション", "year": 1993, "creator": "スティーブン・スピルバーグ"},
{"type": "本", "title": "シャーロック・ホームズの冒険", "genre": "ミステリー", "year": 1892, "creator": "アーサー・コナン・ドイル"},
{"type": "映画", "title": "007 スカイフォール", "genre": "アクション", "year": 2012, "creator": "サム・メンデス"}
]Chat GPTがコメント含めてコードを書いてくれたので、説明は不要かもしれませんが、copilotにコードの説明文を書いてもらったので紹介します。
このPHPスクリプトは、HTMLページを生成し、その中に映画のリストを表示します。映画のデータは、ローカルのmovie.jsonファイルから読み込まれます。このファイルは、各映画のジャンル、タイプ、タイトル、発売年、監督/著者の情報を含んでいます。
まず、file_get_contents関数を使用してJSONファイルを読み込み、json_decode関数を使用してその内容をPHPの配列に変換します。次に、映画をジャンルごとにグループ化します。これは、新しい配列$grouped_moviesを作成し、各映画をそのジャンルのキーに関連付けることで行われます。
次に、各ジャンルの映画を発売年でソートします。これは、usort関数とスペースシップ演算子<=>を使用して行われます。この演算子は、左辺が右辺より小さい場合は-1、等しい場合は0、大きい場合は1を返します。これにより、映画は発売年で昇順にソートされます。
最後に、ソートされた映画のリストをHTMLテーブルに表示します。各ジャンルの最初の映画の行には、そのジャンルの名前が表示されます。その後、そのジャンルの各映画の情報（タイプ、タイトル、発売年、監督/著者）が新しい行に表示されます。
このスクリプトは、映画のデータを整理し、ユーザーが各ジャンルの映画を発売年順に簡単に見ることができるようにするためのものです。
他の参加者のコードについて
他の参加者の方のコードも拝見させていただきました。
学生３名と宮崎の現役フロントエンドメンバー４名中、言語選択は以下のような結果でした。
| JS | PHP | |
|---|---|---|
| 学生 | 2 | 1 |
| 現役 | 1 | 3 |
ちなみに、学生でPHPにカウントしている方はJSでも実装していたようです。また、他の学生さんは追加でプルダウンでジャンルをソートし直せる機能を作っていたり、ホバーしている行の色が変わるようにしていたり、工夫も多くレベル高めのバトルでした。
新卒・中途 採用中です！
そんな25卒向けのクリエイティブインターンが無事開催されたところですが、新卒・中途ともに採用を行なっています。
気になる方は、以下サイトをぜひチェックしてみてください！
▼宮崎採用サイト（新卒・中途）
https://recruit.gmo.jp/locations/miyazaki/
▼宮崎に移住したい方向け
https://recruit.gmo.jp/locations/miyazaki/lp/iju/
