コーディングが上達!実践的なコーディングのコツをご紹介します

実践的なコーディングのコツ

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
ぼく

コーディングスキルを上げたいな

コーディングのコツってないのか?

この疑問におこたえします。

プログラミングの業務で最初の基本となるのがコーディング業務ですよね。

コーディングは実務において初歩的なフェーズにありますが、シンプルがゆえにもっともスキルの差が生まれやすい業務でもあります。

コーディングを綺麗に素早くこなせる人は、他のコードを書かせても綺麗ですし、素早くコードを書き上げることができるでしょう。

ということで今回は、コーディングで意識するべきコツについてご紹介をしていこうと思います。

クラス名のルールを覚える

実践的なコーディングのコツ

一つ目に意識するべきコーディングのルールは、クラス名を明確にするということです。

といっても、クラス名をつける上で意識するべき点は2つだけです。

クラス名でCSSを連想できる様にする


例えば、以下の様なデザインがあったとします。

実践的なコーディングのコツ
http://www.webdirector-guidbook.com/

この場合のHTMLの構造は以下の様になります。

<div class="float-wrapper">
	<div class="column">
		<p>Webディレクターとは(以下略)</p>
	</div>
	<div class="column">
		<img src="" alt="">
	</div>
</div>

ここで重要なのが、class名を見ることでどのようなCSSをかけているか推測できるということです。

このケースでいうのであれば、class=”column”があることで、divタグが2列になるのだということがわかりますよね。

HTMLのクラス名をCSSの動作が推測できるような名前にすることで、コードも見やすくなりますね。

また、横2列にしたい状況になった時に、columnクラスを使うだけで2列にできるというメリットもあります。

クラスの書き方を統一する


二つ目に意識するべきなのは、クラス名の書き方を統一するということです。

たとえば、以下のクラス名を比べましょう。

<div class="main_wrapper"></div>
<div class="mainWrapper"></div>
<div class="main-wrapper"></div>


見てわかる通り、クラス名の内容は同じですが、クラス名の書き方が異なっています。

どのような書き方でも問題はありませんが、書き方を統一することだけは守りましょう。

私は、見やすさからアンダーバー(_)を使った書き方を多用します。

<div class="main_wrapper"></div>


もし、コーディングルールを決めかねていたら、アンダーバー方式を採用してみてください。

コードの量はできるだけ減らす

実践的なコーディングのコツ

続いてのルールはコードの量をできるだけ減らすということです。

たとえば、大規模の開発をする時によくあることが、CSSを使いまわすということです。

複数ページがある場合、他のページから要素とCSSをコピペをして量産するというやり方ですね。

もちろん、このやり方は合理的に大量のページを作る上ではとても役立ちます。

しかしながら、不必要なCSSが付随してしまうことで、不必要なCSSを打ち消すために別のCSSをつけて・・・といった負の連鎖を生み出します。

このような無駄なコードを増やすことは、読みづらくなる上にページの読み込み速度にも関わってくるので、控えた方が良いでしょう。

同様に、CSSのコードを記述する時は、できるだけショートハンドで記述すると良いでしょう。

たとえば、paddingをしていする時をかんがえてみましょう。

<!--ショートハンド-->
.sample {
    padding: 10px;
}

<!--ショートハンドなし-->
.sample {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
   padding-bottom: 10px;
}

この2つのpaddingプロパティは二つとも同じことを表しています。

しかし、paddingを一行で記述しているショートハンドの方がみやすい上に簡潔に表現できていますよね。

この様に、ショートハンドで記述できるプロパティはたくさんあるので、できるだけ使っていきましょう。

コメントを有効活用する

実践的なコーディングのコツ

最後にご紹介するのは、コメントを有効活用するということです。

コメント機能を使うことで、大量のコードが何を表しているのかを理解するのに役立ちます。

たとえば、javascriptの長いコードを突然渡された時に、Javascriptの記述内容を一瞬で理解することは至難の技です。

下のコードをよんで、理解することをできますか?

 $(function(){
    $("#pagetop").mouseover(function(){
        $(this).animate({
            bottom:"0px"
        },300);
    });
    $("#pagetop").mouseout(function(){
        $(this).animate({
           bottom:"-60px"
        },300);
    });
}); 

わりと簡単なコードをひっぱってきましたが、このコードは、ページトップへ移動するためのボタンに関係するコードです。

汎用的なコードとはいえ、初見だと理解が一瞬停止しますせんか?

しかし、一言コメントがあるだけで、理解しやすい内容に変わります。

たとえば、こんな感じです。

//ページトップに戻るボタン

 $(function(){
    $("#pagetop").mouseover(function(){
        $(this).animate({
            bottom:"0px"
        },300);
    });
    $("#pagetop").mouseout(function(){
        $(this).animate({
           bottom:"-60px"
        },300);
    });
}); 


最初のコメントがあるだけで、一瞬でJavascriptの記述の内容を把握できるので、ライフハックをすることができます。

もちろん、コメントを書かずに、クラス名やコードの構造だけでコードの内容が理解できることが一番良い方法です。

ですが、コードの内容だけで全てを伝えきるのは不可能なので、コメントを利用とよいでしょう。

コーディングを練習するためには

実践的なコーディングのコツ

それでは、最後にコーディングの練習の方法をおつたえしましょう。

コーディングを勉強するので一番大切なことは練習を何回も繰り返すことです。

コーディングを勉強する上で一番良い方法は、既存のWebサイトを模写して勉強する、写経という勉強法です。

写経するメリットや、オススメの写経先のページについても解説をしています。

もし、コーディングをしたい場合は、上記の記事をみて模写をしてみてください!

まとめ:コツさえ覚えればコーディングは余裕

いかがでしたか?


コーディングを綺麗にわかりやすく記述するコツは以下の3つでした。


コーディングのコツをおさえた上で写経の練習を繰り返すことで、コーディングのスキルをググッと伸ばすことができます。


コーディングをしっかりと記述することで、地力をつけられるので、おろそかにせずしっかりと取り組めるといいですね!

[affi id=2]