【有能確実】webコーダーで必要なのは「未来」が見る力【運用主義】

こんにちは。もんしょー（@sima199407）です。

ある人

優秀なWebコーダーに必要な力って何だろう

という疑問があるかと思います。

以前に以下のようなツイートをしました。

一旦この話題で炎上しかけたので触れなかったけど、運用まで考えてくれる人はマジで少ない。

というより優秀な人じゃないと出来ないんだと思う。

既存のサイトを改修するとき
「コード、CSSの確認」→「どこまで影響するか」という作業が労力使うので、その部分をちゃんと出来る人は尊敬します。 https://t.co/X3DUXhZDoq

— もんしょー@時短リモートエンジニア (@sima199407) December 9, 2019

これについてもう少し詳しく解説していきます！

動画でも解説してます

結論から申しますと、次の人のことを考えるべしです。

「HTMLって簡単なんじゃないか」とか、「そこまで意識することもないかな」って思われる方結構いらっしゃると思うんですよね。

しかし、結構奥深いところなので今回、追及していこうと思います。

webコーダーって何する人？

ポイント1つ目、webコーダーって何する人？についてです。

コーダーはざっくりというと、基本的なデザインがあって、そのデザイン通りにHTML,CSSで組み立ててくれる人です。

JavaScriptも使うんですけどもWebサイトの表面のところをしっかり作ってくれる人のことをWebコーダーと言います。

裏のロジック、例えば、会員登録とか商品登録とかそういうところはやらない方です。

そこまで考えるようになると、フロントエンドエンジニアとか名前が変わってきます。

HTML,CSS勉強している人、駆け出しエンジニアの方々、最初に行きつく場所というのは、Webコーダーのところからかなと思います。

コーダーからエンジニアの転身もアリ

ここからキャリアチェンジして例えばPHPとかRubyとかで裏のロジックのところを作りたいなとか、もう少し動きとかを勉強したいとなったら、フロントエンドに行ったりとか、そうやってジョブチェンジ、キャリアチェンジをしていくのが多いと思います。

Webコーダーは、最初にやるから簡単なのか？と言われると、エンジニアとかに比べると比較的になりやすい、簡単かなとは思います。

しかし、Webコーダー内でも優劣はあります。レベルの高い人もいますし、そこそこ頑張ってる人もいるので、そこの話を次からしていこうと思います。

次の人のことを考えるとは？

ポイント2つ目、次の人のことを考えるとは？についてです。

次の人とは、その行動を次に改修する人のことです。

「改修するって自分だけじゃないの？」と思われるかもしれませんが、会社とか組織でやってるとか、その後Web制作でやった後に納品してしまうとか、そうなると、修正をする時に、自分じゃない可能性があるわけなんです。

その時に、その人が見て「このコード分かりやすい」「分かりにくい」というのは、当然あります。

「分かりやすいコード」をなるべく書いてあげる人が、「次の人のことを考える」「未来を見る力がある」人だと僕は思っています。

そこのレベルを上げることは、コーダーとしてのレベルも同時に上げられると僕は考えています。

今からできるステップアップ方法

ポイントの3つ目、今からできるステップアップ方法についてです。

どうしたらWebコーダーとしてレベルの高いものが作れるようになるか。意識することは色々あります。

色々なツールを使って検証してエラーを少なくするとかあるんですけども、僕がお伝えする簡単なところ2点だけ今回ご紹介します。

1.インデントをしっかりする

1つ目は、インデントをしっかりするということです。

インデントとは、文字下げっていう言葉です。

例えば、区分とか話題が変わったら1マス開けましょうとか言われるのがインデントです。
HTML,CSSを組む時もインデントが非常に大事になってきます。

このインデントによって、どこまでが枠組みなのかと分かりやすくセクション毎にパーツごとに分けると、後々見た時にこの人コード分かりやすいと思うことが結構あります。

これは自分で意識してやることもできるのですが、これ自動でもできます！

僕はvscodeというテキストエディタを使っているんですけども、テキストエディタで自動フォーマットという自動生成機能があります。

その機能を使えば自分でタグを作った時に自動生成してくれるので、非常に自分の作業の手間が省けます。是非是非、自動フォーマット使ってみてはいかかでしょうか。

2.Sassをつかう

2つ目、Sassで書きましょうです。

Sassって何なの？というと、CSSをより管理しやすく、より簡単に書けるようにしたものです。これは、主流にもなってきています。

Sassをなるべく使って欲しい理由は、長いコードになりにくいのでどこが影響範囲なのかとか、同じことを何度も書かなくていいとかそのようなメリットがあるので、お勧めしております！

僕も最近までSassを使ったことなくて、CSSでずっと書いていたのですが、Sassを使い始めてもう戻れないです。

もう、Sassがないと生きていけないという感じです。笑

こういった簡単に使えて便利になるものは、どんどん取りて入れていくってのは、エンジニアコーダーとかそういったIT関係に属している人は、是非やってみてはいかかでしょうか。

ここで言い訳させてください

ここまでWebコーダーってこういうものだとか、こうやればレベルアップできるというお話をしてきたんですけども、僕の本業はWebコーダーではありません。

主にバックエンドエンジニアなのでそんなにHTMLのコーディング技術があるというわけでもありません。

ただ、基本的に抑えるポイントは同じなので「こういった事した方がいいよ」とか「こういった意見もあるんだよ」と、色々意見があると思いますが1つの意見として今回取り入れて頂ければと考えています。

まとめ

1つ目、WebコーダーとはHTML,CSSなどでWebサイトの枠を作る人！
表面のところを作っていって、裏側はあんまり関与しない人です。

2つ目、自分以外が修正するということを忘れない！
自分が作ったんだけども、後々に違う人が修正することがあるので、なるべくわかりやすいものを作って行きましょう。

3つ目、インデントとSassを使ってみると開発効率が上がる！
なるべくわかりやすいパーツの作り方とか、タグをつけてあげるとか、なるべくCSSで管理しやすいフォーマットで用意しておくことは、やっておくポイントだと思います。

今回のまとめです。