概要

結構いろんな案件に回って知見がたまってきたのでちょっとだけアウトプットの練習でっす。

いうて今回も昨年に引き続き、初心者向けの内容になってます。
知ってる人は復習がてらよんでくだし。

コード、書いてますか？

コード書くの楽しいですか？
私はそんなに楽しくないです。
でも書き始めるとずっと書いてるんですよね。不思議です・・・。

さて、そんなコードを書いている時はどうでもいいんです。
いやまぁ良くはないんですが。
今回まず気にしてほしいのは【書いたあと】。

自分が書いたコード、読めます？そりゃ読めますよね？
自分で書いたんだもの。でもそのコード、大抵3か月後には忘れてます。
単に私の記憶容量の問題もあるかもしれませんが大概の人は一度は経験していると思います。

コードってその時は作っているから動きがわかるんですけど
ちょっと時間が空いてから改修とかに入ったときにびっくりするんですよね。

「誰だよこのヒヨコード（俗に言うクソコード）生み出したのは！（自分です）」

なんてのは今見て笑ってる人もきっと経験するでしょうし、
経験した人も沢山いるはずです。

結局何が問題なのかって言うと後で見る人（自分も含む）のことを
考えられていないのも勿論なんですが、
そもそもどうすればコードが綺麗に書けるのか、
どういったコードが綺麗なコードなのかがわからないから
場当たりなコードになって、結果として収拾ついてないヒヨコードが生まれて、
あっちもピヨピヨ、こっちもピヨピヨな感じのやばいコードになっちゃうんですよね。

本題

じゃ、どうりゃいいのよってことなんですが、
やること自体はすごく簡単。
ただやれることはあるんですが私の気力の気力から
ひとまず今回は３つのことをするだけです。

綺麗なコードを書くためには
- 謎の数字を増産したり多用せずに、それぞれ変数宣言する。
- グローバルな変数はむやみに増やさない
- if文でネストしまくらない（記述を短くする努力をする）

本来なら余裕で１０個はありますが、
それは皆さんにも考えていただきたい
（次回のネタのために書かないでおきたい）ので
書かないでおいてあげます。

とりあえずこれができてれば多少は見やすくなります。

１個ずつ例題だします？ﾒﾝﾄﾞ……やりましょうか。

謎の数字を増産したり多用せずに、それぞれ変数宣言する。

稀によくいますこういう人。（過去の自分含む）

とりあえず超絶適当に書いたこのヒヨコード。
まぁなんかなんとなく縦幅を広くしたいんかなあ～
ってのはわかると思うんですが、
三か月後にこのコードを見た時は絶対に

「は？　いや、この【 20 】って数字は一体どっから出てきたのよ。」

ってなるわけですわ。

ではこの数字が最初の段階で何のための数字なのかがわかる名前で
変数として記述してあったらどうでしょう？

なんとなく、
「あーこの20はheaderの高さとは別にpadding分の数値を乗っけるために必要なのね。そもそもheaderの高さは別の方法で取得できるし、なんなら別のメソッドで書けばpadding分も含めた数値取得できるし、修正しときましょうねー。」

てな感じで何をするための数値だったのか、賢い人なら察し付きますよね。
英語が全く読めない人かコード書けない人でなければわかりますよね。

…え、こんなくだらないこと？って思いますよね？
そうです。こんなくだらないことです。
でも実際これ、小さなことかもしれないけどすごく大事。
その時はくだらないことかもしれないけれど、
後で絶対によかったって思える時が１０００回に１回は来ます。
未来の自分への手紙だと思ってコード書くときは丁寧に捕捉しておくべきです。
とはいえ補足しておくべきとはいっても

//横幅と縦幅をかけて面積を出している
var areaSize = width * height;　

なんて、「見りゃわかるわ！」ってものにコメントアウトなんか振ってるといちいち鬱陶しくなるうえに超絶無駄な工数が割かれるのでそこはよく考えましょう。

でもないと困るときもあるんですよね。未来の自分は今の自分より進歩していて、
昔のレガシーな自分の考えについていけなくなって行くものなんです。むずかちぃ…。

とまぁ今回はわかりやすい数字にしましたが、関数だったり定数だったり文字列だったりエトセトラでも同様ですね。

グローバルな変数はむやみに増やさない

これはもう超絶簡単。
ページ読み込みの段階で無駄な読み込みが増えるからですね。
プログラミングやコーディング始めたばっかりの時って
あんまりこの辺気にしないんですけど、
少しずつページ表示速度であったり、パフォーマンスへの影響を
考えるようになったり、考えさせられる場面に出くわした時のために
事前にやっておくのがいいでしょう。
先ほどのヒヨコードを例に言うのであれば

こういうことですね。
今回のこのコードだと必ずhoge()が走ってしまいますが、
通常であればhoge()がclick時だったりなると考えてもらえれば良きかと。
クリックしたタイミングで
headerHeightも
headerPaddingNumも
updateHeaderHeightも
読み込まれますよね。

最初のページ表示時にこの変数が全部外に出ていて何十個、何百個とかあるとまぁ遅くなります。大規模なサイトだとなおさらですね。

あとは単純に、関数の中で定義されている変数はその関数でしか使用しませんので改修の際に考える範囲が狭くて済みます。

ページの表示速度の改善もできて、改修工数の削減もできる。
まさに一石二鳥ですね。

グローバル変数は確かにどこでも呼び出せるので便利っちゃ便利なとこでもありますがこういったところは落とし穴にもなるのかもしれませんね。知らんけど。

if文でネストしまくらない（記述を短くする努力をする）

見づらい。

if文は　&&　も　||　も使えます。

変数に数値をif文で入れる時など、単純なものは
三項演算子っていう超絶便利なものがあるのでそっちにしましょう。

こんな感じになると上から呼んでってネストも低いし見やすくはなりますよね。
三幸演算子はtrue,falseに関数をいれたりするのも可能ですが
使用する際は上記みたいな感じで変数の分岐なんかで使ってあげたりするほうが見やすくなります。

ネストも浅くなっていい感じになりましたね。
これも「こんな当たり前なこと」かもしれませんが
記述が増えたときにスクロールする量が減ったり読むのに苦労が減ったり
いいことの方が多いので知識として覚えておくと吉です。

さて、いい文字量になったと思うので今回はこのくらいで。

最後に

さんざん能書き垂れましたがあくまで主観に則ったものなので
グローバル変数たくさんのほうが使いまわせていいだろ！
とか
if文ネストさせたほうがええやろ！！！（何がいいのか知らんけど）
みたいな方はどうぞ己の信念を突き通したらいいと思います。

いろんな人が、いろんな書き方ができるから見ていて面白いし、
綺麗にかけたときに達成感が得られるものだと思うからですね。

どの言語にも関わらず、みんなで頑張ってコード道を極めましょうね！

以上１８歳のJKが書いた記事でした♡