新卒一年目がサイト構築で意識したこと / 開発者向けブログ・イベント

こんにちは。
GMOインターネットグループ株式会社フロントエンドエンジニアの山名です。

この度、弊社の新卒採用サイトのフルリニューアルを担当させていただいたので、その際に新卒なりに意識したことなどをご紹介していきます！

執筆の背景

冒頭でも少し触れましたが、この度GMOインターネットグループ株式会社の新卒採用サイトをフルリニューアルするとのことで、企画から公開までフロントエンドとしてプロジェクトに参画させていただきました。

自分が配属されてから約3ヶ月、案件としてサイトの構築から担当するのは初めてだったこともあり、何もかも手探りの状態で制作を進めました。

そんな中でも、「ここはこうしよう」「これはこっちの方がいいはず」と自分の知識を総動員しつつサイト構築を行っていたのですが、今思えば結構大事なことを考えていたのかもしれないなぁと思っています。

ということで今回は、新しくなった新卒採用サイトの告知がてら新卒一年目がサイト構築で意識したあれこれをご紹介していこうと思います！

サイト構築で特に意識したこと4選

ここからはサイト構築で特に意識したことを4つご紹介していきます！

1.チーム内のルールから逸脱しすぎない

やって当然と言われそうですが、なんならここが一番大変だった気がします。

今までの個人制作では、厳密なルールなどは決めずに好きに作っていましたし、入社後担当していた商材の保守案件では元々チーム内のルールに沿って作られたものを編集するだけなことが多かったため、いざ1から作るとなるとどうしても自分の手癖が出てしまって苦労しました。

ある程度好きに作ってもいいよとは言われていたのですが、クラスや変数の命名規則、基本的なディレクトリ構成に関しては、今後の保守に関わってくる部分なのでコーディングをする際にはこういった部内ルールを守るようにしていました。

また、GMOインターネットグループ株式会社のサイトとして公開される以上、グループ共通のヘッダーやロゴの扱いに関しても厳しいルールがあるため、そういったことも含めて構築するサイトがチーム内のルールから逸脱しすぎないように意識していました。

// 例
// クラス名はBEMで書く
// JavaSvcriptで制御するものには接頭辞に「js-」をつける
<section class="mainvisual">
　　<div class="mainvisual_movie">
　　　　<video src="◯◯"></video>
　　</div>
　　<button class="mainvisual_movie_play js-movie_play">PLAY</button>
</div>

2.誰が見ても分かるコード

やって当然（2回目）です。それでもやっぱり難しいのですが…

”誰が見ても分かるコードを書く” ということに関しては、サイト構築の際だけじゃなく常日頃から気をつけていることになるのですが、やっぱり後々誰が触るかわからない以上自分だけがわかるコードじゃダメだと思っています。

そんな中で今回のサイト構築、自分1人で作っていくため誰が見てもわかるようなコードなのか判断が難しく、処理を書いては見返したり、クラス名や変数名がしっかりそのものを表しているか確認したり、モジュールは適切に分けられているか確認したり…

とにかく一度自分が書いたコードを何度も確認することで、なんとか分かりやすいコードを目指しました。実際できているかは分かりませんがなんとか自分の癖は薄められたんじゃないかなと思います。笑

// 例
// モーダルウィンドウ表示部分の一部処理
// 変数の中身と処理の内容がわかりやすい（はず）
 
const $movie_play = document.getElementsByClassName('js-movie_play');
const $modal = document.querySelector('.js-modal');
const $modal_movie = document.querySelector('.js-modal_movie');
const $modal_close = document.querySelector('.js-modal_close');
const $modal_back = document.querySelector('.js-modal_back');

for (let i = 0; i < $movie_play.length; i++) {
	$movie_play[i].addEventListener('click', () => {
　　　　const src = $movie_play[i].getAttribute('value');
　　　　$modal_movie.setAttribute('src', src);
　　　　$modal.classList.add('is-active');
　　　　$modal_back.classList.add('is-active');
	});

　・・・　

}