【個人的非推奨】令和に持ち込みたくなかった10のコーディング【解説あり】

Web転職する
スポンサーリンク
スポンサーリンク
スポンサーリンク

この記事では、フロントエンドエンジニアの自分が令和に持ち込みたくなかった=平成に置いてきたかったコーディングを10個上げたいと思います。

なぜこのタイミングでこの記事を上げたかというと、個人的に今の現場でされているコーディングに思うことがありまして、こういう書き方はやめようという啓蒙の意味も込めてというのが大きい理由です。

 

駆け出しの方からすると情報がいろいろあり良くわからないという状態に陥ることも多いかと思います。

 

そんな方はこの記事を読んでいただき古いコードは捨て去っていただければ幸いです。

 

尚、最後にgoogleのコーディング規約もリンク貼っておきますがこれから紹介する「令和に持ち込みたくなかった10のコーディング」はあくまで自分が個人的に思うことです。

 

しかしこれまでのコーダー経験から間違いなく平成に置いていける10個を選んだということは初めにお伝えしたいと思います。

 

この記事を読むことで、以下のことが可能になります。

 

  • 古い書き方をしなくなる
  • ルールを乱す書き方をしなくなる

 

令和に持ち込みたくなかった10のコーディング

その10個は下記です。

1. float
2. !important
3. cssハック
4. :before, :after
5. インラインスタイル(style属性)
6. カラーコードの大文字、#ffffff
7. 終了タグの存在しない要素に/
8. 実体参照
9. link、scriptタグのtype属性
10. タグ付きid,class 例ul#example {}

float

 

令和に持ち込みたくない理由

  • 古い
  • 一貫性がなくなる
  • flexの方が利便性が高い

 

横並びの歴史で言うとfloatは昔からわずらわしい存在でした。

なぜなら横並びを解除しなけれなならないという仕様になっているからです。

 

そのためclear:fixという手法も登場したのですが、display:tableが登場し、さらにdisplay:flexが出てfloatは完全に過去の遺産と化したのです。

 

flexの方が利便性が高いことの一例として記述量の少なさがあります。

floatは解除するために::afterという疑似要素を作り解除することになりますが、flexはそれが不要です。

See the Pen
JjPEddJ
by funclur (@funclur)
on CodePen.

※試しに下記を消すと3つ目のボックスが横に並んでしまうことがわかります。

.float::after {
content: ”;
display: block;
clear: both;
}

 

その他にもflexは自由度が高く思うままにレイアウトができるプロパティがたくさん用意されてるためflex>>>>>floatになったというわけです。

!important

 

令和に持ち込みたくない理由

  • 開発者がセレクタを理解していない可能性
  • サイトがカオス化

 

下記記事でも書きましたが!importantは不要なので使わない方がいいです。

【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ10のCSS

 

!importantを不用意に乱発しているサイトは末期なサイトと思った方がいいです。

 

!importantを使う場面としてcssが効かないからとりあえず使ってみたり、開発者の気持ち的に絶対その値で揺るぎないからというような理由で使われてるケースも目にします。

 

つまりCSSセレクタの詳細度(優先順位)を基本的に理解していないとやりがちです。

 

事実、!importantを全部外しても全く崩れはなかったりします。

 

それは!importantで記述した値を!importantで書き換えてる可能性もあります。その場合どちらも消せば!importantがついてない状態と同じですよね。

 

つまりこのようにカオスなサイトとなってしまうのが!importantです。

 

とはいえ、!importantを使うことを許諾する例もあります。それは調整クラスと呼ばれるクラスに値を付与する場合です。主な使い方はこうです。

 

