Quantcast
Channel: 初心者タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 21093

ソースコードもKeepDistance

$
0
0

ソースコードも距離が大切

現在(2020/04/07)、猛威を振るっているウイルスがありますね…。

そんな僕は…
家にこもって人類を救っているヒーローの1人です!

とは言っても大学は休みだし世間は悪化していく一方で怖いですね。

そんな話はさておき、twitterでこんなハッシュタグを見つけました。
#KeepDistance
企業ロゴが距離を取ったデザインに変わっていたり文字同士の間に空白があって面白いですよねw

このタグを見たときにな〜んか思い当たるものがあるなと思いました。
ソースコードの距離といえばインデントじゃないですかね!!
インターン先でよく指摘されていて気をつけている部分です。今でもたまにやります…。
同じ指摘をされる子を減らすためにも書こうと思います。

ターゲット:インデントって何?とかちょっとプログラミング始めてみたくらいの初級者向けです。

インデントとは?

インデントとは字下げのことで行の最初に余白を入れることでソースコードを読みやすくします。
JavaScriptを例にしてみていきます。(コードの中身は分からなくて大丈夫です)

noIndent.js
constArray=[0,1,2,3]Array.foreach(num=>{if(num%2===0){console.log("even")}})
indent.js
constArray=[0,1,2,3]Array.foreach(num=>{if(num%2===0){console.log("even")}})

この二つのソースコードを見た時にどちらが読みやすいと思いますか?
大体の人が下のindent.jsかなと思います。

もう1つhtmlの例も出しておきます。

no-indent.html
<body><div><h1>hoge</h1></div><ul><li><p>fuga</p></li><li><p>fuga</p></li></ul></body>
indent.html
<body><div><h1>hoge</h1></div><ul><li><p>fuga</p></li><li><p>fuga</p></li></ul></body>

JavaScriptはどこからどこまでが{}()で囲まれているか、分かりやすくなっていると思います。
htmlでは<div></div><ul></ul>などのタグ開始から終了までの中にどんな要素が入っているかがわかりやすくなると思います。

ほんの10行くらいだと少ししか効果が分かりにくいですが100,200行となった時、この効果が分かります!
また、個人でなく複数人で開発をしている時に他の人が読みやすくなるという効果もあります。
あと個人的にインデントがある方が映画とかドラマで見るようなプログラミングぽくてかっこよくないですか!

これこそ、ソースコードのKeepDistance!

インデントのルール

インデントにはいくつかのルールがあります。
ルールがありますが個人の好みや言語によって違いがあるので触り程度の説明をしていきます。

余白に使うのはタブ or 半角スペース

これはどちらを使うのが正解ということはありません。結構好みの部分が大きいかなと思います。
僕はこだわりないですw

何個入れるか

最近?の主流は2個派と4個派のどちらかだと思います。
試しにJavaScriptで半角スペースの2個と4個の違いを見てみましょう。

indentTwo.js
constArray=[0,1,2,3]Array.foreach(num=>{if(num%2===0){console.log("even")}})
indentFour.js
constArray=[0,1,2,3]Array.foreach(num=>{if(num%2===0){console.log("even")}})

う〜ん、好みが分かれる…ちなみに僕は2個派です。

インデントは自動で付ける

インデントを手動で1行ずつやろうとするととても大変ですしどこかでミスします!(よくしてました)
ミスをすると正常に動かなくなるような言語もあるので出来るだけ自動でつけましょう。
自動での付け方は使用しているエディター(vsCode, IntelliJなどプログラミングを書くためのツール)によって異なるので「使用しているエディター インデント」とかで調べてみましょう!

チームに合わせる

ぶっちゃけこれが一番大事というかこれだけ守れば問題ないです!!
チームで開発をする時はチーム内で決まっているルールを聞きエディターの設定をそれに合わせて自動で付けるだけ!
あとは何も心配ないです!
チーム内で統一をしないと非常に読みにくいコードになってしまうためインデントに限らずできるだけ書き方を合わせる必要があります!

最後に

インデントはソースコードを読むチームメンバーのためだけでなく後から読み返した自分のためにも付けた方がいいです。
インデントが付いているだけで綺麗で読みやすいコードになるわけではないですが第一歩として意識して書いてみましょう!

KeepDistanceって何かと何かの間の距離を保つって事だよなーってのに気づいたのが7割くらい書いてからでしたw
それならif(){なのかif () {とかもう少しネタに走るべきでしたかね。←これも書きましょう

外に出れない日が続きますが1日でも早い収束を願っています。


Viewing all articles
Browse latest Browse all 21093

Trending Articles