【コーディングは人のためならず】コーディング時に意識したいこと3選！

みなさん、こんにちは！

残業三昧の工場勤務から
未経験でIT業界に転職した
あんと申します😺

この記事を読んでいる方は、
WEB制作などコーディングの勉強を
始めたばかりの方が多いでしょう。

私がカリキュラムをこなしていた時は
理解してコードを書くことだけで
手いっぱいでしたが、

フィードバックをもらったり、
現場でコードを触ったりして感じたことが、

「ただコード書くだけじゃダメじゃん…」

そう感じた理由が
「コードは他の人も見る」
ということです！

そこで
勉強中の初心者からでも始められる
コーディング時の注意点について
まとめました！

1.なぜコードを見る人を意識するの？

私がコードを見る人を
意識するようになったきっかけは、
講師からフィードバックをもらった時です。

画面共有しながら話していると、
話がスムーズに進まないことに
気づき始めました。

その時気づいたことが
2つあります。

1つ目が

「見辛くてごめんなさい！！！」

ということ。

カリキュラムに沿ってやっているとはいえ、
見辛かっただろうなぁ、と
今になってすごく思います（笑）

2つ目に気づいたことは

「自分でも何書いているか
わかんねぇ…」

ということです。

フィードバックをもらっているものの
冒頭部分は
1ヶ月以上前に触ったところになるので、

そんな昔の自分の思考回路なんて
覚えていません！！

そんなことがあったので、
みなさんも他の人を意識しないと、
作業効率が下がってしまいます…。

しかしこのnoteの方法を
実践していただくことで、

作業の効率化だけでなく、
信頼や次の仕事の獲得へつながります！

そんなお得な方法を
これから解説していきます！↓

2.押さえておくべきポイント

冒頭でもお話しましたが、

「コードは他の人も見る」

ということが
重要になってきます！

他の人とは？

「コードは他の人も見る」

とお伝えましたが、
この「他の人」は
誰を思い浮かべますか？

思い浮かべてほしいのは、

・クライアント（お客様）
・他のコーダー
・未来の自分

の3人です！

なぜこの3人なのか
見ていきましょう！

①クライアント

クライアント = コーディングがわからない人
ですから、
わからない人でもわかるものを作るのは
至難の業です。

しかし、
「ここだけを見ればわかる」
というものを作れたら、

「あなたに頼んでよかった」
と次の仕事へつながります。

②他のコーダー

規模にもよりますが、
会社でもフリーランスでも
1つのプロジェクトを複数人で
行うことがほとんどです。

複数人で行わなかったとしても、
自分の書いたコードを
他のコーダーが手直しする可能性は
大いにあります。

つまり、

必ず誰かに見られます。

自分のコードを
他のコーダーが見て、

「わかりづらいコードだな…」
「この人と仕事したくない…」

なんて思われたら、
メンタルズタボロで
もうコードなんて書きたくなくなります…。

③未来の自分

なぜ未来の自分を意識するかというと
忘れるからです！

作業の続きを別の日にやると、
「どこまでやったっけ？」
「なんでこんなこと書いてあるんだ？」
と、パッと見てわかりません。

数年後になると、
余計にさっぱりわからないでしょう。

作業の効率化のために、
未来の自分を意識する必要があります！

第三者も見やすい👀コーディング方法3厳選！

「他の人」を意識しながら
コーディングするには
どうしたらいいのか？

お伝えしたいことは
たくさんありますが、

3つに厳選し
難易度を分けたので、
今のご自身のレベルに合わせて
参考にしてください！

コメントをつける（難易度☆）

コーディングの勉強をしていると、
ただコードを連ねてしまうことは
ないでしょうか？

（私はそうでした…）

そうすると、
振り返った時や第三者が見た時に
読み解かないと
何が書いてあるかわかりません。

読み解く時間って
結構かかるんですよね…。

突然ですが、例題です。
下記は簡易的なHTMLコードですが、
何について書いてあるか
わかりますか？

<div class="content1">
  <p>モモ</p>
</div>

