3月8日ブログトップ画像「コーディングを整える」

採用担当者もチェックしている!コーディング整理方法

どーもこんにちは、okamotoです。
インターンシップ2週目に突入いたしました。

世間では、2017年度新卒の就職活動が解禁になったとか。
そういう私も転職活動を始め、今度面接でポートフォリオを持っていくことになりました。

ところで、皆さんはポートフォリオサイトは作っていますか?

デザインやら、コーディングやら、色々悩みますよね。

「見た目のデザインをとにかく頑張って、とりあえずコーディングは、Webサイト上の見た目が良い感じであれば大丈夫」と思っている方・・・に、“待った!”です。

採用担当者は、ポートフォリオサイトのどこを見ているのでしょうか?

デザインでしょうか?実績でしょうか?
それらはもちろんのこと、コーディングの中身も見ているようなのです。

そこで今日は「コーディング整理」についてお話したいと思います。

キレイなコーディングをする人と一緒に働きたい

結論から言いますと、ほとんどの人はコーディングがキレイで整理された人と一緒に働きたいものです。またコーディングが整理されていると「きっちり仕事してくれそうな人だな」というイメージを持ってもらえることでしょう。

なので、採用担当者もそれをチェックするのは当然といえば当然なのです。

整理されたコーディングとは

そこで、コーディングの整理方法をご紹介しましょう。

1.インデントを整える
2.わかりやすいコメントをこまめに記載する
3.CSSプロパティの記述順序を揃える

1.インデントを整える

これは、言わずもがな!でしょうか。

まずこれが出来ていないと、タグがどこで閉じているかが分かり辛く、いざ自分以外の人がWebサイトを修正しようとした場合、困ってしまいますよね。

ヘタすると、自分でもわからなくなって、どうやって修正したらいいの!!!という状態に陥ってしまうかもしれません。

ですので、インデントは必ず整えるようにしましょう。

Dreamweaverを使ってコーディングをしている方は、便利な機能があるのでご紹介します。

Dreamweaverを開いて、「メニューバー>コマンド>ソースフォーマットの適用」で、Dreamweaverがインデントを整えてくれます。

Dreamweaver画面見本

私も実は今日知りましたが、本当に便利な機能ですね。

他に、Sublime Textなどフリーのテキストエディタソフトでも、インデントを分かりやすく表示してくれるものもあります。

2.わかりやすいコメントをこまめに記載する

HTMLもCSSも大まかなエリア分けをコメントして、誰もがわかるようにしましょう。

コメント例

3.CSSプロパティの記述順序を揃える

CSSプロパティの記述順序については、厳密に定義されたルールは存在しません。

しかし、会社ごとにルール化されていることが多く、記述に統一感がないと、やはりまた分かりにくいスタイルシートということになってしまいますよね。だいたいの記述ルールを決めておくと、業務の効率化にもなりますし、大変便利です。

例えば、下記のような順番で記述します。

displayやfloatなどの
視覚整形モデルに関するプロパティ

marginやpadding、borderなどの
ボックスモデルに関するプロパティ

background-colorなどの
背景に関するプロパティ

colorやfont-size、text-alignなどの
フォントに関するプロパティ

tableなどの
表に関するプロパティ

以上、コーディング整理の仕方についてでした。
誰にもにわかってもらえるような、キレイなコーディングを書きましよう!!

それではまた。

by okamoto

コメントを残す