JS screen.width＋innerHTML

Question

スマホかブラウザかで記述内容の適応を変えるとして

<div id="a"></div>
<script>
window.onload=function(){
if(screen.width>=pxを指定して判別){
a.innerHTML="PC";
}else{
a.innerHTML="スマホ";
}
}
</script>

と処理を記述することは、二重に記述（a.innerHTML）するようなダサい、古い、原始的な感覚がありますが、今でもこれは一般的なのでしょうか？

Answer 1

「判定してどうしたいか」次第です。
レイアウトの話ならCSSのほうが適切ですし、JavaScript上で判定が必要な要件であれば、別に構いません。
というかそもそも技術や実装手法の選定に「ダサい」「古い」は介入しません。
「古い」がセキュリティ上問題あったり機能サポートの問題があれば検討すべきですが、
そうでないなら要件満たすために必要な処理を入れていくだけです。

Comments

[yambejp]

冗長・煩雑＝ダサいというのは着眼点としては良いと思うのでその言葉尻だけをあえて否定する必要はないと思います。

[m.ts10806]

ご指摘ありがとうございます。表現の問題だとは思いますが、ちょっと気になったもので。
実装に問題が起きてない前提なら「より良い組み方（もしくは効率的・機能的）」みたいな表現の方が私個人としては好みですし、「どうしたいか」を正しく伝えられると思います。

[yambejp]

お気を悪くされたら申し訳ないです。私もm.ts10806さんの指摘は合理的だとはおもっております。
ただ、自分もたまにクリティカルなソースが書けたときに「やばい、かっこいい」と自画自賛する（あくまでも自分の中で）ことがあるので心情的な表現は以外にモチベーションに有効かなと思っています。たいてい自分がかっこいいと思うソースは他人に評価されないことがおおいのも事実ですが・・・

[m.ts10806]

いえ、ご指摘もっともだと思います。正しい表現をできなくて損してる人はどこの世界にもいるので。

>たいてい自分がかっこいいと思うソースは他人に評価されないことがおおいのも事実ですが・・・

あるあるですね。アプリケーションやサービス利用者には見えない世界なので結構自己満足の世界です。
なので、チーム開発でしたら同プロジェクトの先輩とか後輩に自慢するくらいで終わるケースが多いです。
という経験もあるので、同じように頑張った感のあるコードを見つけたらなるべくちゃんと聞いてあげるようにはしてますねー。

Answer 2

気になるなら三項演算子で

a.textContent=(screen.width>=pxを指定して判別)?"PC":"スマホ";