.ml5 {
margin-left: 5px!important;

 

しかし、この調整クラス自体も実は微妙で、使い始めるとルールがどんどん破たんするので極力使用せず最後の手段くらいに思っておいた方がいいです。

 

なぜ破たんするかというとこのページのテキスト下のマージンは10pxだけど別のページは20px空いていたというようにルールを統一することができなくなり把握が困難だからです。

 

CSSハック

 

令和に持ち込みたくない理由

  • 本来CSSハックは不要
  • 古いブラウザの切り捨て

 

CSSハックとは要するに、ブラウザ固有に反映させるcssです。例えば、IE10だけ崩れているがそれ以外に反映させたくない場合IE10だけに適応するようにcssを記述します。

 

下記のように書きます。

.sample{
 background: #ccc\9; /* IE10以下 */
}

 

崩れを治すんだからいいじゃんと思われるかもしれませんが、CSSハックも非推奨です。

CSSハックを使用しなくても表示崩れが起きないというのが基本的なcssの概念です。

 

googleの規約にもCSSは非推奨となっており、極力違うアプローチを試すことという一文があります。

 

:before, :after

 

令和に持ち込みたくない理由

  • 本来CSSハックは不要
  • 古いブラウザの切り捨て

 

:before, :afterを使ってる記事やサイトが未だにありますが、

::beforeと::after
上記の通り、コロン2つが正解なので注意しましょう。

 

ではどんな違いがあるかというとCSS2かCSS3の違いです。

 

CSS2からCSS3でアニメーションなどできることが大幅に増えたことは皆さんもご存知かと思います。しかし:before, :afterはその前のCSS2なのです。

 

:before, :afterと書いてる先輩がいたら「それ過去の遺産ですよ」と伝えてあげましょう。

 

ちなみにIE8では::beforeと::afterを使用できなかったのですが、IE8自体がオワコンなので考慮せずで大丈夫です。

 

インラインスタイル(style属性)

 

令和に持ち込みたくない理由

  • 一貫性がなくなる
  • UIルールの乱れ

 

インラインスタイルとは、下記の通りhtml内のタグスタイル属性としてCSSを付与するやり方です。

<p style=”color: red”>赤</p>

 

JSでCSSを付与する場合、開発ツールで見ると上記のようになるのでそれについてはOKです。

 

しかしhtmlに直書きでcssを充ててしまうと、どこに何を入れたかわからなくなり、サイトとしてUIが統一できなくなる可能性が非常に高いです。

 

調整クラスと理由としては同じになります。

 

カラーコードの大文字、#ffffff

 

令和に持ち込みたくない理由

  • ルールの統一
  • 不必要な記述をなくす

 

カラーコードは#fffでも#ffffffでも#FFFFFFでも同じ白が設定されますが#fff以外は不要であり統率がとれなくなるので省略し小文字で統一しましょう。

 

その他にも0.8→.8、0px→0など小数点前の0を省略したりpxを省略できるので極力省略でサイトを統一しましょう。

 

終了タグの存在しない要素に/

 

令和に持ち込みたくない理由

  • 古い(html4)
例えば下記がhtml4XHTML1.0の書き方になります。※ご指摘ありがとうございます

 

<img src=”hoge/hoge.jpg” />

 

下記のように省略させて大丈夫です。

 

<img src=”hoge/hoge.jpg”>
またimg要素の他に<br>もそうです。

 

実体参照

 

令和に持ち込みたくない理由

  • 古い
  • 見通しが悪い
  • どこまでを実態参照にするか問題

 

実態参照も昔は必要でしたが、今や必要なのは「&、<、>」くらいです。
下記は参考サイトです。
https://www.frontendmemo.xyz/entry/2017/06/15/085612

 

link、scriptタグのtype属性

 

令和に持ち込みたくない理由

  • 古い

 

こちらもhtml5でtype属性は不要になりましたので省略しましょう。

 

<script src=”sample.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”style.css”>

 

<script src=”sample.js”></script>
<link rel=”stylesheet” href=”style.css”>

 

タグ付きid,class例ul#example {}

 

令和に持ち込みたくない理由

  • 不必要
  • パフォーマンスの低下
通常cssを充てる時にクラスを付与しているセレクタに関してはタグを受ける必要はありません。
ul.example {
省略
}

 

.example {
省略
}

 

なぜなら、つける必要は全くなくむしろつけることでタグを探すことのブラウザの労力がかかりパフォーマンスが低下するためです。

 

もし要素の異なる複数のタグに同じクラス名をつけたい場合はクラス名も変えた方が良いと思います。

 

まとめ

以上、【個人的非推奨】令和に持ち込みたくなかった10のコーディングでした。

個人的とは言いつつかなり皆さん共通して思ってることだろうと想像します。

 

ちなみにかぶってる個所もありますがgoogleのコーディング規約をリンクとして貼っておきますので気になる方はこちらも参照していただければと思います。

Google HTML/CSS Style Guide
Google HTML/CSS Style Guideを翻訳してみた - Qiita
(の翻訳版が必要になったので、Google翻訳のお世話になりつつ翻訳...
人気転職エージェント

 

 

人気転職ブログ記事

 

【無料】WebIT系優良就活・転職サイトまとめ
Webist(ウェビスト)

Webist(ウェビスト)は大手企業に強いWeb専門の転職サイト&エージェントです。
特徴・メリットは
・30年の実績
・幅広い働き方を推奨
・大手企業多数
・週3案件が多い
・エージェントの質がいい
などなど。
大手Web企業で転職を決めましょう!

ワークポート

元々IT専門の転職サイトだったためIT業界の求人数が約2000社と圧倒的です。
エージェントも質が高く専門性の高いサポートをしてくれます。
オリジナルツール「eコンシェル」が便利。
【IT業界・ゲーム業界】に強い、転職決定人数 No.1です!

レバテックキャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

スポンサーリンク
Web転職する未経験でもこれは覚えて入社しろ10のTIPS
スポンサーリンク
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。

正社員からフリーランスになり以下のように変わりました。
・月収 34万→929,346円(最高月収)
・残業時間:最高100時間→0~10時間
・日々の積み上げ:なし→ブログ、筋トレ、プログラミング

このブログでは、フリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

技術ブログはこちら→frontendomemo

関係ないですが、オムレツ作るのが好きです。

プロフィール
サイトマップ

宜しければフォロー、feedly登録くださいm(__)m

フォローする
hoshilog

コメント

タイトルとURLをコピーしました