未経験エンジニアのclass名がやばい。ソースコード反省会

EROエンジニア

2020年8月5日 07:47

愛と勇気のいいとこ取り

EROエンジニアのきのピーです。

この記事は、未経験からエンジニアになり、入社2年目で年収600万円を達成するまでの道を書いたブログです。

給料を全部公開している年収600万円の道のブログはこちらです。

前回は、ボックスレイアウトを覚えた事で、HTMLが組みやすくなった話でした。

今回は、前回公開したソースコードの反省会です。

この記事で分かることは、

「class名が適当につけているとやばいって事です。」

以下の添付画像をHTMLで組んで見ました。

そのソースコードがこちらです。

<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<title>enjoy 不動産をもっと楽しく</title>
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
<link rel="stylesheet" href="CSS/style.css">
</head>

<body>

<div class="boxA">

<!--トップ-->
   <div class="boxA-inner">
   <div class="box1">
     <div class="site">
       <h1><a href="top.html"><img src="image/img/logo.png"></a></h1>
     </div>
   </div>
<!--//トップ-->

 <!--ヘッダーメニュー-->
 <div class="box2">
     <div class="menu">
       <ul>
         <li><a href="searchroomfirst.html"><img src="image/img/room.png"></a></li>
         <li><a href="calculationfirst.html"><img src="image/img/money.png"></a></li>
         <li><a href="route-chart.html"><img src="image/img/station.png"></a></li>
         <li><a href="map.html"><img src="image/img/map.png"></a></li>
       </ul>
     </div>
 </div>
 </div>
</div>
<!--//ヘッダーメニュー-->


<!--トップ画像-->
 <div class="box3">
   <img src="image/img/top2.svg" alt="" class="topimg">
 </div>


<!--box4サーチ-->
 <div class="box4">

   <!--部屋を検索-->
   <div class="searchRoom">
     <h2><i class="fa fa-search" aria-hidden="true"></i>すぐに部屋を探してみる</h2>
       <form action="search.html" method="post" >


         <input type="text" name="station" value="" class="searchStation"
         placeholder="住みたい駅名を入力"><span>駅</span>

         <!--時間セレクト-->
         <select name="minute" class="searchMinute">
           <option value="" disabled selected>距離を選択</option>
           <option value="0m">0~5</option>
           <option value="1m">5~10</option>
           <option value="2m">10~15</option>
           <option value="3m">15~20</option>
           <option value="4m">20~25</option>
           <option value="5m">指定なし</option>
         </select>
           <span>分以内</span>

           <!--構造セレクト-->
           <select name="structure" class="searchStructure">
             <option value="" disabled selected>構造を選択</option>
             <option value="wood">木造</option>
             <option value="light">軽量鉄骨</option>
             <option value="iron">鉄骨</option>
             <option value="tekkin">鉄筋コンクリート</option>
             <option value="nothing">指定なし</option>
           </select>
             <span>造</span>


         <!--下記のクラス名に注意「サーチ円」　家賃セレクト-->
         <select name="en" class="searchEn">
           <option value="" disabled selected>家賃</option>
           <option value="3">4未満</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option>
           <option value="8">8</option>
           <option value="9">9</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
           <option value="13">13</option>
           <option value="14">14</option>
           <option value="15">15</option>
           <option value="16">16以上</option>
         </select>
           <span>万円から</span>

         <input type="submit" value="部屋を検索" >
       </form>
   </div>

   <!--相場を計算する-->
   <div class="searchMoney">
     <h2><i class="fa fa-calculator"></i>まずは相場を計算する</h2>
       <form action="calculation.html" method="post" >

         <!--相場　駅入力-->
         <input type="text" name="station" value="" class="stationMoney"
         placeholder="計算する駅名を入力"><span>駅</span>


         <!--相場　距離セレクト-->
         <select name="minuteMoney" class="minuteMoney">
           <option value="" disabled selected>距離を選択</option>
           <option value="0m">0~5</option>
           <option value="1m">5~10</option>
           <option value="2m">10~15</option>
           <option value="3m">15~20</option>
           <option value="4m">20~25</option>
           <option value="5m">指定なし</option>
         </select>
           <span>分以内</span>

         <!--相場　構造セレクト-->
           <select name="structureMoeny" class="structureMoney">
             <option value="" disabled selected>構造を選択</option>
             <option value="wood">木造</option>
             <option value="light">軽量鉄骨</option>
             <option value="iron">鉄骨</option>
             <option value="tekkin">鉄筋コンクリート</option>
             <option value="nothing">指定なし</option>
           </select>
             <span>造</span>

             <select name="yearMoney" class="yearMoney">
               <option value="" disabled selected>築年数</option>
               <option value="0m">0~5</option>
               <option value="1y">5~10</option>
               <option value="2y">10~15</option>
               <option value="3y">15~20</option>
               <option value="4y">20~25</option>
               <option value="5y">25~30</option>
               <option value="6y">30~35</option>
               <option value="7y">35年以上</option>
               <option value="8y">指定なし</option>
             </select>
               <span>年以内</span>


         <input type="submit" value="相場を計算" id="btnSerch2" />
       </form>
   </div>
 </div>


 <div class="box5">
   <div class="box5-inner">
   <div class="copyright">
     <p>Copyright &copy; enjoy</p>
   </div>
   </div>
</div>


</body>

</html>

相変わらず発狂するほど汚いですね。

特に「class名がやばい」です。

class名ってどこの部分かを分かりやすく命名したほうがいいのに

boxA、box2、box3とか、どこの部分を指しているか全く不明ですよね。

上司にこんなの提出したら以下のように言われてしまいます。

上司「お前、boxAって何？1ヶ月したら、画面のどこの部分か思い出せるか？」

きのぴー「1ヶ月前の事なんて何も思い出せないっす。」

上司「それを1ヶ月経っても思い出せるくらい分かりやすい名前にしろよ。あとコメントアウトつけるなりして、もっと分かりやすくしろよ。

あと、何でboxAの後にbox2なの？boxBなら気持ち分かるけど、何でbox2なの？Bはどこ？」

きのぴー「いや、何か、雰囲気で付けました」

上司「雰囲気もクソもないくらい適当だろ。。」

まぁこんな感じでclass名だけで鬼詰されると思います。。

実際に1年経って、このソースコードをいじった時に「このソースコードを書いた奴をころ●したい」って本気で思いました。（自分の事ですが。）

そのくらい、class名を意味不明な形で適当につけているとCSSやJavaScriptを書く時にも半端なく苦労することになります。

class名については、Qiitaの記事で色々と分かりやすいものがあるので、参考にして頂いた方がいいと思います。

（これとかおすすめと思います。）

※Qiita:プログラマのための技術情報共有サービス

次回は、このソースコードでリンクしているCSSについての反省会をしようと思います。

それではグッドブラック！！

この記事が気に入ったらサポートをしてみませんか？