【体験談】模写できるようになった初心者コーダーに「地獄のコーディング特訓」が必要だった話し

あなただったら、地獄のコーディング特訓を受けますか?断りますか?

 

突然だけど、コーダーになって日が浅い方に質問です。

 

「地獄の特訓受けますか?」

 

と、会社の上司に言われたら

受けますか?断りますか?

 

自分は実際に聞かれた経験があります。

 

あれは未経験から制作会社(職業:コーダー)に入社して、三ヶ月くらいが経った頃のこと。

当時、大規模案件の運用更新に携わっていた自分。

新規でサイトを構築することは無い環境。

でも、特集サイトなどをCSSを使ってコーディングすることがありました。

とりあえず形にはできる状態。でも、中身がひどかったのです。

 

ある日、上司に言われた言葉。

 

「お前さ。見た目が合ってればいいと思ってない?言っとくけど、全然ダメだから。お前のコーディングは、CSSを当てるために無理やりHTMLの文章構造変えちゃってるんだよね。このままじゃ、詰むよ?」

 

そんなことを言われたのが始まりでした。

 

上司の言う通り、当時の自分は

 

「あー!ここをdlタグにすると上手くいかない。」

 

と思ったら、平気でlistタグに変更してしまう人間だったのです。

 

とりあえずの見た目は問題なくても、中身がひどかった。

そして、仕事おわりに呼び出され、散々お説教された後に言われた言葉。

 

「地獄の特訓やりますか?」

 

その状況で答えは一つです。やるしかないですよね。

 

そうして、毎日鬼の特訓が始まったのです。

 

ルール

・土日も含めて毎日行う

・家で復習をする

・日報をつける

 

この3点です。

土日は課題のサイトをいただき、それを家でコーディング(模写)しました。

もちろん土日も日報を書きます。

 

日報には

・本日の作業、勉強内容

・何を学んだか

・何が足りなかったか

・今後、どうするか

 

毎日、21 – 24時くらいまで会社に残り、その後は家で復習。内容が多いため、毎日寝るのは朝の4時。

 

当時、毎日怒鳴られました。

 

「こんなことも知らないのか!」

「何回言わすんだよ」

「お前のせいで、空気が悪くなるからどっかいけ!」

 

結構、散々言われました。

 

ゴールデンウィーク前のこと

 

「お前にゴールデンウィークは無いよ。わかるよね?」

 

といわれ、課題サイトをたくさん貰ったときは複雑な心境でした。

周囲には

「良くやめなかったよね」

と、今でも言われます。

 

上司を恨んだこともありますが、もちろん感謝もしています。

あの地獄の特訓のおかげで、その後はLP制作、小規模サイト制作(20ページ)、中規模サイト制作(50ページ)の新規制作に携わり(1人でコーディング)、さらには500ページの大規模リニューアル案件でリードマークアップ エンジニアとして、各コーダーの進捗管理やGithubでのレビューやマージを行うなど、様々な経験をさせてもらうことができました。

 

本日言いたいことはただ一つ。

 

基礎を勉強してください。

 

とりあえず見た目が作れるようになったら半人前。

そこから先に行くためには、基礎を磨く必要があります。

 

とくに、コーディング歴が浅い人が陥る罠は、スタイルを当てるためにHTMLの構造を変更してしまうことではないでしょうか?

知識と経験がないため仕方ないことだと思います。

だけど、そのままではプロにはなれません。

いま必要なのは、複雑なレイアウトをコーディングすることではありません。

 

大事なのは基礎知識。

 

シンプルな形の部品を、手が勝手に動くレベルでコーディングできるようになりましょう。

 

デザインをみただけで、HTMLの構造が分かるように。

そしてHTMLの構造とともに、CSSの設計も同時に行えるようになれば1人前です。

 

大事なのは基礎知識。

 

「ブロック要素は、どうして縦並びになるんだろう?」

「インライン要素は、どうして横並びになるんだろう?」

「インライン要素とインラインブロック要素の違いってなんだろう?」

 

CSSは、唱えるだけでHTMLを装飾することができる魔法の呪文です。

プロならば、唱える魔法の原理を知りましょう。

 

現場では、Bootstrapだけでは装飾できない複雑なデザインは多いです。

そこで必要なのは、魔法の原理を覚えることです。

魔法の原理とは、HTMLCSSのルールのことです。

 

例えば、「vertical align が効かない」っていう経験ありませんか?

 

そんなとき、 とりあえずpositionやflexboxを使って回避してはいけません。

とりあえず回避しても、次の案件に活かせないのです。

「指定したのに効かない」

このとき、徹底的に現象を調べるのが重要だったのです。

とりあえずでできた指定はあなたの今後の役にはたちません。

大事なのは「なぜ効かない」の理由をしること。

 

今回の例題、「vertical align」のルールさえ知っておけば、効かせることも可能だし、違う方法を考えることもできます。

vertical align」のルールは、

・インライン要素にかける呪文

・例外:特別に、テーブル要素にかけてもいいよ

 

だから、ブロック要素にvertical align」をかけても意味がないのです。

というように、CSSの呪文にはルールがあります。

 

vertical align 効かない」時の対処法

・指定している要素をインライン要素にする

・display:table;で、テーブル要素にする

などすることで、効かせることが可能です。

(今はflexboxあるから、display:tableなんて使いませんけどね。)

 

そのルールを学び基礎知識を身につけた結果、カンプを見た時にCSSの設計が頭の中できるようになるのです。

 

とりあえず模写ができるようになったコーダーの方へ

 

基礎を鍛えて、レベルアップしませんか?

 

 

「地獄の特訓、受けますか?」

 

 

 

やばっ。今夜、上司が夢に出そう・・・