<div class="content2">
  <p>かわいい</p>
</div>

「モモ」って果物？
「かわいい」って何が？

なんのこっちゃ、ですよね。

それではコメントを入れましょう。

<!-- 名前 -->
<div class="content1">
  <p>モモ</p>
</div>

<!-- 感想 -->
<div class="content2">
  <p>かわいい</p>
</div>

コメントアウト（Ctrl + /）することで、
パッと見て何が書いてあるのか
わかりやすくなりました。

短いコードでもわかり辛いものですから、
たくさんコメントを入れて
第三者にもわかりやすいものにしましょう！

命名規約に従う（難易度☆☆）

「命名規約」という単語を
初めて聞く方もいるかもしれませんが、
こういったものです↓

命名規約（命名規則）とは、
ファイルの名前や
HTMLのclass属性の名前の付け方など、
コーディングする時に用いる
それぞれの名前付けに規則性を持たせること。

言語化すると難しいですが、
別に難しいことはありません。

「名前を揃える」
それだけです。

ただ名前の揃え方にも
種類が5つあります。

名前のイメージとして
「キャメルケース」はラクダのこぶ、
「スネークケース」は蛇が地を這って、
「ケバブケース」は串刺しで焼いている
イメージです。

種類を知ったところで、
次に名前の揃え方の例を
見ていきましょう！

VScodeのサイドバーに並んでいる
ファイル名はスネークケース（赤枠）で、
HTML内のclass属性の名前は
ケバブケース（緑枠）で揃えています。

この種類の使い分けは、
案件になると
詳細設計書の中に

・クラス属性はケバブケース
・コントローラーはキャメルケースの複数形

という指定が書いてあるので
それに従いましょう。

個人から依頼された
ラフな案件だったとしても、

スネークケースと
ケバブケースが混ざっているだけで
CSSが反映されないミスになりかねません。

また、属性の名前だけでなく、
ファイル名等も名前を揃えるようにしましょう！

変数を使う（難易度☆☆☆）

こちらはバックエンドにも関わってくるので、
難易度は高めです。

変数を使うメリットは、
急な変更に簡単に対応できる点です！

・表示する社名の一部が変わった
・全体のイメージカラーが変更になった

ということもあるので、
変数を使っていると
修正し直し忘れを防止できます！

HTMLを例に説明します。

<div>
  <h1>あん</h1>
  <p>猫のように自由気ままに生きたい人</p>
</div>
<div>
  <h2>あんのXはこちら</h2>
  <a href="https://twitter.com/ammi_tech">https://twitter.com/ammi_tech</a>
</div>

変数なしで書くとこのようになり、
アカウント名やURLが変更になった場合
何ヶ所も変更しなくてはいけません。

これを変数を使ったものに変えます。

<?php
$name = "あん";
$url = "https://twitter.com/ammi_tech";
?>

<div>
  <h1><?php echo $name; ?></h1>
  <p>猫のように自由気ままに生きたい人</p>
</div>
<div>
  <h2><?php echo $name; ?>のXはこちら</h2>
  <a href="<?php echo $url; ?>"><?php echo $url; ?></a>
</div>

変数を使っておくと、
変えればいいのは
上の2～3行目の変数の中身だけで済みます。

3.さいごに

コーディングの注意点について
いかがだったでしょうか？

まずは「なぜ気にするのか」を考えて、
「どのように気をつけていくのか」
徐々に考えていきましょう！

難しい内容もあったかと思いますが、
まずはコメントをつけるところから
始めてみましょう！

コメントを書いたら、
その行で「Ctrl + /」を押すだけです！

この記事を読んで

・もっと注意点を知りたい
・やり方がわからない
・うまく反映されなくて困っている

という方は
公式LINEで相談を受け付けています！

それからプログラミングを
勉強している方は、
この合言葉を覚えておいてください。

「覚えるよりも理解する」

これを絶対に忘れないでください。

現場で働く人は
すべて覚えているのではなく、
ググりながら仕事をしています。

学校のような
暗記ゲーではないので、
もっと肩の力を抜いていきましょう！